Story 2432: Hero Section Refactor

ak/views.py

@@ -166,11 +166,16 @@ def get_v3_context_data(self, **kwargs):
 
         ctx["build_anything_with_boost"] = SharedResources.build_anything_with_boost
 
-        ctx["hero_legacy_image_url_light"] = SharedResources.hero_legacy_image_url_light
-        ctx["hero_legacy_image_url_dark"] = SharedResources.hero_legacy_image_url_dark
-        ctx["hero_image_url"] = SharedResources.hero_image_url
-        ctx["hero_image_url_light"] = SharedResources.hero_image_url_light
-        ctx["hero_image_url_dark"] = SharedResources.hero_image_url_dark
+        home_foreground = large_static("img/v3/home-page/home-page-foreground.png")
+        ctx["hero_image_url"] = home_foreground
+        ctx["hero_image_url_light"] = home_foreground
+        ctx["hero_image_url_dark"] = home_foreground
+        # Mobile art-direction: a tightly-trimmed foreground so it isn't letterboxed
+        # on narrow screens. Desktop/tablet keep the wide home_foreground above.
+        ctx["hero_image_url_mobile"] = large_static(
+            "img/v3/home-page/home-page-foreground-mobile.png"
+        )
+        ctx["hero_background_image_url"] = SharedResources.hero_background_image_url
         return ctx
 
 

core/mock_data.py

@@ -424,6 +424,10 @@ class SharedResources:
     hero_image_url_light = large_static("img/v3/home-page/home-page-foreground.png")
     hero_image_url_dark = large_static("img/v3/home-page/home-page-foreground.png")
 
+    hero_background_image_url = large_static(
+        "img/v3/home-page/home-page-background.png"
+    )
+
     library_about_code = (
         "int main()\n"
         "{\n"

core/views.py

@@ -343,6 +343,17 @@ def get_v3_context_data(self, **kwargs):
         ctx["archive_url"] = (
             "https://lists.boost.org/archives/list/boost@lists.boost.org/latest"
         )
+        ctx["hero_image_url"] = large_static(
+            "img/v3/community-page/community-foreground.png"
+        )
+        # Mobile art-direction: a tightly-cropped mascot pair so it isn't tiny in
+        # the wide canvas on narrow screens (swapped in via <picture> at <=767px).
+        ctx["hero_image_url_mobile"] = large_static(
+            "img/v3/community-page/community-foreground-mobile.png"
+        )
+        ctx["hero_background_image_url"] = large_static(
+            "img/v3/community-page/community-background.png"
+        )
         return ctx
 
 

static/css/v3/auth-page.css

@@ -5,14 +5,6 @@
   Dependencies: foundations, forms, buttons.
 */
 
-/* ── Header overlay on auth pages ─────────── */
-body:has(.auth-page) .header {
-  position: absolute;
-  z-index: 10;
-  left: 0;
-  right: 0;
-}
-
 /* ── Page-level flex column ───────────────── */
 .auth-page {
   display: flex;

static/css/v3/community.css

@@ -3,13 +3,14 @@
  * BEM naming, semantic tokens with fallbacks.
  */
 
-/* ── Navbar overlays hero (matches homepage pattern) ──────────── */
-
-body:has(.community-v3) .header {
-  position: absolute;
-  z-index: 10;
-  left: 0;
-  right: 0;
+/* Hero styling (including the floating-mascot variant) lives in heros.css
+   under `.hero-library--mascot`, set via the template's extra_classes. */
+
+/* The community hero foreground box can be wider than the viewport (its
+   transparent left overflows off-screen); clip horizontally so it never
+   produces a scrollbar. Mirrors the home wrapper. */
+body:has(.community-v3) {
+  overflow-x: clip;
 }
 
 /* ── Page container (below full-bleed hero) ───────────────────── */

static/css/v3/header.css

@@ -22,6 +22,19 @@
   color: var(--color-text-primary);
 }
 
+/* Consistent header positioning on all v3 pages.
+   Header overlays the top of the page; non-hero pages reserve space below. */
+body.v3 .header {
+  position: absolute;
+  z-index: 10;
+  left: 0;
+  right: 0;
+}
+
+body.v3 .v3-container > .w-full {
+  padding-top: calc(var(--header-height, 48px) + 2 * var(--space-medium));
+}
+
 /* ── Shared control surface ────────────────────── */
 
 .header__nav--desktop,