/* ============================================================================ * Listing detail — v4 shared shell * Ported from Sigrix_new/marketplace/Marketplace - Listing Image Prompt v4.html * and Sigrix_new/marketplace/Marketplace - Listing Skill v4.html, whose CSS is * byte-identical across the two files for everything in this sheet. The design * ships one shell and a per-type variant block; this is the shell. * * Every rule here is scoped under `body.listing-v4-page`, which each v4 detail * template carries alongside its own type class. A type variant sheet * (`sx-listing-image-prompt.css`, `sx-listing-skill.css`) loads after this one * and owns two things only: its accent tokens, and the markup no other type * renders. * * A variant's own token block is written `body.listing-v4-page.-page` * — (0,2,1) against this sheet's (0,1,1) — so it wins on specificity rather * than on load order. CLAUDE.md's admin.css note is the reason: a same- * specificity override that happens to load later is a rule nobody can read * off either file. * * This sheet deliberately does NOT re-scope the whole --sx-* token set onto the * body the way persona/skill/agent/mcp v2 pages do. Those pages have to re-flip * four tokens the global dark rule skips (see CLAUDE.md), and every one of them * has shipped that gap at least once. Reading the shared tokens straight off * `.sx` — which base.html already puts on and sx-home.css already flips * for dark — removes that whole class of bug. Only the page's own --ig-* * accents are declared here, and the dark block below re-flips every one of * them. * ==========================================================================*/ body.listing-v4-page { /* Release the shell's content wrapper. base.html wraps its content block in `.container`, which is `max-width: var(--container-max)` = 1200px. The prototype has no such wrapper — its `.ig-main` is full-bleed and `.ig-container` (1280px) is what centres the content — so on this page the wrapper did two wrong things at once: it squeezed every section 40px narrower per side than the design draws them, and it clipped the hero's radial glow to that column, painting it as a tinted rectangle with hard vertical edges against the page either side. `--container-max` is the design system's own knob and `.container` is its only reader, so releasing it here is one inherited token rather than a specificity fight with a shared selector. Safe on this page specifically because every top-level block under `main.ig-page` supplies its own `.ig-container` — the hero, the single wrapper `.ig-main` puts around all five numbered sections, and the sticky bar — so nothing goes full-bleed except the backgrounds that are meant to. The nav and footer are outside this wrapper in base.html and are unaffected. */ --container-max: none; /* Graphic prompts read as the teal/persona accent in the prototype, and this is the shell's default for any v4 type that declares no accent of its own. It used to be `var(--sx-accent)`, which looks like the tidy answer — one shared token, theme-flipped for free, no fifth hardcoded palette. It was the wrong one, because `--sx-accent` is a **fill**: `#14B8A6` measures 2.49:1 on white and 2.19:1 on its own 14% tint, and the shell writes `--ig-accent` as *text* in seven places (`.ig-kind`, `.ig-sig .ico`, `.ig-editable`, `.ig-varnote code`, `.ig-open-note code`, and the graphic variant's `.ig-pre .v` / `.ig-card-cap .k`). `.ig-editable` is the worst of them — accent ink on an accent-soft background, so it read at the 2.19 figure. That is CLAUDE.md's "a fill is not an ink" rule one level up from a literal: a token can be sound in every use it was written for and unsound the moment a new consumer paints it as text. So the pair is declared here instead. Light is the same hue (173°) taken down to the lightest value that clears AA on every light surface a chip can land on — 5.96:1 on `--sx-surface`, 5.72 on `--sx-bg`, 5.62 on `--sx-surface-2`, and 4.87 / 4.69 / 4.60 on its own tint over each. Dark is byte-identical to what `--sx-accent` already resolved to, so that theme does not move at all. Measured, not guessed — see the contrast test. `--ig-accent-soft` / `-line` derive from `var(--ig-accent)` rather than from `--sx-accent` so the tint tracks the ink; per the `--pp-accent` note in CLAUDE.md, that `var()` re-resolves against whichever value wins on this same element, so the dark block below needs no copy of them. */ --ig-accent: #0c7065; --ig-accent-soft: color-mix(in srgb, var(--ig-accent) 14%, transparent); --ig-accent-line: color-mix(in srgb, var(--ig-accent) 34%, transparent); --ig-accent-ink: #06413a; --ig-brand: var(--sx-brand-3, #3d4dff); --ig-brand-soft: color-mix(in srgb, var(--sx-brand-3, #3d4dff) 12%, transparent); --ig-brand-line: color-mix(in srgb, var(--sx-brand-3, #3d4dff) 40%, transparent); --ig-ok: var(--sx-ok, #1f9d55); --ig-ok-soft: color-mix(in srgb, var(--sx-ok, #1f9d55) 14%, transparent); --ig-ok-line: color-mix(in srgb, var(--sx-ok, #1f9d55) 38%, transparent); --ig-warn: var(--sx-warn, #c77800); --ig-warn-soft: color-mix(in srgb, var(--sx-warn, #c77800) 12%, transparent); /* The ink counterparts. `--ig-ok` / `--ig-warn` above are **fills**, and the shell paints them as *text* in five places — the grade chip, the warn verdict, the assurance ticks, the "you own this" label and the review-done glyph — all of which measured 2.58:1 to 3.29:1 in light mode: present, correctly styled, unreadable. Dark was fine throughout, which is the whole reason it looked sound for as long as it did. Exactly the split `--sx-brand-2` / `--sx-brand-text` already draws in base.html, and the same trap #5213 fixed one token over for `--ig-accent`. The rule these encode: **a fill is never a `color:`** — the contract test enforces that rather than trusting the next reader to notice. Solved against every background each is painted on, not just white: the plain surfaces, `--ig-ok-soft`'s 14%, `.rv-done .ico`'s 22%, and the 12/13% tint the badge chips mix from the ink itself. The 22% case is what makes this darker than the badge-only pair it replaces. Measured, not guessed. */ --ig-ok-text: #16703c; --ig-warn-text: #925800; --ig-shot-badge-bg: rgba(8, 10, 16, 0.62); --ig-shot-badge-line: rgba(255, 255, 255, 0.18); --ig-shot-badge-ink: #ffffff; --ig-hero-glow-a: color-mix(in srgb, var(--sx-brand-3, #3d4dff) 10%, transparent); --ig-hero-glow-b: color-mix(in srgb, var(--sx-accent, #14b8a6) 8%, transparent); --ig-lock-wash: linear-gradient( 160deg, color-mix(in srgb, var(--sx-brand-3, #3d4dff) 12%, var(--sx-surface-2, #f7f8fb)) 0%, var(--sx-surface-2, #f7f8fb) 58% ); /* Lightbox chrome. The scrim is dark in *both* themes on purpose — it is the dark room a picture is looked at in, not a surface that follows the page — so the ink over it is white in both and neither is a theme bug. They are declared per theme all the same, because the contract test (tests/test_image_prompt_listing_v4_page.py) reads a literal in the light block as a token that must be restated, and an exemption for "this one is meant to be the same" is a hole the next literal walks through. */ --ig-lbx-scrim: rgba(9, 11, 18, 0.82); --ig-lbx-ink: #ffffff; --ig-lbx-chip-bg: rgba(255, 255, 255, 0.12); --ig-lbx-chip-line: rgba(255, 255, 255, 0.22); --ig-mono: var(--sx-font-mono, 'JetBrains Mono', ui-monospace, monospace); --ig-display: var(--sx-font-display, 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif); } /* Dark re-flip. Every --ig-* token declared above appears here; the ones built with color-mix() re-resolve for free because --sx-accent / --sx-brand-3 are themselves flipped on `[data-theme="dark"] .sx`, so only the tokens carrying a literal need restating. `--ig-accent-ink` is one of those: it is ink *on* the accent, so it has to darken as the accent brightens. */ [data-theme="dark"] body.listing-v4-page { /* Exactly what `var(--sx-accent)` resolved to here before the light value was derived, so dark does not move. It passes comfortably as ink already — 11.69:1 on the surface, 8.52:1 on its own tint — which is the whole reason the old shared-token spelling looked fine for as long as it did: only one of the two themes was ever wrong. */ --ig-accent: #7ce3d4; --ig-accent-ink: #04211d; /* What `--sx-ok` / `--sx-warn` already resolve to here, restated so the pair is declared once per theme rather than half-derived — the light values are the ones that had to move (6.20:1 and 6.95:1 worst here, so dark never needed the walk-down). */ --ig-ok-text: #6ee7a1; --ig-warn-text: #f5b454; --ig-shot-badge-bg: rgba(4, 6, 11, 0.7); --ig-shot-badge-line: rgba(255, 255, 255, 0.14); --ig-shot-badge-ink: #ffffff; --ig-hero-glow-a: color-mix(in srgb, var(--sx-brand-3, #6b78ff) 14%, transparent); --ig-hero-glow-b: color-mix(in srgb, var(--sx-accent, #7ce3d4) 9%, transparent); --ig-lock-wash: linear-gradient( 160deg, color-mix(in srgb, var(--sx-brand-3, #6b78ff) 16%, var(--sx-surface-2, #1a1f28)) 0%, var(--sx-surface-2, #1a1f28) 58% ); /* A touch deeper than light's, since the page behind it is already dark and a scrim that does not separate from it stops reading as an overlay. */ --ig-lbx-scrim: rgba(2, 4, 9, 0.88); --ig-lbx-ink: #ffffff; --ig-lbx-chip-bg: rgba(255, 255, 255, 0.1); --ig-lbx-chip-line: rgba(255, 255, 255, 0.18); } /* base.css gives every `main` 34px of top padding. Here that padding sits *above* the hero, so the glow — whose densest point is its own top edge — began at full strength 34px below the nav and drew a hard horizontal seam across the page. The prototype's `.ig-main` sets `padding-bottom` only, so its hero starts flush under the nav and the gradient's top edge lands on the header's own border where there is nothing to see. `.ig-hero` carries its own 26px of top padding, so the content spacing is unchanged. */ body.listing-v4-page main.ig-page { padding-top: 0; } body.listing-v4-page .ig-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } @media (max-width: 760px) { body.listing-v4-page .ig-container { padding: 0 20px; } } body.listing-v4-page .ig-mono { font-family: var(--ig-mono); font-feature-settings: 'zero', 'ss02'; letter-spacing: -0.01em; } /* ── owner bar ──────────────────────────────────────────────────────────── */ .ig-ownerbar { position: relative; z-index: 5; border-bottom: 1px solid var(--sx-line); background: color-mix(in srgb, var(--sx-brand-3, #3d4dff) 9%, var(--sx-bg-2, #f4f5f8)); } .ig-ownerbar--preview { background: color-mix(in srgb, var(--ig-warn) 12%, var(--sx-bg-2, #f4f5f8)); } .ig-ownerbar-in { display: flex; align-items: center; gap: 12px; min-height: 50px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; } .ig-ownerbar-msg { flex: 1 1 auto; min-width: 0; } .ig-ownerbar .ig-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ig-brand); flex: none; } .ig-ownerbar--preview .ig-dot { background: var(--ig-warn); } .ig-ownerbar .t { font-size: 13.5px; font-weight: 600; } .ig-ownerbar .s { font-size: 12.5px; color: var(--sx-text-2); } .ig-ownerbar .ig-acts { display: flex; gap: 8px; margin-left: auto; flex: none; } /* ── shared small controls ──────────────────────────────────────────────── */ /* css/responsive.css applies a site-wide `min-height: 44px` tap-target floor to every