yellow cards are back

Author: tstromberg

src/css/main.css

@@ -410,6 +410,18 @@ footer::before {
     border-left: 6px solid var(--color-primary);
 }
 
+/* Yellow card variant - HIG compliant with proper contrast */
+.groove-card--yellow {
+    background: var(--color-primary);
+    color: var(--color-secondary);
+    border: 3px solid var(--color-secondary);
+    box-shadow: 6px 6px 0 var(--color-secondary);
+}
+
+.groove-card--yellow:hover {
+    box-shadow: 8px 8px 0 var(--color-secondary);
+}
+
 /* Hub page specific styles */
 .hub-hero-title {
     font-size: 2.25rem;
@@ -719,6 +731,17 @@ footer::before {
     letter-spacing: 0;
 }
 
+/* Yellow product card variant */
+.product--yellow {
+    background: var(--color-primary);
+    color: var(--color-secondary);
+    box-shadow: 4px 4px 0 var(--color-secondary);
+}
+
+.product--yellow:hover {
+    box-shadow: 6px 6px 0 var(--color-secondary);
+}
+
 /* CTA Button */
 .cta {
     font-family: var(--font-display);

src/index.njk

@@ -64,7 +64,7 @@ description: 15X faster pull requests. From 4 days to 4 hours. Fast, smooth, con
 <p class="text-bold text-uppercase mb-2">Two ways to stop wasting time</p>
 
 <div class="products">
-    <article class="product">
+    <article class="product product--yellow">
         <h3>Ready to Review</h3>
         <p><strong>For individual developers</strong></p>
         <p>Personal dashboard for GitHub pull requests. Never miss a review.</p>
@@ -94,13 +94,13 @@ description: 15X faster pull requests. From 4 days to 4 hours. Fast, smooth, con
 
 <h2>THE SOLUTION</h2>
 
-<div class="groove-card">
+<div class="groove-card groove-card--yellow">
     <p class="text-large text-bold mb-0">TURN-BASED TRACKING</p>
     <p class="mt-2">✓ Clear responsibility handoffs<br>
     ✓ Automated bottleneck detection<br>
     ✓ Context-aware notifications<br>
     ✓ Conflict prevention alerts</p>
-    <p class="text-small text-muted mt-2">LIKE JAMES BROWN DESIGNED A PR SYSTEM</p>
+    <p class="text-small mt-2">LIKE JAMES BROWN DESIGNED A PR SYSTEM</p>
 </div>
 
 <ul>

src/products/hub.njk

@@ -12,13 +12,13 @@ description: 15X faster pull requests. Reduce PR latency from 4 days to 4 hours.
     <span class="hub-hero-highlight">4 days → 4 hours. Measurable in week one.</span></p>
 </section>
 
-<div class="math-card">
+<div class="groove-card groove-card--yellow">
     <h3>The Math</h3>
     <p>
         <strong>20 engineers × $200K salary = $4M/year</strong><br>
         23% of their time waiting on reviews = $920K wasted<br>
-        <span class="math-highlight">grooveHUB costs $8,192.00. You save $920,000.</span><br>
-        <span class="math-subtext">That's 112× ROI. In year one.</span>
+        <span class="text-bold text-large">grooveHUB costs $8,192.00. You save $920,000.</span><br>
+        <span>That's 112× ROI. In year one.</span>
     </p>
 </div>
 
@@ -162,12 +162,12 @@ description: 15X faster pull requests. Reduce PR latency from 4 days to 4 hours.
 
 <p class="text-center text-muted">All billing handled via GitHub. Custom contracts available for Funk Master tier.</p>
 
-<div class="promise-card">
+<div class="groove-card groove-card--yellow text-center">
     <h3>Our Promise</h3>
     <p>
         We'll reduce your pull request latency by 15X.<br>
         From 4 days to 4 hours. In 7 days.<br>
-        <strong class="promise-highlight">If we don't deliver, you pay nothing.</strong>
+        <strong class="text-large">If we don't deliver, you pay nothing.</strong>
     </p>
 </div>
 

src/products/r2r.njk

@@ -41,7 +41,7 @@ description: Your personal PR dashboard. Never miss a review again.
 <h2>USE CASES</h2>
 
 <div class="products">
-    <article class="product">
+    <article class="product product--yellow">
         <h3>For Burned-Out OSS Maintainers</h3>
         <ul>
             <li><strong>Stop losing contributors:</strong> First-time PRs get buried? Not anymore.</li>