Connect · Cover Wall

Summary

A vertical version of the DEPO Connect page that leads with photographs. The banner opens with "Every cover. Every face. One wall." and three columns of covers and a portrait that drift apart as you scroll. PARTNERS is a wall of every partner issue, not one card per magazine. On wide screens it has four columns, each moving at its own speed while the page scrolls. A sticky index beside the wall lists the 56 magazines with city and issue count. Pointing at a name lights up that title's covers and dims the rest. Pointing at a cover shows its magazine and issue number, and the name lights up in the index. FREE is a tight mosaic in muted colour that comes to full colour on hover. People is a four-column portrait grid with every second column set lower. For visitors looking for a magazine to publish in, or for people to shoot with.

Prompt

The brief this page was built from.

Build one page of the DEPO demo album: a vertical presentation of the DEPO Connect page
(dev0.dphub.net/connect, front/templates/connect/) — page banner, PARTNERS (premium magazines),
FREE (basic magazines), People, in that order. Normal page scroll only: no horizontal rows.

Content and function:
- Render everything from js/connect-data.js (window.CONNECT: 56 partners, 77 free magazines,
  84 people, 220 partner issue covers); "view all" links go to dev0.dphub.net/premium, /basic,
  /locals; cards link to their href; Paid / Free / Creator badges from the data.
- Keep the real DEPO header and footer, the dark #18171a site and the shared animated background
  (/demo20/js/shared.js with data-demo, .ellipses first in body; no opaque fill over it).
- 375–1920 px with no horizontal page scroll, visible focus, alt texts, lazy images after the
  first screen with fixed aspect ratios, prefers-reduced-motion respected.

Design — "Cover Wall", photo-led and immersive but readable:
- Banner: a big serif headline "Every cover. Every face. One wall." with the counts (partners,
  issues, free titles, people) and three columns of covers and a portrait that drift apart as
  the page scrolls.
- PARTNERS: every partner issue (220) on a wall of four columns (three on tablets, two on phones),
  each column drifting at its own speed while the page scrolls (gentle parallax, rAF +
  transforms; off under reduced motion and on phones). Beside it a sticky index: kicker,
  title, the 56 magazines with city and issue count; pointing at a name lights up its covers
  and dims the rest; hovering a cover names its magazine and issue (caption on the cover and the
  name lit in the index).
- FREE: a tight, quieter mosaic (6 columns, 6 px gaps, a few tiles spanning two rows or columns),
  muted colour until hover, small serif names.
- People: a staggered portrait grid (four columns, every second one set lower), serif names,
  role and city in small caps.
- Type: Cormorant Garamond for display (not the site's Lazurski: its files map Latin-1 letters to
  Cyrillic, so ALAÏS / VOÍD break), Lato for text; one warm accent, DEPO yellow #ffb500.

Look

• Type: Cormorant Garamond 500/600 and italic 500 for headings, magazine and people names and the counts (lining figures). Lato (site copy) for text, kickers and small caps.
• Palette: ground #18171a with the shared green background; cream #f3eee4 for text, the same at 66 % for secondary text and 14 % for hairlines; DEPO yellow #ffb500 for accents (italic headline line, index numbers, focus, Paid badges); #8ee09f for the Creator badge.
• Layout: banner in two columns (text and counts | three masked columns of images). PARTNERS is a 310 px sticky index next to the wall (4 / 3 / 2 columns, the second and fourth start lower). FREE has a header row (kicker, title, short text, view all) above a 6-column mosaic, which becomes 2 columns on phones. People is a 4 / 3 / 2-column staggered grid.
• Motion: while the wall is on screen, each column moves by its distance from the viewport centre times its own factor (−0.06, 0.10, −0.12, 0.05, at most ±170 px). The banner columns move with the scroll position. Both are rAF-throttled transforms. Hover shows a gradient caption and zooms the image a little. Index focus dims the other covers to 16 % grayscale. Reduced motion and widths under 700 px have no drift and no transitions.

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 wall interleaves the issues (one from each magazine in turn), so neighbouring covers are rarely from the same title. The index shows the grouping instead.
• On touch screens the cover captions are always shown (no hover).