Fix gallery video player spacing to prevent nav overlap

- Adjusted gallery section padding to properly clear fixed navigation
- Video player now has proper breathing room from header
- Top borders of player are fully visible

Author: Ankit Khare

assets/css/matrix-theme.css

@@ -675,7 +675,7 @@ body > * {
     justify-content: center;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     pointer-events: none;
-    padding: 120px 20px 40px;
+    padding: 140px 20px 40px;
     box-sizing: border-box;
     overflow-y: auto;
 }
@@ -691,9 +691,8 @@ body > * {
 
 /* Video Container */
 .video-container {
-    width: 90%;
-    max-width: 1400px;
-    max-height: calc(100vh - 180px);
+    width: min(95vw, 1100px);
+    max-height: calc(100vh - 160px);
     background: linear-gradient(135deg, rgba(0, 0, 40, 0.98), rgba(20, 0, 60, 0.98));
     border: 3px solid var(--color-electric-blue);
     border-radius: 20px;
@@ -779,7 +778,9 @@ body > * {
 .video-wrapper {
     position: relative;
     width: 100%;
-    height: 650px; /* Fixed height for better control */
+    aspect-ratio: 16 / 9;
+    height: auto;
+    max-height: calc(100vh - 240px);
     overflow: hidden;
     border-radius: 15px 15px 0 0;
     background: #000;
@@ -799,7 +800,7 @@ body > * {
 
 /* Video Info Section */
 .video-info {
-    padding: 30px;
+    padding: 10px 18px 14px;
     background: linear-gradient(135deg, rgba(0, 0, 30, 0.9), rgba(20, 0, 50, 0.9));
     border-top: 2px solid var(--color-electric-cyan);
     border-radius: 0 0 15px 15px;
@@ -809,7 +810,7 @@ body > * {
     color: var(--color-electric-cyan);
     font-family: var(--font-mono);
     font-size: 1.8rem;
-    margin-bottom: 10px;
+    margin-bottom: 6px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-shadow:
@@ -818,10 +819,12 @@ body > * {
 }
 
 .video-info p {
-    color: var(--color-electric-white);
+    color: #f8fafc;
     font-family: var(--font-mono);
     font-size: 1rem;
     opacity: 0.9;
+    margin-top: 0;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
 }
 
 /* Loading Animation */
@@ -847,13 +850,13 @@ body > * {
 /* Responsive Design */
 @media (max-width: 1400px) {
     .video-wrapper {
-        height: 550px;
+        max-height: calc(100vh - 230px);
     }
 }
 
 @media (max-width: 1200px) {
     .video-wrapper {
-        height: 500px;
+        max-height: calc(100vh - 220px);
     }
 }
 
@@ -865,7 +868,7 @@ body > * {
     }
 
     .video-wrapper {
-        height: 400px;
+        max-height: calc(100vh - 200px);
     }
 
     .video-info h3 {
@@ -887,6 +890,6 @@ body > * {
 
 @media (max-width: 480px) {
     .video-wrapper {
-        height: 300px;
+        max-height: calc(100vh - 180px);
     }
 }

assets/css/style.css

@@ -1531,9 +1531,9 @@ body.nav-open {
     height: 100%;
     background: rgba(0, 0, 0, 0.95);
     z-index: 9999;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
-    padding: 120px 20px 40px;
+    padding: 140px 20px 40px;
     box-sizing: border-box;
     overflow-y: auto;
 }
@@ -1544,18 +1544,24 @@ body.nav-open {
 
 .video-showcase .video-container {
     position: relative;
-    width: 100%;
-    max-width: 1600px;
-    height: 1400px;
+    width: min(1100px, 95vw);
+    max-height: calc(100vh - 160px);
+    height: auto;
+    min-height: 0;
+    padding: 0;
     background: var(--color-dark);
     border-radius: var(--radius-lg);
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 .video-showcase .video-wrapper {
     position: relative;
     width: 100%;
-    height: calc(100% - 100px);
+    aspect-ratio: 16 / 9;
+    height: auto;
+    max-height: calc(100vh - 240px);
 }
 
 .video-showcase .video-wrapper iframe {
@@ -1565,24 +1571,26 @@ body.nav-open {
 }
 
 .video-showcase .video-info {
-    padding: var(--spacing-lg);
+    padding: 8px 16px 12px;
     text-align: center;
     background: var(--color-dark);
 }
 
 .video-showcase .video-info h3 {
     color: var(--color-blue);
-    margin-bottom: var(--spacing-sm);
+    margin-bottom: 4px;
 }
 
 .video-showcase .video-info p {
-    color: var(--color-gray-light);
+    color: #f8fafc;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
+    margin-top: 0;
 }
 
 .close-video {
     position: absolute;
-    top: 80px;
-    right: 80px;
+    top: 20px;
+    right: 20px;
     background: rgba(255, 255, 255, 0.1);
     border: 2px solid white;
     color: white;

index.html

@@ -26,8 +26,8 @@
     <meta property="twitter:description" content="Explore 48 groundbreaking AI solutions from the Financial AI Hackathon Championship 2025. Featuring 1,000+ developers from around the world building production-ready solutions for loan underwriting, fraud detection, compliance automation, and intelligent document processing using LandingAI's Agentic Document Extraction technology.">
     <meta property="twitter:image" content="https://landing-ai.github.io/ade-fintech/assets/images/og-preview.jpg">
 
-    <link rel="stylesheet" href="assets/css/style.css?v=52">
-    <link rel="stylesheet" href="assets/css/matrix-theme.css?v=52">
+    <link rel="stylesheet" href="assets/css/style.css?v=54">
+    <link rel="stylesheet" href="assets/css/matrix-theme.css?v=54">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -90,7 +90,6 @@ <h2 class="hero-subtitle">Community-Built Fintech Solutions Powered by ADE</h2>
                     </div>
                     <div class="video-info">
                         <h3>Financial AI Hackathon Championship 2025 - Nov 15, New York</h3>
-                        <p>Experience the innovation, excitement, and breakthrough AI solutions from the championship</p>
                     </div>
                 </div>
             </div>
@@ -167,9 +166,9 @@ <h3 class="about-card-title">Continued Innovation</h3>
     <!-- Footer Component -->
     <div id="footer-placeholder"></div>
 
-    <script src="assets/js/components.js?v=52"></script>
-    <script src="assets/js/matrix-rain.js?v=52"></script>
-    <script src="assets/js/main.js?v=52"></script>
-    <script src="assets/js/video-player.js?v=52"></script>
+    <script src="assets/js/components.js?v=54"></script>
+    <script src="assets/js/matrix-rain.js?v=54"></script>
+    <script src="assets/js/main.js?v=54"></script>
+    <script src="assets/js/video-player.js?v=54"></script>
 </body>
 </html>