improve output

Author: tstromberg

src/css/main.css

@@ -115,14 +115,19 @@ h1 {
 
 h2 {
     font-size: var(--font-size-2xl);
-    margin: var(--spacing-2xl) 0 var(--spacing-md) 0;
+    margin: var(--spacing-section) 0 var(--spacing-xl) 0;
     text-transform: uppercase;
     letter-spacing: 1.2px;
     border-top: 3px dashed var(--color-secondary);
-    padding-top: var(--spacing-sm);
+    padding-top: var(--spacing-lg);
     position: relative;
 }
 
+/* First h2 after content should have less top margin */
+main > h2:first-of-type {
+    margin-top: var(--spacing-2xl);
+}
+
 /* Musical note decoration */
 h2::after {
     content: "♫";
@@ -361,11 +366,12 @@ footer::before {
     border-bottom-width: var(--border-width-thick);
     border-right-width: var(--border-width-thick);
     padding: var(--spacing-lg);
-    background: var(--color-primary);
+    background: var(--color-white);
     position: relative;
     transition: var(--transition-base);
     transform: rotate(0.3deg);
     margin: var(--spacing-lg) 0;
+    box-shadow: 4px 4px 0 var(--color-primary);
 }
 
 .groove-card:nth-child(even) {
@@ -376,6 +382,7 @@ footer::before {
     transform: translate(-3px, -3px) rotate(0deg) scale(1.02);
     border-bottom-width: var(--border-width-thick);
     border-right-width: var(--border-width-thick);
+    box-shadow: 6px 6px 0 var(--color-primary);
 }
 
 .groove-card h3 {
@@ -386,6 +393,23 @@ footer::before {
     letter-spacing: 0;
 }
 
+/* Hero card variant with proper contrast */
+.groove-card--hero {
+    background: var(--color-secondary);
+    color: var(--color-white);
+    box-shadow: 4px 4px 0 var(--color-primary);
+}
+
+.groove-card--hero:hover {
+    box-shadow: 6px 6px 0 var(--color-primary);
+}
+
+/* Accent card with yellow highlight but good contrast */
+.groove-card--accent {
+    background: var(--color-white);
+    border-left: 6px solid var(--color-primary);
+}
+
 /* Product Cards */
 .products {
     display: grid;
@@ -399,10 +423,11 @@ footer::before {
     border-bottom-width: 5px;
     border-right-width: 5px;
     padding: var(--spacing-lg);
-    background: var(--color-primary);
+    background: var(--color-white);
     position: relative;
     transition: var(--transition-base);
     transform: rotate(0.3deg);
+    box-shadow: 4px 4px 0 var(--color-primary);
 }
 
 .product:nth-child(even) {
@@ -413,6 +438,7 @@ footer::before {
     transform: translate(-3px, -3px) rotate(0deg) scale(1.02);
     border-bottom-width: 6px;
     border-right-width: 6px;
+    box-shadow: 6px 6px 0 var(--color-primary);
 }
 
 .product h3 {
@@ -882,8 +908,9 @@ img {
 
 /* Focus styles */
 :focus-visible {
-    outline: 3px solid var(--color-primary);
+    outline: 3px solid var(--color-secondary);
     outline-offset: 2px;
+    background: var(--color-primary);
 }
 
 /* Skip to content link */

src/products/r2r.njk

@@ -10,7 +10,7 @@ description: Your personal PR dashboard. Never miss a review again.
     <h2 class="hero-subtitle mb-0">STOP MISSING PRS</h2>
     <p class="hero-text-large">SICK OF STALE REVIEWS?<br>
     <span class="text-highlight">WE FUCKING GET IT.</span></p>
-    <div class="groove-card mt-2">
+    <div class="groove-card groove-card--hero mt-2">
         <p class="text-bold text-large mb-1">FREE FOREVER FOR OPEN SOURCE</p>
         <p class="mb-0">Built by maintainers who are tired of this shit. Zero cost for public repos.</p>
     </div>
@@ -22,7 +22,7 @@ description: Your personal PR dashboard. Never miss a review again.
 
 <div class="groove-card">
     <p class="text-large text-bold mb-0">DEVELOPERS WASTE 25% OF THEIR TIME</p>
-    <p class="mt-1">→ Waiting for reviews that never come<br>
+    <p class="mt-1">→ Waiting for reviews (by people who never knew about the review)<br>
     → Context switching between 47 different notifications<br>
     → Missing the ONE PR that actually matters<br>
     → Watching contributors disappear because you didn't see their work</p>