Skip to content

Radiance gradient, 404 redesign and left-nav fixes #558

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ShashiSubramanya merged 12 commits into from
Oct 27, 2026
Merged

Radiance gradient, 404 redesign and left-nav fixes #558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4bbf689
feat: show hero gradient in nested version site under the public wrapper
ShashiSubramanya Oct 7, 2026
e755b4f
Update doc-configs.js
ShashiSubramanya Oct 8, 2026
fb224df
fix: show hero gradient in embedded/in-product mode, drop _public flag
ShashiSubramanya Oct 8, 2026
884c092
feat: use the Radiance home pattern for the docs hero gradient
ShashiSubramanya Oct 9, 2026
6dd0a3a
404 page updates
ShashiSubramanya Oct 14, 2026
2245f24
nav edits
ShashiSubramanya Oct 14, 2026
f505821
feat: dark mode for the 404 page and use the Radiance home pattern
ShashiSubramanya Oct 26, 2026
c0fae58
feat: use the Radiance home pattern for the quickstarts hero
ShashiSubramanya Oct 26, 2026
fe37088
mkdown gen issue/Vercel build fix
ShashiSubramanya Oct 26, 2026
d7f909f
css fix for indexable section in typedoc generated files
ShashiSubramanya Oct 26, 2026
f675338
404 page css edits
ShashiSubramanya Oct 27, 2026
d477512
merge commits
ShashiSubramanya Oct 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 3 additions & 11 deletions modules/ROOT/pages/home.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 5 additions & 11 deletions modules/tutorials/pages/guided-walkthroughs.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,11 @@

[.non-link]
++++
<div class="walkthroughs-page">
<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="walkthroughs-page radiance-home-stage">
<div class="walkthroughs-radiance" aria-hidden="true">
<div class="radiance-home">
<div class="radiance-local" data-radiance-pattern="home" data-radiance-appearance="light"></div>
</div>
</div>
<div class="walkthroughs-hero-text">
<h1>Quickstarts</h1>
Expand Down
Binary file added src/assets/fonts/BB-Roller-Mono-Regular.otf
View file
Open in desktop
Binary file not shown.
321 changes: 14 additions & 307 deletions src/assets/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1229,94 +1229,6 @@ a.anchor {
mask-position: -136px -68px;
}
}
// ── Radiance blob gradient — confined to the header banner only ────────────
.radiance-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background-color: var(--header-banner-base);
&::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to bottom,
transparent 0%,
transparent 40%,
color-mix(in srgb, var(--header-banner-base) 20%, transparent) 55%,
color-mix(in srgb, var(--header-banner-base) 45%, transparent) 68%,
color-mix(in srgb, var(--header-banner-base) 75%, transparent) 82%,
var(--header-banner-base) 96%,
var(--header-banner-base) 100%
);
}

.blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
}

// Light mode blobs
.blob-pink {
width: 72%;
height: 85vh;
left: -14%;
top: -18vh;
// Toned down from 0.44 — read as too vivid/rose against the reference.
background: radial-gradient(ellipse at center, rgba(255, 93, 142, 0.32) 0%, transparent 68%);
animation: drift-a 6s ease-in-out infinite alternate;
}

.blob-purple {
width: 55%;
height: 70vh;
left: 4%;
top: 35vh;
background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.46) 0%, transparent 66%);
animation: drift-b 7s ease-in-out infinite alternate;
}

.blob-blue {
width: 70%;
height: 80vh;
right: -14%;
top: -15vh;
background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.42) 0%, transparent 68%);
animation: drift-c 5s ease-in-out infinite alternate;
}

.blob-wash-pink {
width: 90%;
height: 100vh;
left: -5%;
top: 0;
background: radial-gradient(ellipse at 35% 50%, rgba(255, 170, 210, 0.09) 0%, transparent 70%);
animation: drift-d 10s ease-in-out infinite alternate;
}

.blob-wash-blue {
width: 90%;
height: 100vh;
right: -5%;
top: 0;
background: radial-gradient(ellipse at 65% 50%, rgba(160, 196, 255, 0.12) 0%, transparent 70%);
animation: drift-d 11s ease-in-out infinite alternate;
animation-delay: -4s;
}

