The first about-page ship put each photo inside a rounded white card with a two-layer drop shadow. The card sat over the aurora and read like a piece of studio framing. The photos had white backgrounds, so the card was hiding the background by becoming part of it. It looked clean and a little safe.
When the transparent versions of the photos came back from background removal, the card stopped making sense. A floating head and shoulders inside a white rectangle looks like a yearbook photo. A floating head and shoulders directly over the aurora looks like a figure on a stage. The card frame was a containment device for a problem (white background) that no longer existed.
The transparent-bundle ship-transparent.sh strips the card in code. The patch is small and explicit:
- Remove the white background fill.
- Remove the two-layer box-shadow.
- Remove border-radius and overflow:hidden from .about-hero-card.
- Switch .about-hero-frame from object-fit:cover to object-fit:contain so the figure doesn’t get cropped by the 16:9 aspect ratio that the card was enforcing.
- Drop the mobile breakpoint’s border-radius.
Object-fit was the subtle one. With a card, cover made sense, because the card’s aspect ratio was load-bearing. Without a card, cover would have clipped my head off on tall viewports. Contain treats the photo as a free-floating figure whose proportions are its own.
The reversal felt obvious in hindsight, but it took seeing the white-backed version live to recognise that the card was decoration covering for a missing crop. Once the photo carried its own edges, the page wanted less, not more.
The principle: a container that hides a problem stops being justified when the problem goes away.