The Cover, Peek Menu

Summary

A copy of demo5 (old home3, the owner's favourite) used to try out a header behaviour. The page itself is unchanged: a pinned DEPO magazine cover whose portrait and cover line change with the six values, the magazines as an open list, the roles in one sentence, the faces, a closing masthead. What is new is the real DEPO site header. It scrolls away with the page as usual. After that, the pointer's height on the screen decides how much of it comes back. Crossing a "reveal start" line upward shows a quarter of the header, moving higher shows more, and near the top it locks fully open. Below the line it slides away after a short delay. It is meant for the real site header, so the cover page is just the test bench.

Prompt

The brief this page was built from.

Use the demo5 cover page unchanged as a test bench for a new behaviour of the real DEPO site
header ("peek menu").

- The header scrolls away with the page as usual. After that, the pointer's height on the screen
  decides how much of it comes back: crossing a "reveal start" line upward shows a quarter of
  the header, moving higher shows more, near the top it locks fully open; below the line it
  slides away after a short delay.
- Keyboard focus inside the header always opens it fully; touch screens keep the normal header.
- Make the thresholds and delays settings, so the behaviour can be moved to the live header.

Look

• Type: Schibsted Grotesk 400/500/700/900 for everything on the page: 900 for the DEPO cover masthead and the cover lines, 700 for the step headlines. The site header and footer keep the site fonts (Lato, Lazurski, Poppins in /demo6/fonts/).
• Palette: ground #e8ebe4, paper #f4f6f1, ink #121612, soft ink #4a524b, deep green field #0f2a1a (header ground, magazines section), green #2f7d43 (links, focus), brand yellow #ffb500 (light button, open magazine row).
• Layout: as demo5. Seven steps (the hero "Put your work on the cover" and the six values) run in a text column on the left while a 2:3 cover frame stays pinned on the right; then the magazines as an accordion list on deep green, "Who DEPO is for" as one sentence, a row of faces and the closing masthead. The only layout change is that the pinned stage now uses the full viewport height (top: 0; height: 100svh), because the header no longer always covers the top.
• Motion: demo5's cover crossfade (opacity + scale, IntersectionObserver on the steps) and its reveals. The header is moved with transform: translateY() only, eased each frame towards a target (factor 0.18 in a requestAnimationFrame loop). Zones from the top, H = header height: [0, H) the header, [H, 2H) a gap, [2H, 3H) a third band whose bottom is the reveal start. Crossing it shows 25 % of the header; the share grows as the pointer rises; at H the header locks. 700 ms below the line and it slides away. A soft shadow appears while it floats. Touch devices (no hover) get the classic "show on scroll up" instead.

Built with

Borrowed

• The whole page body is demo5 (home3), copied with cp and given an extra body class proto-home3-menu.
• The real DEPO site header and footer markup, styled by the /demo6/css/* snapshot of the DEPO front (taken at commit 43a7a8b^), with the site's own /demo6/js/* scripts.
• Google Fonts (Schibsted Grotesk); the magazine covers and community portraits from DEPO.
• No third-party code.

Config

None — static page.

Notes

• The reveal was not checked in a browser when it was made (Chromium could not start on the server that day); the owner was asked to try it by hand.
• The behaviour is the useful part: if it is adopted, it belongs in the site header script, not in this page.