From 773f137eb772278a7678e69049608da22c79acc1 Mon Sep 17 00:00:00 2001 From: "j.foucher" Date: Sat, 9 May 2026 12:08:43 +0200 Subject: [PATCH] feat(home): build complete homepage and global templates 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) --- .../asterion-bricks/assets/css/components.css | 902 ++++++++++++++++-- wp-content/themes/asterion-bricks/footer.php | 96 ++ .../themes/asterion-bricks/front-page.php | 377 ++++++++ wp-content/themes/asterion-bricks/header.php | 114 +++ wp-content/themes/asterion-bricks/index.php | 70 ++ 5 files changed, 1462 insertions(+), 97 deletions(-) create mode 100644 wp-content/themes/asterion-bricks/footer.php create mode 100644 wp-content/themes/asterion-bricks/front-page.php create mode 100644 wp-content/themes/asterion-bricks/header.php create mode 100644 wp-content/themes/asterion-bricks/index.php diff --git a/wp-content/themes/asterion-bricks/assets/css/components.css b/wp-content/themes/asterion-bricks/assets/css/components.css index 004b994..1f384de 100644 --- a/wp-content/themes/asterion-bricks/assets/css/components.css +++ b/wp-content/themes/asterion-bricks/assets/css/components.css @@ -6,36 +6,28 @@ * * Naming : `.av-` base, `.av---`, * `.av-__`, `.av-.is-`. + * + * Reference : Design Handoff Specification, section 3. + * + * Index : + * 1. Buttons .av-btn + * 2. Links .av-link + * 3. Forms .av-input / .av-label / .av-select / .av-textarea + * 4. Cards .av-card and variants + * 5. Stat callout .av-stat + * 6. Header & navigation .av-header / .av-nav / .av-megamenu / .av-drawer + * 7. Footer .av-footer + * 8. Hero .av-hero + * 9. Logo strip .av-logo-strip + * 10. Eyebrow / overline .av-eyebrow + * 11. Section titles .av-section__title / .av-section__lead + * 12. Conversion banner .av-conversion-banner + * 13. Reveal animation [data-av-reveal] */ -/* ============================================================================ - Section index (filled progressively as components ship) - - 1. Buttons .av-btn - 2. Links .av-link - 3. Forms .av-input, .av-label, .av-select, .av-textarea - 4. Cards .av-card and variants - 5. Stat callout .av-stat - 6. Navigation header .av-header, .av-nav, .av-megamenu, .av-drawer - 7. Footer .av-footer - 8. Alerts & toasts .av-alert, .av-toast - 9. Modals .av-modal - 10. Tooltips & popovers .av-tooltip - 11. Tabs & accordions .av-tabs, .av-accordion - 12. Tables .av-table - 13. Badges & tags .av-badge - - Reference : Design Handoff Specification, section 3. - ============================================================================ */ - /* ============================================================================ 1. Buttons (Design Handoff section 3.1) - - Variants : primary, secondary, ghost, on-dark, destructive - Sizes : sm (32px), md (44px default), lg (52px), xl (60px hero only) - States : default, hover, focus, active, disabled, loading - Border radius : radius-sm by default (tactical aesthetic — crisp corners). ============================================================================ */ .av-btn { @@ -49,7 +41,6 @@ font-size: var(--text-body-md); font-weight: var(--font-weight-semibold); line-height: 1; - letter-spacing: 0; text-decoration: none; border: var(--border-default) solid transparent; border-radius: var(--radius-sm); @@ -65,43 +56,13 @@ } .av-btn:disabled, -.av-btn.is-disabled { - opacity: 0.4; - cursor: not-allowed; - pointer-events: none; -} +.av-btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } +.av-btn.is-loading { cursor: wait; } -.av-btn.is-loading { - cursor: wait; -} - -/* --- Sizes --- */ - -.av-btn--sm { - height: 32px; - padding: 0 var(--space-3); - font-size: var(--text-body-sm); -} - -.av-btn--md { - height: 44px; - padding: 0 var(--space-5); -} - -.av-btn--lg { - height: 52px; - padding: 0 var(--space-7, 1.75rem); - font-size: var(--text-body-lg); -} - -.av-btn--xl { - height: 60px; - padding: 0 var(--space-9, 2.25rem); - font-size: var(--text-h4); - font-weight: var(--font-weight-bold); -} - -/* --- Variant : primary (gold fill, navy text) --- */ +.av-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-body-sm); } +.av-btn--md { height: 44px; padding: 0 var(--space-5); } +.av-btn--lg { height: 52px; padding: 0 1.75rem; font-size: var(--text-body-lg); } +.av-btn--xl { height: 60px; padding: 0 2.25rem; font-size: var(--text-h4); font-weight: var(--font-weight-bold); } .av-btn--primary { background-color: var(--color-brand-gold); @@ -115,13 +76,7 @@ transform: translateY(-1px); box-shadow: var(--shadow-glow-gold); } -.av-btn--primary:active { - transform: translateY(0); - filter: brightness(0.92); - box-shadow: none; -} - -/* --- Variant : secondary (outlined, navy text) --- */ +.av-btn--primary:active { transform: translateY(0); filter: brightness(0.92); box-shadow: none; } .av-btn--secondary { background-color: transparent; @@ -134,8 +89,6 @@ color: var(--color-text-on-dark); } -/* --- Variant : ghost (navy text, no border) --- */ - .av-btn--ghost { background-color: transparent; color: var(--color-brand-navy); @@ -146,12 +99,6 @@ background-color: var(--color-bg-subtle); } -/* --- Variant : on-dark (for dark backgrounds — text gold or white) --- */ - -.av-btn--on-dark.av-btn--primary { - background-color: var(--color-brand-gold); - color: var(--color-brand-navy); -} .av-btn--on-dark.av-btn--secondary { color: var(--color-text-on-dark); border-color: var(--color-text-on-dark); @@ -161,25 +108,19 @@ background-color: var(--color-text-on-dark); color: var(--color-brand-navy); } -.av-btn--on-dark.av-btn--ghost { - color: var(--color-text-on-dark); -} +.av-btn--on-dark.av-btn--ghost { color: var(--color-text-on-dark); } .av-btn--on-dark.av-btn--ghost:hover, .av-btn--on-dark.av-btn--ghost:focus-visible { background-color: var(--color-bg-dark-elevated); } -/* --- Variant : destructive --- */ - .av-btn--destructive { background-color: var(--color-alert-red); color: var(--color-text-on-dark); border-color: var(--color-alert-red); } .av-btn--destructive:hover, -.av-btn--destructive:focus-visible { - filter: brightness(1.08); -} +.av-btn--destructive:focus-visible { filter: brightness(1.08); } /* ============================================================================ @@ -197,37 +138,804 @@ text-decoration-thickness: 1px; text-underline-offset: 4px; } -.av-link--on-dark { +.av-link--on-dark { color: var(--color-text-on-dark); } +.av-link--on-dark:hover { color: var(--color-brand-gold); } + +.av-link--with-arrow { + display: inline-flex; + align-items: center; + gap: var(--space-2); + font-weight: var(--font-weight-semibold); +} +.av-link--with-arrow::after { + content: "→"; + transition: transform var(--duration-fast) var(--ease-default); +} +.av-link--with-arrow:hover::after { transform: translateX(4px); } + + +/* ============================================================================ + 3. Forms — to be filled when conversion templates are built + ============================================================================ */ + +.av-input, .av-textarea, .av-select { + display: block; + width: 100%; + height: 44px; + padding: 10px 12px; + font-family: inherit; + font-size: var(--text-body-md); + color: var(--color-text-primary); + background-color: var(--color-bg-default); + border: var(--border-thin) solid var(--color-border-default); + border-radius: var(--radius-sm); + transition: border-color var(--duration-fast) var(--ease-default); +} +.av-textarea { height: auto; min-height: 96px; resize: vertical; } +.av-input:focus, +.av-textarea:focus, +.av-select:focus { + border-color: var(--color-info); + border-width: var(--border-default); + outline: none; + padding: 9px 11px; /* compensate for 1px extra border */ +} +.av-input.is-error, +.av-textarea.is-error { border-color: var(--color-error); border-width: var(--border-default); } +.av-input.is-success { border-color: var(--color-success); border-width: var(--border-default); } +.av-input:disabled { background: var(--color-bg-subtle); color: var(--color-text-muted); } + +.av-label { + display: block; + font-size: var(--text-body-md); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-2); +} +.av-label__required { color: var(--color-error); margin-left: var(--space-1); } + +.av-helper { + display: block; + margin-top: var(--space-2); + font-size: var(--text-body-sm); + color: var(--color-text-muted); +} +.av-helper.is-error { color: var(--color-error); } + + +/* ============================================================================ + 4. Cards (Design Handoff section 3.4) + ============================================================================ */ + +.av-card { + display: flex; + flex-direction: column; + background-color: var(--color-bg-elevated); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + overflow: hidden; + transition: + box-shadow var(--duration-default) var(--ease-default), + transform var(--duration-default) var(--ease-default); +} +.av-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} +.av-card.is-on-dark { + background-color: var(--color-bg-dark-elevated); color: var(--color-text-on-dark); } -.av-link--on-dark:hover { + +.av-card__media { + display: block; + aspect-ratio: 4 / 3; + background-color: var(--color-bg-subtle); + overflow: hidden; +} +.av-card__media img, +.av-card__media video { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform var(--duration-default) var(--ease-default); +} +.av-card:hover .av-card__media img { transform: scale(1.04); } + +.av-card__body { + display: flex; + flex-direction: column; + flex: 1; + padding: var(--space-6); + gap: var(--space-3); +} +@media (min-width: 768px) { + .av-card__body { padding: var(--space-8); } +} + +.av-card__eyebrow { + font-family: var(--font-body); + font-size: var(--text-overline); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-overline); + color: var(--color-text-muted); +} +.av-card.is-on-dark .av-card__eyebrow { color: var(--color-brand-gold); } + +.av-card__title { + font-family: var(--font-display); + font-size: var(--text-h3); + line-height: var(--leading-h3); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + letter-spacing: var(--tracking-snug); +} +.av-card.is-on-dark .av-card__title { color: var(--color-text-on-dark); } + +.av-card__excerpt { + font-size: var(--text-body-md); + line-height: var(--leading-body-md); + color: var(--color-text-secondary); +} +.av-card.is-on-dark .av-card__excerpt { color: var(--color-text-on-dark-muted); } + +.av-card__cta { margin-top: auto; padding-top: var(--space-4); } + +/* Variant : feature card (icon top instead of image) */ +.av-card--feature .av-card__icon { + width: 48px; + height: 48px; + margin-bottom: var(--space-2); color: var(--color-brand-gold); } +/* Variant : case study (image with overlay) */ +.av-card--case-study .av-card__media { aspect-ratio: 16 / 9; } +.av-card--case-study .av-card__metric { + font-family: var(--font-display); + font-size: var(--text-display-md); + font-weight: var(--font-weight-bold); + line-height: var(--leading-display-md); + color: var(--color-brand-gold); +} -/* ============================================================================ - 3. Forms — placeholder - To be filled from Design Handoff section 3.3 when conversion templates are built. - ============================================================================ */ +/* Variant : quote (testimonial) */ +.av-card--quote { + background-color: var(--color-bg-subtle); + padding: var(--space-8); + gap: var(--space-4); +} +.av-card--quote::before { + content: "“"; + font-family: var(--font-display); + font-size: 4rem; + font-weight: var(--font-weight-bold); + line-height: 1; + color: var(--color-brand-gold); + margin-bottom: -2.5rem; +} +.av-card--quote .av-card__quote { + font-size: var(--text-body-lg); + line-height: var(--leading-body-lg); + color: var(--color-text-primary); + font-style: italic; +} +.av-card--quote .av-card__attribution { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-style: normal; +} + +/* Variant : blog */ +.av-card--blog .av-card__media { aspect-ratio: 16 / 9; } /* ============================================================================ - 4. Cards — placeholder - To be filled from Design Handoff section 3.4 when home solutions/industries - sections are built. + 5. Stat callout (Design Handoff section 3.4 - stat callout component) ============================================================================ */ +.av-stat { + display: flex; + flex-direction: column; + gap: var(--space-1); +} + +.av-stat__value { + font-family: var(--font-display); + font-size: var(--text-display-lg); + line-height: var(--leading-display-lg); + font-weight: var(--font-weight-bold); + color: var(--color-brand-navy); + letter-spacing: var(--tracking-tight); +} +.av-stat--gold .av-stat__value { color: var(--color-brand-gold); } +.av-stat--on-dark .av-stat__value { color: var(--color-text-on-dark); } +.av-stat--on-dark.av-stat--gold .av-stat__value { color: var(--color-brand-gold); } + +.av-stat__label { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-overline); + color: var(--color-text-muted); +} +.av-stat--on-dark .av-stat__label { color: var(--color-text-on-dark-muted); } + +.av-stat__source { + font-size: var(--text-overline); + color: var(--color-text-muted); +} + /* ============================================================================ - 5. Stat callout — placeholder + 6. Header & navigation (Design Handoff section 3.5) ============================================================================ */ +.av-header { + position: sticky; + top: 0; + z-index: var(--z-sticky); + background-color: var(--color-bg-default); + height: 60px; + display: flex; + align-items: center; + transition: box-shadow var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default); +} +@media (min-width: 1024px) { + .av-header { height: 72px; } +} +.av-header.is-scrolled { box-shadow: var(--shadow-sm); } + +.av-header__inner { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + gap: var(--space-6); +} + +.av-header__logo { + display: flex; + align-items: center; + height: 32px; + font-family: var(--font-display); + font-weight: var(--font-weight-bold); + font-size: var(--text-h4); + color: var(--color-brand-navy); + letter-spacing: 0.05em; + text-transform: uppercase; + text-decoration: none; + flex-shrink: 0; +} +.av-header__logo svg, .av-header__logo img { height: 32px; width: auto; } + +.av-nav { + display: none; + align-items: center; + gap: var(--space-6); + flex: 1; + justify-content: center; +} +@media (min-width: 1024px) { + .av-nav { display: flex; } +} + +.av-nav__item { position: relative; } + +.av-nav__link { + display: inline-flex; + align-items: center; + gap: var(--space-1); + height: 60px; + padding: 0 var(--space-2); + font-size: var(--text-body-md); + font-weight: var(--font-weight-medium); + color: var(--color-text-primary); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-default); +} +.av-nav__link:hover, +.av-nav__link[aria-expanded="true"] { color: var(--color-brand-gold); } +.av-nav__link[aria-haspopup="true"]::after { + content: "▾"; + font-size: 0.7em; + margin-left: var(--space-1); + transition: transform var(--duration-fast) var(--ease-default); +} +.av-nav__link[aria-expanded="true"]::after { transform: rotate(180deg); } + +.av-header__right { + display: flex; + align-items: center; + gap: var(--space-4); + flex-shrink: 0; +} + +.av-lang-switch { + display: none; + align-items: center; + gap: var(--space-2); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-medium); +} +@media (min-width: 1024px) { .av-lang-switch { display: inline-flex; } } +.av-lang-switch__current { + color: var(--color-brand-navy); + font-weight: var(--font-weight-semibold); +} +.av-lang-switch__other { color: var(--color-text-muted); } +.av-lang-switch__other:hover { color: var(--color-brand-navy); } + +.av-header__cta-mobile-only { display: none; } + + +/* --- Mega menu (desktop only) --- */ + +.av-megamenu { + position: absolute; + top: 100%; + left: 0; + right: 0; + z-index: var(--z-dropdown); + background-color: var(--color-bg-default); + box-shadow: var(--shadow-md); + padding: var(--space-8); + display: none; + opacity: 0; + transform: translateY(-4px); + transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); +} +.av-megamenu.is-open { + display: block; + opacity: 1; + transform: translateY(0); +} +.av-megamenu__inner { + max-width: var(--container-max); + margin-inline: auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-8); +} +.av-megamenu__col-title { + font-size: var(--text-overline); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-overline); + color: var(--color-text-muted); + margin-bottom: var(--space-3); +} +.av-megamenu__list { display: flex; flex-direction: column; gap: var(--space-2); } +.av-megamenu__link { + font-size: var(--text-body-md); + color: var(--color-text-primary); + text-decoration: none; + font-weight: var(--font-weight-medium); + padding-block: var(--space-1); +} +.av-megamenu__link:hover { color: var(--color-brand-gold); } + + +/* --- Drawer (mobile) --- */ + +.av-drawer-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + padding: 0; + background: transparent; + border: none; + cursor: pointer; + color: var(--color-brand-navy); +} +@media (min-width: 1024px) { .av-drawer-toggle { display: none; } } + +.av-drawer { + position: fixed; + inset: 0; + z-index: var(--z-fixed); + background-color: var(--color-brand-navy); + color: var(--color-text-on-dark); + padding: var(--space-6); + overflow-y: auto; + transform: translateX(100%); + transition: transform var(--duration-slow) var(--ease-default); + visibility: hidden; +} +.av-drawer.is-open { + transform: translateX(0); + visibility: visible; +} +.av-drawer__close { + position: absolute; + top: var(--space-6); + right: var(--space-6); + width: 44px; + height: 44px; + background: transparent; + border: none; + color: var(--color-text-on-dark); + cursor: pointer; + font-size: 1.5rem; +} +.av-drawer__nav { margin-top: var(--space-12); } +.av-drawer__group { border-bottom: 1px solid var(--color-border-on-dark); } +.av-drawer__group-title { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + padding: var(--space-4) 0; + background: transparent; + border: none; + color: var(--color-text-on-dark); + font-size: var(--text-h4); + font-weight: var(--font-weight-semibold); + text-align: left; + cursor: pointer; + font-family: inherit; +} +.av-drawer__cta-area { + margin-top: var(--space-12); + padding-top: var(--space-8); + border-top: 1px solid var(--color-border-on-dark); +} + /* ============================================================================ - 6. Navigation (header, mega menu, drawer) — placeholder + 7. Footer (Design Handoff section 3.5) ============================================================================ */ +.av-footer { + background-color: var(--color-brand-navy-deep); + color: var(--color-text-on-dark); + padding-block: var(--space-12); +} +@media (min-width: 1024px) { + .av-footer { padding-block: var(--space-20); } +} + +.av-footer__cols { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-10); +} +@media (min-width: 768px) { + .av-footer__cols { grid-template-columns: repeat(2, 1fr); } +} +@media (min-width: 1024px) { + .av-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; gap: var(--space-8); } +} + +.av-footer__col-title { + font-size: var(--text-overline); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-overline); + color: var(--color-brand-gold); + margin-bottom: var(--space-4); +} + +.av-footer__list { display: flex; flex-direction: column; gap: var(--space-3); } +.av-footer__list a { + color: var(--color-text-on-dark-muted); + font-size: var(--text-body-md); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-default); +} +.av-footer__list a:hover { color: var(--color-text-on-dark); } + +.av-footer__brand p { + color: var(--color-text-on-dark-muted); + font-size: var(--text-body-md); + line-height: var(--leading-body-md); +} +.av-footer__brand .av-header__logo { + color: var(--color-text-on-dark); + margin-bottom: var(--space-4); +} + +.av-footer__newsletter-form { + display: flex; + flex-direction: column; + gap: var(--space-2); + margin-top: var(--space-3); +} + +.av-footer__bottom { + margin-top: var(--space-12); + padding-top: var(--space-6); + border-top: 1px solid var(--color-border-on-dark); + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: var(--space-4); + font-size: var(--text-body-sm); + color: var(--color-text-on-dark-muted); +} +.av-footer__bottom-links { display: flex; flex-wrap: wrap; gap: var(--space-4); } +.av-footer__bottom-links a { + color: var(--color-text-on-dark-muted); + text-decoration: none; +} +.av-footer__bottom-links a:hover { color: var(--color-text-on-dark); } + /* ============================================================================ - 7. Footer — placeholder + 8. Hero (home + page heroes) ============================================================================ */ + +.av-hero { + position: relative; + background-color: var(--color-brand-navy); + color: var(--color-text-on-dark); + overflow: hidden; + isolation: isolate; + min-height: 70vh; + display: flex; + align-items: center; + padding-block: var(--space-20); +} +@media (min-width: 1024px) { .av-hero { min-height: 85vh; padding-block: var(--space-32); } } + +.av-hero__media { + position: absolute; + inset: 0; + z-index: -1; + overflow: hidden; +} +.av-hero__media::after { + content: ""; + position: absolute; + inset: 0; + background: + linear-gradient(180deg, rgba(8, 20, 39, 0.55), rgba(11, 31, 58, 0.85)); +} +.av-hero__media video, +.av-hero__media img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.av-hero__inner { + max-width: 800px; + display: flex; + flex-direction: column; + gap: var(--space-6); +} + +.av-hero__eyebrow { + font-size: var(--text-overline); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-overline); + color: var(--color-brand-gold); +} + +.av-hero__headline { + font-family: var(--font-display); + font-size: clamp(2.5rem, 6vw, var(--text-display-xl)); + line-height: var(--leading-display-xl); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-tight); + color: var(--color-text-on-dark); + margin: 0; + max-width: 18ch; +} + +.av-hero__sub { + font-size: var(--text-body-lg); + line-height: var(--leading-body-lg); + color: var(--color-text-on-dark-muted); + max-width: 60ch; + margin: 0; +} + +.av-hero__ctas { + display: flex; + flex-wrap: wrap; + gap: var(--space-4); + margin-top: var(--space-2); +} + + +/* ============================================================================ + 9. Logo strip (trust bar) + ============================================================================ */ + +.av-logo-strip { + background-color: var(--color-bg-subtle); + padding-block: var(--space-10); +} +.av-logo-strip__intro { + text-align: center; + font-size: var(--text-overline); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-overline); + color: var(--color-text-muted); + margin-bottom: var(--space-6); +} +.av-logo-strip__row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: var(--space-8); + margin-bottom: var(--space-10); +} +.av-logo-strip__logo { + height: 40px; + width: 120px; + background-color: var(--color-bg-elevated); + border: 1px dashed var(--color-border-default); + border-radius: var(--radius-sm); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-body-sm); + color: var(--color-text-muted); +} +.av-logo-strip__metrics { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-6); + text-align: center; +} +@media (min-width: 768px) { + .av-logo-strip__metrics { grid-template-columns: repeat(4, 1fr); } +} +.av-logo-strip__metric { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); +} + + +/* ============================================================================ + 10. Eyebrow / overline + ============================================================================ */ + +.av-eyebrow { + display: inline-block; + font-size: var(--text-overline); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-overline); + color: var(--color-text-muted); +} +.av-eyebrow--gold { color: var(--color-brand-gold); } + + +/* ============================================================================ + 11. Section title + lead + ============================================================================ */ + +.av-section__title { + font-family: var(--font-display); + font-size: clamp(var(--text-h1), 4vw, var(--text-display-md)); + line-height: var(--leading-display-md); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-tight); + color: var(--color-text-primary); + margin: 0; + max-width: 24ch; +} +.av-section--dark .av-section__title { color: var(--color-text-on-dark); } + +.av-section__lead { + font-size: var(--text-body-lg); + line-height: var(--leading-body-lg); + color: var(--color-text-secondary); + max-width: 56ch; + margin: 0; +} +.av-section--dark .av-section__lead { color: var(--color-text-on-dark-muted); } + +.av-section__head { + display: flex; + flex-direction: column; + gap: var(--space-4); + margin-bottom: var(--space-10); + max-width: 720px; +} + +.av-grid-3 { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-6); +} +@media (min-width: 768px) { .av-grid-3 { grid-template-columns: repeat(2, 1fr); } } +@media (min-width: 1024px) { .av-grid-3 { grid-template-columns: repeat(3, 1fr); } } + +.av-grid-4 { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-6); +} +@media (min-width: 768px) { .av-grid-4 { grid-template-columns: repeat(2, 1fr); } } + + +/* ============================================================================ + 12. Conversion banner (3 CTAs side-by-side, dark) + ============================================================================ */ + +.av-conversion-banner { + background-color: var(--color-brand-navy); + color: var(--color-text-on-dark); + padding-block: var(--space-20); +} +.av-conversion-banner__head { + text-align: center; + margin-bottom: var(--space-12); +} +.av-conversion-banner__title { + font-family: var(--font-display); + font-size: clamp(var(--text-h1), 5vw, var(--text-display-lg)); + line-height: var(--leading-display-lg); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-tight); + color: var(--color-text-on-dark); + margin: 0 auto var(--space-4) auto; + max-width: 20ch; +} +.av-conversion-banner__lead { + font-size: var(--text-body-lg); + color: var(--color-text-on-dark-muted); + max-width: 56ch; + margin: 0 auto; +} +.av-conversion-banner__grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-6); +} +@media (min-width: 768px) { .av-conversion-banner__grid { grid-template-columns: repeat(3, 1fr); } } + +.av-conversion-banner__card { + display: flex; + flex-direction: column; + gap: var(--space-4); + padding: var(--space-8); + background-color: var(--color-bg-dark-elevated); + border: 1px solid var(--color-border-on-dark); + border-radius: var(--radius-md); +} +.av-conversion-banner__card-title { + font-family: var(--font-display); + font-size: var(--text-h3); + font-weight: var(--font-weight-semibold); + color: var(--color-text-on-dark); +} +.av-conversion-banner__card-desc { + font-size: var(--text-body-md); + color: var(--color-text-on-dark-muted); + flex: 1; +} + + +/* ============================================================================ + 13. Reveal animation (scroll-triggered, JS-driven via main.js) + ============================================================================ */ + +[data-av-reveal] { + opacity: 0; + transform: translateY(16px); + transition: + opacity var(--duration-deliberate) var(--ease-default), + transform var(--duration-deliberate) var(--ease-default); +} +[data-av-reveal].is-revealed, +.no-js [data-av-reveal] { + opacity: 1; + transform: translateY(0); +} +@media (prefers-reduced-motion: reduce) { + [data-av-reveal] { opacity: 1; transform: none; transition: none; } +} diff --git a/wp-content/themes/asterion-bricks/footer.php b/wp-content/themes/asterion-bricks/footer.php new file mode 100644 index 0000000..061af31 --- /dev/null +++ b/wp-content/themes/asterion-bricks/footer.php @@ -0,0 +1,96 @@ + + + + + + + + diff --git a/wp-content/themes/asterion-bricks/front-page.php b/wp-content/themes/asterion-bricks/front-page.php new file mode 100644 index 0000000..fce9893 --- /dev/null +++ b/wp-content/themes/asterion-bricks/front-page.php @@ -0,0 +1,377 @@ + + + + + +
+ + +
+
+