// Dark-only blobs — hidden in light mode
.blob-orange,
.blob-yellow,
.blob-purple-r,
.blob-teal {
display: none;
}
}

.header-banner {
position: relative;
min-height: 240px;
Expand Down Expand Up @@ -1359,56 +1271,6 @@ a.anchor {
padding-top: 32px;
}

.radiance-bg {
position: absolute;
inset: -20px -60px 0 -60px;

@media (max-width: $mobile-resolution-max) {
// .doc-wrapper-detail's padding (including its 20px top) drops
// to 0 at this breakpoint, so there's no padding left to bleed
// under — inset:0 here, not the desktop offsets above.
inset: 0;
}

&::after {
background: linear-gradient(
to bottom,
transparent 0px,
transparent 76px,
color-mix(in srgb, var(--header-banner-base) 20%, transparent) 104px,
color-mix(in srgb, var(--header-banner-base) 45%, transparent) 129px,
color-mix(in srgb, var(--header-banner-base) 75%, transparent) 156px,
var(--header-banner-base) 182px,
var(--header-banner-base) 100%
);
}

// pink/purple/blue are home's values (tuned for its taller banner —
// h1 + search bar — where their cores sit ~200px down).
.blob-pink {
top: -31vh;
background: radial-gradient(ellipse at center, rgba(255, 93, 142, 0.16) 0%, transparent 68%);
}

.blob-blue {
top: -29vh;
background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.20) 0%, transparent 68%);
}

.blob-purple {
top: -24vh;
background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.22) 0%, transparent 66%);
}

.blob-wash-pink {
background: radial-gradient(ellipse at 35% 50%, rgba(255, 170, 210, 0.06) 0%, transparent 70%);
}

.blob-wash-blue {
background: radial-gradient(ellipse at 65% 50%, rgba(160, 196, 255, 0.08) 0%, transparent 70%);
}
}

// Guarantees the card grid paints above the gradient layer regardless
// of stacking order — harmless once the fade completes well above it,
// but avoids relying on that timing.
Expand All @@ -1418,6 +1280,20 @@ a.anchor {
}
}

// Hero box for the Radiance "home" pattern (radiance-home.css), the same gradient as the home
// hero and the 404. 336px at the top of the page; the recipe bleeds its field past this box and
// fades it out, and the card grid below stays above it (see .document-body-wrapper above).
.walkthroughs-radiance {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 336px;
z-index: 1;
isolation: isolate;
pointer-events: none;
}

// Total gap from the top of the page to the first card row is now just
// this padding-bottom + .tutorial-cards-row's own margin-top (24px,
// index.scss) — no more artificial min-height holding them apart, which is
Expand All @@ -1443,175 +1319,6 @@ a.anchor {
}
}

#wrapper[data-theme='dark'] .radiance-bg,
#docsModal[data-theme='dark'] .radiance-bg {
// Light-only blobs — hidden in dark mode
.blob-pink,
.blob-purple {
display: none;
}

.blob-orange {
display: block;
width: 65%;
height: 80vh;
// Shifted in from the corner (-10%) toward center-left so the warm
// glow reads as centered on the left half, not hugging the edge.
left: -2%;
top: 8vh;
// Toned down slightly (0.28 -> 0.22) so it stays a subtle accent
// and doesn't compete with the purple emphasis at center.
background: radial-gradient(ellipse at center, rgba(255, 180, 90, 0.22) 0%, transparent 68%);
animation: drift-a 6s ease-in-out infinite alternate;
}

.blob-yellow {
display: block;
width: 48%;
height: 58vh;
left: 8%;
top: -8vh;
background: radial-gradient(ellipse at center, rgba(255, 232, 150, 0.08) 0%, transparent 65%);
animation: drift-d 8s ease-in-out infinite alternate;
}

