diff --git a/index_ibm.html b/index_ibm.html index f02a8d2..ca4c9be 100644 --- a/index_ibm.html +++ b/index_ibm.html @@ -498,6 +498,109 @@ h1 { position: relative; z-index: 1; color: #000; } + +/* ── Rule-Based Recommendations ── */ +.dash-recs { + border-bottom: 1px solid var(--border); + padding: 16px 20px; + background: var(--accent-dim); +} +.dash-recs-title { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.625rem; + font-weight: 600; + color: var(--accent); + text-transform: uppercase; + letter-spacing: 0.12em; + font-family: 'IBM Plex Mono', 'SF Mono', monospace; + margin-bottom: 12px; +} +.dash-recs-list { + display: flex; + flex-direction: column; + gap: 8px; +} +.dash-rec-item { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 10px 12px; + border-radius: 6px; + background: var(--surface); + border: 1px solid var(--border); + font-size: 0.75rem; + transition: all 0.3s var(--ease-out); + position: relative; + overflow: hidden; +} +.dash-rec-item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 3px; + opacity: 0.6; +} +.dash-rec-warn::before { background: var(--amber); } +.dash-rec-ok::before { background: var(--accent); } +.dash-rec-danger::before { background: var(--red); } +.dash-rec-info::before { background: var(--blue); } + +.dash-rec-dot { + width: 6px; + height: 6px; + border-radius: 50%; + flex-shrink: 0; + margin-top: 3px; +} +.dash-rec-warn .dash-rec-dot { background: var(--amber); } +.dash-rec-ok .dash-rec-dot { background: var(--accent); } +.dash-rec-danger .dash-rec-dot { background: var(--red); } +.dash-rec-info .dash-rec-dot { background: var(--blue); } + +.dash-rec-text { + flex: 1; + min-width: 0; +} +.dash-rec-label { + font-weight: 600; + color: var(--text); + margin-bottom: 2px; + line-height: 1.3; +} +.dash-rec-desc { + color: var(--text-sec); + font-size: 0.6875rem; + line-height: 1.4; +} +.dash-rec-action { + font-size: 0.6875rem; + color: var(--accent); + font-family: 'IBM Plex Mono', 'SF Mono', monospace; + white-space: nowrap; + flex-shrink: 0; +} +.dash-rec-item:hover { + border-color: var(--accent); + transform: translateX(2px); +} + +/* Responsive */ +@media (max-width: 640px) { + .dash-recs { + padding: 12px 16px; + } + .dash-rec-item { + flex-direction: column; + gap: 6px; + } + .dash-rec-action { + align-self: flex-start; + } +} [data-theme="light"] .dash-mini-desc { color: #000; } @@ -1308,7 +1411,43 @@ h1 {