+

Your Last Mistake Should Be in VR.

+

+ PROSERVE™ is the modular, fully portable XR platform built for police, special forces, military and firefighters. Deploy in five minutes. Train anywhere. Debrief everything. +

+
+ + +
+
+
+
+ + + + +
+
+

+
+ + + + +
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ +

Three solutions. One platform. Zero compromise.

+

+ From the lone officer rebuilding muscle memory to a 16-trainee unit running a coordinated assault — PROSERVE scales with your mission, not the other way around. +

+
+ +
+ +
+
+
+ +

MY PROSERVE

+

+ Mini-case. Anywhere, anytime. Built for the officer who needs to train 30 minutes between two shifts. 9 m² of free space, a headset, a real-recoil replica. The legal minimum becomes the daily standard. +

+
+ +
+
+
+ +
+
+
+ +

PROSERVE FLEX

+

+ One case per operator. Multi-user cooperative scenarios, instructor PC, full AAR. Deploy on any flat surface from 9 to 100 m². For tactical units that move with their training. +

+
+ +
+
+
+ +
+
+
+ +

PROSERVE ACADEMY

+

+ The full training centre, in your facility. Up to 900 m² of free-roam space, instructor cockpit, racked compute, parallel sessions. Built for academies and continuous training programs. +

+
+ +
+
+
+ +
+
+
+ + + + +
+
+
+ +

