Sneak ahh branding be like

data.yml

@@ -1,5 +1,12 @@
 ---
 limitedTime:
+- name: Blueprint
+  description: Design a hardware project, up to $400 to build it!
+  website: https://blueprint.hackclub.com/?utm_source=ysws
+  slack: https://hackclub.slack.com/archives/C083S537USC
+  slackChannel: "#blueprint"
+  status: active
+  deadline: 2025-12-1
 - name: Shiba Arcade
   description: Make a game with Godot, earn SSS, and get invited to build an arcade in Tokyo (flight stipends available!)
   website: https://shiba.hackclub.com
@@ -16,13 +23,6 @@ limitedTime:
   slackChannel: "#siege"
   status: active
   deadline: 2025-11-30
-- name: Blueprint
-  description: Design a hardware project, get funding to build it!
-  website: https://blueprint.hackclub.com/
-  slack: https://hackclub.slack.com/archives/C083S537USC
-  slackChannel: "#blueprint"
-  status: active
-  deadline: 2025-12-1
 - name: Fanpage
   description: Ship a project that celebrates a fandom, and we ship you something related to it!
   website: https://fanpage.hackclub.com/
@@ -94,12 +94,6 @@ limitedTime:
   slack: https://hackclub.slack.com/archives/C098LMVKPCM
   slackChannel: "#iframe"
   status: active
-- name: Grounded
-  description: Onboard + Bin v2
-  website: https://grounded.hackclub.com
-  slack: https://hackclub.slack.com/archives/C0948RT0C1M
-  slackChannel: "#grounded"
-  status: ended
 - name: BakeBuild
   description: Design a cookie cutter, get it shipped!
   detailedDescription: "You ship : A CAD model of a cookie cutter, we ship : A 3D printed model of your custom cookie cutter & cookies!"

script.js

@@ -296,6 +296,7 @@ function createProgramCard(program) {
     const deadlineClass = getDeadlineClass(program.deadline);
     
     const opensClass = program.opens && new Date() < new Date(program.opens) ? 'opens-soon' : '';
+    const blueprintClass = program.name === 'Blueprint' ? 'blueprint-card' : '';
     
     const encodedProgram = encodeURIComponent(JSON.stringify(program));
     
@@ -309,7 +310,7 @@ function createProgramCard(program) {
         `<div class="program-participants">${formatParticipants(program.name)}</div>` : '';
     
     return `
-        <div class="card program-card ${opensClass}" data-program="${encodedProgram}" data-name="${program.name}">
+        <div class="card program-card ${opensClass} ${blueprintClass}" data-program="${encodedProgram}" data-name="${program.name}">
             <div class="program-header">
                 <h3>${program.name}</h3>
                 <div class="status-container">

styles.css

@@ -2729,4 +2729,44 @@ html {
   .gradient-3 {
     animation: none;
   }
+}
+
+/* Blueprint-specific card styling */
+.program-card.blueprint-card {  
+  --color-bp-lighter: #344b6a;
+  --color-bp-dark: #0e305b;
+  --color-bp-darker: #081c35;
+  --color-bp-light: #dbe4ee;
+  --color-bp-danger: #fe8e86;
+  --color-bp-danger-darker: #bd4c44;
+  --color-bp-warning: #ffc857;
+  --color-bp-success: #a8f0ae;
+  background: var(--color-bp-dark) !important;
+  background-color: var(--color-bp-dark) !important;
+  background-image: 
+    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
+  background-size: 50px 50px !important;
+  background-position: 0 0, 0 0 !important;
+  backdrop-filter: none !important;
+  position: relative;
+  color: white !important;
+}
+
+.program-card.blueprint-card h3,
+.program-card.blueprint-card p,
+.program-card.blueprint-card .program-deadline {
+  color: white !important;
+}
+
+.program-card.blueprint-card a {
+  color: var(--color-bp-light) !important;
+}
+
+.program-card.blueprint-card .program-status {
+  color: var(--color-bp-light) !important;
+}
+
+.program-card.blueprint-card:hover {
+  border-color: white !important;
 }