About this heroe

The inverted-headline cover is a familiar piece of art direction and a surprisingly fragile one to implement, because a blend mode does not composite against the element you can see behind it — it composites against the nearest ancestor that forms a stacking context. Left alone, that is usually the page itself, so the headline inverts against the body background, shifts as the section scrolls past other content, and looks different on every page the component is dropped into. A single isolation property pins the blend to the hero and turns a one-page effect into a component. Three details finish it. The type is pure white, because difference inverts the backdrop exactly at maximum and anything less returns a muddy partial inversion that reads as a mistake. The blended element is the text alone rather than a full-bleed overlay, since a blend mode promotes its subtree to its own composited layer and a viewport-sized one costs real memory on a phone. And forced-colors mode drops blend modes entirely, which would leave white text on a white canvas — so the headline carries an explicit normal-blend, CanvasText fallback. The plate underneath is desaturated and multiplied rather than covered with a flat scrim, which keeps the photograph's own tonality instead of fogging it evenly.