Straight from the Covers

Summary

The first of four variants asked for in one prompt: "the same, but improved" — demo2 kept in the DEPO brand (dark ground, Lazurski gold titles, green buttons, the real header and footer) with each static block turned into something better composed or interactive. The Client Map becomes a role switcher (photographer, model, make-up artist, stylist, magazine) that shows what DEPO gives each role; the photo walls become one wall of 30 covers with magazine filters. It is the brand-faithful option next to the lighter demo5.

Prompt

The brief this page was built from.

Make an improved version of the demo2 home page that stays strictly in the DEPO brand: dark
ground #18171a, Lazurski gold #ffb500 titles, green #469a58 buttons, Lato and Poppins, the real
header and footer. Turn every static block into something better composed or interactive.

- Banner full-bleed with a right-side scrim, the headline "The speed of your vision", a lead and
  buttons in the right half, three covers fanned at the bottom right.
- "Straight from the covers": one wall of 30 covers with magazine filter chips.
- The Client Map as a role switcher (photographer, model, make-up artist, stylist, magazine)
  that shows what DEPO gives each role; the values as composed cards; a closing green band.

Look

Type: Lazurski 700 (/demo4/fonts/) for the hero headline (up to 92 px), section titles (up to 64 px), value names and role tabs; Lato for body copy; Poppins for buttons, filter chips, captions and names.
Palette: site ground #18171a with --surface panels, brand gold #ffb500 for headlines, the active filter chip and the active tab, brand green #469a58 for buttons, tab underline, role bullets and the closing band, white text, #a1a1aa muted notes, #d6d6da value text.
Layout: banner photo full-bleed with a right-side scrim, "The speed of your vision" headline, lead and buttons in the right half, three covers fanned at the bottom right; "Straight from the covers" with filter chips per magazine and a capped 5-column wall plus "Show all 30 covers"; "What DEPO stands on": a sticky title on the left, the six values as a list on the right; "Who you are on DEPO": tabs over a portrait and three lines per role; an endless band of covers; "People of DEPO" in six columns with every second portrait dropped 56 px; a green "Your next cover starts here" band; footer.
Motion: hero photo settles from scale(1.06), headline and fanned covers rise in with delays; the wall drifts column against column on scroll (rAF) and refilters with a fade; tab panels fade in; the cover band scrolls in a 90 s CSS marquee that pauses on hover; sections reveal with IntersectionObserver and stagger among siblings. Reduced motion stops all of it.

Built with

Part	What
HTML	public/demo4/index.html
CSS	public/demo4/css/demo4.css + `/demo4/css/globals.css`, `site.css`, `site-chrome.css`, `header.css`, `site-header.css`, `header-menus.css`, `app.css`
JS	public/demo4/js/demo4.js — vanilla (reveal, wall layout + drift + filter + show all, role tabs); site `ellipses.js`, `site.js`, `app.js`, `i18n.js`
Libraries	none
Fonts	Lazurski, Lato, Poppins, self-hosted in `/demo4/fonts/`
Images	`/_img/site/media/c217eb6b….png` banner, `/_img/photos/photo-01…30.jpg` covers, `/_img/site/first-page/` portraits and avatars

Borrowed

The real DEPO site header and footer with the site-asset snapshot (/demo4/css/, /demo4/js/, /demo4/fonts/, /_img/site/) of the site CSS, JS, fonts and images (front at commit 43a7a8b^); copy from the live site's sections (values, roles).
Made with the taste-skill v2.0.0 (github.com/Leonxlnx/taste-skill) and frontend-design skills, as the prompt asked; the taste-skill inspector was used for 1440 / 768 / 390 screenshots.
Magazine covers from the DEPO gallery.

Config

None — static page.

Notes

The inspector's remaining findings are in the site's own header and footer, kept 1:1 on purpose.