diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index bf085df8a..41918bcc3 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1162,42 +1162,13 @@ a.anchor { } } // ── Radiance blob gradient — confined to the header banner only ──────────── -// `.radiance-bg` lives *inside* `.header-banner` (which is `position: -// relative` and already scoped to the content column, next to the sidebar -// — see the header-banner rule below) instead of being `position: fixed` -// relative to the full viewport. A viewport-wide fixed layer bled behind -// the sidebar, wasting part of the gradient and throwing off the visible -// color balance. `position: absolute` here is sized relative to -// `.header-banner`'s own box, so it only ever spans the visible content -// lane. -// `bottom: 0` (instead of a fixed/viewport height) makes this match -// `.header-banner`'s own content-driven height exactly, so the gradient — -// including its own `overflow: hidden` clipping of the oversized blobs — -// ends exactly where the banner ends and never bleeds into the cards -// section below, regardless of viewport height. .radiance-bg { position: absolute; inset: 0; - // z-index 0 (an explicit stacking context via position + z-index) keeps - // this behind the header-banner text/search bar, which are given their - // own explicit stacking priority below rather than relying on DOM order. z-index: 0; overflow: hidden; pointer-events: none; background-color: var(--header-banner-base); - - // Blobs (below) are sized/positioned to fill most of the banner box, - // which spreads visible color across it. This overlay sits above the - // blobs (explicit z-index beats their z-index:auto) and fades from - // transparent — letting the blobs show through near the top — to the - // flat base color toward the bottom. - // A plain 2-stop linear fade (transparent -> solid) has a sharp change - // in slope right where it hits full opacity — even though the color - // matches the page background exactly, that slope discontinuity reads - // as a visible "seam" (a Mach-band effect) right at the banner/cards - // boundary. The extra `color-mix` stops below ease the taper in - // gradually (S-curve) instead of snapping from "still fading" to - // "fully flat", which removes that perceived hard edge. &::after { content: ''; position: absolute; @@ -1218,19 +1189,9 @@ a.anchor { .blob { position: absolute; border-radius: 50%; - // The radial-gradient's own falloff still reads as a bounded shape - // with a visible (if soft) edge — an actual blur is what turns it - // into ambient diffuse light with no perceptible boundary. filter: blur(60px); } - // height/top use `vh` (not `%`) so blob proportions stay the same - // regardless of how tall `.radiance-bg` itself is. With `%`, sizing - // against this now-short (header-banner-height) box made every blob so - // vertically compressed (nearly as tall as the whole clipped area) that - // there was no visible core/edge left to show drift against — the - // blur+clip just read as a flat wash, and the animation, while still - // running, was imperceptible. // Light mode blobs .blob-pink { width: 72%; @@ -1619,8 +1580,6 @@ a.anchor { } } -// Fluid home page cards for both standalone and embedded presentations. -// Using flex shorthand so cards reflow naturally when the viewport or iframe width changes. .introCard, .boxHalfWidth { flex: 1 1 260px; diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index a3f74bb95..7cab3f66f 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -182,7 +182,7 @@ $tag-color-white: var(--body-background-color); $tag-color-light: $lightgrey; // --------------------------------------------------------------------------- -// radiant remap â a custom property whose value contains var() is resolved on +// radiant remap a custom property whose value contains var() is resolved on // the element where it is DECLARED, not where it is used. If we alias // --body-background-color: var(--rd-sys-color-background-base); // only on :root, dark mode would resolve against :root's (light) token and @@ -223,13 +223,6 @@ $tag-color-light: $lightgrey; --side-nav-active-text: var(--rd-sys-color-content-brand); --side-nav-active-bg: var(--rd-sys-color-background-ghost-highlight); --secondary-color: var(--rd-sys-color-content-brand); - // Docmap (right-nav) hover/active text + border. Deliberately its own - // alias rather than reusing --var-note-color: that one maps to - // --rd-sys-color-content-information, whose dark-theme value in - // radiant-colors.css is a broken placeholder ("x", not a real color), - // so anything using it renders with no visible color in dark mode. - // --rd-sys-color-content-brand matches --link-text-color exactly and is - // valid in both themes. --docmap-active-color: var(--rd-sys-color-content-brand); /* --- borders --- */ diff --git a/src/components/Document/index.scss b/src/components/Document/index.scss index acf200ce7..39de82de8 100644 --- a/src/components/Document/index.scss +++ b/src/components/Document/index.scss @@ -198,8 +198,6 @@ font-family: 'Optimo-Plain', sans-serif; color: var(--link-text-color); background: var(--copy-btn-bg); - // Bold (not subtle) border so the button reads clearly against - // the code background instead of blending in. border: 1px solid var(--rd-sys-color-border-bold); border-radius: 999px; cursor: pointer; @@ -208,8 +206,6 @@ &.has-overflow:not(.expanded) .code-expand-btn { position: absolute; left: 50%; - // Extra clearance from the bottom edge so the button doesn't - // sit right on top of the last (masked-fade) line of code. bottom: 20px; transform: translateX(-50%); z-index: 3; @@ -282,20 +278,11 @@ transition: background 0.15s ease, color 0.15s ease; &:hover { background: rgba(255, 255, 255, 0.1); } - // Filled green chip (not just a colored icon) to match the - // highlighted checkmark treatment shown in the reference. &.copied, &.copied:hover { color: #0d9f6e; background: rgba(13, 159, 110, 0.14); } - - // The global `.icon` rule (assets/styles/index.scss) sets its - // own `color`, which wins over inheriting the button's `color` - // here (since currentColor resolves against the SVG's own - // color, not an ancestor's) — so the checkmark stayed grey even - // once the button itself turned green. `.copyIcon` has higher - // specificity than the single-class `.icon` rule, so this wins. &.copied .copyIcon { color: #0d9f6e; } } } @@ -348,10 +335,6 @@ .copyButton { color: #fff; &:hover { background: rgba(255, 255, 255, 0.1); color: #cdd9e5; } - // Higher specificity than the plain :hover above (both live - // under this same `#wrapper[data-theme='light'] &` block), - // so the checkmark stays green even while the mouse is - // still over the button right after clicking. &.copied, &.copied:hover { color: #0d9f6e; @@ -612,9 +595,6 @@ } .copyIcon { - // Was 15x20 (non-square) — the source glyphs have a square 24x24 - // viewBox, so a non-square box stretched/distorted them instead of - // rendering the icon as designed. height: 16px; width: 16px; } diff --git a/src/components/Dropdown/index.scss b/src/components/Dropdown/index.scss index 0014187f9..cf352788a 100644 --- a/src/components/Dropdown/index.scss +++ b/src/components/Dropdown/index.scss @@ -52,9 +52,6 @@ right: 0; left: auto; padding-top: 6px; - // Above the SpotterCode floating-assistant panel (z-index: 1002), - // which otherwise covers this dropdown's right edge on narrower - // viewports where the panel is open. z-index: 1100; } diff --git a/src/components/SecondaryHeader/index.scss b/src/components/SecondaryHeader/index.scss index 91dd62a77..74c6bd424 100644 --- a/src/components/SecondaryHeader/index.scss +++ b/src/components/SecondaryHeader/index.scss @@ -269,8 +269,6 @@ } &.active { - // Needs !important to beat the global .active rule in assets/styles/index.scss - // (var(--var-note-color) !important), same as __tab.active above. color: var(--nav-accent-color) !important; background: rgba(169, 232, 255, 0.08); }