helldivers-theme 1.0.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 62b71fc7140e025e87cb6118ac1410008e3ed8784c0a4fa27ce8cdd57df0268c
-  data.tar.gz: ac47c226e2a2df5d7732ff4e142e0afe310065abc2b944b21b61739c306d1c69
+  metadata.gz: ef9bcafbe4a33ebd2c37dae783b384aac9544d37e8a860f5ad21454f19ad9628
+  data.tar.gz: fc9b4d7014ce7ba2ad1cae32201dd23a16050062b9f527f10f44b87b6e5b75ed
 SHA512:
-  metadata.gz: de349890a0d6dd1e67438a6919b913b27e2514acf71cd0e71e6804935179e1bdf555cbd5f57300d9539c03ce409dcac86d445f86ff5f22a4c395dfbb64f8d449
-  data.tar.gz: 28fd3dec607bccd9e124d7a95058ac75b04a692712f2b31f1d441f54b135c4ec05fecaf78bd532ecab26afe8eaaeeeb5bb43110b29c6c444f9c06ccb2a625a17
+  metadata.gz: 210ac1d24abe43601df9802ebc697c2a89ce29a720b6f1337232ecbd916102b331497dd19b56934702b4d25b167218b5bbaf56c2cb0ac19abc29950e11d1fbce
+  data.tar.gz: b48aa79fbb784e68a79e9e33cd1d96f72f483fc841ce39e578b3121da6c19e85385bc70bf8abd943ae112255b910bd8fa4b0d2b49172ac2a75e74f7f374b417c

data/_data/squad.yaml

@@ -1,5 +1,3 @@
-# _data/squad.yml
-
 # --- GENERAL INFO ---
 squad_name: "Dagger Squad"
 motto: "\"Liberty never sleeps, and neither do we.\""
@@ -75,6 +73,37 @@ requirements:
     value: "ANY (TRY HARD)"
     status: "pending" # Shows yellow/orange
 
+hubs:
+  - name: "PC Division"
+    platform: "STEAM / PSN"
+    logo: "pc-logo.png"
+    commander: "CMDR. VEX" # Specific leader for this hub
+    members: "150+ Active"
+    status: "OPERATIONAL"
+    description: "Primary command center for PC Helldivers. Specializing in high-precision orbital strikes and rapid deployment strategies."
+    discord_link: "https://discord.gg/your-pc-link"
+    color_theme: "#00f0ff" # Optional: Cyan for PC
+
+  - name: "PlayStation Command"
+    platform: "PS5 / PS4"
+    logo: "ps-logo.png"
+    commander: "LT. RAX"
+    members: "200+ Active"
+    status: "OPERATIONAL"
+    description: "The backbone of Super Earth's console forces. Experts in heavy armor, defensive holds, and extraction tactics."
+    discord_link: "https://discord.gg/your-ps-link"
+    color_theme: "#0055ff" # Optional: Blue for PS
+
+  - name: "Xbox Battalion"
+    platform: "SERIES X / ONE"
+    logo: "xbox-logo.png"
+    commander: "SGT. KORA"
+    members: "120+ Active"
+    status: "OPERATIONAL"
+    description: "Rising defenders of democracy on Xbox. Known for aggressive push strategies, camaraderie, and sheer firepower."
+    discord_link: "https://discord.gg/your-xbox-link"
+    color_theme: "#00ff00" # Optional: Green for Xbox
+
 # --- SQUAD LEADERS ---
 
 leaders:

data/_layouts/default.html

@@ -29,10 +29,11 @@
 
             <nav class="main-nav">
                 <a href="{{ '/' | relative_url }}" class="nav-link {% if page.url == '/' %}active{% endif %}">HOME</a>
