Image Background Overlay Cards Features Block for React

Edit LANES at the top of the file: each lane has a name and bars, and each bar a from and to week, a label and optionally selected. WEEKS sets the columns and NOW the week the marker sits on. The drawing is decoration, hidden from assistive technology, so keep the real claims in the tiles.

The chip has a bg-background fill at 85% under a blur, so the heading and sentence sit on a near-solid surface in every theme and the roadmap shows faintly through it. The tiles are solid bg-card with a ring and shadow.

From md the tile row has a negative top margin, so it rides up over the roadmap's faded foot. The roadmap fades out with a mask, so the tiles never sit on busy lines. Below md the margin is gone and the tiles follow the drawing in normal flow.

Yes. The roadmap, the chip and the tiles use background, card, muted and foreground tokens, with no dark scope. The selected bar and the "Now" marker are foreground fills, so the section has no primary colour.

The headline chip, the roadmap and the tiles fade up once, one after the other, with a CSS transition. With reduced motion the transition is off and everything appears at once. Nothing else moves.

The roadmap band gets shorter and is cropped at the end side (it's wider than a phone), the chip spans the width, and the three tiles stack one per row below it. Nothing scrolls sideways at 320 pixels.