Fix mobile close (X) button visibility by correcting active state col…

[priyanshusky0]

Closes #18

Summary
The mobile close (X) icon was not visible when the hamburger menu was opened.

Root Cause
The issue had two layers:
1. Color Contrast Conflict
The .hamburger-inner, ::before, and ::after elements were using $primary as their background color even in the active state.
Since the mobile menu overlay also uses $primary, the close (X) icon blended into the background and became invisible.
2. Header Stacking Context / Visual Layering
The header remained visible with a white background (z-index: 1000) when the mobile menu opened.
This prevented the white X from being clearly visible against the blue overlay behind it.

Changes Made
1. Added an .is-active override in _hamburger.scss to render the hamburger bars in white when the menu is open:

&.is-active {
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background: #fff;
}
}
2. Updated _header.scss so that when body.lock-scroll is active (mobile menu open), the header becomes visually transparent:

.lock-scroll {
.header {
background-color: transparent;
border-bottom-color: transparent;
box-shadow: none;
}
}

This ensures the white close (X) icon is clearly visible against the blue overlay.

Verification
• Tested locally using bundle exec jekyll serve
• Verified in responsive mobile view
• Confirmed:
• Hamburger animates correctly
• White X is visible
• Menu closes correctly
• No desktop regression observed

[hanzalahwaheed]

Please attach before/after screenshots if UI/style changes :)