From c8e89e17251a97b60209a9efecb1b3788f3b56a7 Mon Sep 17 00:00:00 2001
From: "j.foucher" <j.foucher@polymorph.fr>
Date: Fri, 15 May 2026 08:26:18 +0200
Subject: [PATCH] style(home): transparent header at top, opaque navy on scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 tools/av-header-transparent-on-home.php | 55 +++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 tools/av-header-transparent-on-home.php

diff --git a/tools/av-header-transparent-on-home.php b/tools/av-header-transparent-on-home.php
new file mode 100644
index 0000000..20fcfb4
--- /dev/null
+++ b/tools/av-header-transparent-on-home.php
@@ -0,0 +1,55 @@
+<?php
+/**
+ * Plugin Name: Asterion — Transparent header on home + opaque on scroll
+ * Description: On the home page only, the header sits transparently over the
+ *   100vh video hero. Once the user scrolls past the top, Bricks adds the
+ *   `.on-scroll` class to `#brx-header` and we fade in the navy background +
+ *   a subtle shadow. Other pages keep the default navy header.
+ *
+ * Implementation : pure CSS via wp_head(). Uses Bricks's native `.brx-sticky`
+ * + `.on-scroll` classes (added by the sticky header JS once the user scrolls).
+ */
+defined('ABSPATH') || exit;
+
+add_action('wp_head', function () {
+    // Only inject on the home page (front page) — other pages keep default header
+    if (! is_front_page()) return;
+    ?>
+    <style id="av-header-transparent-on-home">
+    /* Default header state on home : fully transparent over the hero video */
+    body.home #brx-header,
+    body.home #brx-header > section,
+    body.home #brx-header #brxe-hdrsec {
+        background: transparent !important;
+        box-shadow: none;
+        transition: background-color 0.35s ease, box-shadow 0.35s ease;
+    }
+
+    /* Subtle gradient at the very top so the menu text stays readable
+       on any frame of the video (handles bright frames gracefully). */
+    body.home #brx-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        background: linear-gradient(to bottom, rgba(11, 31, 58, 0.55) 0%, rgba(11, 31, 58, 0) 100%);
+        pointer-events: none;
+        z-index: -1;
+        transition: opacity 0.35s ease;
+    }
+
+    /* Scrolled state : navy background fades in, gradient fades out, shadow appears */
+    body.home #brx-header.on-scroll,
+    body.home #brx-header.on-scroll > section,
+    body.home #brx-header.on-scroll #brxe-hdrsec {
+        background: var(--color-brand-navy) !important;
+        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
+    }
+    body.home #brx-header.on-scroll::before {
+        opacity: 0;
+    }
+    </style>
+    <?php
+}, 999);