Photo credit badges disappear into the black of invert spotlights

Look at the photo credit badge in coffee.html and index.html inside invert spotlights. The badge is currently an inline style; move it to a class in assets/sass/. Create two variants: a bordered black pill and an inverted white pill. Test both at desktop and 375px on the coffee page to decide which suits each section. The change makes the badge deliberate on both light and dark backgrounds.

The photo credit badge is a black pill with white text and a white camera glyph. Inside an invert spotlight the section background is also black, so the pill disappears and the badge reads as a bare white name floating on the background rather than a credit.

Where it happens today:

• coffee.html: the French press, AeroPress and Moka pot spotlights, and the book spotlight once #181's change to invert lands.
• index.html: the one invert spotlight.

It is legible, but it is the absence of a treatment rather than a treatment. The badge should look deliberate on both backgrounds.

Proposal

Build both variants and pick per section by eye, rather than deciding on one up front:

1. Bordered black. Keep the black pill, add a thin white (or near-white) border so it holds its shape against a black section. The badge stays one object on every background.
2. Inverted. A white pill with black text and a black glyph, used on invert sections. Reads as the same badge in the section's own colour scheme, and matches the way the rest of the spotlight's text inverts.

Both get built, both get rendered at desktop and at 375px on the coffee page, and the choice is made from the screenshots. They are not exclusive: the bordered black may suit the banner, where the badge sits over a photo rather than a flat colour, while the inverted one suits the flat black sections.

Implementation note

The badge is currently a ~600-character inline style attribute, repeated verbatim for every credit on the site, and most pages carry one. Adding a second variant by hand means a second 600-character blob to keep in step with the first. Worth lifting the badge into a class in assets/sass/ first, with a modifier for the variant, so the markup becomes <span class="credit credit-invert"> and the two variants are defined once. That also makes the remaining decisions in #183 one-line changes instead of a find-and-replace across every page.

Related

Supersedes the "whether the black pill is the right treatment inside invert spotlights" bullet in #183, which covers making the badges consistently clickable. Split out of #181.