[Docs] Fix inconsistent section highlight on /cloud and /kanvas

[yohaidajurno]

fixed.mov

The glow-swap effect relied on the CSS sibling selector (~), which only works forward, so it silently broke when the highlighted box came first. Made the rule order-independent with :has() and listed the current product first on both pages.

Fixes #1138

Notes for Reviewers

This PR fixes #

Signed commits

• Yes, I signed my commits.

[welcome]

Yay, your first pull request! 👍 A contributor will be by to give feedback soon. In the meantime, please review the Layer5 Community Welcome Guide and sure to join the community Slack.
Be sure to double-check that you have signed your commits. Here are instructions for making signing an implicit activity while peforming a commit.

[gemini-code-assist]

Code Review

This pull request reorders the ecosystem boxes on the Kanvas index page and adds a CSS rule to both _content_project.scss and _navbar_project.scss to remove the glow effect on .highlight-box when a subsequent .hidden-highlight-box is hovered or focused. Feedback points out significant code duplication between the two SCSS files and suggests moving the shared $ecosystem-box-glow variable to a shared variables file and removing the duplicate classes from _navbar_project.scss.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[github-actions]

Preview deployment for PR #1139 removed.

This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[leecalcote]

Thanks for working on this, @yohaidajurno 👍

[yohaidajurno]

Before this PR, both pages listed the boxes in the same order — Cloud first, then Kanvas. As part of the fix I made the order intentional: each page now lists its own product first (with the glow), and the other product second. So /cloud shows 1. Cloud (glow) 2. Kanvas, and /kanvas shows 1. Kanvas (glow) 2. Cloud. I think leading with the product the page is about reads better visually. Happy to revert to a fixed order if you prefer the original. @leecalcote

[Bharath314]

Great job! I have one comment but otherwise this is a clean fix.

[Bharath314]

Can you restore the previous order? This swapping leads to some confusing UX when you press on the boxes to navigate between sections.

[Bhumikagarggg]

@yohaidajurno Thank you for your contribution! Let's discuss this during the website call today (20 July) at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[Bharath314]

Hey @yohaidajurno , are you still working on this?

[jijillery]

Muse Code review: I verified this fix against master and the linked issue (#1138, still open). The diagnosis is correct and the change is sound. No blocking issues; a few nits below.

What I verified

1. Root cause is real — assets/scss/_content_project.scss:360-364 (master) uses &:hover ~ .highlight-box, and ~ only matches following siblings. On /cloud the glow box comes first (content/en/cloud/_index.md:16-22), so the swap rule could never match there, while on /kanvas (hidden box first) it did. That exactly explains the inconsistent behavior in [UX] Section Highlight doesn't have the same behaviour in /cloud and /kanvas #1138.
2. Fix covers both DOM orders — the PR keeps the legacy forward rule in .hidden-highlight-box and adds the mirror rule on .highlight-box (assets/scss/_content_project.scss, new :has(~ .hidden-highlight-box:hover/:focus) block). Both orders are now covered, so the CSS is genuinely order-independent as claimed.
3. Dedup is safe — removing the duplicate block from assets/scss/_navbar_project.scss is fine: both partials compile into the single bundle via assets/scss/_styles_project.scss (imports content_project line 2 and _navbar_project line 8), the canonical %ecosystem-box-base / classes remain in _content_project.scss, and $ecosystem-box-glow moves to _variables_project.scss, which Docsy loads before project styles. build-and-deploy-preview passes, confirming the SCSS compiles.
4. Only /kanvas needed the reorder — content/en/cloud/_index.md already lists Cloud (glow) first, so touching only content/en/kanvas/_index.md (Kanvas glow first, Cloud second) is correct, not an omission. Only these two pages use the ecosystem-box shortcode.
5. Specificity works out — .highlight-box:has(~ .hidden-highlight-box:hover) outranks the base .highlight-box glow, and the hovered .hidden-highlight-box:hover rule applies the glow to the hovered box. No conflicts.

Nits (non-blocking)

• assets/scss/_content_project.scss (new :has block): consider :focus-visible alongside :focus so a mouse click that leaves focus on the link doesn't keep the glow swapped for mouse users, while keyboard users still get the swap:

  /* Yield the glow when a following hidden box is hovered/focused */
  &:has(~ .hidden-highlight-box:hover),
  &:has(~ .hidden-highlight-box:focus-visible) {
    box-shadow: none;
  }

• :has() support: fine on all modern browsers (2023+); on older ones the glow simply won't swap, which is acceptable graceful degradation. No action needed.
• assets/scss/_navbar_project.scss: the old file had no trailing newline; please confirm the edited file ends with one.
• PR body still contains the template leftover line This PR fixes # (empty). Fixes #1138 is already present above it, so just deleting the leftover line would tidy things up.