Merge pull request steam-bell-92#488 from nishtha-agarwal-211/fix/decorative-code-overlapping-474

fix: constrain decorative code snippets to hero section

Author: steam-bell-92

web-app/css/styles.css

@@ -232,14 +232,14 @@ body {
 /* ═══════════════════════════════════════
    HERO SECTION
 ═══════════════════════════════════════ */
-/* .hero-section {
+.hero-section {
     position: relative;
-    padding: 9rem 0;
+    padding: 7.5rem 0 3.5rem;
     min-height: 520px;
     text-align: center;
     overflow: hidden;
     background: var(--hero-green-nav-bg);
-} */
+}
 
 
 /* Canvas fills the full hero */
@@ -285,7 +285,7 @@ body {
     font-family: 'IBM Plex Mono', monospace;
     font-size: clamp(0.72rem, 1.2vw, 0.92rem);
     letter-spacing: 0.02em;
-    opacity: 0.5;
+    opacity: 0.18;
     text-shadow: 0 0 18px rgba(34, 197, 94, 0.18);
     white-space: nowrap;
     transform-origin: center;
@@ -300,14 +300,14 @@ body {
 .snippet-two {
     top: 25%;
     right: 10%;
-    opacity: 0.5;
+    opacity: 0.18;
     animation: codeFloatTwo 22s ease-in-out infinite;
 }
 
 .snippet-three {
     top: 50%;
     left: 12%;
-    opacity: 0.5;
+    opacity: 0.22;
     animation: codeFloatThree 20s ease-in-out infinite;
 }
 
@@ -326,20 +326,20 @@ body {
 .snippet-six {
     top: 20%;
     right: 25%;
-    opacity: 0.42;
+    opacity: 0.15;
     animation: codeFloatThree 26s ease-in-out infinite;
 }
 
 .snippet-seven {
     top: 80%;
     right: 18%;
-    opacity: 0.42;
+    opacity: 0.15;
     animation: codeFloatTwo 28s ease-in-out infinite;
 }
 
 [data-theme="light"] .code-snippet {
     color: color-mix(in srgb, var(--text-secondary) 70%, var(--accent-color));
-    opacity: 0.5;
+    opacity: 0.15;
     text-shadow: none;
 }
 
@@ -1761,27 +1761,28 @@ body {
     }
 
     .hero-section {
-        padding: 5rem 0;
+        padding: 7rem 0;
+        min-height: 400px;
     }
 
     .hero-title {
-        font-size: 2.6rem;
+        font-size: 2.3rem;
         margin-bottom: 1rem;
     }
 
     .hero-subtitle {
         font-size: 1rem;
-        margin-bottom: 1rem;
+        margin-bottom: 2rem;
     }
 
     .hero-features {
-        gap: 0.9rem;
-        margin-bottom: 1rem;
+        gap: 1rem;
+        margin-bottom: 2rem;
     }
 
     .feature-badge {
-        padding: 0.15rem 0 0.35rem;
-        font-size: 0.8rem;
+        padding: 0.6rem 1.2rem;
+        font-size: 0.95rem;
     }
 
     .feature-icon {
@@ -1793,10 +1794,6 @@ body {
         font-size: 1rem;
     }
 
-    .hero-subtitle {
-        font-size: 1.05rem;
-    }
-
     .hero-badges {
         gap: 0.6rem;
     }
@@ -1807,7 +1804,7 @@ body {
     }
 
     .tabs-section {
-        padding: 2rem 0 1.5rem 0;
+        padding: 2rem 0 1.5rem;
     }
 
     .tabs-section .container {
@@ -1837,28 +1834,33 @@ body {
     }
 
     .btn-random-project {
-        width: auto;
-        justify-content: flex-start;
-        padding: 0.25rem 0;
-        font-size: 0.84rem;
+        width: 100%;
+        justify-content: center;
+        padding: 0.75rem 1.25rem;
+        font-size: 0.95rem;
     }
 
     .projects-section {
         padding: 2.5rem 0;
     }
 
     .projects-grid {
-        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
-        gap: 0.85rem;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 1.5rem;
         margin-top: 1.5rem;
     }
 
     .project-card {
-        padding: 0.95rem 1rem;
+        padding: 1.75rem 1.5rem;
+    }
+
+    .card-icon {
+        font-size: 3.25rem;
+        margin-bottom: 0.85rem;
     }
 
     .project-card h3 {
-        font-size: 0.98rem;
+        font-size: 1.15rem;
     }
 
     .search-wrapper {
@@ -2368,34 +2370,7 @@ body {
     .footer-brand { flex: 1 1 100%; max-width: 600px; }
 }
 
-@media (max-width: 768px) {
-    .hero-section { padding: 7rem 0; min-height: 400px; }
-    .hero-title   { font-size: 2.3rem; }
-    .hero-subtitle { font-size: 1rem; margin-bottom: 2rem; }
-    .hero-features { gap: 1rem; margin-bottom: 2rem; }
-    .feature-badge { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
-
-    .tabs-section { padding: 2rem 0 1.5rem; }
-    .tabs-section .container { gap: 1.5rem; }
-    .tabs-wrapper { flex-direction: column; gap: 1rem; align-items: stretch; }
-    .tabs-wrapper .tabs { min-width: unset; width: 100%; }
-    .tabs { gap: 0.6rem; margin-top: 0; justify-content: flex-start; }
-    .tab { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
-
-    .btn-random-project { width: 100%; justify-content: center; padding: 0.75rem 1.25rem; font-size: 0.95rem; }
 
-    .projects-section { padding: 2.5rem 0; }
-    .projects-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
-    .project-card { padding: 1.75rem 1.5rem; }
-    .card-icon { font-size: 3.25rem; margin-bottom: 0.85rem; }
-    .project-card h3 { font-size: 1.15rem; }
-
-    .search-wrapper { height: 50px; padding: 0 1.1rem; }
-    .search-input { font-size: 0.95rem; }
-    .search-shortcut { display: none; }
-
-    .modal-content { padding: 1.5rem; border-radius: 16px; }
-}
 
 @media (max-width: 576px) {
     .footer-content { grid-template-columns: 1fr; text-align: center; gap: 2rem; }

web-app/index.html

@@ -840,6 +840,7 @@
 </div>
 
     <main id="main-content" tabindex="-1">
+        <section class="hero-section">
             <div class="hero-background color-bends-container" aria-hidden="true"></div>
             <div class="hero-code-snippets" aria-hidden="true">
                 <span class="code-snippet snippet-one">score += 1</span>
@@ -884,6 +885,7 @@ <h1 class="hero-title">Learn Python the Fun Way!</h1>
                     <button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">launch random →</button>
                 </div>
             </div>
+        </section>
 
         <section class="projects-section" aria-label="Projects">
             <div class="container">