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

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 :

  1. BRIEF-Claude-Code.md — brief de démarrage projet (13 sections, contraintes, conventions).
  2. Asterion-VR_Refonte-2026_Strategie-et-Contenu.pdf — livrable 1 (84 p) : diagnostic, stratégie, sitemap, copy EN prête de toutes les pages.
  3. 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.)


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) :

2. Installer Bricks parent

  1. Décompresser ThirdParty/bricks.X.Y.Z.zip dans <LocalWP site>/app/public/wp-content/themes/.
  2. Activer Bricks dans WP Admin → Apparence → Thèmes.
  3. Renseigner la license dans Bricks → License (depuis ton compte bricksbuilder.io).

3. Installer WPML

  1. Dans WP Admin → Extensions → Ajouter → Téléverser, charger ThirdParty/sitepress-multilingual-cms.X.Y.Z.zip.
  2. Activer le plugin et entrer la clé de license depuis ton compte wpml.org.

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

Description
No description provided
Readme 1.1 MiB
Languages
PHP 97.6%
CSS 2.4%