Update with Zoo's current status

Author: hippogriff101

index.html

@@ -94,16 +94,16 @@ <h1>Hack Club: Web Dev Series</h1>
         </div>
          <div class="arrow">↓</div>
         <div class="flow-indicator">why not take a trip to the zoo and learn SvelteKit, do...</div>
-        <div class="box" style="--box-bg: #103D10; --box-title: #408000; --box-desc: #ffffff;">
-            <img class="box-img" src="./imgs/zoo.png" alt="Box Image" />
+        <div class="box unreleased-box" style="--box-bg: #103D10; --box-title: #408000; --box-desc: white;">
+            <img class="box-img unreleased" src="./imgs/zoo.png" alt="Zoo Logo">
             <div class="box-content">
-                <div class="box-title">The Zoo</div>
+                <div class="box-title">Zoo</div>
                 <div class="box-desc"><strong>Make an animal themed SvelteKit site, get plushies and stickers!</strong></div>
                 <div class="box-desc">Estimated time: 1-2 hours</div>
                 <div class="price-tag">$10+</div>
             </div>
-            <a href="https://zoo.hackclub.com/"><button class="box-btn">check it out!</button></a>
-            <a href=""><button class="box-btn" style="background: gray;">run a workshop!</button></a>
+            <button href="https://zoo.hackclub.com" class="box-btn unreleased-btn" disabled>check it out!</button>
+            <button class="box-btn unreleased-btn" disabled>Ended!</button>
         </div>
          <div class="arrow">↓</div>
         <div class="flow-indicator">if you want to go 3D, do...</div>
@@ -119,7 +119,13 @@ <h1>Hack Club: Web Dev Series</h1>
             <a href="https://forms.hackclub.com/t/nGoLApvXMDus"><button class="box-btn box-btn-white">run a workshop!</button></a>
         </div>
     </div>
-    
+    </div>
+    <div class="fulfillment-section">
+        <div class="unreleased-note">
+            <h2>Zoo: Ended</h2>
+            <p><strong>Zoo</strong> is currently not active. Stay tuned for updates about Zoo V2.</p>
+        </div>
+    </div>
     <div class="fulfillment-section">
         <h2>How do I receive my grant?</h2>
         <div class="payment-methods">

styles.css

@@ -332,3 +332,49 @@ h2 {
     color: #666;
     font-size: 0.95rem;
 }  
+/* Unrealesed Box from cad.hackclub.com */
+
+.box.unreleased-box[style*='enclosure'] {
+    --box-bg: #c10007 !important;
+    --box-title: #ffdf20 !important;
+    --box-desc: white !important;
+}
+/* Greyscale unreleased boxes */
+.unreleased-box {
+    filter: grayscale(1) brightness(1.1) opacity(0.7) !important;
+    pointer-events: none;
+}
+/* Unreleased (greyed out) styles */
+.unreleased,
+.unreleased-btn {
+    filter: grayscale(1) brightness(1.2) opacity(0.6);
+    pointer-events: none;
+}
+.unreleased-btn {
+    background: #bbb !important;
+    color: #fff !important;
+    cursor: not-allowed !important;
+    box-shadow: none !important;
+    border: none !important;
+}
+.unreleased-note {
+    background: #f3f3f3;
+    border-left: 6px solid #888;
+    border-radius: 12px;
+    padding: 1.5rem 2rem;
+    margin: 2rem auto 1.5rem auto;
+    max-width: 700px;
+    text-align: center;
+    color: #444;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+.unreleased-note h2 {
+    color: #ec3750;
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+.unreleased-note p {
+    font-size: 1.1rem;
+    margin: 0;
+}