From 6dca1317241118563a748375d705069251173222 Mon Sep 17 00:00:00 2001 From: Dorian Date: Sun, 10 May 2026 10:55:21 +0100 Subject: [PATCH] fix: priority badges use proper traffic-light colours The CRITICAL / HIGH / MEDIUM pills on the recommendation cards were all routed through the brand-green palette (the --red, --orange, --green-bright variables all resolve to greens), so urgency wasn't readable at a glance. Switched to literal red / amber / yellow text on matching soft-tinted backgrounds: - CRITICAL #C03030 on rgba(192,48,48,0.10) - HIGH #C16A18 on rgba(220,124,32,0.10) - MEDIUM #A48010 on rgba(212,168,32,0.12) Co-Authored-By: Claude Opus 4.7 (1M context) --- src/styles.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/styles.css b/src/styles.css index 02f9971..1ab24aa 100644 --- a/src/styles.css +++ b/src/styles.css @@ -700,9 +700,12 @@ input[type=range]::-moz-range-thumb { .rec-cat { font-family: var(--font-mono); font-size:14px; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; } .rec-title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text); line-height: 1.2; } .priority-badge { margin-left: auto; padding: 4px 10px; border-radius: 99px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 700; flex-shrink: 0; } -.p-critical { background: rgba(90,154,120,0.10); color: var(--red); border: 1px solid rgba(90,154,120,0.30); } -.p-high { background: rgba(184,152,106,0.12); color: var(--orange); border: 1px solid rgba(184,152,106,0.30); } -.p-medium { background: rgba(90,154,120,0.08); color: var(--green-bright); border: 1px solid rgba(90,154,120,0.20); } +/* Priority badges — proper traffic-light palette so urgency reads at a + glance. Backgrounds are soft tints of the same hue so the pill stays + light and the text colour does the colour-coding. */ +.p-critical { background: rgba(192,48,48,0.10); color: #C03030; border: 1px solid rgba(192,48,48,0.30); } +.p-high { background: rgba(220,124,32,0.10); color: #C16A18; border: 1px solid rgba(220,124,32,0.32); } +.p-medium { background: rgba(212,168,32,0.12); color: #A48010; border: 1px solid rgba(212,168,32,0.35); } .rec-body { padding: 14px 16px; } .rec-items { display: flex; flex-direction: column; gap: 12px; }