🐛 [Bug]: Surprise me button, on hovering, changes completely to white. also, also, this sidebar is also wrongly overlaying. #1279

📝 Description

1. Surprise Me Button Hover Contrast: The "Surprise Me" button in the hero section changes to a white background on hover. In dark mode, because the text and icon color is light/white, this causes a white-on-white text visibility issue, rendering the text invisible.
2. Sidebar Overlaying on Medium Screens: On medium screen widths (between 768px and 1100px), the sidebar is docked on the left, but the desktop content-shifting paddings are only active for widths >= 1100px. This causes the project grid and cards to start at the left edge under the docked sidebar, resulting in the sidebar overlapping the leftmost cards (e.g., "Coin Flip").
3. Mobile Drawer Autoloading on Scroll: On mobile devices (<= 768px), scrolling down past the hero section triggers the IntersectionObserver, which automatically adds sidebar-active to the <body> element. This causes the mobile sidebar drawer to slide in automatically and show the backdrop blocking scroll/pointer interactions.

🔄 Steps to Reproduce

1. Open the web app on a medium viewport width (e.g., 1024px).
2. Scroll to the projects section. Observe that the sidebar dock overlaps the leftmost cards.
3. Hover over the "Surprise Me" button in the hero section and observe the text becomes completely illegible (white text on white background).
4. Resize to a mobile width (<= 768px), refresh, and scroll down past the hero section. Observe the drawer automatically slides in and covers the page.

🎯 Expected Behavior

1. Hovering over the "Surprise Me" button should maintain high contrast (the text/icon should turn dark slate #0c0f1a against the white background).
2. The sidebar layout shifting paddings (padding-left: 296px / 128px) should align with the screen widths >= 768px so they match when the sidebar is docked, preventing overlapping on medium screens.
3. The mobile drawer on screens <= 768px should only be toggled manually by clicking the hamburger menu button and should not trigger automatically on scroll.

❌ Actual Behavior / Error Logs

• .btn-secondary-hero:hover background changes to rgba(255, 255, 255, 0.95) without updating text color, leading to zero text contrast.
• .projects-section padding is overridden to 0 at < 1100px, causing layout overlap with the 280px wide docked sidebar.
• document.body gets sidebar-active toggled on scroll regardless of screen size.

💻 Environment

• OS: Windows / macOS / Linux
• Python Version: N/A (Frontend Web Interface)
• File Name: web-app/css/styles.css and web-app/js/main.js

• I am a registered GSSoC 2026 contributor.
• I want to be assigned to fix this issue.