:root {
--bg: #0c0c0e;
--bg-alt: #19191c;
--surface: #222225;
--ink: #f5f5f7;
--ink-soft: #d1d1d6;
--ink-muted: #9a9aa0;
--line: rgba(255,255,255,0.14);
--line-soft: rgba(255,255,255,0.08);
--red: #d91e36;
--red-dark: #b5162a;
--red-tint: #fdecef;
--yellow: #ffc72c;
--yellow-tint: #fff6dd;
--blue: #0071e3;
--blue-tint: #e7f2fe;
--green: #1e8e5a;
--green-tint: #e8f6ee;
--gold: #c9a227;
--gold-light: #e8cb6a;
--near-black: #131316;
--charcoal: #1c1c20;
--charcoal-soft: #26262b;
--violet: #5b57d6;
--violet-light: #8b85f0;
--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Roboto Mono", monospace;
--radius-s: 12px;
--radius-m: 18px;
--radius-l: 28px;
--radius-xl: 36px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.04);
--shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
--shadow-lg: 0 20px 50px rgba(0,0,0,0.10), 0 4px 14px rgba(0,0,0,0.06);
--shadow-hover: 0 24px 60px rgba(0,0,0,0.14), 0 6px 18px rgba(0,0,0,0.08);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--container: 1200px;
--glass-bg: rgba(255,255,255,0.055);
--glass-bg-strong: rgba(255,255,255,0.09);
--glass-bg-dark: rgba(0,0,0,0.5);
--glass-border: rgba(255,255,255,0.12);
--glass-border-dark: rgba(255,255,255,0.08);
--glass-blur: blur(24px) saturate(190%);
--glass-shadow: 0 12px 36px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.2);
--glass-shadow-dark: 0 12px 36px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
--border-hover: rgba(255,255,255,0.22);
--ease-press: cubic-bezier(0.4, 0, 0.6, 1);
--shadow-glow-gold: 0 20px 50px rgba(201,162,39,0.18), 0 4px 14px rgba(0,0,0,0.3);
--shadow-glow-red: 0 20px 50px rgba(217,30,54,0.22), 0 4px 14px rgba(0,0,0,0.3);
--shadow-glow-blue: 0 20px 50px rgba(74,143,201,0.22), 0 4px 14px rgba(0,0,0,0.3);
--shadow-glow-green: 0 20px 50px rgba(58,168,107,0.22), 0 4px 14px rgba(0,0,0,0.3);
--shadow-float: 0 30px 70px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.3);
--accent-gradient: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--red) 130%);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--atmo-a-color: rgba(201,162,39,0.09);
--atmo-a-pos: 15% -12%;
--atmo-b-color: rgba(0,113,227,0.055);
--atmo-b-pos: 90% 65%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body.page-home {
--atmo-a-color: rgba(91,87,214,0.15);
--atmo-a-pos: 24% -16%;
--atmo-b-color: rgba(0,113,227,0.09);
--atmo-b-pos: 86% 18%;
}
body.page-marketplace {
--atmo-a-color: rgba(139,133,240,0.1);
--atmo-a-pos: 92% -8%;
--atmo-b-color: rgba(91,87,214,0.085);
--atmo-b-pos: 4% 75%;
}
body.page-showcase {
--atmo-a-color: rgba(139,133,240,0.13);
--atmo-a-pos: 50% -18%;
--atmo-b-color: rgba(0,0,0,0.4);
--atmo-b-pos: 14% 94%;
}
body.page-community {
--atmo-a-color: rgba(255,199,44,0.09);
--atmo-a-pos: 14% -10%;
--atmo-b-color: rgba(217,30,54,0.07);
--atmo-b-pos: 90% 84%;
}
body.page-news {
--atmo-a-color: rgba(0,113,227,0.05);
--atmo-a-pos: 80% -12%;
--atmo-b-color: rgba(255,255,255,0.035);
--atmo-b-pos: 10% 85%;
}
body.page-intelligence {
--atmo-a-color: rgba(91,87,214,0.09);
--atmo-a-pos: 78% -14%;
--atmo-b-color: rgba(0,113,227,0.07);
--atmo-b-pos: 12% 86%;
}
body {
margin: 0;
/* Defensive backstop against horizontal scroll from small sub-pixel/padding
overflows. `clip` (unlike hidden/auto) does NOT create a scroll container,
so the position:sticky nav keeps sticking to the viewport. Structural
overflows are fixed at their source; this only catches minor residue. */
overflow-x: clip;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-image:
radial-gradient(1200px 760px at var(--atmo-a-pos), var(--atmo-a-color), transparent 62%),
radial-gradient(1000px 680px at var(--atmo-b-pos), var(--atmo-b-color), transparent 58%),
url('data:image/svg+xml;utf8,'),
linear-gradient(180deg, #131316 0%, var(--bg) 420px);
background-size: 100% 100%, 100% 100%, 220px 220px, 100% 100%;
background-position: 0 0, 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
background-attachment: fixed, fixed, fixed, fixed;
background-color: var(--bg);
animation: atmo-drift 100s var(--ease) infinite;
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
line-height: 1.5;
}
@keyframes atmo-drift {
0% { background-position: 0% 0%, 0% 0%, 0 0, 0 0; }
50% { background-position: 2.5% 3%, -3% -2%, 0 0, 0 0; }
100% { background-position: 0% 0%, 0% 0%, 0 0, 0 0; }
}
/* This background animation runs continuously on every page for as
long as the tab is open — harmless motion for most people, but it's
exactly the kind of persistent ambient movement prefers-reduced-motion
exists for, and turning it off also removes an indefinite repaint
loop for anyone who doesn't need it. */
@media (prefers-reduced-motion: reduce) {
body { animation: none; }
}
@media (max-width: 700px) {
body {
background-attachment: scroll;
background-image:
radial-gradient(760px 520px at var(--atmo-a-pos), var(--atmo-a-color), transparent 62%),
radial-gradient(620px 460px at var(--atmo-b-pos), var(--atmo-b-color), transparent 58%),
url('data:image/svg+xml;utf8,'),
linear-gradient(180deg, #131316 0%, var(--bg) 420px);
background-size: 100% 100%, 100% 100%, 220px 220px, 100% 100%;
background-position: 0 0, 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
}
}
.glass-sheen { position: relative; overflow: hidden; }
.glass-sheen::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0) 45%);
pointer-events: none;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 480px) { .wrap { padding: 0 18px; } }
/* Narrower single-column form pages (sell.html) read better with a
tighter measure than the site's default container width. */
.wrap-form { max-width: 820px; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.03em; font-weight: 700; font-family: var(--font-display); line-height: 1.15; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--red);
}
.eyebrow::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
display: inline-block;
}
.section-title { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -0.035em; color: var(--ink); }
.section-sub { color: var(--ink-muted); font-size: 19px; max-width: 560px; margin-top: 12px; line-height: 1.5; }
/* Homepage section headings sit between the full hero scale above
and .news-section-heading's 22px elsewhere — a real class instead
of a hand-typed inline override on both occurrences (no visual
change). */
.section-title-md { font-size: 30px; margin-top: 8px; }
.text-gradient {
background: var(--accent-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold-light);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
border-radius: 980px;
font-size: 15px;
font-weight: 600;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), opacity .18s var(--ease);
white-space: nowrap;
}
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(120deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 35%, rgba(255,255,255,0) 55%);
pointer-events: none;
}
.btn-primary {
border-radius: 10px;
background: linear-gradient(180deg, rgba(233,58,80,0.96), rgba(217,30,54,0.96));
color: #fff;
box-shadow: 0 8px 22px rgba(217,30,54,0.32), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.18);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-red), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -3px 0 rgba(0,0,0,0.18); }
.btn-secondary {
background: var(--glass-bg);
color: var(--ink);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.btn-secondary:hover { transform: translateY(-1px); background: var(--glass-bg-strong); box-shadow: 0 10px 26px rgba(31,38,50,0.14), inset 0 1px 0 rgba(255,255,255,0.8); }
.btn-dark {
background: var(--glass-bg-dark);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
color: #fff;
border: 1px solid var(--glass-border-dark);
box-shadow: var(--glass-shadow-dark);
}
.btn-dark:hover { transform: translateY(-1px); background: rgba(20,20,24,0.55); }
.btn-ghost { background: transparent; color: var(--ink); padding: 8px 4px; }
.btn-ghost::before { display: none; }
.btn-ghost:hover { color: var(--red); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Loading state — a brief spinner while an action "processes," so
submits feel like they're doing real work instead of resolving
instantly. Text/icon fade out (not display:none, so the button
doesn't change size) and a ring spinner fades in centered. */
.btn.is-loading { color: transparent !important; pointer-events: none; opacity: 1; }
.btn.is-loading::after {
content: "";
position: absolute;
z-index: 1;
width: 16px; height: 16px;
top: 50%; left: 50%;
margin: -8px 0 0 -8px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: #fff;
animation: btnSpin .65s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after {
border-color: rgba(255,255,255,0.18);
border-top-color: var(--ink);
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.btn.is-loading::after { animation-duration: 1.1s; }
}
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10,10,12,0.6);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-bottom: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 24px rgba(0,0,0,0.25);
}
.nav-inner {
max-width: var(--container);
margin: 0 auto;
padding: 18px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
@media (max-width: 480px) { .nav-inner { padding: 14px 18px; } }
.logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--ink);
transition: opacity .2s var(--ease);
}
.logo:hover { opacity: 0.82; }
.logo-mark {
/* New premium metallic-gold brick mark (vector, scales crisply). */
width: 32px; height: 30px;
background: url("../img/logo/brick-mark.svg") center / contain no-repeat;
filter: drop-shadow(0 2px 5px rgba(201,162,39,0.28));
}
.nav-links {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 22px;
font-size: 13.5px;
font-weight: 500;
color: var(--ink-soft);
}
.nav-links a {
position: relative;
padding: 4px 0;
white-space: nowrap; /* keep "Market Intelligence" / "My Account" on one line */
transition: color .2s var(--ease);
}
.nav-links a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -3px;
height: 2px;
border-radius: 2px;
background: var(--accent-gradient, var(--gold-light));
transform: scaleX(0);
transform-origin: left;
transition: transform .25s var(--ease-out, var(--ease));
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
/* #navMarketplaceLink's .active is toggled dynamically by
initMarketplaceActiveNavState() (js/main.js) while scrolling the
homepage, on top of the same hover/active treatment every other
nav item already gets above. */
.nav-cta { display: flex; align-items: center; gap: 12px; }
/* ---------- Marketplace: single homepage destination ----------
The Marketplace lives directly under the Hero at #marketplace —
never a separate page. scroll-margin-top keeps the sticky nav from
covering the section top on any anchor arrival (native fragment
nav, scrollIntoView, or the browser's own initial-load jump), on
both desktop and mobile; the value matches the sticky-nav offset
already used elsewhere on the site (.summary-sticky/.sa-side top).
safe-area-inset-top covers notched/dynamic-island devices. */
#marketplace {
scroll-margin-top: calc(90px + env(safe-area-inset-top, 0px));
}
@media (max-width: 480px) {
#marketplace { scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px)); }
}
/* Arrival animation: played once by playMarketplaceArrivalAnimation()
(js/main.js) whenever a visitor is delivered to the Marketplace via
nav — title fades up ~8px, and the page-header's existing permanent
accent underline (.page-header::after, defined further down this
file) gets a brief glow pulse rather than being replaced by a
second competing element. Listing cards already fade in on their
own via the sitewide .reveal/IntersectionObserver system (they
carry class="card reveal"), so nothing extra is needed here to
cover those. The global prefers-reduced-motion rule further down
this file (animation-duration: 0.001ms !important) neutralizes both
animations below automatically — no separate guard needed here. */
#marketplace.marketplace-arrive .page-header h2 {
animation: marketplaceTitleArrive 0.5s var(--ease-out, var(--ease));
}
#marketplace.marketplace-arrive .page-header::after {
transform-origin: left;
animation: marketplaceUnderlineGlow 0.9s var(--ease-out, var(--ease));
}
@keyframes marketplaceTitleArrive {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes marketplaceUnderlineGlow {
0% { box-shadow: 0 0 0 rgba(201,162,39,0); transform: scaleX(0.4); }
35% { box-shadow: 0 0 16px 2px rgba(201,162,39,0.55); transform: scaleX(1); }
100% { box-shadow: 0 0 0 rgba(201,162,39,0); transform: scaleX(1); }
}
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 11px;
margin: -11px;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
margin: 4px 0;
border-radius: 2px;
transition: transform .3s var(--ease), opacity .2s var(--ease);
transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.nav-toggle span { transition: none; }
}
@media (max-width: 980px) {
.nav-links { position: fixed; top: 62px; left: 0; right: 0; background: rgba(12,12,14,0.92); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); flex-direction: column; align-items: flex-start; padding: 20px 32px; gap: 18px; border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .28s var(--ease); font-size: 15px; }
.nav-links.open { transform: translateY(0); }
/* Comfortable 44px touch targets for the vertical mobile menu links [a11y: tap target]. */
.nav-links a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; }
/* Lock the page behind the open mobile menu; auto-restores the moment .open is
removed by ANY path (toggle, Escape, outside-click, navigation). [nav #13,#14] */
body:has(.nav-links.open) { overflow: hidden; }
.nav-toggle { display: block; }
.nav-cta .btn-secondary { display: none; }
/* #1 — remove "Sell an item" from the mobile header (it moves to the hamburger
menu and the Marketplace page CTA). Mobile top row = logo + hamburger only. */
.nav-cta .btn-primary { display: none; }
.nav-links .nav-menu-cta { display: block; color: var(--gold-light); font-weight: 650; }
/* #2 — tighten the top row + let it flow into the sub-nav as one component. */
.nav-inner { padding-top: 11px; padding-bottom: 11px; padding-top: calc(11px + env(safe-area-inset-top, 0px)); }
.nav { border-bottom: 0; }
}
/* Links that belong only in the collapsed mobile menu (injected by initNav),
hidden in the desktop horizontal nav. */
.nav-menu-only { display: none; }
/* Small phones: the top-bar icon buttons (search / messages / notifications)
plus the CTA buttons no longer fit beside the logo + hamburger and caused
horizontal overflow at ≤375px on every page. Drop the icons from the bar
(Messages moves into the hamburger menu via .nav-menu-only) and keep only
"Sell an item" + the menu toggle. */
@media (max-width: 600px) {
.nav-cta { gap: 8px; }
.nav-cta .nav-icon-wrap,
.nav-cta > a.nav-icon-btn { display: none; }
.nav-cta .btn-primary { padding-left: 13px; padding-right: 13px; }
.nav-links .nav-menu-only { display: block; }
}
/* Narrowest phones (≈320–400px): even the single "Sell an item" CTA plus the
logo and hamburger overflow, so drop the top-bar CTA too — it's injected
into the hamburger menu (.nav-menu-cta) so it stays reachable. */
.nav-menu-cta { display: none; }
@media (max-width: 400px) {
.nav-cta .btn-primary { display: none; }
.nav-links .nav-menu-cta { display: block; color: var(--gold-light); font-weight: 650; }
}
.hero {
position: relative;
overflow: hidden;
padding: 128px 0 88px;
background:
radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(0,0,0,0.32) 100%),
radial-gradient(820px 580px at 20% 42%, rgba(232,203,106,0.055), transparent 62%),
radial-gradient(760px 560px at 84% 40%, rgba(0,113,227,0.07), transparent 60%),
radial-gradient(1000px 640px at var(--atmo-a-pos), var(--atmo-a-color), transparent 62%),
radial-gradient(820px 560px at var(--atmo-b-pos), var(--atmo-b-color), transparent 58%),
linear-gradient(175deg, #131316 0%, #0e0e10 55%, #131316 100%),
var(--near-black);
color: #fff;
isolation: isolate;
}
.hero::before {
content: "";
position: absolute;
top: -220px; left: -120px;
width: 640px; height: 640px;
background: radial-gradient(circle, rgba(217,30,54,0.16), transparent 68%);
z-index: -1;
pointer-events: none;
animation: heroEmberDrift 16s ease-in-out infinite;
}
/* Signature moment: the ember glow behind the hero breathes and drifts
almost imperceptibly — the one bit of motion that's unique to
BrickCapital rather than reused elsewhere on the site. */
@keyframes heroEmberDrift {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
50% { transform: translate(26px, 16px) scale(1.07); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; }
}
.hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,162,39,0.4), transparent);
}
.hero-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 48px;
align-items: center;
}
/* #4 — the desktop hero uses 128px top padding; on phones that (plus the sticky
header + sub-nav) leaves a large dead area above the headline. Pull it up while
keeping premium breathing room. Desktop spacing is untouched. */
@media (max-width: 768px) {
.hero { padding: 40px 0 52px; }
}
@media (max-width: 480px) {
.hero { padding: 32px 0 44px; }
}
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; text-align: center; }
/* let the single-column grid track size to the viewport, not to the
card scroller's content width (prevents a mobile headline blowout) */
.hero-inner, .hero-text, .hero-visual { min-width: 0; }
.hero-visual { margin: 0 auto; }
}
.hero-text { position: relative; min-width: 0; text-align: left; }
@media (max-width: 900px) { .hero-text { text-align: center; } }
/* Soft ambient light behind the headline — barely-there warm bloom that
makes the type feel lit rather than flat. */
.hero-text::before {
content: "";
position: absolute;
left: -6%; top: -14%;
width: 560px; height: 380px;
max-width: 120%;
background: radial-gradient(58% 58% at 32% 42%, rgba(232,203,106,0.10), transparent 72%);
filter: blur(8px);
z-index: -1;
pointer-events: none;
}
@media (max-width: 900px) { .hero-text::before { left: 50%; transform: translateX(-50%); } }
.hero-visual { position: relative; }
/* Radial gradient behind the four-card cluster so the group reads as one
cohesive floating element rather than four separate boxes. */
.hero-visual::before {
content: "";
position: absolute;
inset: -14% -10%;
z-index: 0;
pointer-events: none;
background: radial-gradient(64% 64% at 58% 42%, rgba(255,255,255,0.05), transparent 72%);
}
.hero-visual > * { position: relative; z-index: 1; }
/* ---------- Hero depth layers (dot texture · vignette · drifting orbs) ---------- */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1.4px);
background-size: 26px 26px;
-webkit-mask: radial-gradient(120% 92% at 50% 38%, #000 26%, transparent 80%);
mask: radial-gradient(120% 92% at 50% 38%, #000 26%, transparent 80%);
opacity: 0.55;
}
.hero-bg::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(125% 105% at 50% 40%, transparent 52%, rgba(0,0,0,0.5) 100%);
}
.hero-orb { position: absolute; border-radius: 46% 54% 52% 48%; filter: blur(52px); opacity: 0.5; will-change: transform; }
.hero-orb-1 { width: 340px; height: 340px; right: 4%; top: 6%; background: radial-gradient(circle, rgba(232,203,106,0.16), transparent 70%); animation: heroOrbDrift 24s ease-in-out infinite; }
.hero-orb-2 { width: 300px; height: 300px; right: 32%; bottom: -4%; border-radius: 28px; background: radial-gradient(circle, rgba(0,113,227,0.13), transparent 70%); animation: heroOrbDrift 30s ease-in-out infinite reverse; }
.hero-orb-3 { width: 260px; height: 260px; left: 3%; top: 34%; background: radial-gradient(circle, rgba(217,30,54,0.10), transparent 70%); animation: heroOrbDrift 27s ease-in-out infinite; }
@keyframes heroOrbDrift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(22px, -26px) scale(1.05); }
66% { transform: translate(-18px, 20px) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) { .hero-orb { animation: none; } }
/* ---------- Hero Market Intelligence cluster ----------
Replaces the old marketplace listing collage on the right side of
the homepage hero. Four compact "bubble" cards, each pulling a
real computed number from the Market Intelligence engine
(getScoredMarketSets / computeMarketSnapshot), so this reads as a
live intelligence readout rather than decoration. */
.hero-intel-grid {
display: grid;
grid-template-columns: 1.04fr 0.96fr;
gap: 14px;
}
.hero-intel-card {
position: relative;
display: block;
overflow: hidden;
padding: 22px 20px 20px;
border-radius: 20px;
/* darker glassmorphism + a subtle vertical gradient inside every card */
background:
linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012) 52%, rgba(255,255,255,0.004)),
var(--hi-glow, none),
linear-gradient(180deg, rgba(21,21,25,0.72), rgba(13,13,16,0.80));
/* thin, neutral border — no strong colored edges */
border: 1px solid rgba(255,255,255,0.075);
backdrop-filter: var(--glass-blur, blur(16px));
-webkit-backdrop-filter: var(--glass-blur, blur(16px));
/* soft, layered, diffused shadows + a faint inner top highlight = floating premium glass */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
inset 0 0 0 1px rgba(255,255,255,0.02),
0 1px 2px rgba(0,0,0,0.24),
0 10px 22px -12px rgba(0,0,0,0.5),
0 26px 52px -24px rgba(0,0,0,0.6);
transition: transform .38s var(--ease-out, var(--ease)), box-shadow .38s var(--ease-out, var(--ease)), border-color .38s var(--ease-out, var(--ease));
color: #fff;
opacity: 0;
/* load-in uses the independent `translate` property so `transform` stays
free for a smooth hover lift (no animation/transition conflict) */
animation: heroIntelIn .55s var(--ease-out, ease) both;
animation-delay: calc(var(--stagger-i, 0) * 85ms);
}
/* soft top highlight to simulate the lit edge of premium glass */
.hero-intel-card::before {
content: "";
position: absolute;
top: 0; left: 14px; right: 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
opacity: 0.7;
}
/* hover-only glass brighten overlay */
.hero-intel-card::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent 42%);
opacity: 0;
transition: opacity .38s var(--ease-out, var(--ease));
pointer-events: none;
}
/* glows reduced ~50% vs the previous treatment */
.hero-intel-mover { --hi-accent: var(--green); --hi-glow: radial-gradient(140% 90% at 100% 0%, rgba(30,142,90,0.08), transparent 55%); --hi-shadow: rgba(30,142,90,0.18); }
.hero-intel-retire { --hi-accent: var(--red); --hi-glow: radial-gradient(140% 90% at 100% 0%, rgba(217,30,54,0.08), transparent 55%); --hi-shadow: rgba(217,30,54,0.18); }
.hero-intel-demand { --hi-accent: var(--blue); --hi-glow: radial-gradient(140% 90% at 100% 0%, rgba(0,113,227,0.085), transparent 55%); --hi-shadow: rgba(0,113,227,0.18); }
.hero-intel-index { --hi-accent: var(--gold-light); --hi-glow: radial-gradient(140% 90% at 100% 0%, rgba(232,203,106,0.08), transparent 55%); --hi-shadow: rgba(201,162,39,0.2); }
@keyframes heroIntelIn {
from { opacity: 0; translate: 0 16px; }
to { opacity: 1; translate: 0 0; }
}
a.hero-intel-card { text-decoration: none; }
.hero-intel-card { text-align: left; }
.hero-intel-card:hover {
transform: translateY(-6px) scale(1.02);
border-color: rgba(255,255,255,0.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.09),
0 2px 4px rgba(0,0,0,0.26),
0 18px 34px -14px rgba(0,0,0,0.55),
0 34px 60px -26px var(--hi-shadow, rgba(0,0,0,0.5));
}
.hero-intel-card:hover::after { opacity: 1; }
/* Top Market Mover reads first — slightly larger than its neighbours */
.hero-intel-mover { padding: 26px 22px 24px; }
.hero-intel-mover .hero-intel-title { font-size: 19px; }
.hero-intel-mover .mi-sparkline { height: 50px; }
/* subtle irregular vertical stagger so the cluster doesn't feel locked to a grid */
.hero-intel-grid .hero-intel-card:nth-child(1) { margin-top: 0; }
.hero-intel-grid .hero-intel-card:nth-child(2) { margin-top: 34px; }
.hero-intel-grid .hero-intel-card:nth-child(3) { margin-top: -10px; }
.hero-intel-grid .hero-intel-card:nth-child(4) { margin-top: 22px; }
.hero-intel-cta {
display: block;
margin-top: 10px;
font-size: 11.5px;
font-weight: 650;
color: var(--hi-accent, var(--gold-light));
opacity: 0;
transform: translateY(4px);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.hero-intel-card:hover .hero-intel-cta { opacity: 1; transform: translateY(0); }
.hero-intel-live {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
font-family: var(--font-mono, "SF Mono", Menlo, monospace);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--green);
}
.hero-intel-live-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
animation: heroLivePulse 1.8s infinite;
}
@keyframes heroLivePulse {
0% { box-shadow: 0 0 0 0 rgba(47,107,58,0.55); }
70% { box-shadow: 0 0 0 6px rgba(47,107,58,0); }
100% { box-shadow: 0 0 0 0 rgba(47,107,58,0); }
}
.hero-intel-updated { font-size: 10.5px; color: rgba(255,255,255,0.55); margin-top: 8px; }
.hero-intel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.hero-intel-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 8px;
flex-shrink: 0;
}
.hero-intel-icon svg { width: 14px; height: 14px; }
.hero-intel-label {
font-family: var(--font-mono, "SF Mono", Menlo, monospace);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.55);
}
.hero-intel-title {
font-size: 16px;
font-weight: 700;
color: #fff;
margin-bottom: 13px;
line-height: 1.28;
letter-spacing: -0.01em;
}
.hero-intel-title small {
display: block;
font-size: 10.5px;
font-weight: 500;
color: rgba(255,255,255,0.48);
text-transform: none;
letter-spacing: 0;
margin-top: 2px;
}
.hero-intel-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-intel-status { font-size: 12.5px; color: rgba(255,255,255,0.62); line-height: 1.45; }
.hero-intel-tracked { font-size: 11px; color: rgba(255,255,255,0.56); }
.hero-intel-demand-bar {
height: 6px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
overflow: hidden;
margin: 2px 0 8px;
}
.hero-intel-demand-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--blue), var(--blue-tint, var(--blue)));
}
.hero-intel-demand-label { font-size: 12px; color: rgba(255,255,255,0.6); }
.hero-intel-card .mi-sparkline { display: block; width: 100%; height: 40px; margin-top: 13px; }
.hero-intel-card .mi-sparkline polyline {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: heroSparklineDraw 1.1s var(--ease-out, ease) both;
animation-delay: calc(var(--stagger-i, 0) * 85ms + 0.3s);
transition: filter .38s var(--ease-out, var(--ease)), stroke-width .38s var(--ease-out, var(--ease));
}
/* hover intensifies the graph line: a soft accent glow + a touch heavier stroke */
.hero-intel-card:hover .mi-sparkline polyline { filter: drop-shadow(0 0 5px currentColor); stroke-width: 2.7; }
.hero-intel-card .mi-sparkline circle {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: heroSparklineDot .4s ease both;
animation-delay: calc(var(--stagger-i, 0) * 90ms + 1.35s);
}
@keyframes heroSparklineDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes heroSparklineDot { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.hero-intel-card .mi-sparkline polyline { animation: none; stroke-dashoffset: 0; }
.hero-intel-card .mi-sparkline circle { animation: none; opacity: 1; }
}
.hero-intel-mover .hero-intel-icon { background: rgba(30,142,90,0.18); color: var(--green); }
.hero-intel-retire .hero-intel-icon { background: rgba(217,30,54,0.16); color: var(--red); }
.hero-intel-demand .hero-intel-icon { background: rgba(0,113,227,0.18); color: var(--blue); }
.hero-intel-index .hero-intel-icon { background: rgba(232,203,106,0.18); color: var(--gold-light); }
@media (max-width: 900px) { .hero-intel-grid { max-width: 460px; margin: 0 auto; } }
@media (max-width: 560px) {
/* clean single-column stack on phones — no fragile horizontal scroller */
.hero-visual { width: 100%; margin: 0; }
.hero-intel-grid {
grid-template-columns: 1fr;
width: 100%;
max-width: 100%;
margin: 0;
gap: 12px;
}
.hero-intel-card { min-width: 0; }
.hero-intel-mover { padding: 22px 20px 20px; }
.hero-intel-mover .hero-intel-title { font-size: 18px; }
.hero-intel-grid .hero-intel-card:nth-child(1),
.hero-intel-grid .hero-intel-card:nth-child(2),
.hero-intel-grid .hero-intel-card:nth-child(3),
.hero-intel-grid .hero-intel-card:nth-child(4) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-intel-card { animation: none; opacity: 1; translate: 0 0; }
.hero-intel-live-dot { animation: none; }
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono, "SF Mono", Menlo, monospace);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--gold-light);
background: rgba(232,203,106,0.08);
border: 1px solid rgba(232,203,106,0.35);
padding: 6px 13px 6px 11px;
border-radius: 999px;
}
.hero-tag::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold-light);
box-shadow: 0 0 8px rgba(232,203,106,0.8);
}
.hero h1 {
font-size: clamp(44px, 5.8vw, 78px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.038em;
margin: 22px 0 0;
max-width: 640px;
color: #fff;
text-wrap: balance;
}
@media (max-width: 900px) { .hero h1 { max-width: none; margin-left: auto; margin-right: auto; } }
.hero h1 em {
font-style: normal;
/* refined cream-to-gold gradient rather than a flat gold */
background: linear-gradient(118deg, #f6eccf 0%, var(--gold-light) 46%, var(--gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--gold-light);
}
.hero .accent { color: var(--red); }
.hero p {
font-size: 18px;
font-weight: 400;
color: rgba(255,255,255,0.6);
max-width: 480px;
margin: 24px 0 0;
line-height: 1.65;
letter-spacing: -0.005em;
}
@media (max-width: 900px) { .hero p { margin: 22px auto 0; } }
.hero-actions {
display: flex;
gap: 14px;
margin-top: 40px;
flex-wrap: wrap;
}
/* Sequenced load-in: tag → headline → paragraph → CTA, all wrapped under 1s */
.hero-tag, .hero h1, .hero p, .hero-actions {
opacity: 0;
animation: heroTextIn .6s var(--ease-out, ease) both;
}
.hero-tag { animation-delay: .04s; }
.hero h1 { animation-delay: .12s; }
.hero p { animation-delay: .24s; }
.hero-actions { animation-delay: .36s; }
@keyframes heroTextIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.hero-tag, .hero h1, .hero p, .hero-actions { animation: none; opacity: 1; }
}
@media (max-width: 900px) { .hero-actions { justify-content: center; } }
.hero .btn-secondary {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.2);
color: #fff;
}
.hero .btn-secondary:hover { background: rgba(255,255,255,0.14); }
/* Hero-only premium treatment for the primary CTA — scoped to
.hero-actions so the sitewide .btn-primary (nav, sell.html, etc.)
is untouched. */
.hero-actions .btn-primary {
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow: 0 10px 26px rgba(217,30,54,0.36), 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -3px 0 rgba(0,0,0,0.2);
transition: transform .25s var(--ease-out, var(--ease)), box-shadow .25s var(--ease-out, var(--ease));
}
.hero-actions .btn-primary::before {
content: "";
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(115deg, transparent, rgba(255,255,255,0.4), transparent);
transform: skewX(-18deg);
transition: left .65s var(--ease-out, ease);
pointer-events: none;
}
.hero-actions .btn-primary:hover::before { left: 130%; }
.hero-actions .btn-primary:hover {
box-shadow: 0 16px 38px rgba(217,30,54,0.46), 0 4px 10px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -3px 0 rgba(0,0,0,0.2);
}
.hero-actions .btn-primary:active {
transform: translateY(0) scale(0.97);
box-shadow: 0 6px 16px rgba(217,30,54,0.4), inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -2px 0 rgba(0,0,0,0.2);
}
.hero-fee {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 36px;
font-size: 13.5px;
color: rgba(255,255,255,0.5);
}
.hero-fee b { font-size: 15px; color: var(--gold-light); font-weight: 700; }
.spotlight { padding: 8px 0 8px; }
.spotlight-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 0;
align-items: stretch;
background: #141416;
border: 3px solid var(--red);
border-radius: var(--radius-m);
overflow: hidden;
position: relative;
}
@media (max-width: 900px) {
.spotlight-grid { grid-template-columns: 1fr; }
}
.spotlight-visual {
position: relative;
aspect-ratio: 1 / 1;
background:
radial-gradient(120% 120% at 50% 12%, rgba(255,255,255,0.08), transparent 55%),
linear-gradient(160deg, #232529, #0f0f11);
border-right: 3px solid var(--red);
}
@media (max-width: 900px) { .spotlight-visual { border-right: none; border-bottom: 3px solid var(--red); } }
.spotlight-badge {
position: absolute;
top: 14px; left: 14px;
background: var(--gold);
color: #3a2e05;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.03em;
padding: 6px 12px;
border-radius: 4px;
z-index: 2;
transform: rotate(-3deg);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.spotlight-piece-badge {
position: absolute;
bottom: 14px; right: 14px;
width: 64px; height: 64px;
border-radius: 50%;
background: #fff;
color: #1d1d1f;
display: flex; flex-direction: column; align-items: center; justify-content: center;
border: 3px solid var(--gold);
z-index: 2;
}
.spotlight-piece-badge b { font-size: 15px; line-height: 1; font-weight: 800; }
.spotlight-piece-badge span { font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.02em; color: #6e6e73; margin-top: 2px; }
.spotlight-copy {
position: relative;
z-index: 1;
padding: 48px 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 900px) { .spotlight-copy { padding: 36px 28px; } }
.spotlight-theme {
font-family: var(--font-mono, "SF Mono", Menlo, monospace);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--red);
}
.spotlight-copy h2 {
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.08;
letter-spacing: -0.03em;
color: #fff;
margin: 10px 0 14px;
}
.spotlight-copy p {
color: rgba(255,255,255,0.6);
font-size: 16px;
line-height: 1.6;
max-width: 420px;
}
.spotlight-meta {
display: flex;
gap: 0;
margin-top: 26px;
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 20px;
}
.spotlight-meta div { flex: 1; border-right: 1px solid rgba(255,255,255,0.12); }
.spotlight-meta div:last-child { border-right: none; }
.spotlight-meta div b { display: block; color: #fff; font-size: 19px; font-weight: 700; }
.spotlight-meta div span { color: rgba(255,255,255,0.5); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.spotlight-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 28px;
color: var(--gold-light);
font-weight: 600;
font-size: 15px;
}
.spotlight-link .chev { transition: transform 0.2s var(--ease); }
.spotlight-link:hover .chev { transform: translateX(4px); }
.theme-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 760px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .theme-grid { grid-template-columns: 1fr; } }
.theme-tile {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--radius-m);
overflow: hidden;
border: 1px solid var(--glass-border);
display: flex;
align-items: flex-end;
padding: 18px 20px;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.theme-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.theme-tile::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
}
.theme-tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
z-index: 1;
}
.theme-tile-name, .theme-tile-count { position: relative; z-index: 2; color: #fff; }
.theme-tile-name { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.theme-tile-count { display: block; font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.mp-preview {
padding: 48px 0 40px;
}
.mp-preview-card {
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1.6px, transparent 1.6px),
linear-gradient(160deg, #17181c, #0f0f11);
background-size: 34px 34px, 100% 100%;
border: 1px solid rgba(255,255,255,0.08);
border-top: 3px solid var(--gold);
border-radius: var(--radius-l);
padding: 48px 40px;
color: #fff;
position: relative;
overflow: hidden;
}
.mp-preview-head {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.mp-preview-head h2 { font-size: clamp(24px, 3vw, 34px); color: #fff; }
.mp-preview-head p { color: rgba(255,255,255,0.65); margin-top: 8px; font-size: 15px; }
.mp-strip {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 980px) { .mp-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mp-strip { grid-template-columns: 1fr; } }
.mini-card {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-m);
padding: 14px;
transition: transform .22s var(--ease), background .22s var(--ease);
}
.mini-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.1); }
.mini-card .thumb { border-radius: 12px; margin-bottom: 12px; }
.mini-card h4 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.mini-card .price { color: var(--yellow); font-weight: 700; font-size: 15px; }
.mini-card .cond { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; }
.section { padding: 96px 0; }
/* Real modifier classes for the handful of sections that need less
top padding than the default 96px (right after a hero, or right
after another section) — replaces hand-typed inline padding-top
overrides that were scattered across a few pages (no visual
change). */
.section-flush { padding-top: 0; }
.section-tight { padding-top: 24px; }
.section-tighter { padding-top: 8px; }
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 44px;
flex-wrap: wrap;
}
.card {
position: relative;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-radius: var(--radius-l);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
overflow: hidden;
transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
display: flex;
flex-direction: column;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent-gradient);
transform: scaleX(0);
transform-origin: left;
transition: transform .45s var(--ease-out);
z-index: 2;
}
.card:hover::before { transform: scaleX(1); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-float); border-color: var(--border-hover); }
.card .thumb-wrap { position: relative; }
svg[aria-label="LEGO listing thumbnail"] {
display: block;
width: 100%;
height: 100%;
}
.thumb {
width: 100%;
aspect-ratio: 1 / 1;
display: block;
background:
radial-gradient(120% 120% at 50% 15%, rgba(255,255,255,0.9), transparent 55%),
radial-gradient(140% 140% at 50% 100%, rgba(0,0,0,0.06), transparent 60%),
var(--bg-alt);
}
.card .thumb, .news-card .thumb, .collection-card .thumb, .post-card .thumb, .mi-card .thumb {
transition: transform .5s var(--ease-out, var(--ease));
}
.card:hover .thumb, .news-card:hover .thumb, .collection-card:hover .thumb, .post-card:hover .thumb, .mi-card:hover .thumb {
transform: scale(1.055);
}
.badge-verified {
position: absolute;
top: 12px; right: 12px;
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(160deg, var(--gold-light), var(--gold));
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(201,162,39,0.4), inset 0 -3px 4px rgba(0,0,0,0.18), inset 0 2px 2px rgba(255,255,255,0.35);
}
.badge-verified svg { width: 14px; height: 14px; display: block; }
.badge-verified.inline {
position: static;
display: inline-flex;
vertical-align: middle;
margin-left: 6px;
width: 22px; height: 22px;
}
.badge-verified.inline svg { width: 11px; height: 11px; }
.verified-pill {
display: inline-flex;
align-items: center;
gap: 4px;
vertical-align: middle;
margin-left: 7px;
padding: 3px 9px 3px 6px;
border-radius: 999px;
background: linear-gradient(160deg, var(--gold-light), var(--gold));
color: #3a2e05;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
box-shadow: 0 2px 8px rgba(201,162,39,0.35);
}
.verified-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
.seller-hero-name .verified-pill, .seller-name .verified-pill { font-size: 11px; padding: 4px 10px 4px 7px; }
.seller-hero-name .verified-pill svg, .seller-name .verified-pill svg { width: 12px; height: 12px; }
.seller-hero-name .verified-pill { margin-left: 0; }
.official-pill {
display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-left: 6px;
padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
color: var(--ink-soft); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.official-pill svg { width: 10px; height: 10px; flex-shrink: 0; }
.badge {
position: absolute;
top: 12px; left: 12px;
background: rgba(255,255,255,0.82);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid rgba(255,255,255,0.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 12px rgba(0,0,0,0.25);
font-size: 11px;
font-weight: 700;
padding: 5px 10px;
border-radius: 999px;
color: #1d1d1f;
letter-spacing: 0.01em;
}
.badge.new { background: var(--green-tint); color: var(--green); }
.badge.used { background: var(--yellow-tint); color: #8a5a00; }
.badge.parts { background: var(--red-tint); color: var(--red-dark); }
.thumb-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.thumb-badges .badge { position: static; }
.badge-retired { background: rgba(20,20,22,0.78); color: #fff; border-color: rgba(255,255,255,0.16); }
.badge-rare {
position: relative;
background: rgba(201,162,39,0.85);
color: #241c04;
border-color: transparent;
overflow: hidden;
}
/* A slow diagonal glint sweeps across the "Rare find" pill so a rare
listing reads as a small find worth noticing in a grid, not just
another badge — subtle and infrequent, not a loud loop. */
.badge-rare::after {
content: "";
position: absolute;
top: 0; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(115deg, transparent, rgba(255,255,255,0.75), transparent);
animation: rareShimmer 3.2s ease-in-out infinite;
}
@keyframes rareShimmer {
0%, 40% { left: -60%; }
60%, 100% { left: 140%; }
}
/* Rare cards get a quiet, persistent gold presence at rest — not only
on hover — so a genuine find is noticeable while scanning a grid. */
.card.card-rare { border-color: rgba(201,162,39,0.3); }
.card.card-rare::before { background: linear-gradient(135deg, var(--gold-light), var(--gold)); transform: scaleX(1); opacity: 0.55; }
.card.card-rare:hover::before { opacity: 1; }
.card.card-rare:hover { box-shadow: var(--shadow-glow-gold, var(--shadow-float)); border-color: rgba(201,162,39,0.45); }
@media (prefers-reduced-motion: reduce) {
.badge-rare::after { animation: none; display: none; }
}
.card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-theme { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); font-weight: 600; }
.card-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.card-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-top: auto; padding-top: 10px; }
.card-price { font-size: 17px; font-weight: 750; }
.card-seller { font-size: 12px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.card-seller-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.card-seller .verified-pill { flex-shrink: 0; margin-left: 3px; }
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }
.news-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
}
@media (min-width: 1300px) { .news-grid { grid-template-columns: 1.1fr 1fr 1fr 1fr; } }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
position: relative;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-l);
overflow: hidden;
transition: transform .35s var(--ease-out, var(--ease)), box-shadow .35s var(--ease-out, var(--ease)), border-color .35s var(--ease-out, var(--ease));
display: flex;
flex-direction: column;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.news-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent-gradient, var(--gold));
transform: scaleX(0);
transform-origin: left;
transition: transform .45s var(--ease-out, var(--ease));
z-index: 2;
}
.news-card:hover::before { transform: scaleX(1); }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-float, var(--shadow-md)); border-color: var(--border-hover, var(--glass-border)); }
.news-card.feature {
grid-row: span 2;
box-shadow: var(--glass-shadow), 0 0 80px -20px rgba(0,113,227,0.32);
}
.news-card.feature:hover {
box-shadow: var(--shadow-float, var(--shadow-md)), 0 0 80px -20px rgba(0,113,227,0.38);
}
.news-media {
position: relative;
aspect-ratio: 16/10;
background: linear-gradient(135deg, var(--surface), var(--bg-alt));
overflow: hidden;
}
.news-media .thumb { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.news-card.feature .news-media { aspect-ratio: 16/12; }
.play-btn {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.play-btn span {
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-md);
transition: transform .2s var(--ease);
}
.news-card:hover .play-btn span { transform: scale(1.08); }
.news-tag {
position: absolute; top: 12px; left: 12px;
font-size: 11px; font-weight: 700;
background: rgba(29,29,31,0.75); color: #fff;
padding: 5px 10px; border-radius: 999px;
backdrop-filter: blur(4px);
}
/* Category color-coding for the tag chip — instantly scannable feed. */
.news-tag.cat-leak { background: rgba(217,30,54,0.9); }
.news-tag.cat-rumor { background: rgba(201,162,39,0.92); color: #201900; }
.news-tag.cat-review { background: rgba(74,143,201,0.92); }
.news-tag.cat-invest { background: rgba(30,142,90,0.92); }
.news-tag.cat-event { background: rgba(122,43,92,0.92); }
.news-tag.cat-release { background: var(--accent-gradient, var(--gold)); color: #201900; }
.news-tag.cat-video { background: rgba(217,30,54,0.9); }
/* "New" freshness badge (top-right of the media). */
.news-fresh {
position: absolute; top: 12px; right: 12px;
font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
background: var(--green); color: #fff; padding: 3px 8px; border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.news-card .news-fresh { pointer-events: none; }
/* Real-only video metadata (channel · duration · views). */
.news-vid-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }
.news-vid-dot { opacity: 0.5; }
/* Watch / Read cue in the meta row. */
.news-cta { font-size: 12px; font-weight: 650; color: var(--gold-light); margin-left: auto; white-space: nowrap; }
.news-comment-count + .news-cta, .news-cta + .news-comment-count { margin-left: 10px; }
/* Feed footer: Load more + infinite-scroll sentinel + end note. */
.news-feed-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 12px; }
.news-feed-footer .btn { min-width: 220px; }
.news-more-count { opacity: 0.7; font-weight: 500; margin-left: 4px; }
.news-sentinel { width: 1px; height: 1px; }
.news-feed-end { font-size: 13px; color: var(--ink-muted); padding: 10px 0; text-align: center; }
/* Branded placeholder thumbnail — final fallback in the chain. Same fixed
dimensions as every other card (from .news-media), centered + padded. */
.news-thumb-brand {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: radial-gradient(130% 120% at 25% 0%, rgba(201,162,39,0.12), transparent 55%), linear-gradient(150deg, var(--surface), var(--bg));
}
.ntb-center { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 18px; text-align: center; max-width: 92%; }
.ntb-logo {
width: 56px; height: 56px; border-radius: 15px; flex-shrink: 0;
background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ntb-logo .ntb-fav { width: 34px; height: 34px; object-fit: contain; display: block; }
.ntb-brick { width: 30px; height: 30px; color: var(--gold-light); display: block; }
.ntb-name { font-size: 13px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.01em; line-height: 1.3; }
.news-card.feature .ntb-logo { width: 66px; height: 66px; }
.news-card.feature .ntb-name { font-size: 15px; }
.news-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-card.feature .news-body { padding: 22px 26px 26px; }
.news-source { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
/* Small "leaves the site" hint next to the byline, shown only when the
card's source is a known real outlet linking out (see NEWS_SOURCE_LINKS
in data.js) — everything else stays an in-site link, no icon. */
.news-source-external { font-size: 11px; opacity: 0.7; }
.news-title { font-size: 16px; font-weight: 650; line-height: 1.35; }
.news-card.feature .news-title { font-size: 22px; }
.news-desc { font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; }
.news-meta { font-size: 12px; color: var(--ink-muted); }
.news-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.news-comment-count { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-muted); flex-shrink: 0; }
.news-comment-count svg { width: 13px; height: 13px; }
.overview-panel {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-l);
padding: 28px 30px 6px;
margin-bottom: 44px;
}
.overview-group { margin-bottom: 28px; }
.overview-group:last-child { margin-bottom: 6px; }
.overview-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.overview-group-head h3 { font-size: 14px; font-weight: 700; }
.overview-group-head a { font-size: 12.5px; font-weight: 600; color: var(--red); white-space: nowrap; }
.overview-card-row {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: thin;
}
.overview-card {
flex: 0 0 172px;
width: 172px;
display: flex;
flex-direction: column;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--radius-m);
overflow: hidden;
box-shadow: var(--glass-shadow);
text-align: left;
cursor: default;
font: inherit;
color: inherit;
}
.overview-card-link { cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.overview-card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.overview-card .thumb { aspect-ratio: 1/1; flex-shrink: 0; }
.overview-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* Speculative calendar entries with no verifiable real set number show no
image at all rather than a generic stock photo standing in for a
product that doesn't exist — see overviewComingSoonCardHTML(). */
.overview-card-no-image .overview-card-body { padding-top: 16px; min-height: 128px; justify-content: flex-start; }
.overview-card-status {
align-self: flex-start;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 3px 9px;
border-radius: 999px;
}
.overview-card-status.upcoming { background: var(--yellow-tint); color: #8a5a00; }
.overview-card-status.rumored { background: var(--red-tint); color: var(--red-dark); }
.overview-card-status.retiring { background: var(--red-tint); color: var(--red-dark); }
.overview-card-status.event { background: var(--green-tint); color: var(--green); }
.overview-card-title {
font-size: 13px;
font-weight: 650;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.overview-card-meta {
font-size: 11.5px;
color: var(--ink-muted);
margin-top: auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.overview-empty { font-size: 13px; color: var(--ink-muted); padding: 4px 0 14px; }
.steps {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
counter-reset: step;
}
.steps::before {
content: "";
position: absolute;
top: 20px; left: 6%; right: 6%;
height: 0;
border-top: 2px dashed rgba(255,255,255,0.12);
z-index: 0;
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .steps::before { display: none; } }
.step {
counter-increment: step;
position: relative;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
border-top-left-radius: 4px;
padding: 36px 26px 28px;
}
.step-num {
position: absolute;
top: -14px; left: -2px;
width: 38px; height: 38px;
border-radius: 9px 9px 9px 3px;
background: var(--near-black);
border: 1.5px solid var(--gold);
color: var(--gold-light);
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 15px;
font-family: var(--font-mono, "SF Mono", Menlo, monospace);
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--ink-muted); font-size: 14.5px; }
.fee-note {
margin-top: 40px;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
padding: 20px 26px;
display: flex;
align-items: center;
gap: 16px;
font-size: 14px;
color: var(--ink-soft);
}
.fee-note b { color: var(--ink); }
.footer {
position: relative;
background: linear-gradient(180deg, var(--charcoal), var(--near-black));
color: rgba(255,255,255,0.85);
padding: 64px 0 32px;
margin-top: 64px;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: min(720px, 90%);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,162,39,0.5), transparent);
}
.footer .logo { color: #fff; }
.footer-grid {
display: grid;
grid-template-columns: 1.3fr repeat(5, 1fr);
gap: 32px;
margin-bottom: 40px;
}
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; color: var(--gold-light); }
.footer-col a { display: block; width: fit-content; font-size: 13.5px; color: rgba(255,255,255,0.6); margin-bottom: 10px; transition: color .2s var(--ease), transform .2s var(--ease); }
.footer-col a:hover { color: #fff; transform: translateX(3px); }
/* The brand blurb under the footer logo was copy-pasted onto all 15
pages with an identical inline style attribute — moved here once
so every page shares one real source of truth instead of 15 hand-
typed duplicates (no visual change). */
.footer-col p { color: rgba(255,255,255,0.55); font-size: 13.5px; margin-top: 14px; max-width: 260px; line-height: 1.5; }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
font-size: 12.5px; color: rgba(255,255,255,0.45);
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 24px;
flex-wrap: wrap; gap: 12px;
}
.page-header { padding: 64px 0 36px; position: relative; }
.page-header h1, .page-header h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.025em; margin-top: 10px; }
.page-header p { color: var(--ink-muted); margin-top: 12px; font-size: 16.5px; max-width: 600px; line-height: 1.55; }
.page-header::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 64px; height: 3px;
border-radius: 2px;
background: var(--accent-gradient, var(--gold));
}
.toolbar {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
}
.icon-svg { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-svg svg { width: 18px; height: 18px; }
.search-box {
flex: 1;
min-width: 240px;
display: flex;
align-items: center;
gap: 10px;
position: relative;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 980px;
padding: 12px 18px;
box-shadow: var(--glass-shadow);
transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.search-box:focus-within { background: var(--glass-bg-strong); box-shadow: 0 10px 26px rgba(31,38,50,0.12), inset 0 1px 0 rgba(255,255,255,0.8); }
.search-box input {
border: none; outline: none; flex: 1; font-size: 14.5px; background: transparent; color: var(--ink);
}
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filters select {
appearance: none;
border: 1px solid var(--glass-border);
background-color: var(--glass-bg);
border-radius: 980px;
padding: 11px 34px 11px 16px;
font-size: 13.5px;
color: var(--ink-soft);
cursor: pointer;
box-shadow: var(--glass-shadow);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 14px center;
}
.portfolio-add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-m); }
.portfolio-add-row select {
flex: 1 1 220px; min-width: 180px; appearance: none;
border: 1px solid var(--glass-border); background-color: var(--glass-bg);
border-radius: var(--radius-s); padding: 9px 34px 9px 14px; font-size: 13.5px;
color: var(--ink-soft); cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat; background-position: right 14px center;
}
.portfolio-add-row input[type="number"] { width: 100px; padding: 9px 12px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg-card, #17171a); color: var(--ink); font-size: 13.5px; outline: none; }
.portfolio-add-row input[type="number"]:focus { border-color: var(--red); }
@media (max-width: 640px) {
.portfolio-add-row { flex-direction: column; align-items: stretch; }
.portfolio-add-row select, .portfolio-add-row input[type="number"], .portfolio-add-row button { width: 100%; }
}
.results-count { font-size: 13.5px; color: var(--ink-muted); padding-bottom: 8px; }
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bulk-action-bar {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
padding: 12px 16px; margin-bottom: 14px; font-size: 13px; font-weight: 650; color: var(--ink);
}
.bulk-action-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.portfolio-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--ink-muted); }
.portfolio-toolbar select { width: auto; }
.row-select-check { margin-right: 4px; flex-shrink: 0; width: 17px; height: 17px; cursor: pointer; accent-color: var(--gold); }
.filter-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 999px;
padding: 6px 10px 6px 12px; font-size: 12.5px; color: var(--ink); cursor: pointer;
transition: background .15s var(--ease), border-color .15s var(--ease);
}
.filter-chip:hover { background: var(--glass-bg-dark); color: #fff; border-color: var(--glass-border-dark); }
.filter-chip-x { font-size: 15px; line-height: 1; opacity: .7; }
.filter-chip:hover .filter-chip-x { opacity: 1; }
.filter-chip-clear-all { background: none; border: 1px solid transparent; color: var(--ink-muted); text-decoration: underline; padding: 6px 4px; }
.filter-chip-clear-all:hover { background: none; color: var(--ink); border-color: transparent; }
.empty-state { text-align: center; padding: 80px 20px; color: var(--ink-muted); }
.empty-state p { margin: 0; }
.empty-state-icon { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--ink-faint, rgba(255,255,255,0.22)); }
.empty-state-icon svg { width: 100%; height: 100%; }
.form-card {
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
padding: 40px;
box-shadow: var(--glass-shadow);
}
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.field .hint, .hint { font-size: 12px; color: var(--ink-muted); margin-top: 6px; }
.hint a { color: var(--ink); text-decoration: underline; }
.field input[type=text], .field input[type=number], .field input[type=email], .field input[type=password], .field textarea, .field select {
width: 100%;
padding: 13px 16px;
border-radius: var(--radius-s);
border: 1px solid var(--line);
font-size: 14.5px;
font-family: inherit;
color: var(--ink);
background: var(--bg-alt);
outline: none;
transition: border-color .15s var(--ease), background .15s var(--ease);
}
.field select {
appearance: none;
padding-right: 40px;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 16px center;
}
.field input:focus, .field textarea:focus, .field select:focus {
border-color: var(--red);
background: var(--surface);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
box-shadow: 0 0 0 3px rgba(217,30,54,0.25);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.card-input-wrap { position: relative; }
.card-input-wrap input { padding-right: 56px !important; }
.card-brand-icon {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
color: var(--ink-faint, var(--ink-muted));
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
pointer-events: none;
}
.card-brand-icon svg { width: 22px; height: 22px; }
.card-brand-icon--detected { color: var(--gold-light, var(--gold)); }
.payment-network-row { display: flex; align-items: center; gap: 7px; }
.payment-network-mark {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
padding: 0 6px;
border-radius: 4px;
border: 1px solid var(--line-soft);
background: var(--bg-alt);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.03em;
color: var(--ink-faint, var(--ink-muted));
}
.payment-network-visa { color: #5a7fd6; }
.payment-network-amex { color: #6ea3d8; }
.payment-network-mastercard { gap: 0; padding: 0 8px; }
.payment-network-mastercard span { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.payment-network-mastercard span:first-child { background: #c94f4f; margin-right: -5px; }
.payment-network-mastercard span:last-child { background: #e8a23c; opacity: 0.9; }
.upload-box {
border: 2px dashed var(--line);
border-radius: var(--radius-m);
padding: 36px 20px;
text-align: center;
color: var(--ink-muted);
cursor: pointer;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.upload-box:hover { border-color: var(--red); background: var(--red-tint); color: #7a2233; }
.upload-box svg { margin-bottom: 10px; }
.upload-preview { display: grid; grid-template-columns: repeat(auto-fill, 80px); gap: 10px; margin-top: 14px; }
.upload-preview .thumb-sm { width: 80px; height: 80px; border-radius: 10px; }
/* Real uploaded-image previews (with a per-image remove control). */
.upload-thumb {
position: relative;
width: 80px; height: 80px;
border-radius: 10px;
background-size: cover;
background-position: center;
background-color: var(--glass-bg);
border: 1px solid var(--glass-border);
}
.upload-thumb-remove {
position: absolute; top: -7px; right: -7px;
width: 22px; height: 22px;
border-radius: 50%;
border: none;
background: rgba(20,20,22,0.92);
color: #fff;
font-size: 15px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.upload-thumb-remove:hover { background: var(--red); }
.form-error {
margin: 4px 0 14px;
padding: 10px 14px;
border-radius: 10px;
background: var(--red-tint);
border: 1px solid rgba(201,64,64,0.4);
color: #d66;
font-size: 13.5px;
}
.fee-calc {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
padding: 22px 24px;
margin-top: 8px;
}
.fee-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; color: var(--ink-soft); }
.fee-row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; font-weight: 700; color: var(--ink); font-size: 16px; }
.fee-row b { color: var(--ink); }
.auth-wrap { min-height: 78vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-logo { justify-content: center; margin-bottom: 16px; }
.auth-card .form-card { padding: 40px 36px; }
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head h1 { font-size: 26px; }
.auth-head p { color: var(--ink-muted); font-size: 14px; margin-top: 8px; }
.auth-switch { text-align: center; margin-top: 22px; font-size: 14px; color: var(--ink-muted); }
.auth-switch a { color: var(--red); font-weight: 600; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font-size: 12px; margin: 22px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social-row { display: flex; flex-direction: column; gap: 10px; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; }
.social-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* "or continue with email" divider variant (same line treatment) */
.divider.divider-email { text-transform: none; }
.toast {
position: fixed;
bottom: 28px; left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--glass-bg-dark);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border-dark);
color: #fff;
padding: 14px 22px;
border-radius: 980px;
font-size: 14px;
font-weight: 500;
box-shadow: var(--glass-shadow-dark), var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: all .3s var(--ease);
z-index: 999;
display: flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.reveal { opacity: 1; transform: none; }
.reveal.pre-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.pre-reveal.in { opacity: 1; transform: translateY(0); }
.listing-detail {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 60px;
row-gap: 40px;
padding: 44px 0 96px;
}
/* Two-column composition with no dead space under the gallery: the gallery
and all lower detail content (.ld-more) share one flowing left column
(.ld-left), so the description begins right under the gallery with no gap.
Both columns live in normal document flow in the same grid row, so the
whole page scrolls as one continuous surface — neither column is a
separate scroll container and neither is pinned while the other moves.
`align-self: start` keeps the purchase panel at its natural height (not
stretched) without pinning it. (An earlier version used position:sticky
here, which — only on listings where the left column was taller — pinned
the right column while the left scrolled past it, so different listings
scrolled differently. Removed for a single unified scroll.) */
.listing-detail > .ld-left { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
.listing-detail > .ld-purchase { grid-column: 2; grid-row: 1; align-self: start; min-width: 0; }
.listing-detail > .ld-left > .ld-more { margin-top: 6px; }
@media (max-width: 900px) {
.listing-detail { grid-template-columns: 1fr; gap: 34px; }
/* Single column, order: gallery → purchase panel → details, so the buy
decision sits directly under the photos. .ld-left unwraps (display:
contents) so its gallery/details become direct grid items and can be
interleaved with the purchase panel via order. Negative orders keep the
appended full-width modules (reviews, other-sellers, order:0) last. */
.listing-detail > .ld-left { display: contents; }
.listing-detail > .ld-left > .gallery { order: -3; }
.listing-detail > .ld-purchase { order: -2; grid-column: 1; grid-row: auto; position: static; top: auto; }
.listing-detail > .ld-left > .ld-more { order: -1; margin-top: 0; }
}
.gallery { position: relative; }
.gallery-main { border-radius: var(--radius-l); overflow: hidden; margin-bottom: 10px; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumbs .thumb {
width: 72px; height: 72px; border-radius: 12px; cursor: pointer;
border: 2px solid transparent; opacity: 0.72;
transition: opacity .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.gallery-thumbs .thumb:hover { opacity: 1; transform: translateY(-3px); border-color: rgba(255,255,255,0.22); }
.gallery-thumbs .thumb.active {
opacity: 1; border-color: var(--gold-light);
box-shadow: 0 0 0 2px rgba(232,203,106,0.35), var(--shadow-sm);
transform: translateY(-1px);
}
.gallery-zoom-btn {
position: absolute; top: 12px; right: 12px;
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--glass-bg-dark); backdrop-filter: blur(4px);
border: 1px solid var(--glass-border-dark); color: #fff;
cursor: pointer; transition: background .15s var(--ease), transform .15s var(--ease);
}
.gallery-zoom-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.06); }
.gallery-zoom-btn svg { width: 17px; height: 17px; }
/* ---------- Photo lightbox (listing.html) ---------- */
.lightbox-overlay {
position: fixed; inset: 0; z-index: 400;
background: rgba(4,4,6,0.92);
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden;
transition: opacity .2s var(--ease), visibility .2s;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-stage {
width: min(78vw, 640px); height: min(78vw, 640px);
border-radius: var(--radius-l); overflow: hidden;
}
.lightbox-close {
position: absolute; top: 20px; right: 24px;
background: none; border: none; color: #fff; font-size: 32px; line-height: 1;
cursor: pointer; padding: 6px; opacity: 0.8; transition: opacity .15s var(--ease);
}
.lightbox-close:hover { opacity: 1; }
.lightbox-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 46px; height: 46px; border-radius: 50%;
background: var(--glass-bg-dark); border: 1px solid var(--glass-border-dark);
color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s var(--ease);
}
.lightbox-arrow:hover { background: rgba(0,0,0,0.65); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-count {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,0.75); font-size: 13px; letter-spacing: 0.02em;
}
@media (max-width: 640px) {
.lightbox-arrow { width: 38px; height: 38px; font-size: 22px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
}
.listing-detail .badge { position: static; display: inline-flex; }
.ld-title { font-size: 32px; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 9px; }
.ld-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-muted); margin: 0 0 22px; }
.ld-meta .ld-meta-sep { opacity: 0.4; }
.ld-subtitle { font-size: 14px; color: var(--ink-muted); margin: 0 0 18px; }
.ld-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 22px; }
.ld-price { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; margin: 0; line-height: 1; }
.ld-shipping-note { font-size: 13px; color: var(--ink-muted); margin: 0; }
.price-context {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12.5px;
color: var(--ink-muted);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-s);
padding: 10px 14px;
margin: -6px 0 20px;
line-height: 1.5;
}
.price-context svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--ink-faint, var(--ink-muted)); }
.price-context b { color: var(--ink-soft); font-weight: 650; }
.price-context-good svg, .price-context-good b { color: var(--green); }
.price-context-high svg, .price-context-high b { color: var(--gold-light, var(--gold)); }
.scarcity-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.scarcity-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 650;
padding: 6px 11px;
border-radius: 999px;
border: 1px solid var(--glass-border);
}
.scarcity-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.scarcity-retired { background: rgba(255,255,255,0.06); color: var(--ink-soft); }
.scarcity-last, .scarcity-low { background: var(--red-tint); color: var(--red-dark); border-color: transparent; }
.scarcity-views { background: transparent; color: var(--ink-muted); border-color: var(--line-soft); }
.ld-mi-chip {
display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
padding: 10px 14px; margin: 4px 0 20px; font-size: 12.5px; transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.ld-mi-chip:hover { border-color: var(--gold-light); transform: translateY(-1px); }
.ld-mi-chip .mi-score-badge { flex-shrink: 0; padding: 3px 9px; font-size: 12px; box-shadow: none; }
.ld-mi-chip span { color: var(--ink-soft); }
.ld-mi-chip b { color: var(--gold-light); }
.ld-desc { color: var(--ink-soft); font-size: 15px; line-height: 1.7; margin: 8px 0 4px; }
.ld-desc.clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ld-desc-toggle { background: none; border: none; color: var(--gold-light); font-weight: 650; font-size: 13px; cursor: pointer; padding: 6px 0 0; font-family: inherit; }
.ld-desc-toggle:hover { text-decoration: underline; }
.ld-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 20px; margin: 12px 0 4px; padding: 0; border: none; }
.spec-label { font-size: 11.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.spec-value { font-size: 14.5px; font-weight: 600; margin-top: 2px; color: var(--ink); }
.seller-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-m); margin: 0 0 16px; text-decoration: none; color: var(--ink); transition: border-color .15s var(--ease), transform .15s var(--ease); }
/* Seller card promoted into the purchase panel — sits between the action
buttons and the You Pay summary as part of the buy decision. */
.ld-purchase .seller-card { margin: 14px 0 0; }
.seller-card:hover { border-color: var(--glass-border-strong, var(--gold-light)); transform: translateY(-1px); }
.seller-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, var(--red), var(--yellow)); flex-shrink: 0; }
.seller-card-body { min-width: 0; flex: 1; }
.seller-name { font-weight: 650; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.seller-meta { font-size: 12.5px; color: var(--ink-muted); margin-top: 1px; }
.seller-card-cta { flex-shrink: 0; font-size: 12.5px; font-weight: 650; color: var(--gold-light); display: inline-flex; align-items: center; gap: 4px; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.buy-actions .btn { flex: 1 1 auto; }
.buy-actions #buyBtn { flex: 1 1 100%; font-size: 16.5px; font-weight: 750; padding: 18px 24px; margin-bottom: 4px; }
.buy-actions #offerBtn, .buy-actions [data-message-seller] { flex: 1 1 calc(50% - 5px); padding: 12px 18px; }
.buy-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ld-mini-actions { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; }
.ld-mini-actions .wishlist-btn, .ld-mini-actions .nav-icon-btn { flex: 0 0 auto; }
.sold-banner {
display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
color: var(--red-dark); background: var(--red-tint); border-radius: var(--radius-m);
padding: 12px 16px; margin: 0 0 16px;
}
.sold-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 520px) { .buy-actions #offerBtn, .buy-actions [data-message-seller] { flex: 1 1 100%; } }
/* ---------- Listing detail: scoped noise reduction ---------- */
.listing-detail { align-items: start; }
/* .ld-more now lives in column 1 beneath the gallery (placement set above),
so it no longer spans full width. Appended full-width modules below the
fold (reviews, other-sellers) still opt into 1 / -1 via inline styles. */
/* One cohesive purchase panel: title → price → deal → buttons → You pay
all read as a single calm block instead of a stack of separate cards.
Subtle surface + hairline border, no competing inner card chrome. */
.ld-purchase {
background: rgba(255,255,255,0.022);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
padding: 30px 30px 26px;
}
@media (max-width: 900px) { .ld-purchase { padding: 24px 22px 22px; } }
/* Single quiet trust line at the decision point, replacing the old 4-icon row.
Now integrated inside the You Pay summary, directly under the Total, as the
secure-checkout reassurance — hairline divider above it ties it to the price. */
.ld-guarantee { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--ink-muted); margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); text-align: center; }
.ld-guarantee svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
.ld-section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); font-weight: 700; margin: 0 0 10px; }
.ld-more-block { padding: 26px 0; }
.ld-more-block:first-child { padding-top: 8px; }
.listing-detail .scarcity-row { margin: 14px 0 4px; }
.listing-detail .scarcity-chip { font-size: 11px; }
/* ---------- Market Value deal indicator ----------
Future-proofed for three tones without a redesign: swap the tone class
(mv-card-good / mv-card-fair / mv-card-high) and the badge, sub-line and
accent all recolor from the same rules. Green = deal, yellow = fair,
red = above market. Rendered as a calm tinted inset, not a floating card. */
.mv-card { border-radius: var(--radius-m); padding: 16px 18px; margin: 0 0 22px; border: none; background: var(--glass-bg-strong); }
.mv-card-good { background: rgba(30,142,90,0.13); }
.mv-card-fair { background: rgba(232,203,106,0.13); }
.mv-card-high { background: rgba(217,30,54,0.13); }
.mv-head { display: flex; align-items: center; gap: 9px; }
.mv-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.mv-badge svg { width: 13px; height: 13px; }
.mv-card-good .mv-badge { background: var(--green); color: #fff; }
.mv-card-fair .mv-badge { background: var(--yellow); color: #3a2e05; }
.mv-card-high .mv-badge { background: var(--red); color: #fff; }
.mv-sub { font-size: 12px; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; margin: 13px 0 0; }
.mv-card-good .mv-sub { color: var(--green); }
.mv-card-fair .mv-sub { color: var(--gold-light); }
.mv-card-high .mv-sub { color: var(--red); }
.mv-range-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-top: 16px; }
.mv-range { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; color: var(--ink); margin-top: 3px; }
.mv-foot { font-size: 11.5px; color: var(--ink-muted); margin-top: 11px; }
/* ---------- AI Valuation card (Feature 2) ----------
Reuses the .mv-card shell; gold "AI" accent, confidence meter, condition
chips, grounded score row, and a reasoning line. Same dark premium theme. */
.ai-val-card { background: linear-gradient(158deg, rgba(201,162,39,0.10), rgba(201,162,39,0.02)); border: 1px solid rgba(201,162,39,0.28); }
.ai-val-card.ai-val-unavailable { background: var(--glass-bg); border: 1px dashed var(--glass-border); }
.ai-val-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-badge { background: var(--accent-gradient, var(--gold)); color: #2a2205; }
.ai-badge .ai-spark { width: 13px; height: 13px; }
.ai-conf { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.ai-conf b { color: var(--gold-light); font-weight: 750; }
.ai-conf-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 11px 0 0; }
.ai-conf-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent-gradient, var(--gold-light)); }
.ai-val-range { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-top: 12px; }
.ai-cond-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.ai-cond-chip { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 999px; padding: 3px 9px; }
.ai-score-row { display: flex; gap: 18px; margin-top: 14px; }
.ai-score { display: flex; flex-direction: column; line-height: 1.1; }
.ai-score b { font-size: 18px; font-weight: 750; color: var(--ink); letter-spacing: -0.01em; }
.ai-score small { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-top: 3px; }
.ai-val-reason { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin-top: 14px; }
.ai-price-pos { font-size: 12.5px; margin-top: 10px; color: var(--ink-muted); }
.ai-price-pos b { color: var(--ink-soft); }
.ai-pos-good b { color: var(--green); }
.ai-pos-high b { color: var(--red); }
.ai-val-link { color: var(--gold-light); font-weight: 650; text-decoration: none; white-space: nowrap; }
.ai-val-link:hover { text-decoration: underline; }
/* ---------- AI intelligence strip on generated MI cards (Feature 1) ---------- */
.mi-ai-strip { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mi-ai-strip-head { display: flex; align-items: center; gap: 8px; }
.mi-ai-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #2a2205; background: var(--accent-gradient, var(--gold)); padding: 2px 7px; border-radius: 999px; }
.mi-ai-tag svg { width: 11px; height: 11px; }
.mi-ai-conf { font-size: 11.5px; color: var(--ink-muted); font-weight: 600; }
.mi-ai-scores { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--ink-muted); }
.mi-ai-scores b { color: var(--ink); font-weight: 750; font-size: 14px; }
.mi-ai-sum { font-size: 12px; line-height: 1.5; color: var(--ink-soft); margin-top: 8px; }
.mi-ai-unverified { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); border: 1px solid var(--glass-border); border-radius: 999px; padding: 1px 6px; margin-left: 6px; }
/* Ambiguous-query candidate picker in the search status line */
.mi-ai-candidates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mi-ai-candidate { font-size: 12px; font-weight: 600; color: var(--ink); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-family: inherit; transition: border-color .15s var(--ease); }
.mi-ai-candidate:hover { border-color: var(--gold-light); }
/* ---------- Buyer "You Pay" summary ----------
Borderless rows inside the purchase panel; Total is the dominant figure. */
.you-pay { border: none; border-top: 1px solid var(--line-soft); border-radius: 0; padding: 16px 0 0; margin: 16px 0 0; }
.you-pay-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); font-weight: 700; margin: 0 0 7px; }
.you-pay-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; padding: 3.5px 0; color: var(--ink-soft); }
.you-pay-row .yp-muted { color: var(--ink-muted); font-size: 12.5px; font-weight: 500; }
.you-pay-row.total { margin-top: 7px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.you-pay-row.total > span:first-child { font-size: 14px; font-weight: 700; color: var(--ink); }
.you-pay-row.total .yp-total-value { font-size: 23px; font-weight: 850; color: var(--ink); letter-spacing: -0.01em; }
.ld-fee-link { margin-top: 12px; }
.ld-fee-link button { background: none; border: none; color: var(--ink-muted); font-size: 12px; cursor: pointer; padding: 0; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; }
.ld-fee-link button:hover { color: var(--ink-soft); }
.ld-fee-link .ld-fee-caret { transition: transform .2s var(--ease); }
.ld-fee-link button[aria-expanded="true"] .ld-fee-caret { transform: rotate(180deg); }
.ld-seller-payout { margin-top: 10px; max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); }
.ld-seller-payout.open { max-height: 200px; }
.ld-seller-payout-inner { padding-top: 4px; }
.ld-seller-payout .fee-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--ink-muted); }
.ld-seller-payout .fee-row.total { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--ink-soft); }
/* ---------- Listing accordions (shipping, market intelligence) ---------- */
.ld-accordion { border: 1px solid var(--glass-border); border-radius: var(--radius-m); margin: 0 0 12px; overflow: hidden; background: var(--glass-bg); }
.ld-accordion-head {
width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px;
background: none; border: none; cursor: pointer; color: var(--ink); font-family: inherit; text-align: left;
transition: background .15s var(--ease);
}
.ld-accordion-head:hover { background: var(--glass-bg-strong); }
.ld-accordion-title { font-size: 15px; font-weight: 650; flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ld-accordion-title svg.ld-acc-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--ink-muted); }
.ld-accordion-hint { font-size: 12px; font-weight: 500; color: var(--ink-muted); margin-left: auto; margin-right: 4px; white-space: nowrap; }
.ld-accordion-caret { flex-shrink: 0; color: var(--ink-muted); transition: transform .22s var(--ease); }
.ld-accordion-head[aria-expanded="true"] .ld-accordion-caret { transform: rotate(180deg); }
.ld-accordion-body { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.ld-accordion-body.open { max-height: 1600px; }
.ld-accordion-body-inner { padding: 4px 18px 18px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.ld-ship-line { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.ld-ship-line svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ink-muted); }
.ld-ship-line b { color: var(--ink); font-weight: 650; }
.ld-mi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px; margin: 14px 0; }
.ld-mi-stat { }
.ld-mi-stat-value { font-size: 18px; font-weight: 750; letter-spacing: -0.01em; }
.ld-mi-stat-label { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.ld-mi-spark { margin: 6px 0 14px; }
.ld-mi-outlook { color: var(--ink-soft); }
.ld-mi-notes { margin: 12px 0 14px; padding-left: 18px; }
.ld-mi-notes li { margin: 5px 0; color: var(--ink-soft); }
.ld-mi-full-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--gold-light); font-weight: 650; font-size: 13.5px; text-decoration: none; }
.ld-mi-full-link:hover { text-decoration: underline; }
/* ---------- Sticky purchase bar (desktop + mobile) ---------- */
.ld-sticky-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
background: var(--glass-bg-dark); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-top: 1px solid var(--glass-border-dark);
box-shadow: 0 -10px 34px rgba(0,0,0,0.34);
transform: translateY(130%); transition: transform .32s var(--ease);
}
.ld-sticky-bar.show { transform: translateY(0); }
.ld-sticky-inner { width: min(1120px, 100%); margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.ld-sticky-thumb { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; }
.ld-sticky-info { min-width: 0; flex: 1; }
.ld-sticky-title { font-size: 13.5px; font-weight: 650; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-sticky-price { font-size: 15px; font-weight: 800; color: #fff; }
.ld-sticky-price small { font-weight: 500; font-size: 11.5px; color: rgba(255,255,255,0.6); }
.ld-sticky-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 560px) {
.ld-sticky-thumb { display: none; }
.ld-sticky-title { display: none; }
.ld-sticky-actions [data-sticky-offer] { display: none; }
}
.related-heading { margin: 0 0 24px; font-size: 22px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.tab-btn {
border: 1px solid var(--glass-border);
background: var(--glass-bg);
box-shadow: var(--glass-shadow);
color: var(--ink-soft);
padding: 9px 18px;
border-radius: 980px;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all .15s var(--ease);
}
.tab-icon { width: 15px; height: 15px; flex-shrink: 0; vertical-align: -3px; margin-right: 2px; }
.tab-btn:hover { background: var(--glass-bg-strong); }
.tab-btn.active { background: var(--glass-bg-dark); color: #fff; border-color: var(--glass-border-dark); box-shadow: var(--glass-shadow-dark); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
#quickFilters { margin-bottom: 18px; gap: 6px; }
#quickFilters .tab-btn { font-size: 12.5px; padding: 6px 14px; background: transparent; box-shadow: none; }
#quickFilters .tab-btn:hover { background: var(--glass-bg); }
#quickFilters .tab-btn.active { background: var(--glass-bg-dark); box-shadow: none; }
.category-tabs { margin-bottom: 14px; }
.category-tabs .tab-btn { font-size: 14.5px; padding: 12px 22px; }
/* Two stacked tab rows on the calendar page (period, then theme) —
tightened the same way #quickFilters tightens the gap after
category-tabs on the marketplace page, instead of a negative-
margin hack on the second row. */
#calendarTabs { margin-bottom: 8px; }
.theme-chip-row {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 14px;
scrollbar-width: thin;
}
.theme-chip {
flex-shrink: 0;
border: 1px solid var(--glass-border);
background: var(--glass-bg);
color: var(--ink-soft);
padding: 7px 16px;
border-radius: 980px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all .15s var(--ease);
}
.theme-chip:hover { background: var(--glass-bg-strong); }
.theme-chip.active { background: var(--glass-bg-dark); color: #fff; border-color: var(--glass-border-dark); }
.account-head {
display: flex;
align-items: center;
gap: 18px;
padding: 28px 0 8px;
flex-wrap: wrap;
}
.account-avatar {
width: 64px; height: 64px;
border-radius: 50%;
background: linear-gradient(145deg, var(--red), var(--yellow));
flex-shrink: 0;
}
.account-name { font-size: 22px; font-weight: 700; }
.account-meta { font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; }
.account-head-actions { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 560px) { .account-head-actions { margin-left: 0; width: 100%; } }
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 28px 0 40px;
}
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-card {
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
padding: 20px 22px;
}
.stat-card .stat-label { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card .stat-value { font-size: 24px; font-weight: 750; margin-top: 6px; }
.row-list { display: flex; flex-direction: column; gap: 10px; }
.row-item {
display: flex;
align-items: center;
gap: 16px;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
padding: 12px 16px;
transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.row-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.row-item .badge { position: static; flex-shrink: 0; }
.row-item-link { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.row-thumb { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 14.5px; font-weight: 600; }
.row-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.row-price { font-size: 15px; font-weight: 700; white-space: nowrap; }
.verify-card {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-l);
padding: 32px;
max-width: 560px;
}
.verify-status { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
.verify-status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); margin-top: 5px; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(255,199,44,0.15); }
.verify-status.is-verified .verify-status-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(30,142,90,0.18); }
.verify-status b { display: block; font-size: 15.5px; }
.verify-status span { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 3px; line-height: 1.5; }
.verify-checklist { margin-bottom: 26px; }
.verify-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.verify-item:last-child { border-bottom: none; }
.verify-item-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; color: transparent; }
.verify-item.done .verify-item-check { background: var(--green); border-color: var(--green); color: #fff; }
.verify-item-text b { display: block; font-size: 13.5px; }
.verify-item-text span { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; padding: 40px 0 80px; align-items: start; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-item { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.summary-sticky { position: sticky; top: 90px; }
.order-confirm { display: none; text-align: center; padding: 60px 20px; }
.order-confirm.show-block { display: block; animation: order-confirm-in .5s var(--ease-out, var(--ease)) both; }
@keyframes order-confirm-in {
0% { opacity: 0; transform: translateY(10px) scale(0.97); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.order-confirm .check-mark {
position: relative;
width: 64px; height: 64px; border-radius: 50%;
background: var(--green-tint); color: var(--green);
display: flex; align-items: center; justify-content: center;
font-size: 28px; margin: 0 auto 20px;
animation: order-check-pop .45s .1s var(--ease-out, var(--ease)) both;
}
.order-confirm .check-mark::after {
content: "";
position: absolute; inset: 0; border-radius: 50%;
border: 1.5px solid var(--green);
animation: order-check-ring .7s .1s var(--ease-out, var(--ease)) both;
}
@keyframes order-check-pop {
0% { opacity: 0; transform: scale(0.4); }
60% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes order-check-ring {
0% { opacity: 0.6; transform: scale(1); }
100% { opacity: 0; transform: scale(1.5); }
}
.order-confirm h2 { font-size: 24px; margin-bottom: 8px; animation: order-confirm-fade .4s .18s var(--ease-out, var(--ease)) both; }
.order-confirm p { color: var(--ink-muted); font-size: 14.5px; max-width: 420px; margin: 8px auto; animation: order-confirm-fade .4s .24s var(--ease-out, var(--ease)) both; }
.order-confirm .btn { animation: order-confirm-fade .4s .3s var(--ease-out, var(--ease)) both; }
@keyframes order-confirm-fade {
0% { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
.order-number { font-weight: 700; color: var(--ink); }
.protection-card {
margin-top: 16px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
padding: 20px 22px;
}
.protection-row { display: flex; align-items: flex-start; gap: 12px; }
.protection-row + .protection-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.protection-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; color: var(--gold-light, var(--gold)); }
.protection-icon svg { width: 18px; height: 18px; }
.protection-row b { display: block; font-size: 13.5px; }
.protection-row span { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; line-height: 1.5; }
.estimate-result {
margin-top: 24px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
padding: 26px 28px;
}
.estimate-range { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--gold-light); }
.estimate-sub { font-size: 13.5px; color: var(--ink-muted); margin-top: 6px; }
.estimate-comps { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-muted); }
.estimate-comps b { color: var(--ink); }
.value-summary { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.value-summary .stat-card { flex: 1; min-width: 140px; }
.value-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.value-bar-label { width: 130px; flex-shrink: 0; color: var(--ink-soft); }
.value-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.value-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.value-bar-amt { width: 70px; text-align: right; flex-shrink: 0; font-weight: 600; }
.collection-add-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.collection-add-row select { flex: 1; min-width: 200px; }
.alert-row {
display: flex;
align-items: center;
gap: 16px;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
padding: 14px 18px;
margin-bottom: 10px;
}
.alert-info { flex: 1; min-width: 0; }
.alert-label { font-weight: 650; font-size: 14.5px; }
.alert-meta { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }
.alert-match { font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--green-tint); padding: 4px 10px; border-radius: 999px; flex-shrink: 0; }
.alert-remove { flex-shrink: 0; background: transparent; border: 1px solid var(--glass-border); color: var(--ink-muted); font-size: 12px; padding: 7px 12px; border-radius: 980px; cursor: pointer; }
.alert-remove:hover { color: var(--red); border-color: rgba(217,30,54,0.4); }
/* Same box model as .alert-remove (so row-actions like Mark sold /
Relist / Remove sit at consistent weight in the same row) but a
neutral hover instead of red, since these aren't destructive
actions. */
.alert-action { flex-shrink: 0; background: transparent; border: 1px solid var(--glass-border); color: var(--ink-muted); font-size: 12px; padding: 7px 12px; border-radius: 980px; cursor: pointer; }
.alert-action:hover { color: var(--ink); border-color: var(--border-hover, var(--glass-border)); }
.release-month-heading {
margin: 40px 0 16px;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink-muted);
}
.release-month-heading:first-child { margin-top: 0; }
.release-row {
display: flex;
align-items: center;
gap: 18px;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
padding: 16px 18px;
margin-bottom: 10px;
transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.release-row:hover { transform: translateY(-2px); }
.release-date {
width: 52px;
flex-shrink: 0;
text-align: center;
background: var(--bg-alt);
border-radius: var(--radius-s);
padding: 8px 0;
}
.release-date .day { display: block; font-size: 19px; font-weight: 800; line-height: 1; }
.release-date .mon { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-top: 4px; }
.release-info { flex: 1; min-width: 0; }
.release-set { font-weight: 650; font-size: 15px; }
.release-meta { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }
.release-status {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 5px 11px;
border-radius: 999px;
flex-shrink: 0;
}
.release-status.released { background: var(--green-tint); color: var(--green); }
.release-status.upcoming { background: var(--yellow-tint); color: #8a5a00; }
.release-status.rumored { background: var(--red-tint); color: var(--red-dark); }
.release-notify {
flex-shrink: 0;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--ink);
font-size: 12.5px;
font-weight: 600;
padding: 8px 14px;
border-radius: 980px;
cursor: pointer;
transition: background .15s var(--ease);
}
.release-notify:hover { background: var(--glass-bg-strong); }
.release-notify.added { color: var(--gold-light); border-color: rgba(232,203,106,0.4); }
@media (max-width: 620px) {
.release-row { flex-wrap: wrap; }
.release-status, .release-notify { margin-left: 70px; }
}
.card-quick-view {
position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
display: flex; flex-direction: column; gap: 3px;
padding: 30px 12px 12px;
background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
color: #fff; font-size: 11.5px; font-weight: 600;
opacity: 0; transform: translateY(6px);
transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.card:hover .card-quick-view, .card:focus-within .card-quick-view { opacity: 1; transform: translateY(0); }
@media (hover: none) { .card-quick-view { display: none; } }
.wishlist-btn {
position: absolute;
top: 12px; right: 12px;
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(12,12,14,0.55);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform .18s var(--ease), background .18s var(--ease);
z-index: 3;
}
.wishlist-btn:hover { transform: scale(1.08); }
.wishlist-btn svg { width: 16px; height: 16px; }
.wishlist-btn path { transition: fill .15s var(--ease), stroke .15s var(--ease); }
.wishlist-btn.saved { background: rgba(217,30,54,0.9); border-color: rgba(217,30,54,0.9); }
.wishlist-btn.static { position: static; width: 46px; height: 46px; }
.card-seller-verified { display: inline-flex; align-items: center; gap: 4px; }
.filter-toggle-btn { flex-shrink: 0; }
.filter-drawer {
max-height: 0;
overflow: hidden;
transition: max-height .3s var(--ease), margin .3s var(--ease);
}
.filter-drawer.open { max-height: 420px; margin-bottom: 24px; }
.filter-drawer-inner {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-m);
padding: 22px 24px;
display: flex;
flex-wrap: wrap;
gap: 22px;
align-items: flex-end;
}
.filter-field { display: flex; flex-direction: column; gap: 8px; }
.filter-field label { font-size: 12px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.range-inputs { display: flex; align-items: center; gap: 8px; }
.range-inputs input {
width: 88px;
padding: 9px 12px;
border-radius: var(--radius-s);
border: 1px solid var(--line);
background: var(--bg-alt);
color: var(--ink);
font-size: 13.5px;
outline: none;
}
.range-inputs input:focus { border-color: var(--red); }
.range-inputs span { color: var(--ink-muted); font-size: 13px; }
.filter-field > input[type="text"], .filter-field > select {
padding: 9px 12px;
border-radius: var(--radius-s);
border: 1px solid var(--line);
background: var(--bg-alt);
color: var(--ink);
font-size: 13.5px;
outline: none;
}
.filter-field > select {
appearance: none;
padding-right: 32px;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
}
.filter-field > input[type="text"]:focus, .filter-field > select:focus { border-color: var(--red); }
.checkbox-row { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.checkbox-row span { font-size: 13.5px; color: var(--ink-soft); }
.filter-actions { display: flex; gap: 10px; margin-left: auto; }
.recent-strip-wrap { margin-bottom: 36px; }
.recent-strip-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.recent-strip-head h3 { font-size: 16px; }
.recent-strip-head button { background: none; border: none; color: var(--ink-muted); font-size: 12.5px; cursor: pointer; }
.recent-strip-head button:hover { color: var(--red); }
.recent-strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 150px;
gap: 14px;
overflow-x: auto;
padding-bottom: 6px;
}
.recent-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-m);
padding: 10px;
transition: transform .18s var(--ease);
}
.recent-card:hover { transform: translateY(-3px); }
.recent-card .thumb { border-radius: 10px; margin-bottom: 8px; }
.recent-card .rc-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: block; }
.recent-card .rc-price { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; display: block; }
.seller-hero {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
padding: 36px 0;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 36px;
}
.seller-hero-avatar {
width: 84px; height: 84px;
border-radius: 50%;
background: linear-gradient(145deg, var(--red), var(--yellow));
flex-shrink: 0;
}
.seller-hero-name { font-size: 26px; font-weight: 750; display: flex; align-items: center; gap: 8px; }
.seller-hero-meta { color: var(--ink-muted); font-size: 13.5px; margin-top: 6px; }
.seller-stats-row { display: flex; gap: 32px; margin-top: 14px; flex-wrap: wrap; }
.seller-stat b { display: block; font-size: 19px; font-weight: 750; }
.seller-stat span { display: block; font-size: 11.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.seller-bio { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; max-width: 560px; margin-top: 6px; }
.seller-hero-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .seller-hero-actions { margin-left: 0; } }
.review-list { display: flex; flex-direction: column; gap: 4px; }
.review-item { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.review-item:last-child { border-bottom: none; }
.compare-seller-list { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; }
.compare-seller-row {
display: grid; grid-template-columns: 1.6fr auto auto auto; align-items: center; gap: 14px;
padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); text-decoration: none;
font-size: 13.5px; transition: background .15s var(--ease);
}
.compare-seller-row:last-child { border-bottom: none; }
.compare-seller-row:hover { background: var(--glass-bg-strong); }
.compare-seller-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.compare-seller-rating { color: var(--ink-muted); }
.compare-seller-price { font-weight: 700; display: flex; align-items: center; gap: 6px; justify-self: end; }
.compare-seller-cheaper { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--green); background: rgba(30,142,90,0.12); padding: 2px 6px; border-radius: 4px; }
@media (max-width: 640px) {
.compare-seller-row { grid-template-columns: 1fr auto; grid-template-areas: "name price" "cond rating"; row-gap: 6px; }
.compare-seller-name { grid-area: name; }
.compare-seller-price { grid-area: price; }
.compare-seller-rating { grid-area: rating; justify-self: end; }
}
.review-stars { color: var(--gold-light); font-size: 13px; letter-spacing: 1px; }
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.review-buyer { font-weight: 650; font-size: 13.5px; }
.review-date { font-size: 12px; color: var(--ink-muted); }
.review-text { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.trust-row {
display: flex;
gap: 22px;
flex-wrap: wrap;
padding: 16px 0;
margin: 4px 0 20px;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.trust-row-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-muted); }
.trust-row-item .icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-row-item .icon svg { width: 15px; height: 15px; }
.home-trust-row { justify-content: center; margin: 4px 0 8px; gap: 4px 4px; border-top-color: rgba(255,255,255,0.08); }
.home-trust-row .trust-row-item { position: relative; font-size: 13px; color: var(--ink-soft); font-weight: 500; letter-spacing: 0.005em; padding-right: 24px; }
.home-trust-row .trust-row-item:last-child { padding-right: 0; }
.home-trust-row .trust-row-item:not(:last-child)::after {
content: "";
position: absolute;
top: 50%; right: 2px;
transform: translateY(-50%);
width: 3px; height: 3px;
border-radius: 50%;
background: rgba(201,162,39,0.4);
}
.home-trust-row .icon { color: var(--gold-light, var(--gold)); opacity: 0.92; }
@media (max-width: 700px) {
.home-trust-row { gap: 10px 4px; }
.home-trust-row .trust-row-item { padding-right: 18px; }
}
/* ---------- Homepage Market Pulse banner ----------
A single computed headline turning the Market Intelligence
snapshot into something worth reading before you've even scrolled
to the pillars — the homepage's first proof that this isn't just
a listings site. */
.market-pulse {
display: flex;
align-items: center;
gap: 16px;
margin: 26px 0 6px;
padding: 16px 22px;
border-radius: var(--radius-l);
background: linear-gradient(135deg, rgba(58,168,107,0.09), rgba(74,143,201,0.06));
border: 1px solid var(--line-soft);
text-decoration: none;
transition: transform .25s var(--ease-out, var(--ease)), box-shadow .25s var(--ease-out, var(--ease));
}
.market-pulse:hover { transform: translateY(-2px); box-shadow: var(--shadow-float, var(--shadow-md)); }
.market-pulse-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 10px;
background: rgba(58,168,107,0.15);
color: var(--green);
flex-shrink: 0;
}
.market-pulse-icon svg { width: 18px; height: 18px; }
.market-pulse-text { flex: 1; font-size: 14px; color: var(--ink-soft); line-height: 1.5; min-width: 220px; }
.market-pulse-text b { color: var(--ink); }
.market-pulse-cta { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--green); white-space: nowrap; }
.market-pulse-cta span { display: inline-block; transition: transform .25s var(--ease-out, var(--ease)); }
.market-pulse:hover .market-pulse-cta span { transform: translateX(3px); }
@media (max-width: 700px) {
.market-pulse { flex-wrap: wrap; padding: 16px 18px; }
.market-pulse-cta { width: 100%; }
}
.retiring-strip-wrap { margin-bottom: 40px; }
.retiring-strip-wrap h3 { font-size: 16px; margin-bottom: 14px; }
.retiring-strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 172px;
gap: 14px;
overflow-x: auto;
padding-bottom: 6px;
}
.retiring-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-m);
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
transition: transform .18s var(--ease);
}
.retiring-card:hover { transform: translateY(-3px); }
.retiring-card .thumb { border-radius: 10px; margin-bottom: 6px; }
.retiring-note {
align-self: flex-start;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--red-dark);
background: var(--red-tint);
padding: 3px 9px;
border-radius: 999px;
}
.retiring-title { font-size: 13px; font-weight: 650; line-height: 1.3; }
.retiring-theme { font-size: 11.5px; color: var(--ink-muted); }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 8px; }
@media (max-width: 900px) { .collection-grid { grid-template-columns: 1fr; } }
.collection-card {
display: block;
color: inherit;
text-decoration: none;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
overflow: hidden;
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.collection-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.collection-card .thumb { aspect-ratio: 16/10; }
.collection-card-body { padding: 20px 22px 24px; }
.collection-count { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold-light); }
.collection-card-body h4 { font-size: 17px; margin: 8px 0 8px; letter-spacing: -0.01em; }
.collection-card-body p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; margin: 0 0 12px; }
.collection-by { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.news-section-heading { font-size: 22px; margin: 56px 0 22px; }
.news-section-heading:first-of-type { margin-top: 0; }
.ai-analyzing { display: flex; align-items: center; font-size: 13px; color: var(--ink-muted); margin: 10px 0; }
.ai-recognition-card {
display: flex;
gap: 14px;
align-items: center;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-m);
padding: 14px;
margin: 10px 0;
}
.ai-recognition-card .thumb { width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; }
.ai-recognition-label { font-weight: 650; font-size: 14px; }
.ai-recognition-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.indicator-row { display: flex; gap: 12px; margin: 18px 0; flex-wrap: wrap; }
.indicator-chip {
flex: 1;
min-width: 120px;
background: var(--bg-alt);
border-radius: var(--radius-s);
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 3px;
}
.indicator-chip span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); }
.indicator-chip b { font-size: 16px; }
.indicator-chip.rarity-high b, .indicator-chip.demand-high b { color: var(--red); }
.indicator-chip.rarity-medium b, .indicator-chip.demand-medium b { color: #c98a00; }
.indicator-chip.rarity-low b, .indicator-chip.demand-low b { color: var(--green); }
.price-history { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.history-head { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px; }
.history-bars { display: flex; align-items: flex-end; gap: 10px; height: 90px; }
.history-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.history-bar { width: 100%; max-width: 26px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.history-bar-col span { font-size: 10.5px; color: var(--ink-muted); }
.dup-badge { font-size: 11px; font-weight: 700; color: var(--red); background: var(--red-tint); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.dup-callout { background: var(--yellow-tint); color: #8a5a00; border-radius: var(--radius-s); padding: 12px 16px; font-size: 13px; margin-bottom: 18px; }
.collector-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 190px; gap: 14px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 48px; }
.community-pulse {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line-soft);
border: 1px solid var(--glass-border);
border-radius: var(--radius-m);
overflow: hidden;
margin-bottom: 28px;
}
.community-pulse-stat {
background: linear-gradient(160deg, rgba(201,162,39,0.055), var(--glass-bg) 70%);
padding: 18px 16px;
text-align: center;
}
.community-pulse-stat b { display: block; font-size: 24px; font-weight: 800; color: var(--ink); font-family: var(--font-mono, "SF Mono", Menlo, monospace); }
.community-pulse-stat span { display: block; font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; }
@media (max-width: 700px) { .community-pulse { grid-template-columns: repeat(2, 1fr); } }
.collector-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-m);
padding: 18px;
text-align: center;
transition: transform .18s var(--ease);
}
.collector-card:hover { transform: translateY(-3px); }
.collector-avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; }
.collector-name { font-size: 13.5px; font-weight: 650; display: block; }
.collector-theme { font-size: 11.5px; color: var(--ink-muted); display: block; margin: 3px 0 2px; }
.collector-followers { font-size: 11px; color: var(--ink-faint, var(--ink-muted)); display: block; margin-bottom: 12px; }
.post-feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 760px) { .post-feed { grid-template-columns: 1fr; } }
.post-card {
position: relative;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
overflow: hidden;
transition: transform .3s var(--ease-out, var(--ease)), box-shadow .3s var(--ease-out, var(--ease)), border-color .3s var(--ease-out, var(--ease));
}
.post-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent-gradient, var(--blue));
transform: scaleX(0);
transform-origin: left;
transition: transform .45s var(--ease-out, var(--ease));
z-index: 2;
}
.post-card:hover::before { transform: scaleX(1); }
/* Milestone posts keep the accent bar showing at rest instead of only
on hover — the same gradient bar every other card already reveals
on hover, just always-on here, so a milestone reads as distinct
while scrolling the feed rather than only via its text tag. */
.post-card.post-card-milestone::before { transform: scaleX(1); }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float, var(--shadow-md)); border-color: var(--border-hover, var(--glass-border)); }
.post-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.post-author-wrap { position: relative; display: inline-block; }
.post-author { display: flex; align-items: center; gap: 10px; }
.post-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.author-hover-card {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 25; width: 220px;
display: flex; gap: 10px; background: var(--bg-card, #17171a); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(0,0,0,0.4); padding: 14px;
opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.post-author-wrap:hover .author-hover-card, .post-author-wrap:focus-within .author-hover-card {
opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
@media (hover: none) { .author-hover-card { display: none; } }
.author-hover-body { min-width: 0; flex: 1; }
.author-hover-name { font-size: 13.5px; font-weight: 700; }
.author-hover-meta { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.post-author-name { font-size: 13.5px; font-weight: 650; display: block; }
.post-meta { font-size: 11.5px; color: var(--ink-muted); display: block; }
.post-type-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); background: var(--bg-alt); padding: 4px 10px; border-radius: 999px; }
.staff-pick-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #3a2e05; background: linear-gradient(160deg, var(--gold-light), var(--gold)); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.post-thumb { aspect-ratio: 16/9; }
.post-body { padding: 16px 18px 18px; }
.post-body h4 { font-size: 15.5px; margin-bottom: 6px; }
.post-body p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; margin-bottom: 14px; }
.post-actions { display: flex; gap: 16px; }
.post-like-btn, .post-action-btn {
display: flex; align-items: center; gap: 6px;
background: none; border: none; color: var(--ink-muted); font-size: 13px; cursor: pointer; padding: 4px 0;
}
.post-like-btn svg, .post-action-btn svg { width: 16px; height: 16px; }
.post-like-btn.liked { color: var(--red); }
.post-like-btn.liked path { fill: var(--red); stroke: var(--red); }
.post-action-btn:hover { color: var(--ink); }
.post-comments { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.post-comment { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.5; }
.top-comment-tag { flex-basis: 100%; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--gold-light); }
.comment-like-btn {
display: inline-flex; align-items: center; gap: 4px; margin-left: auto; background: none; border: none;
color: var(--ink-muted); font-size: 12px; cursor: pointer; padding: 0 0 0 6px;
}
.comment-like-btn svg { width: 13px; height: 13px; }
.comment-like-btn:hover { color: var(--ink); }
.comment-like-btn.liked { color: var(--red); }
.comment-like-btn.liked path { fill: var(--red); stroke: var(--red); }
/* User-typed text (post titles/captions, comments, row titles) has no
maxlength-enforced hard cap short enough to guarantee it never
contains one long unbroken token (a pasted URL, a string of emoji,
a word with no spaces) — wrap it inside its card instead of letting
it push the layout wide. */
.card-title, .row-title, .post-body h4, .post-body p, .post-comment span, .article-comments-list span { overflow-wrap: anywhere; }
.post-comment b { margin-right: 6px; }
.post-comment-form { display: flex; gap: 8px; margin-top: 12px; }
.post-comment-form input { flex: 1; padding: 9px 12px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg-alt); color: var(--ink); font-size: 13px; outline: none; }
.post-comment-form input:focus { border-color: var(--red); }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.achievement-badge { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; }
.achievement-badge.gold { background: rgba(201,162,39,0.16); color: var(--gold-light); }
.achievement-badge.silver { background: rgba(255,255,255,0.1); color: var(--ink-soft); }
.achievement-badge.bronze { background: rgba(138,109,62,0.22); color: #c7a86b; }
.milestone-list { display: flex; flex-direction: column; gap: 0; margin: 8px 0 40px; }
.milestone-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.milestone-row:last-child { border-bottom: none; }
.milestone-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.milestone-row b { font-size: 13.5px; font-weight: 600; }
.milestone-row span { font-size: 12px; color: var(--ink-muted); margin-left: auto; flex-shrink: 0; }
.hero-search {
position: relative;
display: flex;
align-items: center;
gap: 10px;
margin-top: 28px;
max-width: 460px;
}
.hero-search .search-box {
flex: 1;
transition: background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.hero-search .search-box:focus-within {
border-color: rgba(232,203,106,0.45);
box-shadow: 0 0 0 3px rgba(232,203,106,0.12), 0 14px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hero-search .btn { flex-shrink: 0; }
.hero-search-suggest {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
z-index: 5;
padding: 14px 16px 16px;
border-radius: var(--radius-m);
background: var(--glass-bg-strong, rgba(255,255,255,0.08));
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur, blur(16px));
-webkit-backdrop-filter: var(--glass-blur, blur(16px));
box-shadow: 0 20px 44px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
transition: opacity .22s var(--ease-out, var(--ease)), transform .22s var(--ease-out, var(--ease)), visibility .22s;
}
.hero-search:focus-within .hero-search-suggest {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.hero-search-suggest-label {
display: block;
font-family: var(--font-mono, "SF Mono", Menlo, monospace);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 10px;
}
.hero-search-suggest-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-search-chip {
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
color: rgba(255,255,255,0.82);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
padding: 7px 12px;
border-radius: 999px;
cursor: pointer;
transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease-out, var(--ease));
}
.hero-search-chip:hover {
background: rgba(232,203,106,0.14);
border-color: rgba(232,203,106,0.4);
color: #fff;
transform: translateY(-1px);
}
@media (max-width: 900px) { .hero-search-suggest { left: 50%; right: auto; transform: translate(-50%,-6px); width: min(92vw, 440px); }
.hero-search:focus-within .hero-search-suggest { transform: translate(-50%,0); } }
.pillar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
perspective: 1200px;
}
@media (max-width: 980px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-card {
position: relative;
display: block;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
padding: 30px 26px 28px;
overflow: hidden;
transform-style: preserve-3d;
transition: transform .35s var(--ease-out, var(--ease)), box-shadow .3s var(--ease-out, var(--ease)), border-color .3s var(--ease-out, var(--ease));
}
.pillar-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--line);
opacity: 0.55;
transition: background .3s var(--ease), opacity .3s var(--ease);
}
.pillar-card::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 3px;
background: var(--line);
transform: scaleX(0);
transform-origin: left;
transition: transform .5s var(--ease-out, var(--ease));
}
.pillar-card:hover {
transform: translateY(-8px) rotateX(2.5deg) rotateY(-2deg);
box-shadow: var(--shadow-float, var(--shadow-hover));
border-color: var(--border-hover, var(--glass-border));
}
.pillar-card:hover::before { opacity: 1; }
.pillar-card:hover::after { transform: scaleX(1); }
.pillar-index {
position: absolute;
top: 22px; right: 24px;
font-family: var(--font-mono, "SF Mono", Menlo, monospace);
font-size: 12px;
color: var(--ink-faint, rgba(255,255,255,0.28));
letter-spacing: 0.02em;
}
.pillar-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 52px; height: 52px;
border-radius: 14px;
background: var(--bg-alt);
margin-bottom: 20px;
transition: transform .35s var(--ease-out, var(--ease)), box-shadow .35s var(--ease-out, var(--ease));
}
.pillar-icon svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.pillar-card.marketplace .pillar-icon svg { color: var(--red); }
.pillar-card.community .pillar-icon svg { color: var(--blue); }
.pillar-card.discover .pillar-icon svg { color: var(--gold); }
.pillar-card.intelligence .pillar-icon svg { color: var(--green); }
.pillar-card:hover .pillar-icon { transform: scale(1.08) rotate(-4deg); }
.pillar-card h3 { font-size: 19.5px; letter-spacing: -0.015em; margin-bottom: 8px; }
.pillar-card p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; margin: 0; }
.pillar-stat {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 14px 0 0;
padding: 5px 11px 5px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
font-family: var(--font-mono, "SF Mono", Menlo, monospace);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ink-muted);
transition: background .3s var(--ease);
}
.pillar-stat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; animation: pillarStatPulse 2.2s infinite; }
@keyframes pillarStatPulse {
0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
70% { box-shadow: 0 0 0 5px transparent; opacity: 0.7; }
100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
.pillar-card.marketplace .pillar-stat { color: var(--red); background: rgba(217,30,54,0.1); }
.pillar-card.community .pillar-stat { color: var(--blue); background: rgba(74,143,201,0.1); }
.pillar-card.discover .pillar-stat { color: var(--gold-dark, var(--gold)); background: rgba(201,162,39,0.1); }
.pillar-card.intelligence .pillar-stat { color: var(--green); background: rgba(58,168,107,0.1); }
.pillar-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
font-size: 13px;
font-weight: 600;
color: var(--ink-muted);
}
.pillar-arrow span { display: inline-block; transition: transform .3s var(--ease-out, var(--ease)); }
.pillar-card:hover .pillar-arrow span { transform: translateX(4px); }
.pillar-card.marketplace::before, .pillar-card.marketplace .pillar-icon { background: rgba(217,30,54,0.14); }
.pillar-card.marketplace::before, .pillar-card.marketplace::after { background: var(--red); }
.pillar-card.community::before, .pillar-card.community::after { background: var(--blue); }
.pillar-card.community .pillar-icon { background: rgba(74,143,201,0.14); }
.pillar-card.discover::before, .pillar-card.discover::after { background: var(--gold); }
.pillar-card.discover .pillar-icon { background: rgba(201,162,39,0.14); }
.pillar-card.intelligence::before, .pillar-card.intelligence::after { background: var(--green); }
.pillar-card.intelligence .pillar-icon { background: rgba(58,168,107,0.14); }
.pillar-card.marketplace:hover { box-shadow: var(--shadow-glow-red, var(--shadow-float)); border-color: rgba(217,30,54,0.4); }
.pillar-card.discover:hover { box-shadow: var(--shadow-glow-gold, var(--shadow-float)); border-color: rgba(201,162,39,0.4); }
.pillar-card.community:hover { box-shadow: var(--shadow-glow-blue, var(--shadow-float)); border-color: rgba(74,143,201,0.4); }
.pillar-card.intelligence:hover { box-shadow: var(--shadow-glow-green, var(--shadow-float)); border-color: rgba(58,168,107,0.4); }
.pillar-card.marketplace:hover .pillar-icon { box-shadow: 0 0 0 8px rgba(217,30,54,0.12); }
.pillar-card.community:hover .pillar-icon { box-shadow: 0 0 0 8px rgba(74,143,201,0.12); }
.pillar-card.discover:hover .pillar-icon { box-shadow: 0 0 0 8px rgba(201,162,39,0.12); }
.pillar-card.intelligence:hover .pillar-icon { box-shadow: 0 0 0 8px rgba(58,168,107,0.12); }
@media (prefers-reduced-motion: reduce) {
.pillar-card { transition: none; }
.pillar-card:hover { transform: none; }
.pillar-stat::before { animation: none; }
}
.preview-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .preview-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .preview-strip { grid-template-columns: 1fr; } }
.preview-tile {
display: flex;
flex-direction: column;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-m);
padding: 14px;
transition: transform .18s var(--ease);
}
.preview-tile:hover { transform: translateY(-3px); }
.preview-tile-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold-light); margin-bottom: 10px; }
.preview-tile .thumb { border-radius: 10px; margin-bottom: 10px; aspect-ratio: 4/3; }
.preview-tile-avatar { width: 100%; aspect-ratio: 4/3; border-radius: 10px; margin-bottom: 10px; }
.preview-tile-title { font-size: 13px; font-weight: 650; line-height: 1.35; display: block; }
.preview-tile-meta { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; display: block; }
.mi-disclaimer {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
border-radius: var(--radius-m);
border-left: 3px solid var(--blue);
padding: 16px 20px;
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.55;
margin: 44px 0 8px;
}
.mi-disclaimer b { color: var(--ink); }
.sparkle-icon { width: 11px; height: 11px; flex-shrink: 0; }
.mi-zone-sub { font-size: 13.5px; color: var(--ink-muted); margin: -8px 0 18px; max-width: 620px; }
/* Monospace, tabular numerals for every price/percent/score figure —
the one deliberate typographic break from the rest of the site,
giving Market Intelligence a distinct "terminal" read. */
.mi-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* ---------- Illustrative-data notice (prominent, near the header) ---------- */
.mi-disclaimer-top {
display: flex;
align-items: flex-start;
gap: 10px;
background: rgba(201,162,39,0.1);
border: 1px solid rgba(201,162,39,0.28);
border-radius: var(--radius-m);
padding: 13px 18px;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
margin-bottom: 36px;
}
.mi-disclaimer-top svg { color: var(--gold-light); flex-shrink: 0; margin-top: 2px; }
.mi-disclaimer-top b { color: var(--ink); }
/* ---------- AI Market Intelligence generator entry point ---------- */
.mi-ai-generate-box {
display: flex;
gap: 18px;
align-items: flex-start;
background: linear-gradient(135deg, rgba(201,162,39,0.12), rgba(91,87,214,0.10));
border: 1px solid rgba(201,162,39,0.28);
border-radius: var(--radius-l);
padding: 24px 26px;
margin-bottom: 30px;
}
.mi-ai-generate-icon {
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: var(--accent-gradient);
color: var(--near-black);
box-shadow: var(--shadow-glow-gold);
}
.mi-ai-generate-body { flex: 1; min-width: 0; }
.mi-ai-generate-body h2 { font-size: 18px; margin: 0 0 6px; }
.mi-ai-generate-body p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 14px; max-width: 640px; }
.mi-ai-generate-form { display: flex; gap: 10px; flex-wrap: wrap; }
.mi-ai-generate-form input {
flex: 1;
min-width: 220px;
padding: 11px 16px;
border-radius: var(--radius-s);
border: 1px solid var(--line);
background: var(--bg-card, #17171a);
color: var(--ink);
font-size: 13.5px;
outline: none;
transition: border-color 0.2s var(--ease);
}
.mi-ai-generate-form input:focus { border-color: var(--gold); }
@media (max-width: 640px) { .mi-ai-generate-box { flex-direction: column; } .mi-ai-generate-form { flex-direction: column; } .mi-ai-generate-form button { width: 100%; } }
.mi-ai-generate-form input:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.25); }
/* Inline status line under the generate form — one element, restyled per
state (loading / success / error / info). No alert()/confirm() anywhere. */
.mi-ai-generate-status {
display: none;
margin-top: 12px;
font-size: 13px;
line-height: 1.5;
border-radius: var(--radius-s);
padding: 10px 14px;
align-items: center;
gap: 10px;
}
.mi-ai-generate-status.mi-ai-status-loading,
.mi-ai-generate-status.mi-ai-status-success,
.mi-ai-generate-status.mi-ai-status-error,
.mi-ai-generate-status.mi-ai-status-info { display: flex; }
.mi-ai-generate-status b { color: var(--ink); font-weight: 600; }
.mi-ai-status-loading { background: rgba(201,162,39,0.10); border: 1px solid rgba(201,162,39,0.28); color: var(--ink-soft); }
.mi-ai-status-success { background: rgba(52,168,110,0.12); border: 1px solid rgba(52,168,110,0.38); color: var(--ink); }
.mi-ai-status-error { background: rgba(201,64,64,0.12); border: 1px solid rgba(201,64,64,0.40); color: var(--ink); }
.mi-ai-status-info { background: rgba(91,135,214,0.12); border: 1px solid rgba(91,135,214,0.38); color: var(--ink); }
.mi-ai-status-spinner {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--line-soft);
border-top-color: var(--gold);
animation: sa-spin 0.75s linear infinite;
}
/* Generated-analyses zone: same grid as the tracked sets, just a
scoped wrapper so it can be hidden until the first card exists. */
.mi-ai-results { margin-bottom: 8px; }
.mi-ai-results[hidden] { display: none; }
.mi-ai-card-new { animation: mi-ai-card-pop 2.2s var(--ease); box-shadow: 0 0 0 2px var(--gold), var(--shadow-md); }
@keyframes mi-ai-card-pop {
0% { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(201,162,39,0.55); }
100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
}
@media (prefers-reduced-motion: reduce) {
.mi-ai-status-spinner { animation: none; }
.mi-ai-card-new { animation: none; }
}
/* Same visual language as .mi-disclaimer-top (gold-tinted callout strip)
for a generic "highlight one link" banner elsewhere on the site — the
News digest opt-in prompt is the first user, but nothing here is
News-specific. */
.inline-callout {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 16px;
background: rgba(201,162,39,0.1);
border: 1px solid rgba(201,162,39,0.28);
border-radius: var(--radius-m);
padding: 13px 18px;
font-size: 13.5px;
color: var(--ink-soft);
line-height: 1.5;
margin-bottom: 28px;
}
.inline-callout b { color: var(--ink); }
.inline-callout a { font-weight: 700; color: var(--red); white-space: nowrap; }
/* ---------- Live Market Ticker ----------
A deliberate dark "trading floor" strip dropped into an otherwise
light page — the same intentional typographic break .mi-num makes
for numbers, just at the scale of a whole section. This is the
single biggest visual signal that Market Intelligence is a live
feed, not a static page. */
.mi-ticker {
position: relative;
overflow: hidden;
margin: 0 0 28px;
padding: 13px 0;
border-radius: var(--radius-m);
background: var(--near-black, #0c0c0e);
border: 1px solid rgba(255,255,255,0.08);
}
.mi-ticker::before, .mi-ticker::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 56px;
z-index: 2;
pointer-events: none;
}
.mi-ticker::before { left: 0; background: linear-gradient(90deg, var(--near-black, #0c0c0e), transparent); }
.mi-ticker::after { right: 0; background: linear-gradient(270deg, var(--near-black, #0c0c0e), transparent); }
.mi-ticker-track {
display: inline-flex;
white-space: nowrap;
animation: mi-ticker-scroll 46s linear infinite;
}
.mi-ticker:hover .mi-ticker-track, .mi-ticker:focus-within .mi-ticker-track { animation-play-state: paused; }
@keyframes mi-ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.mi-ticker-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 26px;
font-family: var(--font-mono);
font-size: 12.5px;
color: rgba(255,255,255,0.68);
border-right: 1px solid rgba(255,255,255,0.08);
}
.mi-ticker-item b { color: rgba(255,255,255,0.92); }
.mi-ticker-name { color: rgba(255,255,255,0.85); font-weight: 600; }
.mi-ticker-badge { padding: 3px 8px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) {
.mi-ticker-track { animation: none; }
.mi-ticker { overflow-x: auto; }
}
/* ---------- Market snapshot strip ---------- */
.mi-snapshot-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1px;
background: var(--glass-border);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
overflow: hidden;
margin-bottom: 48px;
}
.mi-snapshot-stat {
display: flex;
flex-direction: column;
gap: 4px;
background: var(--glass-bg-strong);
padding: 16px 18px;
}
.mi-snapshot-value { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.mi-snapshot-label { font-size: 11px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
@media (max-width: 900px) { .mi-snapshot-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .mi-snapshot-strip { grid-template-columns: repeat(2, 1fr); } }
/* ---------- Market Score badge (shared: mover cards + set page) ---------- */
.mi-score-badge {
display: inline-flex;
align-items: baseline;
gap: 2px;
padding: 6px 11px;
border-radius: 999px;
font-weight: 700;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 15px;
line-height: 1;
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.mi-score-badge small { font-size: 10px; font-weight: 600; opacity: 0.75; }
/* One consistent badge color across every tier — Premium/Strong/
Watch/Cooling is still communicated through the tier label text
(e.g. on the set analysis page), it just no longer changes the
badge's color from card to card across a grid. Scoped to
.mi-score-badge specifically (not just the bare tier class) since
that same tier class is also dropped onto the whole mover card
for the accent-bar hook — without this scoping, the badge's text
color would leak and inherit into the card's title and price
text, since color (unlike background) is inherited by default. */
.mi-score-badge.mi-score-premium,
.mi-score-badge.mi-score-strong,
.mi-score-badge.mi-score-watch,
.mi-score-badge.mi-score-cooling,
.mi-score-badge.mi-score-unrated {
background: linear-gradient(135deg, var(--gold-light), var(--gold));
color: #241c02;
}
/* ---------- Price / growth primitives ---------- */
.mi-price-pair { display: flex; gap: 20px; margin: 10px 0; }
.mi-price-pair > div { display: flex; flex-direction: column; gap: 2px; }
.mi-price-label { font-size: 10.5px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.mi-price-value { font-size: 17px; font-weight: 700; }
.mi-growth-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
@media (max-width: 480px) { .mi-growth-row { grid-template-columns: repeat(2, 1fr); row-gap: 12px; } }
.mi-growth-row > div { display: flex; flex-direction: column; gap: 3px; }
.mi-growth-row small { font-size: 10px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.mi-growth-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700; }
.mi-growth-up { color: var(--green); }
.mi-growth-down { color: var(--red); }
.mi-growth-flat { color: var(--ink-muted); }
.mi-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.mi-pill { font-size: 11px; font-weight: 600; background: var(--bg-alt); color: var(--ink-soft); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-soft); }
/* Jump links to each Market Intelligence zone — the page has grown to
five real sections (Ticker, Snapshot, Movers, Weekly, All Tracked
Sets), so a quick way to skip straight to one is worth the two extra
lines of markup. Plain anchor links; html { scroll-behavior: smooth }
(set sitewide already) handles the scroll, no JS needed. */
.mi-quicknav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.mi-quicknav a {
font-size: 12.5px; font-weight: 650; color: var(--ink-soft);
background: var(--bg-alt); border: 1px solid var(--line-soft);
padding: 12px 14px; border-radius: 999px;
transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.mi-quicknav a:hover { color: var(--ink); border-color: var(--border-hover); background: var(--charcoal-soft); }
.mi-why-list { margin: 10px 0 12px; padding-left: 18px; }
.mi-why-list li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 4px; }
.mi-card-theme { display: block; font-size: 11px; color: var(--ink-muted); font-weight: 600; margin-bottom: 6px; }
.mi-card-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--gold-light); margin-top: 4px; }
.mi-card-cta span { transition: transform .18s var(--ease); }
.mi-tag-scarce { color: var(--red-dark); font-weight: 650; }
/* ---------- Sparkline ---------- */
.mi-sparkline { display: block; width: 100%; height: 100%; }
.mi-growth-up .mi-sparkline, .mi-sparkline-up { color: var(--green); }
.mi-growth-down .mi-sparkline, .mi-sparkline-down { color: var(--red); }
/* ---------- LEGO Market Movers ---------- */
.mi-mover-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 48px; }
@media (max-width: 900px) { .mi-mover-grid { grid-template-columns: 1fr; } }
.mi-mover-card {
position: relative;
display: block;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
overflow: hidden;
transition: transform .3s var(--ease-out, var(--ease)), box-shadow .3s var(--ease-out, var(--ease)), border-color .3s var(--ease-out, var(--ease));
}
/* One consistent gold accent bar on every card — a quiet premium
signature rather than a tier-by-tier color code. */
.mi-mover-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1; background: linear-gradient(90deg, var(--gold-light), var(--gold)); }
.mi-mover-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float, var(--shadow-md)); border-color: var(--border-hover, var(--glass-border)); }
.mi-mover-card:hover .mi-card-cta span { transform: translateX(3px); }
.mi-mover-top { position: relative; }
.mi-mover-top .thumb { aspect-ratio: 21/9; }
.mi-mover-top .mi-score-badge { position: absolute; top: 12px; right: 12px; }
.mi-mover-top .watch-btn { left: 12px; right: auto; }
.mi-weekly-row .wishlist-btn { position: static; width: 32px; height: 32px; flex-shrink: 0; }
.mi-mover-body { padding: 16px 20px 20px; }
.mi-mover-body h4 { font-size: 17px; margin-bottom: 2px; transition: color .15s var(--ease); }
.mi-mover-card:hover .mi-mover-body h4 { color: var(--gold-light); }
/* ---------- LEGO Market Weekly ---------- */
.mi-weekly-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 44px; }
@media (max-width: 900px) { .mi-weekly-grid { grid-template-columns: 1fr; } }
.mi-weekly-quadrant {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
padding: 18px 20px 10px;
min-width: 0; /* let the 1fr grid track shrink below its content's min-content
width on mobile instead of forcing horizontal page overflow */
}
.mi-weekly-row { min-width: 0; }
.mi-weekly-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.mi-weekly-emoji { font-size: 16px; line-height: 1; }
.mi-weekly-quadrant > p { font-size: 12px; color: var(--ink-muted); margin: 0 0 12px; }
.portfolio-trend-row {
display: flex; align-items: center; gap: 16px;
border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 14px 18px;
}
.portfolio-trend-row .mi-sparkline { width: 220px; height: 48px; flex-shrink: 0; }
.mi-weekly-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 0;
border-top: 1px solid var(--line-soft);
transition: opacity .15s var(--ease);
}
.mi-weekly-row:hover { opacity: 0.82; }
.mi-weekly-row .thumb { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; }
.mi-weekly-row-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mi-weekly-row-body b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-weekly-row-body span { font-size: 11px; color: var(--ink-muted); }
.mi-weekly-row-metric { font-size: 12px; font-weight: 650; flex-shrink: 0; text-align: right; }
/* ---------- All Tracked Sets: Grid/Table view toggle ---------- */
.mi-results-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 8px; }
.mi-results-row .results-count { padding-bottom: 0; }
.mi-view-toggle { display: inline-flex; border: 1px solid var(--glass-border); border-radius: 999px; padding: 3px; gap: 2px; }
.mi-view-toggle button {
background: none; border: none; color: var(--ink-muted); font-size: 12.5px; font-weight: 650;
padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.mi-view-toggle button:hover { color: var(--ink); }
.mi-view-toggle button.active { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #241c02; }
.thumb.thumb-sm { width: 40px; height: 40px; aspect-ratio: 1/1; border-radius: 8px; flex-shrink: 0; }
/* ---------- All Tracked Sets: table view ---------- */
.mi-table-wrap { overflow-x: auto; margin-bottom: 20px; border: 1px solid var(--glass-border); border-radius: var(--radius-l); }
.mi-all-sets-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.mi-all-sets-table th, .mi-all-sets-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.mi-all-sets-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); font-weight: 650; background: var(--glass-bg); }
.mi-all-sets-table tbody tr:last-child td { border-bottom: none; }
.mi-all-sets-table tbody tr:hover { background: var(--glass-bg); }
.mi-all-sets-table .mi-num { text-align: right; font-variant-numeric: tabular-nums; }
.mi-all-sets-table th.mi-num { text-align: right; }
.mi-sortable { cursor: pointer; user-select: none; }
.mi-sortable:hover { color: var(--ink); }
.mi-table-check { width: 44px; text-align: center; }
.mi-table-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--red); }
.mi-table-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; }
.mi-table-set-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.mi-table-set-link:hover .mi-table-set-info b { color: var(--gold-light); }
.mi-table-set-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-table-set-info b { font-size: 13px; transition: color .15s var(--ease); display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-table-set-info small { font-size: 11px; color: var(--ink-muted); }
.mi-table-score .mi-score-badge { padding: 3px 9px; font-size: 12px; box-shadow: none; }
/* ---------- Multi-set comparison tray ---------- */
.mi-compare-tray {
display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: var(--radius-l);
padding: 12px 16px; margin-bottom: 16px;
}
.mi-compare-tray-label { font-size: 12.5px; color: var(--ink-muted); font-weight: 600; flex-shrink: 0; }
.mi-compare-chip-row { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.mi-compare-chip {
display: inline-flex; align-items: center; gap: 7px; background: var(--charcoal-soft, var(--bg-alt));
border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 8px 4px 4px; font-size: 12.5px; font-weight: 600;
}
.mi-compare-chip .thumb-sm { width: 22px; height: 22px; border-radius: 5px; }
.mi-compare-chip-remove {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; background: none; border: none; border-radius: 50%;
color: var(--ink-muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
transition: background .15s var(--ease), color .15s var(--ease);
}
.mi-compare-chip-remove:hover { color: var(--ink); background: rgba(255,255,255,0.08); }
.mi-compare-tray-actions { display: flex; gap: 8px; flex-shrink: 0; }
.mi-compare-modal-panel { max-width: 760px; }
.mi-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }
.mi-compare-card {
border: 1px solid var(--glass-border); border-radius: var(--radius-m); padding: 14px; background: var(--glass-bg);
display: flex; flex-direction: column; gap: 8px;
}
.mi-compare-card .thumb { aspect-ratio: 1/1; border-radius: var(--radius-s, 8px); }
.mi-compare-card h4 { font-size: 14px; margin: 0; }
.mi-compare-card .mi-card-theme { font-size: 10.5px; color: var(--ink-muted); }
.mi-compare-card .mi-price-pair { gap: 12px; margin: 4px 0; }
.mi-compare-card .mi-price-value { font-size: 14px; }
.mi-compare-card .mi-growth-row { grid-template-columns: repeat(2, 1fr); margin: 4px 0; }
.mi-compare-card .mi-card-cta { font-size: 12px; color: var(--gold-light); text-decoration: none; margin-top: auto; }
.mi-compare-factor-wrap { overflow-x: auto; }
.mi-compare-factor-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mi-compare-factor-table th, .mi-compare-factor-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.mi-compare-factor-table thead th { color: var(--ink-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 650; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-compare-factor-table .mi-num { text-align: right; font-variant-numeric: tabular-nums; }
.mi-compare-factor-label { display: block; font-weight: 600; }
.mi-compare-factor-table td small { display: block; color: var(--ink-muted); font-size: 10.5px; font-weight: 400; margin-top: 1px; max-width: 220px; }
.mi-compare-factor-table tfoot td { border-bottom: none; border-top: 2px solid var(--glass-border); font-weight: 700; }
@media (max-width: 640px) {
.mi-compare-modal-panel { max-width: 100%; }
.mi-compare-factor-table td small { display: none; }
}
/* ============================================================
Individual set analysis page (set-analysis.html)
============================================================ */
.sa-header {
display: flex;
gap: 24px;
align-items: flex-start;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
padding: 26px 28px;
margin: 8px 0 32px;
}
.sa-thumb { width: 120px; height: 120px; border-radius: var(--radius-m); flex-shrink: 0; }
.sa-header-body { flex: 1; min-width: 0; }
.sa-header-body h1 { font-size: 26px; margin: 4px 0 6px; }
.sa-retirement-status { font-size: 13px; color: var(--ink-soft); margin: 0; }
.sa-score-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.sa-score-badge-big { font-size: 26px; padding: 12px 18px; }
.sa-score-badge-big small { font-size: 13px; }
.sa-score-tier { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); }
.sa-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .sa-grid { grid-template-columns: 1fr; } }
.sa-main { display: flex; flex-direction: column; gap: 18px; }
.sa-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px; }
.sa-card { padding: 22px 24px; }
.sa-card h3 { font-size: 14px; margin-bottom: 4px; }
.sa-price-pair { gap: 32px; }
.sa-price-pair .mi-price-value { font-size: 24px; }
.sa-growth-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 18px; }
.sa-growth-table > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--bg-alt); border-radius: var(--radius-s); }
.sa-growth-table span { font-size: 10.5px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.sa-growth-table .mi-growth-delta { font-size: 14px; }
@media (max-width: 560px) { .sa-growth-table { grid-template-columns: repeat(2, 1fr); } }
.sa-sparkline-wrap { margin-top: 8px; }
.sa-why-list { padding-left: 20px; margin: 6px 0 0; }
.sa-why-list li { font-size: 13.5px; margin-bottom: 7px; }
.sa-outlook { font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; margin: 6px 0 0; }
.sa-sentiment { border-left: 3px solid var(--gold); }
.sa-sentiment-quote {
font-size: 16px;
font-weight: 600;
color: var(--ink);
line-height: 1.45;
margin: 8px 0 10px;
font-style: italic;
}
.sa-sentiment-summary { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 8px; }
.sa-sentiment-source { font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); }
.sa-factor-list { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 4px; }
.sa-factor-row { display: flex; flex-direction: column; gap: 5px; }
.sa-factor-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); }
.sa-factor-bar { height: 6px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.sa-factor-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.sa-score-note { font-size: 12px; color: var(--ink-muted); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.sa-disclaimer { margin-top: 32px; }
/* ---------- AI-generated set-analysis additions ---------- */
.mi-pill-ai {
background: linear-gradient(135deg, rgba(201,162,39,0.22), rgba(91,87,214,0.22));
border-color: rgba(201,162,39,0.4);
color: var(--gold-light);
}
.sa-ai-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
@media (max-width: 560px) { .sa-ai-two-col { grid-template-columns: 1fr; } }
.sa-pricing-intro { font-size: 12.5px; color: var(--ink-muted); margin: -2px 0 14px; }
.sa-pricing-grid { display: flex; flex-direction: column; gap: 14px; }
.sa-pricing-row { padding: 12px 14px; background: var(--bg-alt); border: 1px solid var(--line-soft); border-radius: var(--radius-s); }
.sa-pricing-row-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.sa-pricing-rationale { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; margin: 0; }
/* ---------- AI generation loading / error states ----------
Reuses .sa-detail's own width/spacing (no wrapper override needed)
so these states sit exactly where the finished page would. */
.sa-loading-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 90px 20px;
}
.sa-loading-spinner {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid var(--line-soft);
border-top-color: var(--gold);
animation: sa-spin 0.85s linear infinite;
margin-bottom: 18px;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-loading-title { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
.sa-loading-stage {
font-size: 13px;
color: var(--ink-muted);
margin: 4px 0 0;
min-height: 18px;
animation: sa-loading-fade 0.4s var(--ease);
}
@keyframes sa-loading-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.sa-error-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
padding: 70px 20px;
max-width: 460px;
margin: 0 auto;
}
.sa-error-state svg { color: var(--ink-muted); margin-bottom: 10px; }
.sa-error-state h2 { font-size: 18px; margin: 0 0 6px; }
.sa-error-state p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 18px; }
.sa-error-retry { display: flex; gap: 10px; width: 100%; }
.sa-error-retry input {
flex: 1;
padding: 10px 14px;
border-radius: var(--radius-s);
border: 1px solid var(--line);
background: var(--bg-card, #17171a);
color: var(--ink);
font-size: 13.5px;
outline: none;
}
.sa-error-retry input:focus { border-color: var(--gold); }
@media (max-width: 480px) { .sa-error-retry { flex-direction: column; } }
/* Visually-hidden but screen-reader-accessible text — used for form
labels on fields whose visual design relies on a placeholder alone
(checkout, listing contact form) so the field still has a real
accessible name without changing how it looks. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -60px;
left: 12px;
z-index: 1000;
background: var(--ink);
color: #fff;
padding: 12px 20px;
border-radius: var(--radius-s);
font-size: 13.5px;
font-weight: 650;
text-decoration: none;
box-shadow: var(--shadow-lg);
transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }
::selection { background: var(--gold); color: #241c02; }
:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 4px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.range-inputs input:focus-visible, .filter-field input:focus-visible, .filter-field select:focus-visible { outline: none; }
.range-inputs input:focus, .filter-field > input[type="text"]:focus, .filter-field > select:focus { box-shadow: 0 0 0 3px rgba(217,30,54,0.25); }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; border: 2px solid var(--bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); background-clip: padding-box; }
.stat-value, .card-price, .estimate-range,
.overview-card-meta, .fee-row b,
#listedAmount, #feeAmount, #receiveAmount {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.btn:active { transform: translateY(0) scale(0.97); transition-duration: .09s; }
.btn-primary:active { box-shadow: 0 4px 12px rgba(217,30,54,0.35), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.18); }
.card:hover, .news-card:hover, .mi-card:hover, .mi-gem-card:hover,
.overview-card-link:hover, .theme-tile:hover, .mini-card:hover,
.post-card:hover, .collector-card:hover, .step:hover {
border-color: var(--border-hover);
}
/* Tactile press feedback on clickable cards — matches the .btn:active
pattern so tapping a card feels as intentional as tapping a button,
instead of only links/buttons giving feedback. */
.card:active, .news-card:active, .mi-card:active, .mi-gem-card:active,
.post-card:active, .collector-card:active, .pillar-card:active {
transform: translateY(-2px) scale(0.985);
transition-duration: .09s;
}
@media (prefers-reduced-motion: reduce) {
.card:active, .news-card:active, .mi-card:active, .mi-gem-card:active,
.post-card:active, .collector-card:active, .pillar-card:active { transform: none; }
}
.card-title, .news-title, .post-body h4 {
transition: color .15s var(--ease);
}
.card:hover .card-title,
.news-card:hover .news-title,
.post-card:hover .post-body h4 {
color: var(--gold-light);
}
a { transition: color .15s var(--ease); }
.nav { box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 30px rgba(0,0,0,0.32); }
.news-section-heading, .related-heading { letter-spacing: -0.01em; }
.grid:empty,
.preview-strip:empty,
.recent-strip:empty,
.overview-card-row:empty,
#miActSoon:empty,
#miTrendingThemes:empty,
#miWantedSets:empty,
#miHiddenGems:empty,
[id$="Grid"]:empty,
[id$="Strip"]:empty,
[id$="List"]:empty,
[id$="Highlights"]:empty,
[id$="Summary"]:empty {
min-height: 220px;
border-radius: var(--radius-m);
background: linear-gradient(90deg, var(--bg-alt) 25%, var(--glass-bg-strong, rgba(255,255,255,0.07)) 37%, var(--bg-alt) 63%);
background-size: 400% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
FUTURE VISION DEMO — concept-preview-only additions.
Everything below this line exists only in the brickcapital-future
copy, built from the product audit, so it can be reviewed
side-by-side with the live prototype before anything is merged.
============================================================ */
/* ---------- Nav icon buttons (notifications / messages) ---------- */
.nav-icon-wrap { position: relative; display: flex; align-items: center; }
.nav-icon-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--ink-soft);
cursor: pointer;
transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.nav-icon-btn:hover { background: var(--glass-bg-strong); color: var(--ink); transform: translateY(-1px); }
.nav-icon-btn:active { transform: translateY(0) scale(0.92); transition-duration: .09s; }
.nav-icon-btn svg { width: 18px; height: 18px; }
.nav-icon-badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--red);
color: #fff;
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg, #0c0c0e);
}
.nav-dropdown {
position: absolute;
top: 48px;
right: 0;
width: 340px;
max-width: calc(100vw - 32px);
max-height: 420px;
overflow-y: auto;
background: #1c1c1f;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-m);
box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.4);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
z-index: 210;
}
.nav-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
font-size: 13px;
font-weight: 700;
color: var(--ink);
border-bottom: 1px solid var(--glass-border-dark);
}
.nav-dropdown-head span { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); }
.nav-dropdown-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--glass-border-dark);
position: relative;
color: inherit;
text-decoration: none;
transition: background .12s var(--ease);
}
a.nav-dropdown-item:hover { background: var(--glass-bg-strong); }
.nav-dropdown-item:last-child { border-bottom: none; }
.nav-dropdown-item.unread { background: rgba(201,162,39,0.08); }
.nav-dropdown-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--glass-bg-strong);
color: var(--ink-soft);
}
.nav-dropdown-icon svg { width: 15px; height: 15px; }
.notif-alert, .notif-retire { color: var(--red); }
.notif-follow, .notif-message { color: var(--blue); }
.notif-like, .notif-comment { color: var(--gold-light); }
.notif-sold { color: var(--green); }
.nav-dropdown-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.4; margin: 0; }
.nav-dropdown-body span { font-size: 11px; color: var(--ink-muted); margin-top: 4px; display: block; }
.nav-dropdown-dot { position: absolute; top: 16px; right: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); }
.nav-dropdown-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--ink-muted); }
.nav-dropdown-foot { padding: 10px 16px; text-align: center; }
.nav-dropdown-foot a { font-size: 12.5px; color: var(--ink-soft); font-weight: 650; }
.nav-dropdown-foot a:hover { color: var(--ink); }
/* ---------- Generic modal (Make an offer, etc.) ---------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(4,4,6,0.6);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 300;
opacity: 0;
visibility: hidden;
transition: opacity .2s var(--ease), visibility .2s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-panel {
width: 100%;
max-width: 440px;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--bg-card, #17171a);
border: 1px solid var(--glass-border);
border-radius: var(--radius-l);
box-shadow: var(--shadow-float);
padding: 28px;
transform: translateY(10px) scale(0.98);
transition: transform .2s var(--ease);
}
.modal-overlay.open .modal-panel { transform: translateY(0) scale(1); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.modal-head h3 { font-size: 20px; letter-spacing: -0.01em; }
.modal-close { background: none; border: none; color: var(--ink-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; }
.modal-close:hover { color: var(--ink); }
.modal-sub { font-size: 13.5px; color: var(--ink-muted); margin-bottom: 18px; }
.modal-panel .field { margin-bottom: 14px; }
.modal-foot { display: flex; gap: 10px; margin-top: 20px; }
.modal-foot .btn { flex: 1; }
/* ---------- Trust signal chips (seller page) ---------- */
.trust-signal-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.trust-signal-chip {
display: flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 650;
color: var(--ink-soft);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
padding: 7px 13px;
border-radius: 999px;
}
.trust-signal-chip svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
/* ---------- Order tracking stepper ---------- */
.order-tracker { display: flex; align-items: flex-start; margin: 28px 0; }
.order-step { flex: 1; text-align: center; position: relative; }
.order-step-dot {
width: 30px; height: 30px; border-radius: 50%;
background: var(--glass-bg-strong); border: 2px solid var(--glass-border);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 10px; font-size: 13px; font-weight: 800; color: var(--ink-muted);
position: relative; z-index: 2;
}
.order-step.done .order-step-dot { background: var(--green); border-color: var(--green); color: #fff; }
.order-step.current .order-step-dot { background: var(--gold); border-color: var(--gold); color: #241c02; box-shadow: 0 0 0 5px rgba(201,162,39,0.16); }
.order-step-label { font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.order-step.done .order-step-label, .order-step.current .order-step-label { color: var(--ink); }
.order-step::after {
content: "";
position: absolute;
top: 15px; left: 50%; width: 100%; height: 2px;
background: var(--glass-border);
z-index: 1;
}
.order-step:last-child::after { display: none; }
.order-step.done::after { background: var(--green); }
/* ---------- Settings panel ---------- */
.settings-block { max-width: 560px; margin-bottom: 32px; }
.settings-block h3 { font-size: 16px; margin-bottom: 4px; }
.settings-block .settings-sub, .tab-panel > .settings-sub { font-size: 13px; color: var(--ink-muted); margin-bottom: 16px; }
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--glass-border);
gap: 16px;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: 14px; font-weight: 600; }
.settings-row-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
position: absolute; inset: 0; background: var(--glass-border);
border-radius: 999px; cursor: pointer; transition: background .18s var(--ease);
}
.switch-track::before {
content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform .18s var(--ease);
}
.switch input:checked + .switch-track { background: var(--green); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
/* ---------- Legal / static prose pages ---------- */
.legal-content { max-width: 760px; }
.legal-content h2 { font-size: 20px; margin: 32px 0 12px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; }
.legal-updated { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 28px; }
/* ---------- Messages page ---------- */
.messages-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--glass-border); border-radius: var(--radius-l); overflow: hidden; min-height: 560px; background: var(--glass-bg); }
.messages-list { border-right: 1px solid var(--glass-border); overflow-y: auto; max-height: 640px; }
.message-list-item { display: flex; gap: 12px; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--glass-border); transition: background .15s var(--ease); }
.message-list-item:hover { background: var(--glass-bg-strong); }
.message-list-item.active { background: var(--glass-bg-strong); box-shadow: inset 3px 0 0 var(--gold); }
.message-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(145deg, var(--blue), #5aa8f5); }
.message-list-main { flex: 1; min-width: 0; }
.message-list-name { font-size: 13.5px; font-weight: 700; display: flex; justify-content: space-between; gap: 6px; }
.message-list-name span { font-weight: 500; font-size: 11px; color: var(--ink-muted); }
.message-list-sub { font-size: 12px; color: var(--ink-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-list-item.unread .message-list-sub { color: var(--ink-soft); font-weight: 650; }
.message-list-item.unread .message-list-name b { position: relative; }
.message-thread { display: flex; flex-direction: column; height: 100%; }
.message-thread-head { padding: 16px 20px; border-bottom: 1px solid var(--glass-border); display: flex; align-items: center; gap: 12px; }
.message-thread-head-name { font-size: 15px; font-weight: 700; }
.message-thread-head-sub { font-size: 12px; color: var(--ink-muted); }
.message-thread-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.message-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.message-bubble.them { align-self: flex-start; background: var(--glass-bg-strong); border-bottom-left-radius: 4px; }
.message-bubble.me { align-self: flex-end; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #241c02; border-bottom-right-radius: 4px; font-weight: 550; }
.message-bubble-time { font-size: 10.5px; color: var(--ink-muted); margin-top: 4px; display: block; }
.message-bubble.me .message-bubble-time { color: rgba(36,28,2,0.6); }
.message-thread-foot { padding: 14px 16px; border-top: 1px solid var(--glass-border); display: flex; gap: 10px; }
.message-thread-foot input { flex: 1; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 999px; padding: 10px 16px; color: var(--ink); font-size: 13.5px; }
.message-thread-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-muted); font-size: 13.5px; }
@media (max-width: 760px) {
.messages-layout { grid-template-columns: 1fr; }
.messages-list.has-active { display: none; }
.message-thread.hidden-mobile { display: none; }
}
/* ---------- New pillar/feature badges used across the demo ---------- */
.new-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--gold-light);
background: rgba(201,162,39,0.14);
border: 1px solid rgba(201,162,39,0.3);
padding: 3px 9px;
border-radius: 999px;
margin-left: 8px;
vertical-align: middle;
}
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; max-width: 720px; }
.form-grid .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
/* ============================================================
LAUNCH POLISH PASS — completeness-audit implementation.
Toast error state, danger buttons, inline field validation,
breadcrumbs, nav search, pagination, avatar upload, terms
checkbox, article reader modal, and a few small empty/danger
states used by the new account features.
============================================================ */
.toast.error { background: rgba(140,20,28,0.92); border-color: rgba(255,255,255,0.16); }
.btn-danger {
background: var(--red, #d91e36);
color: #fff;
border: 1px solid rgba(255,255,255,0.12);
}
.btn-danger:hover { filter: brightness(1.08); transform: translateY(-1px); }
.field-error {
display: block;
color: var(--red, #d91e36);
font-size: 12px;
margin-top: 6px;
min-height: 0;
}
.input-error, textarea.input-error, select.input-error { border-color: var(--red, #d91e36) !important; }
.terms-check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12.5px;
color: var(--ink-muted);
line-height: 1.5;
margin: 4px 0 18px;
cursor: pointer;
}
.terms-check input { margin-top: 3px; flex-shrink: 0; }
.terms-check a { color: var(--ink); text-decoration: underline; }
.auth-form-links { display: flex; justify-content: flex-end; margin: -8px 0 16px; }
.auth-form-links a { font-size: 12.5px; color: var(--ink-muted); }
.auth-form-links a:hover { color: var(--gold-light); }
/* Breadcrumbs */
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--ink-muted); margin-bottom: 18px; }
.breadcrumbs a { color: var(--ink-muted); }
.breadcrumbs a:hover { color: var(--gold-light); }
.breadcrumb-sep { opacity: 0.5; }
.breadcrumb-current { color: var(--ink); font-weight: 600; }
/* Nav search */
.nav-search-dropdown {
right: 0;
width: 300px;
padding: 14px;
}
.nav-search-dropdown form { display: flex; gap: 8px; }
.nav-search-dropdown input {
flex: 1;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 999px;
padding: 9px 14px;
color: var(--ink);
font-size: 13.5px;
}
.nav-dropdown-empty { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--ink-muted); }
.qs-suggestions { margin-top: 10px; max-height: 340px; overflow-y: auto; }
.qs-item {
display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px;
color: var(--ink); text-decoration: none; transition: background .12s var(--ease);
}
.qs-item:hover, .qs-item.active { background: var(--glass-bg-strong); }
.qs-item-icon {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
background: var(--glass-bg); color: var(--ink-muted);
}
.qs-item-icon svg { width: 14px; height: 14px; }
.qs-item-text { min-width: 0; }
.qs-item-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-item-sub { font-size: 11px; color: var(--ink-muted); }
.qs-empty { padding: 14px 6px; text-align: center; font-size: 12.5px; color: var(--ink-muted); }
.qs-see-all { display: block; margin-top: 6px; padding: 8px 6px; text-align: center; font-size: 12.5px; font-weight: 650; color: var(--ink-soft); border-top: 1px solid var(--line-soft); text-decoration: none; }
.qs-see-all:hover { color: var(--ink); }
.qs-kbd-hint { font-size: 10.5px; color: var(--ink-muted); border: 1px solid var(--glass-border); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
/* First-time-visitor onboarding coachmarks — deliberately not a
full-page blocking overlay: the nav's own stacking context (z-index:
100, for its dropdowns) makes a page-wide dim-and-spotlight trick
fragile to get right against nav-housed targets specifically, so
this stays a simple floating, non-blocking hint card instead. The
page underneath stays fully usable while it's shown. */
.onboard-tooltip {
position: fixed; z-index: 120; width: 260px; background: var(--bg-card, #17171a); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0,0,0,0.5); padding: 16px;
}
.onboard-tooltip-step { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-light); margin-bottom: 6px; }
.onboard-tooltip-title { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.onboard-tooltip-body { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 14px; }
.onboard-tooltip-actions { display: flex; align-items: center; justify-content: space-between; }
.onboard-skip-btn { background: none; border: none; color: var(--ink-muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.onboard-skip-btn:hover { color: var(--ink); }
.recent-search-dropdown {
position: absolute; top: calc(100% + 8px); left: 0; width: 100%; min-width: 240px; z-index: 30;
background: var(--bg-card, #17171a); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
box-shadow: 0 12px 30px rgba(0,0,0,0.35); padding: 8px; display: none;
}
.recent-search-dropdown.open { display: block; }
.recent-search-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); }
.recent-search-head button { font-size: 11px; color: var(--ink-muted); background: none; border: none; cursor: pointer; text-decoration: underline; }
.recent-search-head button:hover { color: var(--ink); }
.recent-search-item {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px; border-radius: 8px;
background: none; border: none; color: var(--ink); font-size: 13px; cursor: pointer;
}
.recent-search-item:hover { background: var(--glass-bg-strong); }
.recent-search-item svg { width: 14px; height: 14px; color: var(--ink-muted); flex-shrink: 0; }
/* Reusable info tooltip — small (i) affordance for explaining a term
inline (condition grading, score factors, etc.) without a modal. */
.info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--glass-bg-strong); color: var(--ink-muted); cursor: help; vertical-align: middle; margin-left: 5px; }
.info-tip svg { width: 10px; height: 10px; }
.info-tip-bubble {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
width: 220px; background: var(--bg-card, #17171a); border: 1px solid var(--glass-border); border-radius: 8px;
padding: 10px 12px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); font-weight: 400;
box-shadow: 0 8px 24px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .15s var(--ease), transform .15s var(--ease); z-index: 40;
}
.info-tip:hover .info-tip-bubble, .info-tip:focus .info-tip-bubble, .info-tip:focus-visible .info-tip-bubble {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Pagination */
.load-more-wrap { display: flex; justify-content: center; margin-top: 28px; }
/* Avatar upload */
.avatar-upload-row { display: flex; align-items: center; gap: 16px; }
.avatar-upload-preview { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(145deg, var(--red), var(--yellow)); }
.avatar-upload-btn { cursor: pointer; }
/* Settings danger zone */
.settings-block-danger { border: 1px solid rgba(217,30,54,0.35); border-radius: var(--radius-m); padding: 20px; }
.settings-block-danger h3 { color: var(--red, #d91e36); }
/* Article reader modal (news.html) */
.article-modal-panel { max-width: 560px; text-align: left; }
.article-modal-media { width: 100%; height: 200px; border-radius: var(--radius-m); margin-bottom: 16px; }
.article-modal-meta { font-size: 12.5px; color: var(--ink-muted); margin: 6px 0 14px; }
/* Breadcrumb spacing on pages that also show a hero card right after */
.listing-detail ~ .breadcrumbs, #breadcrumbNav + * { margin-top: 0; }
/* ============================================================
Print stylesheet — the kind of page a buyer keeps for their
records (an order/checkout confirmation, a listing they're
discussing with someone) reads and prints cleanly: no nav chrome,
no interactive controls, no dark background eating printer ink,
full-width content, real link URLs visible since a printed page
can't be clicked. Not exhaustive-per-page — broad rules that hold
up sitewide, since nothing here fabricates content, just hides
what a printed page has no use for.
============================================================ */
@media print {
* { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
body { background: #fff !important; color: #111 !important; }
.nav, .footer, .skip-link, .toast-container, .toast, .modal-overlay, .nav-dropdown, .onboard-tooltip,
.recent-search-dropdown, .qs-suggestions, .info-tip-bubble, .lightbox-overlay, .active-filter-chips,
.filter-drawer, .filter-toggle-btn, .load-more-wrap, .bulk-action-bar, .theme-chip-row,
.card-quick-view, .author-hover-card, .comment-like-btn, .post-comment-form, .composer-modal,
#composerModalOverlay, .wishlist-btn, .nav-icon-btn, [data-share-url], [data-report],
.buy-actions, .fee-calc ~ .buy-actions, .tabs, .section-head button, .btn,
.mi-view-toggle, .mi-compare-tray, .mi-table-check, .cookie-banner { display: none !important; }
.wrap, main, .listing-detail, .form-card { max-width: 100% !important; }
a { color: #111 !important; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
.card, .row-item, .post-card, .form-card, .glass-panel { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; }
.fee-calc, .trust-row { border: 1px solid #ccc !important; }
}
/* Cookie/privacy notice — a single dismissible banner, not a
multi-toggle consent manager, since the site does no third-party
tracking; this is about disclosure, not gating features on consent. */
.cookie-banner {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; max-width: 640px; margin: 0 auto;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
background: var(--bg-card, #17171a); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
box-shadow: 0 16px 40px rgba(0,0,0,0.45); padding: 16px 20px;
transform: translateY(140%); transition: transform .3s var(--ease);
}
.cookie-banner.open { transform: translateY(0); }
.cookie-banner p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; flex: 1; min-width: 200px; }
.cookie-banner a { color: var(--ink); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 480px) { .cookie-banner { left: 10px; right: 10px; bottom: 10px; padding: 14px; } }
/* ============================================================
PREMIUM POLISH PASS — site-wide, additive
============================================================
A shared refinement layer that lifts the whole platform's feel:
unified depth, hover, focus, motion and typography across the
reusable components every page inherits. Purely presentational and
additive (no layout changes, no markup changes) — appended last so
it harmonizes hover/focus/transition without overriding structure.
Respects prefers-reduced-motion at the end of the block.
============================================================ */
/* ---- Anchor targets land clear of the sticky nav ---- */
:where(section, h2, h3, [id]):target { scroll-margin-top: 92px; }
/* ---- Typography: stronger, more intentional hierarchy ---- */
.page-header h1, .page-header h2 { font-weight: 800; letter-spacing: -0.032em; }
.page-header .eyebrow, .eyebrow {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-light);
}
.news-section-heading { font-weight: 780; letter-spacing: -0.02em; font-size: 23px; }
.related-heading { font-weight: 760; letter-spacing: -0.015em; }
/* ---- Buttons: consistent easing + a touch more life on hover ---- */
.btn { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out), opacity .2s var(--ease); }
.btn-secondary:hover, .btn-ghost:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn-sm { transition: transform .16s var(--ease-out), background .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out); }
/* ---- Inputs, selects, textareas: smooth + unified gold focus ---- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
select { cursor: pointer; }
.filters select:hover, .toolbar select:hover { border-color: var(--border-hover); }
.filters select:focus-visible, .toolbar select:focus-visible,
.filters input:focus-visible, .range-inputs input:focus-visible {
outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.16);
}
/* ---- Cards: unified premium elevation for interactive cards ---- */
a.card, a.row-card, .card.is-clickable, a.stat-card {
transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s var(--ease-out);
}
a.card:hover, a.row-card:hover, .card.is-clickable:hover, a.stat-card:hover {
transform: translateY(-4px); border-color: var(--border-hover); box-shadow: var(--shadow-hover);
}
/* soft lit top edge on glass surface cards (depth) */
.form-card, .settings-block, .stat-card, .row-card {
position: relative;
}
.form-card::after, .settings-block::after {
content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
opacity: 0.5; pointer-events: none;
}
/* ---- Thumbnails on clickable cards: gentle premium zoom ---- */
a.mi-mover-card .thumb, a.listing-card .thumb, a.card .thumb, a.row-card .thumb { transition: transform .5s var(--ease-out); }
a.mi-mover-card:hover .thumb, a.listing-card:hover .thumb, a.card:hover .thumb { transform: scale(1.045); }
/* ---- Tabs: smoother state changes ---- */
.tab-btn { transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
/* ---- Tables: readable row hover ---- */
table tbody tr { transition: background .15s var(--ease); }
table tbody tr:hover { background: rgba(255,255,255,0.03); }
/* ---- Badges / pills: crisper edges ---- */
.badge, .mi-pill, .pill { transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); }
/* ---- Results count / meta labels: quieter, more refined ---- */
.results-count { letter-spacing: 0.01em; }
/* ---- Empty states: a touch more presence ---- */
.empty-state { padding: 72px 24px; }
.empty-state p { font-size: 14.5px; line-height: 1.6; }
/* ---- Links inside prose: smooth underline ---- */
.prose a, .sa-outlook a { transition: color .16s var(--ease); }
/* ---- Focus ring consistency for icon buttons ---- */
.nav-icon-btn:focus-visible, .wishlist-btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
/* ---- Custom scrollbar: slightly more refined thumb ---- */
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); }
@media (prefers-reduced-motion: reduce) {
a.card, a.row-card, a.stat-card, .card.is-clickable,
a.mi-mover-card .thumb, a.listing-card .thumb, a.card .thumb, a.row-card .thumb,
.btn, .btn-sm, .tab-btn, table tbody tr { transition: none; }
a.card:hover, a.row-card:hover, a.stat-card:hover, .card.is-clickable:hover { transform: none; }
a.mi-mover-card:hover .thumb, a.listing-card:hover .thumb, a.card:hover .thumb { transform: none; }
}
/* ── Mobile primary navigation (below the header) + Hero MI CTA accent ──────── */
.mobile-subnav { display: none; }
.hero-cta-mi { display: inline-flex; align-items: center; gap: 8px; }
.hero-cta-mi .hero-cta-mi-ico { flex: 0 0 auto; }
/* Market Intelligence identity: a premium emerald-glass treatment (matching the
MI section's #10b981 / #34d399 palette) so 🟩 = Market Intelligence, while the
solid red Marketplace button stays the louder primary CTA. Translucent glass —
never brighter than the red. Full specificity so it overrides .btn-secondary. */
.btn.btn-secondary.hero-cta-mi {
color: var(--ink, #e8eef6);
background:
linear-gradient(135deg, rgba(52, 211, 153, 0.17), rgba(16, 185, 129, 0.07)),
rgba(16, 185, 129, 0.05);
border: 1px solid rgba(52, 211, 153, 0.34);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 0 0 1px rgba(52, 211, 153, 0.10),
0 8px 22px rgba(16, 185, 129, 0.12);
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn.btn-secondary.hero-cta-mi:hover {
border-color: rgba(52, 211, 153, 0.52);
background:
linear-gradient(135deg, rgba(52, 211, 153, 0.24), rgba(16, 185, 129, 0.11)),
rgba(16, 185, 129, 0.06);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.09),
0 0 0 1px rgba(52, 211, 153, 0.18),
0 12px 30px rgba(16, 185, 129, 0.20);
}
@media (max-width: 980px) {
.mobile-subnav {
display: flex; gap: 6px; align-items: center;
position: sticky; top: 50px; z-index: 99; /* JS sets this to the real header height */
padding: 3px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
scroll-behavior: smooth; scrollbar-width: none;
/* Same glass as the header + a very subtle top divider so the two rows read
as ONE unified navigation component, not two stacked bars. [#2] */
background: rgba(10, 10, 12, 0.6);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.mobile-subnav::-webkit-scrollbar { display: none; }
.mobile-subnav a {
flex: 0 0 auto; white-space: nowrap; text-decoration: none;
color: var(--ink-muted); font-size: 13px; font-weight: 600;
padding: 5px 12px; border-radius: 999px; border: 1px solid transparent;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.mobile-subnav a:hover { color: var(--ink); }
.mobile-subnav a.active {
color: var(--ink); background: rgba(201, 162, 39, 0.14); border-color: rgba(201, 162, 39, 0.4);
}
}
/* #3 — Marketplace: hide the four "at a glance" stat cards on mobile and show a
prominent red Sell CTA in their place (desktop keeps the stat cards). */
.mkt-sell-mobile { display: none; }
@media (max-width: 768px) {
#mktStats { display: none; }
.mkt-sell-mobile {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; margin-top: 2px;
}
/* Duplicate trust messaging: the upper home trust row is removed on mobile —
all four trust features now live inside the compact Marketplace card. */
.home-trust-row { display: none; }
}
/* ============================================================
AUTH WALL — account-conversion modal (js/auth-wall.js)
Reuses the .modal-overlay / .modal-panel component; adds a
centered, premium presentation. Consistent desktop + mobile.
============================================================ */
.auth-wall-overlay { z-index: 400; }
.auth-wall-panel { max-width: 400px; text-align: center; padding: 30px 28px 26px; }
.auth-wall-panel .auth-wall-close { position: absolute; top: 12px; right: 14px; }
.auth-wall-panel { position: relative; }
.auth-wall-icon {
width: 54px; height: 54px; margin: 4px auto 16px;
display: flex; align-items: center; justify-content: center;
border-radius: 16px;
background: rgba(201,162,39,0.10); border: 1px solid rgba(201,162,39,0.28);
}
.auth-wall-title { font-size: 20px; font-weight: 780; letter-spacing: -0.015em; margin: 0 0 8px; color: var(--ink, #fff); }
.auth-wall-msg { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 22px; }
.auth-wall-actions { display: flex; flex-direction: column; gap: 10px; }
.auth-wall-actions .btn { width: 100%; justify-content: center; padding-top: 12px; padding-bottom: 12px; font-weight: 650; }
.auth-wall-foot { font-size: 12px; color: var(--ink-muted); margin: 16px 0 0; }
@media (max-width: 480px) {
.auth-wall-panel { max-width: 100%; padding: 26px 20px 22px; }
}