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>
Asterion VR — Refonte du site web 2026
Repo de la refonte d'asterionvr.com : nouveau site institutionnel B2B/B2G de la plateforme XR PROSERVE pour les forces de sécurité européennes (police, special forces, military, firefighters).
Stack : WordPress 6.x + Bricks Builder (parent) + child theme custom
asterion-bricks+ WPML. Cible : Lighthouse 90+, WCAG 2.1 AA, mobile-first, RGPD-natif, hébergement français.
Documents de référence
À lire dans cet ordre avant tout travail technique :
BRIEF-Claude-Code.md— brief de démarrage projet (13 sections, contraintes, conventions).Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf— livrable 1 (84 p) : diagnostic, stratégie, sitemap, copy EN prête de toutes les pages.Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf— livrable 2 (31 p) : tokens, composants UI, wireframes des 7 templates, motion, a11y.
Les .txt extraits des PDF sont gitignorés. Pour les régénérer :
pdftotext -layout "Asterion-VR_Refonte-2026_Design-Handoff-Specification.pdf" "design-handoff.txt"
pdftotext -layout "Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf" "strategie-et-contenu.txt"
(pdftotext est inclus dans Git for Windows : C:\Program Files\Git\mingw64\bin\pdftotext.exe.)
Setup local (LocalWP + symlink Git)
1. Pré-requis
- LocalWP (https://localwp.com) configuré en mode
localhost(Preferences → Advanced → Router Mode =localhost) pour cohabiter avec d'autres stacks locales (XAMPP, etc.). - Site LocalWP créé : nom Asterion 2026, dossier
C:\Users\j_foucher\Local Sites\asterion-2026\. - ZIP des plugins commerciaux (chacun doit fournir les siens, depuis son propre compte) :
bricks.X.Y.Z.zip— depuis https://bricksbuilder.iositepress-multilingual-cms.X.Y.Z.zip— depuis https://wpml.org- À déposer dans
ThirdParty/(gitignored).
2. Installer Bricks parent
- Décompresser
ThirdParty/bricks.X.Y.Z.zipdans<LocalWP site>/app/public/wp-content/themes/. - Activer Bricks dans WP Admin → Apparence → Thèmes.
- Renseigner la license dans Bricks → License (depuis ton compte bricksbuilder.io).
3. Installer WPML
- Dans WP Admin → Extensions → Ajouter → Téléverser, charger
ThirdParty/sitepress-multilingual-cms.X.Y.Z.zip. - Activer le plugin et entrer la clé de license depuis ton compte wpml.org.
4. Symlink le child theme depuis ce repo vers LocalWP
Depuis une PowerShell admin :
New-Item -ItemType SymbolicLink `
-Path "C:\Users\j_foucher\Local Sites\asterion-2026\app\public\wp-content\themes\asterion-bricks" `
-Target "C:\ASTERION\GIT\WP2026\wp-content\themes\asterion-bricks"
Puis dans WP Admin → Apparence → Thèmes, activer Asterion Bricks (le child theme).
Approche
Bricks-first, child theme minimaliste. Le rendu de chaque page est piloté par Bricks Builder (Templates pour header/footer/archives + pages éditées dans le builder). Le child theme se contente d'apporter le design system (tokens CSS), Inter self-hosté (RGPD) et les Custom Post Types. Voir wp-content/themes/asterion-bricks/README.md pour le détail.
Une session de PHP-rendering plus traditionnelle a été archivée dans la branche Git archive/session-2-php-templates ainsi que dans RESTART-PLAN.md à la racine. Ne pas réintroduire ce pattern sans relire ces deux sources.
Structure du repo
WP2026/
├── BRIEF-Claude-Code.md # brief projet (lecture obligatoire)
├── README.md # ce fichier
├── RESTART-PLAN.md # historique de la décision Bricks-first
├── MISSING-ASSETS.md # tracking des visuels/medias manquants
├── *.pdf # 2 livrables stratégie + design (sources de vérité)
├── ThirdParty/ # gitignored — ZIP plugins commerciaux
│ ├── bricks.*.zip
│ └── sitepress-multilingual-cms.*.zip
├── content-source/ # copy EN extrait du PDF (référence + génération)
│ ├── solutions-data.php
│ ├── industries-data.php
│ ├── technology-data.php
│ ├── editorial-data.php
│ ├── forms-data.php
│ └── README.md
└── wp-content/
└── themes/
└── asterion-bricks/ # child theme minimaliste, voir son README
├── style.css
├── functions.php
├── theme.json
├── README.md
├── inc/
│ └── cpt.php
└── assets/
├── css/
│ ├── tokens.css # design system, source de vérité
│ └── utilities.css # skip-link, sr-only, focus-visible
├── fonts/ # Inter Variable self-hosté
└── img/
Conventions
- CSS : préfixe
av-(asterion-vr), nommage BEM-light, zéro hardcode (tout via tokens). - JS : vanilla, defer, modules ES6 si nécessaire.
- Images : AVIF + WebP + JPG fallback, lazy-loading natif sauf hero.
- Vidéos : MP4 H.264 + WebM VP9, autoplay muted plays-inline loop, poster image.
- Commits : Conventional Commits (
feat:,fix:,chore:,style:,refactor:,test:,docs:). - Branches :
main= stable,feat/<scope>= work in progress, merge après validation.
Hors scope phase actuelle
Production (OVH/O2switch + Cloudflare), migration depuis Avada, plan 301, traduction FR (linguiste interne), création articles blog éditoriaux (post-launch).
Contact
- Client : Jérôme Foucher — Asterion VR — jerome.foucher@asterionvr.com
- Repo : git.polymorph.fr (privé)