Built with operators, for operators.

+

+ PROSERVE is not a generic VR platform repackaged for the public sector. Every scenario, every weapon profile, every instructor metric was specified by serving and former operators in close partnership with our engineering team. +

+
+ +
+ +
+
+
+ +

+

Vehicle stops, identity checks, urban CQB, de-escalation, riot containment. Built for the realities of contemporary policing.

+
+
+
+ +
+
+
+ +

+

Hostage rescue, dynamic entries, hostile crowd extraction, sniper-spotter coordination. Built for the units where every error has a name.

+
+
+
+ +
+
+
+ +

+

MOUT, convoy escort, FOB defense, IED awareness, joint operation drills. Built for armed forces that deploy fast and adapt faster.

+
+
+
+ +
+
+
+ +

+

Structure fires, hazmat, multi-casualty triage, confined-space rescue, industrial accidents. Built for first responders who can't rehearse the worst day at full scale.

+
+
+
+ +
+
+
+ + + + +
+
+
+ +

Behavior, not scripts.

+
+ + 'Real-recoil weapon integration', + 'title' => 'The weapon you train with is the weapon you carry.', + 'body' => 'Our Universal Weapon Digitizer (UWeD™) attaches to any gas-blowback or CO2 replica — Glock 17, HK416, MP7, M9, and dozens more — or to your real service weapon firing blanks. Bullet trajectory is physically simulated: ricochet, penetration, material density. Recoil-induced tracking loss is corrected by an exclusive IMU compensation system.', + 'link' => 'See how UWeD works', + 'href' => '/technology/weapons-tracking/', + ], + [ + 'eyebrow' => 'Instructor Cockpit', + 'title' => 'You orchestrate. The trainees adapt.', + 'body' => "From a dedicated instructor PC, you orchestrate every detail of the scenario in real time. Walk through walls. Switch to any trainee's first-person view. Toggle field of view, shot traces, and threat highlighting. Add or remove civilians, change a hostage's behavior, escalate or de-escalate a contact — without pausing the scenario.", + 'link' => 'Inside the Instructor Cockpit', + 'href' => '/technology/instructor-cockpit/', + ], + [ + 'eyebrow' => 'After-Action Review', + 'title' => 'The session ends; the learning starts.', + 'body' => "Every event is logged: shots fired, shots hit, shots missed by target type, reaction time, field-of-view direction, weapon muzzling, position over time. Replay any session from any angle — top-down tactical, free-camera, or in-eye view of any trainee. Speed up, slow down, pause. Compare a recruit's reaction time to the unit's median.", + 'link' => 'Explore After-Action Review', + 'href' => '/technology/after-action-review/', + ], + ]; + foreach ($features as $i => $f) : + $reverse = ($i % 2 === 1); + ?> +
+
+
+ +

