From d908c2da8a13bc774b6a310649e25b9b667fb66b Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 19 Sep 2025 13:08:31 -0500
Subject: [PATCH] Try decorating expanded columns, bold column titles

---
 app/assets/stylesheets/card-columns.css       | 74 +++++++++++++++++--
 .../cards/index/engagement/_doing.html.erb    |  3 +-
 2 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 58114464a..151762490 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -21,7 +21,7 @@
   }
 
   .card-columns {
-    --collapsed: 40px; 
+    --collapsed: 40px;
     --expanded-min: 450px;
 
     display: flex;
@@ -84,7 +84,7 @@
       flex: 0 0 var(--collapsed);
       inline-size: var(--collapsed);
       min-inline-size: 0;
-      
+
       .blank-slate,
       .card {
         display: none;
@@ -138,7 +138,8 @@
       .cards:not(.is-collapsed) & {
         --btn-padding: 0;
 
-        margin-block-start: calc(var(--collapsed) / 5);
+        font-weight: 600;
+        margin-block-start: 0;
       }
     }
 
@@ -171,7 +172,7 @@
         display: none;
       }
     }
-    
+
     .progress-1 { block-size: calc(var(--max-height) * 0.05); }
     .progress-2 { block-size: calc(var(--max-height) * 0.10); }
     .progress-3 { block-size: calc(var(--max-height) * 0.15); }
@@ -472,7 +473,7 @@
     .card {
       --card-color: var(--color-card-complete) !important;
     }
-  
+
     @media (min-width: 640px) {
       padding-inline: var(--cards-gap);
     }
@@ -482,8 +483,67 @@
   /* ------------------------------------------------------------------------ */
 
   .cards--doing {
-    margin-block: var(--cards-gap);
-  
+    --pattern-color: color-mix(in srgb, var(--card-color) 50%, var(--color-canvas));
+
+    &:not(.is-collapsed) {
+      background-color: var(--color-canvas);
+      background-image: linear-gradient(90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--pattern-color) 25%, transparent) 33%,
+        color-mix(in srgb, var(--pattern-color) 25%, transparent) 66%,
+        transparent 100%);
+      margin-block: var(--cards-gap);
+
+      @supports(mask: radial-gradient(black)) {
+        &:before {
+          background: linear-gradient(90deg,
+            color-mix(in oklch, var(--pattern-color) 0%, transparent) 0%,
+            color-mix(in oklch, var(--pattern-color) 20%, transparent) 25%,
+            color-mix(in oklch, var(--pattern-color) 20%, transparent) 50%,
+            color-mix(in oklch, var(--pattern-color) 0%, transparent) 100%);
+          content: "";
+          inset: 0;
+          mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
+                radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
+          position: absolute;
+          z-index: 0;
+        }
+      }
+
+      .cards__decoration {
+        --size: 4.25em;
+
+        background-color: var(--color-canvas);
+        background-image: radial-gradient(ellipse at bottom,
+          color-mix(in srgb, var(--pattern-color) 30%, transparent) 0%,
+          transparent 70%);
+        block-size: var(--size);
+        inline-size: 100%;
+        inset: calc(var(--size) * -1) 0 auto 0;
+        position: absolute;
+        z-index: -1;
+
+        @supports(mask: radial-gradient(black)) {
+          &:before {
+            background: radial-gradient(ellipse at bottom,
+              color-mix(in srgb, var(--pattern-color) 30%, transparent) 0%,
+              transparent 70%);
+            content: "";
+            inset: 0;
+            mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
+                  radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
+            position: absolute;
+            z-index: 0;
+          }
+        }
+
+        &.cards__decoration--end {
+          inset: auto 0 calc(var(--size) * -1);
+          rotate: 180deg;
+        }
+      }
+    }
+
     @media (min-width: 640px) {
       padding-inline: var(--cards-gap);
     }
diff --git a/app/views/cards/index/engagement/_doing.html.erb b/app/views/cards/index/engagement/_doing.html.erb
index d6aea92fc..35735b301 100644
--- a/app/views/cards/index/engagement/_doing.html.erb
+++ b/app/views/cards/index/engagement/_doing.html.erb
@@ -9,7 +9,7 @@
       page.records
     end
   %>
-
+  <div class="cards__decoration"></div>
   <div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
     <strong class="cards__expander-count"><%= filtered_records.count > 99 ? "99+" : filtered_records.count %></strong>
     <button class="btn btn--plain cards__expander-button txt-uppercase"><%= stage.name if defined?(stage) && stage %></button>
@@ -33,4 +33,5 @@
       </div>
     <% end %>
   <% end %>
+  <div class="cards__decoration cards__decoration--end"></div>
 </section>