fix: add backdrop blur to sticky header for better readability

[VedantMadane]

This PR adds backdrop-filter: blur(10px) and adjusts the background opacity of the sticky navbar when scrolled to ensure header text remains readable against underlying content.

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: VedantMadane / name: Vedant Madane (f0a5a5b)

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: VedantMadane
Once this PR has been reviewed and has the lgtm label, please assign natalisucks for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[k8s-ci-robot]

Welcome @VedantMadane!

It looks like this is your first PR to kubernetes/contributor-site 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes/contributor-site has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[TineoC]

I can't see the difference between the new vs actual version.

Could you send some screenshots?

[natalisucks]

@VedantMadane Hi there! You will need to sign the CLA before any meaningful review can take place on your pull request. Please follow the directions in the following message to do so: #673 (comment)

[VedantMadane]

@TineoC The change is subtle but noticeable when scrolling over content-heavy pages:

Before: The sticky navbar uses background-color: rgba(, 0.95) which is a nearly opaque solid color that can still show slight content bleeding through on high-contrast pages.

After: The navbar uses background-color: rgba(, 0.9) with backdrop-filter: blur(10px.) This adds a frosted glass effect that makes the background content behind the header soft and blurred, improving text readability while maintaining a modern aesthetic. The slight transparency reduction (0.95 to 0.9) compensates by letting the blur effect be visible.

The visual difference is most apparent when scrolling a page with varied content colors behind the header. The blur prevents distracting text/images from showing through.

I'll work on getting the CLA signed and can provide screenshots once that's resolved.

[VedantMadane]

Friendly ping — CLA is signed and the change is ready for review. Would appreciate an /lgtm when you get a chance. Thanks!

[TineoC]

Please share the screenshot to see the difference of both versions

[TineoC]

And this pr doesn't fixes #614 could you please remove that part from your description?

[TineoC]

/hold

[jberkus]

So, comparing these two I don't understand why the blur is supposed to be better?