Connect · Spotlight Stack

Summary

One of ten presentations of the Connect page (demo36–demo45); this one is vertical. Every PARTNER magazine gets its own near-full-screen card: the latest cover large on the left, the name set huge in Bodoni Moda, its line, city, year and number of issues, three issue thumbnails and an "Open" button, all over a blurred glow of the cover's own colours. The cards are position: sticky, so as you scroll the next card slides up over the current one, which shrinks a little and darkens — a deck being dealt, without any scroll-jacking. After the stack, FREE is a six-column grid of 2:3 covers closed by an "all free magazines" tile, and People a grid of portraits.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: the DEPO Connect page (https://dev0.dphub.net/connect)
as a vertical "spotlight stack". Content in this order: page banner, PARTNERS (8 premium
magazines), FREE (77 basic magazines), People (84 creators), with "view all" links to
https://dev0.dphub.net/premium, /basic and /locals; render the cards in vanilla JS from the shared
data file js/connect-data.js (name, city, since, genre, line, cover, issues; people with role,
city, photo, creator flag). Keep the real DEPO header and footer, the site's dark ground and the
shared animated background (/demo20/js/shared.js, .ellipses first in body; no opaque page fill).

Design: cinematic but restrained, editorial, photo-led. Banner: a big Bodoni Moda headline
("Find the magazine for your next shoot."), a short lede, counts of partners / free / people as
anchor links, and three partner covers fanned like a deck with a soft gold spotlight.
PARTNERS: every magazine is a near-full-screen card (viewport minus header) that is
position: sticky with a small per-card offset so covered cards peek out at the top; the next
card slides over the current one, and the covered card scales to ~94% and dims (one rAF on
scroll, transforms and opacity only; no scroll-jacking; off with prefers-reduced-motion). Card:
cover big on the left, a blurred copy of the cover as the card's colour glow, "01 / 56", genre,
Paid badge, the name huge, the line in italic, City / Since / Issues, three issue thumbnails,
an "Open <name>" pill. On phones the cover fills the card and the text sits on a dark foot;
on short landscape screens the stack becomes a plain list. FREE: a grid of 2:3 covers with name,
city and a Free badge, ending with an "all free magazines" tile; People: a grid of portraits with
name, role · city and a Creator badge. Responsive to 375 px, lazy images with sizes, visible focus.

Look

• Type: Bodoni Moda (optical sizes, roman and italic) for the headline, magazine names, lines and figures; Lato (the site's own, self-hosted) for labels and body.
• Palette: site ground #18171a, ivory text #f4efe8 (with 66 % / 42 % alphas), cards rgb(20 19 22 / 0.8) with a blurred cover glow, DEPO green #53f57e for numbers and focus, gold #ffb500 for the Paid badge.
• Layout: banner (headline + fanned covers) · Partners head · the stack of 56 sticky cards (cover | name, line, facts, issues, button) · Free grid (6 / 4 / 3 / 2 columns) · People grid · footer.
• Motion: sticky stacking; while a card is covered it scales from 1 to 0.94 and a dark veil rises to 60 % (--cover 0–1 set per card in a scroll rAF); covers zoom slightly on hover; underline grows under the name. Reduced motion keeps the sticky stack only.

Built with

Borrowed

Nothing borrowed. The header, footer and background are the album's copy of the DEPO site chrome.

Config

None — static page.

Notes

• 2026-10-23: seven times the content — 56 partners (the original eight, Depo Magazine and 47 more) with 220 issues, 77 free titles, 84 people (js/connect-data.js, the same file in every Connect demo). The album has ~30 covers and 24 portraits, so the new entries reuse them as close-up crops in /_img/photos/crops/ (logos cropped away; mag1–4.jpg are the Depo Magazine covers from front/public/images/depo-magazine/), spread so the same photo never sits next to itself.
• The page sets html { scroll-behavior: auto } (site.css has smooth): with smooth scrolling, programmatic jumps (restored scroll position, screenshots) glide through the sticky stack; the banner's anchor links still glide via scrollIntoView({ behavior: 'smooth' }).
• Site classes .tile and .badge exist in site.css, so this page uses sx-tile / sx-badge.
• Kaleido has only two issues, so its card shows two thumbnails.