j.foucher
c8e89e1725
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>
56 lines
2.0 KiB
PHP
56 lines
2.0 KiB
PHP
<?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);
|