Move sponsor logos to front screen, replace codecrafters logo, add sponsor bar below menu

Author: life2harsh

assets/icons/codecrafters.png

@@ -13,7 +13,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: 14px 12px;
+  padding: 8px 12px 6px;
   font-family: 'Press Start 2P', monospace;
   overflow: hidden;
   background: transparent;
@@ -168,7 +168,7 @@
   flex: 1;
   min-height: 0;
   gap: 14px;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   z-index: 60;
 }
 
@@ -1084,6 +1084,38 @@ body.modal-visible {
   text-align: center;
   pointer-events: none;
   animation: promptBlink 1.5s step-end infinite;
+  margin-bottom: 6px;
+}
+
+/* ---- Sponsor Bar ---- */
+.sponsor-bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+  z-index: 60;
+  padding: 6px 0 2px;
+  flex-shrink: 0;
+}
+
+.sponsor-bar-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.15));
+}
+
+.sponsor-bar-item:hover {
+  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.5));
+  transform: translateY(-2px);
+}
+
+.sponsor-bar-item img {
+  width: 100px;
+  height: 100px;
+  object-fit: contain;
+  image-rendering: pixelated;
 }
 
 /* ============================================================

css/menu.css

@@ -356,6 +356,18 @@
     animation: none;
   }
 
+  /* ---- SPONSOR BAR ---- */
+  .sponsor-bar {
+    gap: 12px;
+    padding: 4px 0 2px;
+    flex-wrap: wrap;
+  }
+
+  .sponsor-bar-item img {
+    width: 64px;
+    height: 64px;
+  }
+
   /* ---- SFX BUTTON ---- */
   .sfx-toggle {
     right: 10px;
@@ -647,6 +659,15 @@
     margin-bottom: 2px;
   }
 
+  .sponsor-bar {
+    gap: 8px;
+  }
+
+  .sponsor-bar-item img {
+    width: 44px;
+    height: 44px;
+  }
+
   .crt-screen {
     transform: perspective(900px) scale(1.01);
   }

css/responsive.css

@@ -276,6 +276,19 @@
       <!-- select prompt -->
       <div class="menu-select-prompt">USE ARROWS ← → ↑ ↓ · ENTER TO SELECT</div>
 
+      <!-- sponsor logos bar -->
+      <div class="sponsor-bar">
+        <a class="sponsor-bar-item" href="https://fossunited.org" target="_blank">
+          <img src="assets/icons/fossunited.png" alt="FOSS United">
+        </a>
+        <a class="sponsor-bar-item" href="https://codecrafters.io" target="_blank">
+          <img src="assets/icons/codecrafters.png" alt="CodeCrafters">
+        </a>
+        <a class="sponsor-bar-item" href="https://gen.xyz" target="_blank">
+          <img src="assets/icons/xyz_logo (1).svg" alt=".xyz">
+        </a>
+      </div>
+
       <!-- retro OS-style modal system -->
       <div class="arcade-modal-overlay" id="arcadeModalOverlay">
         <div class="arcade-modal" id="arcadeModal">