/* ───────────────────────────────────────────────────────────── CapraSEO — Marketplace noise-reduction pass (loaded LAST) Scoped to the three marketplace pages (data-page^="marketplace") and reversible by deleting the file + its three tags. The brand accent used to be re-pointed here too — that experiment graduated: green now lives in css/main.css :root and css/light.css, app-wide. What is left is the noise pass. marketplace.css pairs almost every accent tint with cyan text, from when the accent was indigo and cyan was its readable partner. Against green that reads as two hues fighting, so the tinted survivors are retargeted to the accent's own text tone below; most of the rest go neutral anyway. ───────────────────────────────────────────────────────────── */ body[data-page^="marketplace"] .mk-target-niche, body[data-page^="marketplace"] .mk-niche-tag { color: var(--accent-text); } /* ═══════════════════════════════════════════════════════════════════ Noise reduction ═══════════════════════════════════════════════════════════════════ The colour budget for one listing card is now: • the Link Value number (green / grey / red — this IS the ranking) • the ★ Top pick pill (the one accent chip) • red or amber, only where something is actually wrong Everything else — relevance, value-for-money, competitor overlap, dofollow, DR, verdict, Save — becomes a quiet surface chip. They still say exactly what they said; they just stop shouting in unison. */ /* ── Filter bar ──────────────────────────────────────────────────── Six presets are ON by default. Six accent-gradient pills with glowing dots was the single largest block of colour on the page, and "on" is the resting state — so it can't be the loud state. Selected now reads as a raised neutral surface; the accent survives as the 13px dot. */ body[data-page^="marketplace"] .mk-toggle.is-on { color: var(--text); border-color: var(--line-strong); background: rgba(var(--wash-rgb), 0.06); box-shadow: inset 0 1px 0 var(--edge-hi); } body[data-page^="marketplace"] .mk-toggle.is-on .mk-toggle-dot { box-shadow: none; /* the glow, times six, was the tell */ } /* Range chips + dropdown chips: keep the accent (few are ever set), but flat instead of gradient, and no halo on the marker dot. */ body[data-page^="marketplace"] .mk-filters .chip.is-set { background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.40); color: var(--text); } body[data-page^="marketplace"] .mk-filters .chip.is-set .chip-label { color: var(--text); } body[data-page^="marketplace"] .mk-filters .chip.is-set::before { box-shadow: none; } body[data-page^="marketplace"] .mk-range-chip.is-set { background: rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.38); } body[data-page^="marketplace"] .mk-range-chip.is-set .mk-range-out { color: var(--text); } body[data-page^="marketplace"] .mk-range-input::-webkit-slider-thumb { background: var(--text); } body[data-page^="marketplace"] .mk-range-input::-moz-range-thumb { background: var(--text); } /* Exactly one sort is active, so this one keeps a real accent state — flat fill, accent text, no mint-on-gradient. */ body[data-page^="marketplace"] .mk-sort-btn.is-active { color: var(--accent-text); border-color: rgba(var(--accent-rgb), 0.42); background: rgba(var(--accent-rgb), 0.12); } /* Target bar: a status line, not a banner. */ body[data-page^="marketplace"] .mk-target { background: rgba(var(--wash-rgb), 0.018); } body[data-page^="marketplace"] .mk-target-dot { box-shadow: none; } body[data-page^="marketplace"] .mk-target-niche { background: rgba(var(--wash-rgb), 0.05); color: var(--text-2); } /* ── Card: left rail ─────────────────────────────────────────────── With "Hide rejected sites" on, nearly every card is GOOD — so a green stripe + green score tint + green verdict pill on every row carried no information at all. The stripe now only marks the two rows worth marking: a Top pick, or something failing. */ body[data-page^="marketplace"] .mk-card.mk-tier-good::before, body[data-page^="marketplace"] .mk-card.mk-tier-ok::before { background: transparent; } body[data-page^="marketplace"] .mk-card.mk-top-pick::before { background: var(--accent); } body[data-page^="marketplace"] .mk-tier-good .mk-score { background: transparent; } /* The score is the one number the page is sorted by — it keeps its colour, on a calmer three-step ladder than cyan/gold/red. */ body[data-page^="marketplace"] .mk-tier-good .mk-score-num { color: var(--accent-text); } body[data-page^="marketplace"] .mk-tier-ok .mk-score-num { color: var(--text-2); } body[data-page^="marketplace"] .mk-tier-bad .mk-score-num { color: var(--red-2); } /* Vetting panel: neutral surface, muted verdict word, and the status lives in a 6px dot (the /agents/ pattern). The pulse animation ran on every visible card at once — motion is the loudest kind of noise. */ /* The panel is lifted a step off the card rather than sunk into it: a faint luminance step up + the inset top highlight, with a soft shadow spilling onto its two interior edges (.mk-card's overflow:hidden clips the outer ones, which is what keeps this from looking like a floating box). Depth on dark comes from the highlight, not the shadow — the shadow alone would just muddy the surface. */ body[data-page^="marketplace"] .mk-panel { position: relative; background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.055), rgba(var(--wash-rgb), 0.022)); box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 16px -6px rgba(0, 0, 0, 0.75); } /* Light flips --wash-rgb to ink, so the same tint steps the panel a shade darker than the card — the right reading there. The black shadow does not carry over; on white it just looks dirty. */ :root[data-theme="light"] body[data-page^="marketplace"] .mk-panel { box-shadow: inset 0 1px 0 var(--edge-hi), 0 0 10px -7px rgba(21, 23, 66, 0.35); } :root[data-theme="light"] body[data-page^="marketplace"] .mk-panel-verdict.mk-h-buy, :root[data-theme="light"] body[data-page^="marketplace"] .mk-panel-verdict.mk-h-caution, :root[data-theme="light"] body[data-page^="marketplace"] .mk-panel-verdict.mk-h-avoid { box-shadow: inset 0 1px 0 var(--edge-hi), 0 1px 2px rgba(21, 23, 66, 0.10); } /* Not-yet-screened panels stay flat — nothing to raise. */ body[data-page^="marketplace"] .mk-panel.mk-panel-empty { background: rgba(var(--wash-rgb), 0.015); box-shadow: none; } /* The verdict chip rides one step higher again, so the eye lands on it first inside the panel. */ body[data-page^="marketplace"] .mk-panel-verdict.mk-h-buy, body[data-page^="marketplace"] .mk-panel-verdict.mk-h-caution, body[data-page^="marketplace"] .mk-panel-verdict.mk-h-avoid { background: rgba(var(--wash-rgb), 0.06); border-color: var(--line-strong); color: var(--text-2); font-weight: 500; box-shadow: inset 0 1px 0 var(--edge-hi), 0 1px 3px rgba(0, 0, 0, 0.35); } body[data-page^="marketplace"] .mk-h-live { animation: none; box-shadow: none; } body[data-page^="marketplace"] .mk-h-buy .mk-h-live { background: var(--accent-bright); } body[data-page^="marketplace"] .mk-h-caution .mk-h-live { background: var(--gold-2); } body[data-page^="marketplace"] .mk-h-avoid .mk-h-live { background: var(--red-2); } body[data-page^="marketplace"] .mk-panel-foot-ph { color: var(--muted-2); } /* Spam 15/100 is a fine number; colouring it cyan implied a verdict. Only mid/high stay coloured. */ body[data-page^="marketplace"] .mk-s-low { color: var(--text); } /* ── Card head pills ─────────────────────────────────────────────── ★ Top pick is the only accent chip on the row. Relevance, value and competitor overlap drop to surface chips — same words, no competition for the eye. "Off-topic" keeps red because it is a warning. */ body[data-page^="marketplace"] .mk-pick { background: rgba(var(--accent-rgb), 0.16); border-color: rgba(var(--accent-rgb), 0.40); color: var(--accent-text); } body[data-page^="marketplace"] .mk-rel-high, body[data-page^="marketplace"] .mk-val-exc, body[data-page^="marketplace"] .mk-comp { background: rgba(var(--wash-rgb), 0.05); border-color: var(--line); color: var(--text-2); font-weight: 500; } body[data-page^="marketplace"] .mk-rel-some { background: rgba(var(--wash-rgb), 0.035); border-color: var(--line); color: var(--muted); font-weight: 500; } body[data-page^="marketplace"] .mk-comp svg { opacity: 0.55; } /* Save is on every single card, so it can't be tinted — it's a resting control, not an action taken. Matches Hide until it's actually on. */ body[data-page^="marketplace"] .mk-save-badge { color: var(--muted); background: rgba(var(--wash-rgb), 0.04); border-color: rgba(var(--wash-rgb), 0.14); font-weight: 500; } body[data-page^="marketplace"] .mk-save-badge:hover { color: var(--text); background: rgba(var(--wash-rgb), 0.08); border-color: rgba(var(--wash-rgb), 0.24); } body[data-page^="marketplace"] .mk-save-badge[data-saved="1"] { color: var(--accent-text); background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.38); font-weight: 600; } body[data-page^="marketplace"] .mk-save-badge[data-saved="1"]:hover { background: rgba(var(--accent-rgb), 0.22); border-color: rgba(var(--accent-rgb), 0.5); } /* ── Flags row ───────────────────────────────────────────────────── Positive flags are the majority, so tinting them made the row a block of colour that said "everything is fine" in six different chips. They go neutral; red and amber stay, softened, because they're now the only coloured things in the band and don't need to fight anything. */ body[data-page^="marketplace"] .mk-flag-good { background: rgba(var(--wash-rgb), 0.04); border-color: var(--line); color: var(--text-2); } body[data-page^="marketplace"] .mk-flag-warn { background: rgba(234, 179, 8, 0.07); border-color: rgba(234, 179, 8, 0.20); } body[data-page^="marketplace"] .mk-flag-bad { background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.20); } /* ── Metrics + offers ────────────────────────────────────────────── DR was colour-coded back when DR was the ranking; Link Value is the ranking now, so a green "DR 67" just competes with the score. */ body[data-page^="marketplace"] .mk-dr-hi, body[data-page^="marketplace"] .mk-dr-mid { background: rgba(var(--wash-rgb), 0.05); color: var(--muted); } body[data-page^="marketplace"] .mk-do { background: rgba(var(--wash-rgb), 0.05); color: var(--text-2); } /* Cheapest offer: a slightly firmer edge is enough to find it — the grid is already sorted cheapest-first, so the colour was redundant. */ body[data-page^="marketplace"] .mk-offer-card.mk-offer-cheap { border-color: rgba(var(--wash-rgb), 0.18); background: rgba(var(--wash-rgb), 0.05); } body[data-page^="marketplace"] .mk-offer-card.mk-offer-cheap .mk-offer-price { color: var(--text); } body[data-page^="marketplace"] .mk-offer-card.mk-niche .mk-offer-price { color: var(--accent-text); } /* ── Agent card ──────────────────────────────────────────────────── This one is allowed to stay accent-tinted: it is the page's single primary action. The button loses its gradient for the flat house fill (see .btn.primary in main.css). */ body[data-page^="marketplace"] .mk-agent-btn { background: var(--accent); } body[data-page^="marketplace"] .mk-agent-btn:hover { background: var(--accent-bright); }