feat: show hero gradient in nested version site under the public wrapper

modules/ROOT/pages/home.adoc

@@ -7,17 +7,9 @@
 
 ++++
 <div class="container">
-<div class="header-banner">
-    <div class="radiance-bg">
-        <div class="blob blob-pink"></div>
-        <div class="blob blob-purple"></div>
-        <div class="blob blob-blue"></div>
-        <div class="blob blob-orange"></div>
-        <div class="blob blob-yellow"></div>
-        <div class="blob blob-purple-r"></div>
-        <div class="blob blob-teal"></div>
-        <div class="blob blob-wash-pink"></div>
-        <div class="blob blob-wash-blue"></div>
+<div class="header-banner radiance-home-stage">
+    <div class="radiance-home" aria-hidden="true">
+        <div class="radiance-local" data-radiance-pattern="home" data-radiance-appearance="light"></div>
     </div>
     <div class="header-banner-text">
       <h1>ThoughtSpot Embedded Documentation</h1>

src/assets/styles/index.scss

@@ -1522,23 +1522,10 @@ a.anchor {
     }
 }
 
-// In-product presentation only: override banner color to match product sidebar (#232F43),
-// and suppress the page-wide gradient entirely.
+// In-product presentation only: the walkthroughs hero keeps the product sidebar color (#232F43).
+// The docs header banner (.header-banner) intentionally keeps the same radiance gradient as the
+// public site, so it is not overridden here.
 .embedded-mode {
-    .radiance-bg {
-        display: none;
-    }
-
-    .header-banner {
-        background: #232F43;
-        border-bottom: none;
-        box-shadow: none;
-
-        .header-banner-text {
-            color: #fff;
-        }
-    }
-
     .walkthroughs-page {
         background: #232F43;
 

src/assets/styles/radiance-home.css

@@ -0,0 +1,142 @@
+/*
+ * Radiance product pattern "home" - the Home page hero recipe (FIXED, admin-owned).
+ *
+ * The finished Home page (Spotter home) draws its hero from two layers:
+ *   .radiance-home         the Radiance surface's wrapper - bleeds past the hero,
+ *                          fades toward the content, and carries the fine noise
+ *                          and tone lift at the language's values (GRAIN-2)
+ *   .radiance-home-stage   the hero's container: a faint glow layer (::before)
+ * The grain is the language's one grain per theme (GRAIN-6): the renderer draws
+ * it, over Home's colour at the hero's strength (PRODUCT_PATTERNS.home).
+ * Markup (see README.md):
+ *   <main class="radiance-home-stage">
+ *     <div class="radiance-home" aria-hidden="true">
+ *       <div class="radiance-local" data-radiance-pattern="home" data-radiance-appearance="dark"></div>
+ *     </div>
+ *     ...hero content...
+ *   </main>
+ * The renderer draws the top wash itself (subtle, fast; locked). Nothing here is
+ * tunable - these values are the product pattern (RULES.md PRODUCT-1..5). The
+ * glow layer follows the clean-blend order (COLOR-5): pink - violet - blue - mint.
+ * Theme follows the surface's own data-radiance-appearance (read with :has()).
+ */
+
+.radiance-home-stage {
+    --radiance-home-base: #ffffff;
+    position: relative;
+}
+
+.radiance-home-stage:has(.radiance-local[data-radiance-appearance="dark"]) {
+    --radiance-home-base: #131416;
+}
+
+/* The glow layer under the hero. */
+.radiance-home-stage::before {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: -16vw;
+    right: -16vw;
+    height: 640px;
+    pointer-events: none;
+    background:
+        radial-gradient(ellipse 58% 36% at 22% -4%, rgba(255, 118, 154, 0.072), rgba(255, 118, 154, 0.028) 44%, rgba(255, 118, 154, 0.006) 64%, transparent 88%),
+        radial-gradient(ellipse 66% 38% at 38% -2%, rgba(165, 102, 255, 0.066), rgba(165, 102, 255, 0.026) 38%, rgba(165, 102, 255, 0.006) 64%, transparent 88%),
+        radial-gradient(ellipse 72% 42% at 62% 2%, rgba(88, 150, 255, 0.076), rgba(88, 150, 255, 0.032) 42%, rgba(88, 150, 255, 0.006) 66%, transparent 90%),
+        radial-gradient(ellipse 70% 44% at 84% 4%, rgba(80, 220, 180, 0.048), rgba(80, 220, 180, 0.017) 40%, transparent 78%),
+        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.16) 42%, rgba(255, 255, 255, 0.56) 78%, var(--radiance-home-base) 100%);
+    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.94) 26%, rgba(0, 0, 0, 0.54) 58%, rgba(0, 0, 0, 0.16) 84%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.94) 26%, rgba(0, 0, 0, 0.54) 58%, rgba(0, 0, 0, 0.16) 84%, transparent 100%);
+}
+
+.radiance-home-stage:has(.radiance-local[data-radiance-appearance="dark"])::before {
+    height: 560px;
+    background:
+        radial-gradient(ellipse 58% 34% at 20% -4%, rgba(255, 93, 142, 0.06), rgba(255, 93, 142, 0.024) 42%, rgba(255, 93, 142, 0.006) 62%, transparent 86%),
+        radial-gradient(ellipse 66% 38% at 38% -2%, rgba(138, 93, 255, 0.068), rgba(138, 93, 255, 0.028) 36%, rgba(138, 93, 255, 0.006) 64%, transparent 88%),
+        radial-gradient(ellipse 72% 42% at 62% 2%, rgba(39, 140, 255, 0.078), rgba(39, 140, 255, 0.032) 38%, rgba(39, 140, 255, 0.007) 66%, transparent 90%),
+        radial-gradient(ellipse 70% 44% at 84% 4%, rgba(45, 220, 177, 0.026), rgba(45, 220, 177, 0.01) 40%, transparent 78%),
+        linear-gradient(to bottom, rgba(26, 27, 30, 0.08) 0%, rgba(26, 27, 30, 0.24) 38%, rgba(26, 27, 30, 0.62) 70%, var(--radiance-home-base) 100%);
+    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.96) 24%, rgba(0, 0, 0, 0.5) 54%, rgba(0, 0, 0, 0.14) 78%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.96) 24%, rgba(0, 0, 0, 0.5) 54%, rgba(0, 0, 0, 0.14) 78%, transparent 100%);
+}
+
+/* The surface's wrapper: bleeds past the hero, fades toward the content, and
+   carries the tone lift and the 56px fine noise at the language's values. The
+   renderer draws Home's colour at the hero's strength and the grain on top. */
+.radiance-home {
+    position: absolute;
+    z-index: 0;
+    inset: -96px -12vw -220px;
+    overflow: hidden;
+    pointer-events: none;
+    filter: saturate(1.16) contrast(1.06);
+    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 22%, rgba(0, 0, 0, 0.52) 54%, rgba(0, 0, 0, 0.18) 78%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 22%, rgba(0, 0, 0, 0.52) 54%, rgba(0, 0, 0, 0.18) 78%, transparent 100%);
+}
+
+.radiance-home:has(> .radiance-local[data-radiance-appearance="dark"]) {
+    inset: -88px -12vw -150px;
+    filter: saturate(1.2) contrast(1.08);
+    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.86) 20%, rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.12) 70%, transparent 90%);
+    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.86) 20%, rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.12) 70%, transparent 90%);
+}
+
+.radiance-home::before {
+    content: "";
+    position: absolute;
+    z-index: 3;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0.22;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.48' numOctaves='3' seed='21' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.58' intercept='-0.18'/%3E%3CfeFuncG type='linear' slope='1.22' intercept='-0.12'/%3E%3CfeFuncB type='linear' slope='1.5' intercept='-0.16'/%3E%3CfeFuncA type='linear' slope='0.64'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='56' height='56' filter='url(%23n)'/%3E%3C/svg%3E");
+    background-size: 56px 56px;
+    mix-blend-mode: multiply;
+}
+
+.radiance-home:has(> .radiance-local[data-radiance-appearance="dark"])::before {
+    opacity: 0.27;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.48' numOctaves='3' seed='21' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.64' intercept='-0.2'/%3E%3CfeFuncG type='linear' slope='1.14' intercept='-0.1'/%3E%3CfeFuncB type='linear' slope='1.58' intercept='-0.18'/%3E%3CfeFuncA type='linear' slope='0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='56' height='56' filter='url(%23n)'/%3E%3C/svg%3E");
+    mix-blend-mode: screen;
+}
+
+.radiance-home::after {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    inset: 0;
+    background:
+        radial-gradient(ellipse 72% 34% at 50% 8%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.034) 48%, rgba(255, 255, 255, 0) 78%),
+        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.16) 38%, rgba(255, 255, 255, 0.48) 70%, #ffffff 100%);
+}
+
+.radiance-home:has(> .radiance-local[data-radiance-appearance="dark"])::after {
+    background:
+        radial-gradient(ellipse 72% 34% at 50% 8%, rgba(26, 27, 30, 0.12), rgba(26, 27, 30, 0.052) 46%, rgba(26, 27, 30, 0) 76%),
+        linear-gradient(to bottom, rgba(26, 27, 30, 0.06) 0%, rgba(26, 27, 30, 0.22) 34%, rgba(26, 27, 30, 0.56) 62%, #131416 100%);
+}
+
+.radiance-home > .radiance-local {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+}
+
+.radiance-home > .radiance-local canvas {
+    position: absolute;
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+@media (max-width: 780px) {
+    .radiance-home { inset: -82px -18vw -176px; }
+    .radiance-home:has(> .radiance-local[data-radiance-appearance="dark"]) { inset: -76px -18vw -132px; }
+}
+
+@media (max-width: 520px) {
+    .radiance-home { inset: -72px -28vw -162px; }
+    .radiance-home:has(> .radiance-local[data-radiance-appearance="dark"]) { inset: -68px -28vw -126px; }
+}