j.foucher c8e89e1725 style(home): transparent header at top, opaque navy on scroll ...

On the home page only, the header sits transparently over the 100vh video
hero so the cinematic background is fully visible. As soon as the user
scrolls, Bricks's native sticky JS adds the `.on-scroll` class to
#brx-header — we fade in the navy background + a soft shadow over 350ms
for a polished cinematic feel.

Implementation : pure CSS via wp_head(), gated on is_front_page() so other
pages keep their solid navy header.

Extras :
- A subtle navy gradient (rgba 0.55 → 0) layered behind the menu at the
  very top via ::before, keeping nav text readable on bright video frames.
  Fades out once .on-scroll kicks in (gradient redundant once bg is solid).
- Box-shadow on scrolled state (0 2px 14px rgba(0,0,0,0.22)) so the
  header lifts off the page content visually.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-15 08:26:18 +02:00

2.0 KiB

Raw Permalink Blame History

View Raw