From 3f1f7cc420b17af27753c854529152b0899ef712 Mon Sep 17 00:00:00 2001 From: m17hr1l Date: Mon, 25 May 2026 19:28:26 +0200 Subject: [PATCH] =?UTF-8?q?stage-31=20polish:=20featured-threat=20banner?= =?UTF-8?q?=20=E2=80=94=20uniform=20tint,=20full=20width?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The banner gradient was a horizontal accent → dark fade, so visually only the left ~30% read as a banner; the right looked unstyled. Swapped for a uniform severity-tinted background (subtle top-to-bottom gradient for depth, but no horizontal falloff). Border + inset shadow on the bottom edge give it a real divider between the banner and the hero beneath. Per-severity tints (CRITICAL red, HIGH amber) get the same treatment — full-width, uniform. Co-Authored-By: Claude Opus 4.7 --- src/psyc/cockpit/static/cockpit.css | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/src/psyc/cockpit/static/cockpit.css b/src/psyc/cockpit/static/cockpit.css index e553333..cd17d17 100644 --- a/src/psyc/cockpit/static/cockpit.css +++ b/src/psyc/cockpit/static/cockpit.css @@ -933,14 +933,27 @@ body.wide .net-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr .featured-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; - padding: 10px 16px; margin-bottom: 1px; - background: linear-gradient(90deg, rgba(30,200,255,0.10), rgba(15,17,21,0.4)); - border: 1px solid var(--border); border-bottom: none; + padding: 12px 18px; margin-bottom: 0; + /* uniform tint across the whole width with a subtle vertical depth */ + background: + linear-gradient(180deg, rgba(30,200,255,0.18), rgba(30,200,255,0.08)), + var(--panel-2); + border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border)); + border-bottom: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); border-radius: 14px 14px 0 0; position: relative; + box-shadow: inset 0 -1px 0 rgba(30,200,255,0.18); +} +.featured-section-head.sev-critical { + background: linear-gradient(180deg, rgba(248,113,113,0.20), rgba(248,113,113,0.09)), var(--panel-2); + border-color: color-mix(in oklab, var(--red) 50%, var(--border)); + box-shadow: inset 0 -1px 0 rgba(248,113,113,0.25); +} +.featured-section-head.sev-high { + background: linear-gradient(180deg, rgba(251,191,36,0.20), rgba(251,191,36,0.09)), var(--panel-2); + border-color: color-mix(in oklab, var(--amber) 50%, var(--border)); + box-shadow: inset 0 -1px 0 rgba(251,191,36,0.25); } -.featured-section-head.sev-critical { background: linear-gradient(90deg, rgba(248,113,113,0.16), rgba(15,17,21,0.4)); border-color: var(--red); } -.featured-section-head.sev-high { background: linear-gradient(90deg, rgba(251,191,36,0.14), rgba(15,17,21,0.4)); border-color: var(--amber); } .featured-section-title { display: inline-flex; align-items: center; gap: 10px; } .featured-bracket { font-family: var(--font-display); color: var(--accent); font-size: 18px;