// Same size as light — different position + animation delay
.blob-blue {
width: 55%;
height: 65vh;
// Pulled back in (right: -4% -> 6%) so its center sits closer to
// purple-r's — with two separate radial falloffs, centers too far
// apart leave a dim/desaturated "valley" between them instead of a
// smooth hand-off (that's what didn't match the reference). The
// wider falloff (62% -> 70%) also softens/extends its own tail so
// it carries color further into the middle.
right: 6%;
top: -10vh;
background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.34) 0%, transparent 70%);
animation-delay: -3s;
}

.blob-purple-r {
display: block;
// Widened further (62% -> 68%) and pulled toward true center
// (right: 14% -> 26%) so purple is the highlighted center-of-banner
// tone, with strengthened opacity (0.52 -> 0.58) to make it read as
// the focal glow while everything else stays subtle around it.
width: 68%;
height: 68vh;
// Pulled in a bit further (26% -> 18%) to close the gap toward blue
// — see blob-blue above.
right: 18%;
top: 6vh;
background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.58) 0%, transparent 72%);
animation: drift-b 7s ease-in-out infinite alternate;
}

.blob-teal {
display: block;
width: 40%;
height: 50vh;
right: 14%;
top: 8vh;
background: radial-gradient(ellipse at center, rgba(45, 220, 177, 0.18) 0%, transparent 65%);
animation: drift-d 9s ease-in-out infinite alternate;
}
}

// Same fix as the light-mode blobs in .walkthroughs-page above, for dark
// mode's distinct orange/yellow/purple-r/teal set — their positions above
// are tuned for home's taller banner, putting every core below this page's
// much shorter (~190px) visible band.
#wrapper[data-theme='dark'] .walkthroughs-page .radiance-bg,
#docsModal[data-theme='dark'] .walkthroughs-page .radiance-bg {
// Same reasoning as the light-mode alpha overrides above: home never
// shows these blobs' full-strength cores, this page does (that's the
// point of the repositioning), so the same alpha reads more saturated
// here than on home/the reference.
.blob-orange {
top: -29vh;
background: radial-gradient(ellipse at center, rgba(255, 180, 90, 0.11) 0%, transparent 68%);
}

.blob-yellow {
top: -18vh;
background: radial-gradient(ellipse at center, rgba(255, 232, 150, 0.05) 0%, transparent 65%);
}

.blob-blue {
top: -21vh;
background: radial-gradient(ellipse at center, rgba(39, 140, 255, 0.16) 0%, transparent 70%);
}

.blob-purple-r {
top: -23vh;
background: radial-gradient(ellipse at center, rgba(138, 93, 255, 0.24) 0%, transparent 72%);
}

.blob-teal {
top: -14vh;
background: radial-gradient(ellipse at center, rgba(45, 220, 177, 0.09) 0%, transparent 65%);
}
}

// Mostly-horizontal drift: large vertical swings pushed blobs down into the
// `::after` fade-to-flat zone for part of each cycle, dimming the glow right
// when it should stay visible. Horizontal movement stays large enough to
// read clearly as motion, without carrying the glow out of the visible band;
// the smaller scale swing (vs. an earlier, more dramatic pass) keeps the
// pulse subtle rather than a noticeable "breathing" effect.
@keyframes drift-a {
from { transform: translate(0px, 0px) scale(1.00); }
to { transform: translate(200px, -60px) scale(1.15); }
}

@keyframes drift-b {
from { transform: translate(0px, 0px) scale(1.00); }
to { transform: translate(-160px, 70px) scale(1.18); }
}

@keyframes drift-c {
from { transform: translate(0px, 0px) scale(1.00); }
to { transform: translate(-180px, -50px) scale(1.14); }
}

@keyframes drift-d {
from { transform: translate(0px, 0px) scale(1.00); }
to { transform: translate(140px, 60px) scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
.radiance-bg .blob {
animation: none;
}
}

// In-product presentation only: override banner color to match product sidebar (#232F43),
// and suppress the page-wide gradient entirely.
.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;

.walkthroughs-hero-text {
color: #fff;
}
}
}

.introCard,
.boxHalfWidth {
flex: 1 1 260px;
Expand Down
Loading
Loading