Use css variables for fixed header style updates

[ang-zeyu]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain:

Small cleanup / prelude to the ux issue #1560 to make things easier

Overview of changes:
<style>sheet modifications are replaced in favour of css variables for simplification

Anything you'd like to highlight / discuss:
na

Testing instructions:

• Fixed headers work
• Anchor paddings should also still work
• As well as nav-menu-open (mobile site nav dropdown / overlay)

sidenote: noticed while tackling this that the z-index handling for the mobile overlay is broken in the case of no header[fixed], we can fix this sometime separately from this issue

Proposed commit message: (wrap lines at 72 characters)
Use css variables for fixed header style updates

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[jonahtanjz]

No issue after testing :)

sidenote: noticed while tackling this that the z-index handling for the mobile overlay is broken in the case of no header[fixed], we can fix this sometime separately from this issue

👍

LGTM!