+

+
+
+
+ + +
+
+ + + + +
+
+
+
+
+ +

How a European tactical unit cut tactical errors by 35%.

+

+ In 2025, a European tactical unit deployed PROSERVE FLEX as part of its continuous training program. Six months in, instructor-rated tactical errors dropped 35% across the unit. Reaction time improved 22%. And weekly training volume tripled, without a single live round fired. +

+
+
-35%
+
+22%
+
×3
+
+
+
+
+ +
+
+ + + + +
+
+
+ +

Train how it really feels.

+
+ +
+
+
We've stopped asking how often we train. We've started measuring how well.
+
— Tactical training officer, European federal police (anonymized)
+
+
+
The first time my recruits saw their own AAR replay, three of them asked to redo the drill. That had never happened before.
+
— Senior instructor, national police academy
+
+
+
What used to take a half-day live exercise now takes 20 minutes between shifts.
+
— Captain, urban response unit
+
+
+
+
+ + + + +
+
+
+ +

Insights from the front of immersive training.

+
+ + 3, 'post_status' => 'publish']); + if (! empty($insights)) : + ?> +
+ +
+ +
+ +

+

+
+
+
+ +
+ +

+ +

+ + +
+ +
+
+
+ + + + +
+
+
+

Train like the threat is now.

+

+
+
+ +
+

+

+ +
+ +
+

+

+ +
+ +
+

+

+ +
+ +
+
+
+ + diff --git a/wp-content/themes/asterion-bricks/header.php b/wp-content/themes/asterion-bricks/header.php new file mode 100644 index 0000000..e743058 --- /dev/null +++ b/wp-content/themes/asterion-bricks/header.php @@ -0,0 +1,114 @@ + + +> + + + + + + + +> + + + + + + + + +
diff --git a/wp-content/themes/asterion-bricks/index.php b/wp-content/themes/asterion-bricks/index.php new file mode 100644 index 0000000..5828b1d --- /dev/null +++ b/wp-content/themes/asterion-bricks/index.php @@ -0,0 +1,70 @@ + + +
+
+ + +
+ +

+ +
+ + +

+ +

+ +
+ +
+ +
style="display:block;background:transparent;box-shadow:none;border-bottom:1px solid var(--color-border-subtle);padding-bottom:var(--space-8);"> +
+ +

+ +

+
+
+ +
+

+ +

+
+ +
+ + + + +
+

+

+
+

+ + +
+
+ +