Downloads overhaul

index.html

@@ -199,23 +199,37 @@
           </section>
 
           <section class="tab-content" id="download">
-            <div class="home-layout">
-              <div class="cta-section" style="margin-top: 50px;">
-                <h2>Download Emerald Legacy Launcher</h2>
+            <div class="features-layout">
+              <div class="overview-box" style="text-align: center;">
+                <h2>Get Emerald Legacy</h2>
+                <p>Select your operating system to view available installers and architectures.</p>
               </div>
-              <div class="action-buttons" style="margin-top: 20px;">
-                <a href="https://github.com/Emerald-Legacy-Launcher/Emerald-Legacy-Launcher/releases/latest"
-                  class="main-btn" id="download-win">
-                  <span>Download for Windows</span>
-                </a>
-                <a href="https://github.com/Emerald-Legacy-Launcher/Emerald-Legacy-Launcher/releases/latest"
-                  class="main-btn" id="download-linux">
-                  <span>Download for Linux</span>
-                </a>
-                <a href="https://github.com/Emerald-Legacy-Launcher/Emerald-Legacy-Launcher/releases/latest"
-                  class="main-btn" id="download-macos">
-                  <span>Download for macOS</span>
-                </a>
+
+              <div class="os-grid">
+                <div class="os-card">
+                  <div class="os-icon"><i class="fab fa-windows"></i></div>
+                  <h3>Windows</h3>
+                  <button class="main-btn os-btn" id="download-win">Select Version</button>
+                </div>
+                <div class="os-card">
+                  <div class="os-icon"><i class="fab fa-linux"></i></div>
+                  <h3>Linux</h3>
+                  <button class="main-btn os-btn" id="download-linux">Select Version</button>
+                </div>
+                <div class="os-card">
+                  <div class="os-icon"><i class="fab fa-apple"></i></div>
+                  <h3>macOS</h3>
+                  <button class="main-btn os-btn" id="download-macos">Select Version</button>
+                </div>
+              </div>
+
+              <div class="alpha-disclaimer" style="margin-top: auto; border-color: #7c7c7c;">
+                <div class="item-icon">⚠️</div>
+                <div class="disclaimer-text">
+                  <h3>Windows SmartScreen</h3>
+                  <p>Because the launcher is unsigned, Windows may show a warning. Click <strong>"More info"</strong>
+                    and then <strong>"Run anyway"</strong> to proceed safely.</p>
+                </div>
               </div>
             </div>
           </section>

src/style.css

@@ -784,4 +784,73 @@ body {
 
 .item-icon i.fa-rust {
   color: #f74c00;
+}
+
+.os-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 10px;
+}
+
+.os-card {
+  background: #cecece;
+  border: 4px solid #f0f0f0;
+  border-right-color: #7b7b7b;
+  border-bottom-color: #7b7b7b;
+  padding: 30px 20px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  position: relative;
+  transition: transform 0.1s;
+}
+
+.os-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px solid #1a1a1a;
+  pointer-events: none;
+}
+
+.os-icon {
+  font-size: 4rem;
+  color: #4c4c4c;
+  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
+}
+
+.os-card h3 {
+  font-size: 1.8rem;
+  color: #1a1a1a;
+  text-transform: uppercase;
+}
+
+.os-btn {
+  width: 100% !important;
+  height: 50px !important;
+  font-size: 1.2rem !important;
+}
+
+.os-card:hover .fa-windows {
+  color: #00a4ef;
+}
+
+.os-card:hover .fa-linux {
+  color: #fcc624;
+}
+
+.os-card:hover .fa-apple {
+  color: #fff;
+}
+
+@media (max-width: 800px) {
+  .os-grid {
+    grid-template-columns: 1fr;
+  }
 }