Refactor v3 hero into one tokenized component

Merges the home, community, and library/release heroes into a single .hero base with per-page modifiers and one heading style, splits the mascot foreground from the background so each scales independently across breakpoints, and drives all the responsive sizing through tokens set once per tier. Hero image URLs move out of the templates and into the page views, and the duplicated absolute-header rules collapse into one body.v3 .header rule.

Also brings the hero link buttons' line-height and letter-spacing to the Figma spec, which closes the remaining open item on #2367.

Author: julioest

ak/views.py

@@ -186,11 +186,20 @@ 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
+        # Hero foreground/background swapped with the community hero (see
+        # CommunityView): home now shows the community scene and vice versa.
+        home_foreground = large_static("img/v3/community-page/community-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 foreground above.
+        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
 
 

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

@@ -347,6 +347,18 @@ def get_v3_context_data(self, **kwargs):
         ctx["archive_url"] = (
             "https://lists.boost.org/archives/list/boost@lists.boost.org/latest"
         )
+        # Hero foreground/background swapped with the home hero (see HomeView):
+        # community now shows the home scene and vice versa.
+        ctx["hero_image_url"] = large_static(
+            "img/v3/home-page/home-page-foreground.png"
+        )
+        # Mobile art-direction: a tighter crop swapped in via <picture> at <=767px.
+        ctx["hero_image_url_mobile"] = large_static(
+            "img/v3/home-page/home-page-foreground-mobile.png"
+        )
+        ctx["hero_background_image_url"] = large_static(
+            "img/v3/home-page/home-page-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/buttons.css

@@ -231,6 +231,10 @@
   font-family: var(--font-sans);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-medium);
+  /* Pin line-height + letter-spacing to the Figma button spec (17.36px / -0.14px
+     at the 14px size) instead of inheriting the page defaults (16.8px / -0.16px). */
+  line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-primary);
   background-color: var(--color-surface-weak);
   border: 1px solid var(--color-stroke-weak);

static/css/v3/community.css

@@ -3,14 +3,8 @@
  * 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 full-bleed .hero-fg foreground) lives in heros.css
+   under `.hero--community`, set via the template's extra_classes. */
 
 /* ── 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,