-                <a href="{{ '/about/' | relative_url }}" class="nav-link {% if page.url == '/about/' %}active{% endif %}">INTEL</a>
-                <a href="{{ '/join/' | relative_url }}" class="nav-link {% if page.url == '/join/' %}active{% endif %}">ENLIST</a>
-                <a href="{{ '/contact/' | relative_url }}" class="nav-link {% if page.url == '/contact/' %}active{% endif %}">COMMS</a>
-                <a href="{{ '/watch/' | relative_url }}" class="nav-link {% if page.url == '/watch/' %}active{% endif %}">LIVE FEED<span class="live-dot"id="status-dot"></span>
+                <a href="{{ '/about/' | relative_url }}" class="nav-link {% if page.url == '/about/' %}active{% endif %}" onclick="if(typeof SFX!=='undefined')SFX.playClick()">INTEL</a>
+                <a href="{{ '/join/' | relative_url }}" class="nav-link {% if page.url == '/join/' %}active{% endif %}" onclick="if(typeof SFX!=='undefined')SFX.playClick()">ENLIST</a>
+                <a href="{{ '/contact/' | relative_url }}" class="nav-link {% if page.url == '/contact/' %}active{% endif %}" onclick="if(typeof SFX!=='undefined')SFX.playClick()">COMMS</a>
+                <a href="{{ '/hub/' | relative_url }}" class="nav-link {% if page.url == '/hub/' %}active{% endif %}" onclick="if(typeof SFX!=='undefined')SFX.playClick()">HUBS</a>
+                <a href="{{ '/watch/' | relative_url }}" class="nav-link {% if page.url == '/watch/' %}active{% endif %}" onclick="if(typeof SFX!=='undefined')SFX.playClick()">LIVE FEED<span class="live-dot"id="status-dot"></span>
                 </a>
 
             </nav>
@@ -57,5 +58,8 @@
 
     <!-- Leader Profiles Script -->
     <script src="{{ '/assets/js/profile-modal.js' | relative_url }}"></script>
+
+    <!-- Sound Effects Generator -->
+    <script src="{{ '/assets/js/sfx.js' | relative_url }}"></script>
 </body>
-</html>
+</html>

data/_sass/_base.scss

@@ -1,88 +1,106 @@
-// _sass/_base.scss
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background-color: $hd-blue-deep;
-  color: $hd-white;
-  font-family: $font-mono;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-  overflow-x: hidden;
-
-  // SPACE BACKGROUND
-  // Using a deep space nebula image
-  background-size: cover;
-  background-position: center;
-  background-attachment: fixed; // Parallax effect
-
-  // Subtle animated stars could be added later, but this is a great start
-}
-
-// Optional: Add a subtle scanline overlay for that "screen" feel
-body::after {
-  content: "";
-  position: fixed;
-  top: 0; left: 0; width: 100%; height: 100%;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0.1) 1px,
-    transparent 1px,
-    transparent 2px
-  );
-  pointer-events: none;
-  z-index: 9999;
-}
-
-// =========================================
-// PARTICLE SWIRL BACKGROUND
-// =========================================
-
-#particle-swirl {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none; // Allows clicking through the particles
-  z-index: 0; // Behind the terminal card (which is z-index 10+)
-  overflow: hidden;
-  perspective: 1000px;
-  opacity: 0.6; // Adjust transparency so it doesn't distract from text
-}
-
-.wrap {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  transform-style: preserve-3d;
-  animation: rotate-swirl 14s infinite linear;
-}
-
-@keyframes rotate-swirl {
-  100% {
-    transform: rotateY(360deg) rotateX(360deg);
-  }
-}
-
-.c {
-  position: absolute;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  opacity: 0;
-}
-
-.c {
-  will-change: transform, opacity;
-}
+// _sass/_base.scss
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: $hd-blue-deep;
+  color: $hd-white;
+  font-family: $font-mono;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  overflow-x: hidden;
+
+  // SPACE BACKGROUND
+  // Using a deep space nebula image
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed; // Parallax effect
+
+  // Subtle animated stars could be added later, but this is a great start
+}
+
+// Optional: Add a subtle scanline overlay for that "screen" feel
+body::after {
+  content: "";
+  position: fixed;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0.1) 1px,
+    transparent 1px,
+    transparent 2px
+  );
+  pointer-events: none;
+  z-index: 9999;
+}
+
+// =========================================
+// PARTICLE SWIRL BACKGROUND
+// =========================================
+
+#particle-swirl {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; // Allows clicking through the particles
+  z-index: 0; // Behind the terminal card (which is z-index 10+)
+  overflow: hidden;
+  perspective: 1000px;
+  opacity: 0.6; // Adjust transparency so it doesn't distract from text
+}
+
+.wrap {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform-style: preserve-3d;
+  animation: rotate-swirl 14s infinite linear;
+}
+
+@keyframes rotate-swirl {
+  100% {
+    transform: rotateY(360deg) rotateX(360deg);
+  }
+}
+
+.c {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  opacity: 0;
+}
+
+.c {
+  will-change: transform, opacity;
+}
+
+body {
+  font-size: 16px; // Base size for readability
+  line-height: 1.6;
+  
+  @media (max-width: 768px) {
+    font-size: 15px; // Slightly smaller but still readable
+  }
+}
+
+// Ensure code/mono text doesn't get too tiny
+code, pre, .font-mono {
+  font-size: 0.9em;
+  
+  @media (max-width: 768px) {
+    font-size: 1em; // Scale up slightly on mobile
+  }
+}

