diff --git a/app/static/styles.css b/app/static/styles.css index 811d32b..346d55a 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -369,9 +369,9 @@ main { /* ── Playoff Banner ─────────────────────────────── */ .playoff-banner { - display: grid; - grid-template-columns: 1fr auto 1fr; + display: flex; align-items: center; + justify-content: center; gap: 1rem; padding: 0.875rem 1.25rem; background: var(--banner-bg); @@ -385,19 +385,25 @@ main { } .banner-main { - grid-column: 2; display: flex; align-items: center; gap: 1rem; min-width: 0; + color: inherit; + text-decoration: none; + border-radius: 8px; + padding: 0.25rem 0.5rem; + transition: background 120ms ease; } -.banner-actions { - grid-column: 3; - justify-self: end; - display: flex; - align-items: center; - gap: 0.5rem; +.banner-main:hover, +.banner-main:focus-visible { + background: rgba(212, 175, 55, 0.08); +} + +.banner-main:focus-visible { + outline: 2px solid var(--cup-gold-1); + outline-offset: 2px; } .banner-trophy { @@ -465,12 +471,8 @@ main { @media (max-width: 640px) { .playoff-banner { - grid-template-columns: 1fr; - justify-items: center; padding: 0.75rem 1rem; } - .banner-main { grid-column: 1; } - .banner-actions { grid-column: 1; justify-self: center; } } /* ── Playoff Game Cards ─────────────────────────── */ diff --git a/app/templates/index.html b/app/templates/index.html index 3328ccb..8bb54f7 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -17,7 +17,7 @@ NHL Scoreboard