Fix: Improve visibility of Related Videos carousel navigation (#1163)

[piyushtripathi9424]

Description

This PR fixes Issue #1163 by making the "Related Videos" carousel navigation more visible and accessible.

Key Changes

• Arrows: Applied filter: invert(100%) contrast(200%) and enlarged the arrows to ensure high contrast without needing bulky circular backgrounds.
• Pagination: Highlighted the active slide indicator with the primary teal color and increased its width.
• Performance & Scoping: Optimized CSS transitions per reviewer feedback and safely scoped all new styles to .related-videos.

Screenshot

Fixes #1163

[gemini-code-assist]

Code Review

This pull request refactors and enhances the carousel styles within the .related-videos class in _videos_project.scss. The review feedback recommends replacing the generic transition: all properties with explicit transitions for specific properties (such as background-color, box-shadow, transform, and width) to improve browser rendering performance.

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: https://docs.layer5.io/pr-preview/pr-1164/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[yi-nuo426]

Thanks. Don't encircle the arrows. Just invert their coloring to be of high contrast.

[piyushtripathi9424]

Thanks. Don't encircle the arrows. Just invert their coloring to be of high contrast.

Inverted as requested.

[Sbragul26]

Could we make the icon a bit smaller? It is bigger than the one on the production site and grows even more on hover. I think just changing the color for better contrast would be enough.