From 5cdcb2a31941f192d7867bf4e4aad040a417d707 Mon Sep 17 00:00:00 2001
From: josh <josh@thewrightserver.net>
Date: Sun, 19 Apr 2026 13:48:06 -0400
Subject: [PATCH] style: soften playoff UI edges and harmonize banner

Swap border-image for the gradient-border trick on the banner and playoff
cards so rounded corners survive. Retone banner bg to a soft radial over
charcoal, replace the hard gold underline with a fading divider, normalize
radii (badges 6px, banner link 10px), add card depth + hover lift, and
rebalance gold usage toward the muted cup-gold-1 tone.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/styles.css | 71 +++++++++++++++++++++++++++++--------------
 1 file changed, 48 insertions(+), 23 deletions(-)

diff --git a/app/static/styles.css b/app/static/styles.css
index 346d55a..75dfc14 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -24,7 +24,8 @@
     --ice-2: #162844;
     --ice-accent: #4fc3f7;
     --gold-gradient: linear-gradient(90deg, var(--cup-gold-dim), var(--cup-gold-2) 50%, var(--cup-gold-1));
-    --banner-bg: linear-gradient(135deg, #0a1628 0%, #162844 55%, #1a1a2e 100%);
+    --banner-bg: radial-gradient(ellipse at top, rgba(22, 40, 68, 0.55), transparent 70%), #141418;
+    --radius-sm: 6px;
 }
 
 *, *::before, *::after {
@@ -98,6 +99,9 @@ main {
     width: var(--card-w);
     flex-shrink: 0;
     border-top-width: 3px;
+    box-shadow:
+        0 1px 2px rgba(0, 0, 0, 0.4),
+        0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
 .game-box-live {
@@ -129,7 +133,7 @@ main {
     font-size: 0.65rem;
     font-weight: 700;
     padding: 0.2rem 0.45rem;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     background: var(--badge-bg);
@@ -373,13 +377,29 @@ main {
     align-items: center;
     justify-content: center;
     gap: 1rem;
-    padding: 0.875rem 1.25rem;
+    padding: 1rem 1.25rem 1.125rem;
     background: var(--banner-bg);
-    border-bottom: 2px solid transparent;
-    border-image: var(--gold-gradient) 1;
     position: relative;
 }
 
+.playoff-banner::after {
+    content: "";
+    position: absolute;
+    left: 12%;
+    right: 12%;
+    bottom: 0;
+    height: 1px;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(212, 175, 55, 0.45) 30%,
+        rgba(245, 215, 110, 0.6) 50%,
+        rgba(212, 175, 55, 0.45) 70%,
+        transparent
+    );
+    pointer-events: none;
+}
+
 .playoff-banner.hidden {
     display: none;
 }
@@ -391,7 +411,7 @@ main {
     min-width: 0;
     color: inherit;
     text-decoration: none;
-    border-radius: 8px;
+    border-radius: 10px;
     padding: 0.25rem 0.5rem;
     transition: background 120ms ease;
 }
@@ -477,6 +497,11 @@ main {
 
 /* ── Playoff Game Cards ─────────────────────────── */
 
+.playoff-mode .section-heading {
+    color: var(--cup-gold-1);
+    opacity: 0.85;
+}
+
 .playoff-mode .section-heading-gold {
     background: var(--gold-gradient);
     -webkit-background-clip: text;
@@ -485,18 +510,15 @@ main {
     -webkit-text-fill-color: transparent;
     letter-spacing: 0.18em;
     font-weight: 800;
+    opacity: 1;
 }
 
 .game-box-playoff {
+    background:
+        linear-gradient(var(--card), var(--card)) padding-box,
+        var(--gold-gradient) border-box;
+    border: 1px solid transparent;
     border-top-width: 3px;
-    border-image: var(--gold-gradient) 1;
-    border-image-slice: 1;
-}
-
-/* Gold top stripe wins over the green-accent live stripe on playoff games */
-.game-box-playoff.game-box-live,
-.game-box-playoff.game-box-intermission {
-    border-image: var(--gold-gradient) 1;
 }
 
 .game-box-pinned {
@@ -540,9 +562,9 @@ main {
 
 /* Playoff stake badges */
 .badge-round {
-    background: rgba(212, 175, 55, 0.1);
-    color: var(--cup-gold-2);
-    border: 1px solid rgba(212, 175, 55, 0.35);
+    background: rgba(212, 175, 55, 0.08);
+    color: var(--cup-gold-1);
+    border: 1px solid rgba(212, 175, 55, 0.28);
 }
 
 .badge-conf {
@@ -638,11 +660,14 @@ main {
 }
 .series-link .game-box {
     cursor: pointer;
-    transition: transform 0.12s ease, border-color 0.12s ease;
+    transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
 .series-link:hover .game-box {
-    border-color: var(--cup-gold-1);
-    transform: translateY(-1px);
+    transform: translateY(-2px);
+    box-shadow:
+        0 2px 4px rgba(0, 0, 0, 0.45),
+        0 10px 24px rgba(0, 0, 0, 0.35),
+        0 0 0 1px rgba(212, 175, 55, 0.35);
 }
 .series-link:focus-visible .game-box {
     outline: 2px solid var(--cup-gold-2);
@@ -989,7 +1014,7 @@ main {
 
 .bracket-col-cup .bracket-matchup {
     border-color: var(--cup-gold-dim);
-    background: linear-gradient(135deg, #162844 0%, #1a1a2e 100%);
+    background: var(--banner-bg);
     padding: 0.7rem 0.6rem;
 }
 
@@ -1066,7 +1091,7 @@ main {
     padding: 0.8rem 1rem;
     cursor: pointer;
     font-weight: 600;
-    color: var(--cup-gold-2);
+    color: var(--cup-gold-1);
     letter-spacing: 0.03em;
     list-style: none;
     display: flex;
@@ -1115,7 +1140,7 @@ main {
 .banner-bracket-link {
     background: transparent;
     border: 1px solid var(--cup-gold-dim);
-    color: var(--cup-gold-2);
+    color: var(--cup-gold-1);
     padding: 0.35rem 0.7rem;
     border-radius: 999px;
     font-size: 0.78rem;