j.foucher
773f137eb7
Scaffolds all components needed for the home and ships a working
front-page implementation covering the 9-section wireframe.
Components (assets/css/components.css)
- 13 sections per Design Handoff section 3:
buttons, links, forms, cards (5 variants), stat callouts, header,
nav, mega menu, drawer, footer, hero, logo strip, eyebrow,
section title/lead, conversion banner, scroll reveal.
- All token-driven, prefixed `av-`, BEM-light. Mobile-first with
768/1024/1280 breakpoints. Respects prefers-reduced-motion.
Global templates
- header.php: sticky header (60px mobile / 72px desktop), 5-item
nav, language switcher, primary CTA, mobile drawer with hamburger
toggle. Skip link first focusable element.
- footer.php: 5-column dark footer (Solutions, Industries, Why
Asterion, Why Asterion, Newsletter), bottom strip with legal
links + social.
- index.php: archive/search/blog fallback rendering posts in
card-blog layout.
- front-page.php: full home with 9 sections, EN copy lifted
verbatim from PDF Strategie D.1:
1. Hero "Your Last Mistake Should Be in VR." + 2 CTAs
2. Trust bar (placeholder logos + 4 inline metrics)
3. Solutions: MY / FLEX / ACADEMY (3 cards)
4. Industries: Police / SF / Military / Firefighters (2x2)
5. Feature heroes: UWeD, Instructor Cockpit, AAR (alternating)
6. Featured case study with 3 stat callouts
7. Testimonials (3 quote cards)
8. Latest insights (queries `post`; placeholder when empty)
9. Conversion banner (Demo / T&E / Quote)
Verified: HTTP 200 on http://localhost:10004/, 73 KB HTML, 418 ms.
Outstanding (deferred)
- Hero video master + photographs (see MISSING-ASSETS.md)
- Mega menu content (links currently flat to section index)
- Form posts (newsletter currently no-op POST)
- Bricks license activation (manual, requires user key)
- WPML setup wizard (manual, requires user key)
- Lighthouse + axe full audit (visual env required)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Asterion Bricks — Child theme
Custom WordPress child theme for asterionvr.com, built on top of Bricks Builder. Tactical-cinematic design system for the PROSERVE XR training platform.
Structure
asterion-bricks/
├── style.css # WP theme metadata only (CSS lives in assets/css/)
├── functions.php # enqueues, theme support, includes
├── theme.json # Gutenberg color/typo palette
├── assets/
│ ├── css/
│ │ ├── tokens.css # design tokens — source of truth
│ │ ├── utilities.css # CSS reset + utility classes (.av-container, etc.)
│ │ └── components.css # component styles (buttons, cards, header, footer…)
│ ├── js/
│ │ └── main.js # vanilla JS, defer-loaded
│ ├── fonts/ # self-hosted Inter (RGPD)
│ └── img/ # static visuals
├── templates/ # Bricks template JSON exports (versioned)
└── inc/
├── cpt.php # custom post types: case_study, scenario
└── seo.php # Schema.org JSON-LD overrides
Conventions
- CSS prefix :
av-(asterion-vr) on every custom selector to avoid collision with Bricks classes. - BEM-light naming :
.av-card,.av-card--feature,.av-card__icon,.av-card.is-loading. - Zero hardcoded values — every color, spacing, radius and duration goes through
tokens.css. - JS : vanilla, defer-loaded, prefer
IntersectionObserverover scroll listeners. - A11y : keyboard reachable,
:focus-visibleoutline, ARIA where needed, contrast ≥ 4.5:1,prefers-reduced-motionrespected.
Activation
- Ensure Bricks parent is installed at
wp-content/themes/bricks/. - WP Admin → Appearance → Themes → activate Asterion Bricks.
Performance budget (per BRIEF section 9)
| Asset | Budget |
|---|---|
| HTML initial | < 100 KB gzipped |
| CSS total | < 50 KB gzipped |
| JS initial | < 200 KB gzipped |
| Hero video | < 2 MB |
| Hero poster | < 150 KB |
| LCP / CLS / TBT | < 2.5s / < 0.1 / < 200ms |
License
GPL v2 or later. Same as WordPress core.