Connect · Newsstand — DEPO demo album

Summary

A vertical take on the DEPO Connect page (banner, PARTNERS, FREE, People) built as a newsstand after dark. Every partner magazine gets its own thin shelf: the newest issue stands in front, the older ones fan out behind it and step back into the lamp's shadow; the magazine's name, city and genre are set on the shelf's walnut lip like a shop label. The free titles are single copies on an open rack whose ledge runs on between the covers, and the people are paper contact cards with a serial number and a Connect button. Everything wraps into grids, so the page scrolls only down.

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)
— page banner, PARTNERS (56 premium magazines with their issues), FREE (77 basic magazines),
People (84 photographers, models, stylists, make-up artists) — as a vertical page: normal page
scroll, no horizontal scrollers anywhere, only wrapping grids.

Content: the shared data file js/connect-data.js (window.CONNECT: partners with name, city,
since, genre, line, issues[]; free; people with photo, role, city, creator flag). "View all"
links go to https://dev0.dphub.net/premium, /basic, /locals; cards link to their href; show the
Premium / Free / Creator badges. Keep the real DEPO header and footer and the shared animated
background (shared.js from demo20 + .ellipses), so no opaque full-page fill.

Design — "Newsstand": a premium kiosk at dusk, warm and tactile.
- Banner: a lit kiosk window — a glowing lamp strip, "Today on the stand" sign, five covers
  fanned on a walnut ledge carrying their names; beside it a big serif headline, a lead, four
  counters (partner titles, issues on the stand, free magazines, people) and two buttons.
- PARTNERS: one thin shelf per magazine, two shelves per row on desktop. The issues stand on it
  slightly fanned and overlapping (newest in front, older ones rotated and darker); the shelf
  lip is a walnut bar with a brass edge holding name, city · genre and a Premium badge; under it
  the magazine's line, "since" and the issue count. On hover the shelf leans toward the cursor
  with a restrained 3D tilt (perspective, a few degrees), the fan opens a little and the pointed
  issue lifts.
- FREE: a rack of single covers whose ledges join into one shelf per row; name, city, Free.
- People: a grid of paper contact cards — portrait, serial "No. 01", Creator stamp, name, role,
  city with a pin, a dark Connect pill.
- Type: a classic serif display face with Latin-1 accents (ALAÏS, VOÍD must render right),
  Poppins small caps for labels, Lato for text. Palette: lamp amber, brass, walnut, warm paper.
- Motion: covers settle on load, sections fade up on scroll, the hover tilt; all off under
  prefers-reduced-motion. Responsive to 375 px, lazy images below the first screen, alt texts,
  visible focus.

Look

Type: Cormorant Garamond 500 (roman + italic, self-hosted Latin subset) for the headline, section titles, magazine and people names; Poppins 600 small caps for kickers, shelf labels and buttons; Lato for text. Lazurski (the site's serif) is not used on the page: its files map Latin-1 accents to Cyrillic glyphs ("ALAÏS" would render "ALAПS").
Palette: lamp amber #f2b45a (accents, lit button), brass #c99a5b, walnut #3d2b1f / #5a3f2c / #2a1d15 (shelves), warm white #f6efe4 and #bfb09c (text on dark), paper #efe4d0 with ink #241b14 (contact cards), over the site's #18171a and the shared green background.
Layout: header · banner (headline, lead, counters, buttons | the lit kiosk window) · Partners head (kicker, title with count, intro, View all) · 2-column grid of 8 shelves · Free head · auto-fill rack of 11 covers · People head · auto-fill grid of 12 contact cards · footer. Under 1100 px the banner stacks; shelves go to one column at about 1150 px.
Motion: banner covers settle with a CSS keyframe; shelves, covers and cards fade up through IntersectionObserver; pointermove sets --rx / --ry on the shelf stand and each free cover (perspective() + rotateX/Y, at most about 5–7°, eased back on leave); the fan opens and the pointed issue lifts with CSS transitions. Older issues are darkened by an overlay pseudo-element, not a CSS filter (filtered layers dropped out of headless captures).

Built with

Part	What
HTML	public/demo40/index.html — the live DEPO header and footer, banner and the three section shells
CSS	public/demo40/css/demo40.css — this page; site.css, site-chrome.css, header.css (site copies); ellipses.css (own background)
JS	public/demo40/js/demo40.js — vanilla: renders shelves, rack and cards, hover tilt, reveal; connect-data.js — shared data; ellipses.js, header.js; /demo20/js/shared.js — the shared background
Libraries	none
Fonts	Cormorant Garamond (public/demo40/fonts/cormorant-garamond-*.woff2, Latin subset from Google Fonts, OFL); Lato, Poppins, Lazurski self-hosted for the site chrome
Images	`/_img/photos/` (partner issue covers), `/_img/site/first-page/` (free magazine pictures, people portraits)

Borrowed

The header and footer markup and the site CSS, as in the shared Connect kit (from demo20).
Cormorant Garamond by Christian Thalmann (SIL Open Font License), downloaded from Google Fonts.
Nothing else borrowed.

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 tilt only runs on a fine pointer with hover; on touch the shelves stay still.
The shelf fan computes the overlap from the shelf width with container query units (cqi), so a shelf with two issues and one with six both fit their width.

Connect · Newsstand