From b402b46d87ec402f10a7858ed97a62282322525f Mon Sep 17 00:00:00 2001
From: Istio Automation <istio-testing-bot@google.com>
Date: Thu, 11 Jul 2024 18:22:53 -0400
Subject: [PATCH] Fix z-index and animation (#15407)

Co-authored-by: Craig Box <craig.box@gmail.com>
---
 content/en/_index.html        |  2 +-
 content/zh/_index.html        |  2 +-
 src/sass/base/_constants.scss |  1 +
 src/sass/misc/_landing.scss   |  5 ++---
 src/ts/headerAnimation.js     | 14 +++++++-------
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/content/en/_index.html b/content/en/_index.html
index f5720d55c7..a774133bd9 100644
--- a/content/en/_index.html
+++ b/content/en/_index.html
@@ -28,7 +28,7 @@ description: A service mesh for observability, security in depth, and management
 </script>
 
 <main class="landing">
-    <section id="banner">
+    <section id="hero">
         <h1 id="title">
             Service Mesh. Simplified.
         </h1>
diff --git a/content/zh/_index.html b/content/zh/_index.html
index 48386182cd..8c45bba1ed 100644
--- a/content/zh/_index.html
+++ b/content/zh/_index.html
@@ -30,7 +30,7 @@ description: 用于可观测性、深度安全性和加速管理部署周期的
 </script>
 
 <main class="landing">
-    <section id="banner">
+    <section id="hero">
         <h1 id="title">
             服务网格。简化。
         </h1>
diff --git a/src/sass/base/_constants.scss b/src/sass/base/_constants.scss
index a7590edc69..41af4ff4f6 100644
--- a/src/sass/base/_constants.scss
+++ b/src/sass/base/_constants.scss
@@ -26,6 +26,7 @@ $footerHeight: 7rem;
 $modal-z: 110;
 $header-z: 100;
 $overlay-z: 75;
+$hero-text-z: 70;
 $sidebar-z: 50;
 $banner-z: 20;
 $floating-button-z: 15;
diff --git a/src/sass/misc/_landing.scss b/src/sass/misc/_landing.scss
index 4b7074ec3e..2a44e0b6ca 100644
--- a/src/sass/misc/_landing.scss
+++ b/src/sass/misc/_landing.scss
@@ -8,7 +8,7 @@
         }
     }
 
-    #banner {
+    #hero {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -31,7 +31,6 @@
         h1 {
             margin-bottom: .5rem;
             font-weight: var(--semiBoldWeight);
-            z-index: 99999;
 
             @media (min-width: $bp-md) {
                 margin-bottom: 1.5rem;
@@ -40,7 +39,7 @@
 
         h1, .subtitle {
             color: #ffffff;
-            z-index: 99999;
+            z-index: $hero-text-z;
         }
 
         &-animation {
diff --git a/src/ts/headerAnimation.js b/src/ts/headerAnimation.js
index 87a67f28a3..f18c12d15e 100644
--- a/src/ts/headerAnimation.js
+++ b/src/ts/headerAnimation.js
@@ -77,13 +77,13 @@ function createCamera(
 
 // Function to create a WebGLRenderer with specified properties
 function createRenderer(rendererProps = {}) {
-    const container = document.getElementById("banner");
+    const container = document.getElementById("hero");
     const renderer = new THREE.WebGLRenderer({ ...rendererProps, alpha: true });
-    renderer.domElement.id = "banner-animation";
+    renderer.domElement.id = "hero-animation";
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(container.offsetWidth, container.offsetHeight);
     renderer.setClearColor(0xffffff, 0);
-    renderer.domElement.id = "banner-animation";
+    renderer.domElement.id = "hero-animation";
     return renderer;
 }
 
@@ -96,13 +96,13 @@ function runAnimation(
     enableAnimation = false,
     uniforms = getDefaultUniforms()
 ) {
-    // Append banner-animation canvas to banner
-    const container = document.getElementById("banner");
+    // Append hero-animation canvas to hero
+    const container = document.getElementById("hero");
     container.appendChild(renderer.domElement);
 
     // Register resize listener
     window.addEventListener("resize", () => {
-        let container = document.getElementById("banner");
+        let container = document.getElementById("hero");
         camera.aspect = container.offsetWidth / container.offsetHeight;
         camera.updateProjectionMatrix();
         renderer.setSize(container.offsetWidth, container.offsetHeight);
@@ -164,7 +164,7 @@ const uniforms = {
         },
     },
     // Point size for rendering
-    u_pointsize: { value: 6.0 },
+    u_pointsize: { value: 3.0 },
 
     // Parameters for the wave1 animation
     u_transformation_freq_1: { value: 3.0 },