data/_sass/_layout.scss

@@ -1,205 +1,308 @@
-// _sass/_layout.scss
-
-.terminal-wrapper {
-  width: 100%;
-  max-width: 1200px;
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  position: relative;
-  z-index: 10;
-}
-
-.terminal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 30px;
-
-  // Glass Header
-  background: rgba(2, 4, 10, 0.8);
-  backdrop-filter: blur(10px);
-  border-bottom: 2px solid $hd-gold;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-
-  // Angled corners for sci-fi look
-  clip-path: polygon(0 0, 100% 0, 100% 75%, 98% 100%, 2% 100%, 0 75%);
-
-  h1 {
-    font-family: $font-head;
-    font-size: 3.5rem;
-    color: $hd-white;
-    text-transform: uppercase;
-    margin: 0;
-    text-shadow: 0 0 10px rgba($hd-gold, 0.6);
-    letter-spacing: 2px;
-
-    span {
-        color: $hd-gold;
-    }
-  }
-
-  .subtitle {
-      color: $hd-cyan;
-      font-size: 0.9rem;
-      letter-spacing: 3px;
-      text-shadow: 0 0 5px $hd-cyan;
-      display: block;
-      margin-top: 5px;
-  }
-}
-
-.main-nav {
-  display: flex;
-  gap: 25px;
-}
-
-.nav-link {
-  text-decoration: none;
-  color: $hd-white;
-  font-family: $font-head;
-  font-size: 1.4rem;
-  letter-spacing: 2px;
-  transition: all 0.3s ease;
-  text-transform: uppercase;
-  position: relative;
-
-  &:visited { color: $hd-white; }
-
-  &:hover {
-    color: $hd-cyan;
-    text-shadow: 0 0 12px $hd-cyan;
-    transform: translateY(-2px);
-  }
-
-  &.active {
-    color: $hd-gold;
-    text-shadow: 0 0 15px $hd-gold;
-
-    // Little underline indicator
-    &::after {
-        content: '';
-        position: absolute;
-        bottom: -5px;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background: $hd-gold;
-        box-shadow: 0 0 10px $hd-gold;
-    }
-  }
-}
-
-// Existing Red Pulse
-.live-dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: $hd-red; // Default to Red (Offline)
-  border-radius: 50%;
-  margin-left: 6px;
-  box-shadow: 0 0 5px $hd-red;
-  animation: pulse-red 1.5s infinite;
-  transition: all 0.5s ease; // Smooth color change
-  flex-shrink: 0; // CRITICAL: Prevents the dot from squishing
-  margin: 0;      // Remove default margins, use gap in parent instead
-}
-
-// New Green Pulse (Added via JS when live)
-.live-dot.is-live {
-  background-color: #0f0; // Bright Green
-  box-shadow: 0 0 8px #0f0;
-  animation: pulse-green 1.5s infinite;
-}
-
-@keyframes pulse-red {
-  0% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(1.2); }
-  100% { opacity: 1; transform: scale(1); }
-}
-
-@keyframes pulse-green {
-  0% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px #0f0; }
-  50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 15px #0f0; }
-  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px #0f0; }
-}
-
-// THE MAIN HOLOGRAPHIC CARD
-
-// _sass/_layout.scss
-
-.terminal-card {
-  display: grid;
-  // DEFAULT: Sidebar (280px) + Content (Rest)
-  // This applies to the Home Page automatically because it has an <aside>
-  grid-template-columns: 280px 1fr;
-  gap: 25px;
-
-  // Glassmorphism & Borders
-  background: $glass-bg;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid $glass-border;
-  border-top: 1px solid rgba($hd-gold, 0.6);
-  border-left: 1px solid rgba($hd-cyan, 0.3);
-  padding: 30px;
-  border-radius: 4px;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 30px rgba(0, 240, 255, 0.05);
-  position: relative;
-  min-height: 600px;
-
-  // Decorative Corners
-  &::before, &::after {
-      content: '';
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      border: 2px solid $hd-cyan;
-      transition: all 0.3s ease;
-      z-index: 10;
-  }
-  &::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
-  &::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
-
-  &:hover {
-      box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 0 40px rgba(0, 240, 255, 0.1);
-      &::before, &::after {
-          width: 30px;
-          height: 30px;
-          border-color: $hd-gold;
-          box-shadow: 0 0 10px $hd-gold;
-      }
-  }
-
-  // --- EXCEPTION: ENLIST & INTEL PAGES ---
-  // If the direct child is our specific centered containers, force single column
-  &:has(> .enlist-container),
-  &:has(> .intel-container),
-  &:has(> .comms-container),
-  &:has(> .watch-container) {
-    grid-template-columns: 1fr; // Remove sidebar column
-    justify-items: center;      // Center content
-  }
-}
-
-// Force these containers to span full width and center themselves
-.enlist-container, .intel-container, .comms-container, .watch-container {
-  grid-column: 1 / -1; // Span across all columns
-  width: 100%;
-  max-width: 1200px;   // Cap width so it doesn't stretch too far
-  margin: 0 auto;      // Center horizontally
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-// Mobile Responsiveness
-@media (max-width: 900px) {
-  .terminal-card {
-    grid-template-columns: 1fr; // Stack sidebar on top for mobile
-  }
-
-  .enlist-container, .intel-container {
-    max-width: 100%;
-  }
-}
+// _sass/_layout.scss
+
+// =========================================
+// 1. MAIN WRAPPER & HEADER
+// =========================================
+
+.terminal-wrapper {
+  width: 100%;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  position: relative;
+  z-index: 10;
+  margin: 0 auto; // Center the wrapper itself
+}
+
+.terminal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 30px;
+  background: rgba(2, 4, 10, 0.8);
+  backdrop-filter: blur(10px);
+  border-bottom: 2px solid $hd-gold;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+  clip-path: polygon(0 0, 100% 0, 100% 75%, 98% 100%, 2% 100%, 0 75%);
+
+  h1 {
+    font-family: $font-head;
+    font-size: 3.5rem;
+    color: $hd-white;
+    text-transform: uppercase;
+    margin: 0;
+    text-shadow: 0 0 10px rgba($hd-gold, 0.6);
+    letter-spacing: 2px;
+    span { color: $hd-gold; }
+  }
+
+  .subtitle {
+    color: $hd-cyan;
+    font-size: 0.9rem;
+    letter-spacing: 3px;
+    text-shadow: 0 0 5px $hd-cyan;
+    display: block;
+    margin-top: 5px;
+  }
+}
+
+// =========================================
+// 2. NAVIGATION
+// =========================================
+
+.main-nav {
+  display: flex;
+  gap: 25px;
+  align-items: center;
+}
+
+.nav-link {
+  text-decoration: none;
+  color: $hd-white;
+  font-family: $font-head;
+  font-size: 1.4rem;
+  letter-spacing: 2px;
+  transition: all 0.3s ease;
+  text-transform: uppercase;
+  position: relative;
+  white-space: nowrap;
+
+  &:visited { color: $hd-white; }
+
+  &:hover {
+    color: $hd-cyan;
+    text-shadow: 0 0 12px $hd-cyan;
+    transform: translateY(-2px);
+  }
+
+  &.active {
+    color: $hd-gold;
+    text-shadow: 0 0 15px $hd-gold;
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -5px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: $hd-gold;
+        box-shadow: 0 0 10px $hd-gold;
+    }
+  }
+}
+
+// =========================================
+// 3. LIVE DOT ANIMATION
+// =========================================
+
+.live-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: $hd-red;
+  border-radius: 50%;
+  margin-left: 6px;
+  box-shadow: 0 0 5px $hd-red;
+  animation: pulse-red 1.5s infinite;
+  transition: all 0.5s ease;
+  flex-shrink: 0;
+}
+
+.live-dot.is-live {
+  background-color: #0f0;
+  box-shadow: 0 0 8px #0f0;
+  animation: pulse-green 1.5s infinite;
+}
+
+@keyframes pulse-red {
+  0% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes pulse-green {
+  0% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px #0f0; }
+  50% { opacity: 0.6; transform: scale(1.3); box-shadow: 0 0 15px #0f0; }
+  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px #0f0; }
+}
+
+// =========================================
+// 4. MAIN TERMINAL CARD (GRID SYSTEM)
+// =========================================
+
+.terminal-card {
+  display: grid;
+  // DEFAULT: Sidebar (280px) + Content (Rest)
+  grid-template-columns: 280px 1fr;
+  gap: 25px;
+
+  background: $glass-bg;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid $glass-border;
+  border-top: 1px solid rgba($hd-gold, 0.6);
+  border-left: 1px solid rgba($hd-cyan, 0.3);
+  padding: 30px;
+  border-radius: 4px;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 30px rgba(0, 240, 255, 0.05);
+  position: relative;
+  min-height: 600px;
+
+  // Decorative Corners
+  &::before, &::after {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border: 2px solid $hd-cyan;
+      transition: all 0.3s ease;
+      z-index: 10;
+  }
+  &::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
+  &::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
+
+  &:hover {
+      box-shadow: 0 20px 60px rgba(0,0,0,0.7), inset 0 0 40px rgba(0, 240, 255, 0.1);
+      &::before, &::after {
+          width: 30px;
+          height: 30px;
+          border-color: $hd-gold;
+          box-shadow: 0 0 10px $hd-gold;
+      }
+  }
+
+  // EXCEPTION: Full Width for Specific Pages
+  &:has(> .enlist-container),
+  &:has(> .intel-container),
+  &:has(> .comms-container),
+  &:has(> .watch-container) {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+}
+
+// Force specific containers to span full width
+.enlist-container, 
+.intel-container, 
+.comms-container, 
+.watch-container {
+  grid-column: 1 / -1;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+// =========================================
+// 5. MOBILE RESPONSIVENESS (CONSOLIDATED)
+// =========================================
+
+@media (max-width: 900px) {
+  // Switch Header to Column on very small screens
+  .terminal-header {
+    flex-direction: column;
+    text-align: center;
+    gap: 15px;
+    clip-path: none; // Remove angled cut on mobile for better space
+    border-radius: 0 0 10px 10px;
+  }
+
+  .logo-area h1 {
+    font-size: 2.5rem;
+  }
+
+  .main-nav {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 15px;
+  }
+
+  .nav-link {
+    font-size: 1.1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  // 1. FORCE SINGLE COLUMN GRID FOR HOME PAGE
+  .terminal-card {
+    display: grid !important; // Keep as Grid, just change columns
+    grid-template-columns: 1fr !important; // Stack sidebar on top of content
+    gap: 20px;
+    padding: 15px;
+  }
+
+  // 2. SIDEBAR FULL WIDTH
+  .sidebar {
+    width: 100%;
+    margin-bottom: 25px;
+    // Optional: Add a bottom border to separate from content on mobile
+    border-bottom: 1px solid rgba($hd-cyan, 0.3);
+    padding-bottom: 20px;
+  }
+
+  // 3. CONTENT AREA FULL WIDTH
+  .content-area {
+    width: 100%;
+  }
+
+  // 4. FIX MARQUEE
+  .alert-marquee {
+    width: 100%;
+    overflow: hidden;
+  }
+
+  // 5. FIX LEADER CARDS
+  .command-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .leader-card {
+    width: 100%;
+    display: flex;
+    flex-direction: column; // Stack image above text
+    align-items: center;
+    text-align: center;
+  }
+
+  .octagon-mask {
+    width: 100px;
+    height: 100px;
+    margin: 0 auto 15px auto;
+  }
+
+  // 6. FIX MODAL
+  .modal-terminal {
+    width: 95% !important;
+    max-height: 90vh !important;
+    padding: 15px !important;
+    clip-path: none; // Remove cut corner on mobile
+  }
+
+  .modal-stats-grid {
+    grid-template-columns: 1fr !important; // Stack stats
+  }
+  
+  .modal-image-top {
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 15px auto;
+  }
+
+  // 7. PREVENT HORIZONTAL SCROLL
+  body, html {
+    overflow-x: hidden;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block; // Removes tiny gap below images
+  }
+}

data/assets/js/profile-modal.js

@@ -73,6 +73,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     modal.style.opacity = '1';
     modal.querySelector('.modal-terminal').style.transform = 'scale(1)';
+    if (typeof SFX !== 'undefined') SFX.playOpen();
 
     // Prevent background scrolling
     document.body.style.overflow = 'hidden';
@@ -87,6 +88,8 @@ document.addEventListener('DOMContentLoaded', () => {
       // Fade out
       modal.style.opacity = '0';
       modal.querySelector('.modal-terminal').style.transform = 'scale(0.9)';
+      if (typeof SFX !== 'undefined') SFX.playClose();
+
 
       // Wait for transition to finish before hiding display
       setTimeout(() => {

data/assets/js/sfx.js

@@ -0,0 +1,77 @@
+// assets/js/sfx.js
+
+const SFX = {
+  ctx: null,
+
+  // Initialize Audio Context (must be triggered by user interaction first)
+  init() {
+    if (!this.ctx) {
+      this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    if (this.ctx.state === 'suspended') {
+      this.ctx.resume();
+    }
+  },
+
+  // 1. Modal Open Sound (Soft Sci-Fi Hum/Power Up)
+  playOpen() {
+    this.init();
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+    
+    osc.type = 'sine';
+    osc.frequency.setValueAtTime(200, this.ctx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(600, this.ctx.currentTime + 0.3);
+    
+    gain.gain.setValueAtTime(0.1, this.ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.3);
+    
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+    
+    osc.start();
+    osc.stop(this.ctx.currentTime + 0.3);
+  },
+
+  // 2. Modal Close Sound (Digital Power Down)
+  playClose() {
+    this.init();
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+    
+    osc.type = 'square';
+    osc.frequency.setValueAtTime(400, this.ctx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(100, this.ctx.currentTime + 0.2);
+    
+    gain.gain.setValueAtTime(0.05, this.ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.2);
+    
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+    
+    osc.start();
+    osc.stop(this.ctx.currentTime + 0.2);
+  },
+
+  // 3. Button Click/Hover (Sharp Mechanical Click)
+  playClick() {
+    this.init();
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+    
+    osc.type = 'triangle';
+    osc.frequency.setValueAtTime(800, this.ctx.currentTime);
+    
+    gain.gain.setValueAtTime(0.05, this.ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.05);
+    
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+    
+    osc.start();
+    osc.stop(this.ctx.currentTime + 0.05);
+  }
+};
+
+// Auto-initialize on first click anywhere on the page
+document.addEventListener('click', () => SFX.init(), { once: true });

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: helldivers-theme
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.3.0
 platform: ruby
 authors:
 - DAR
@@ -89,6 +89,7 @@ files:
 - assets/js/main.js
 - assets/js/particles.js
 - assets/js/profile-modal.js
+- assets/js/sfx.js
 - assets/main.scss
 - contact.md
 - index.html