diff --git a/src/psyc/cockpit/static/cockpit.css b/src/psyc/cockpit/static/cockpit.css index ffdfff7..9bf8bc7 100644 --- a/src/psyc/cockpit/static/cockpit.css +++ b/src/psyc/cockpit/static/cockpit.css @@ -927,3 +927,100 @@ body.wide .net-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr .news-item.sev-low { border-left-color: var(--muted); } .news-item .news-icon { background: transparent; border: none; padding: 0; } .news-item .news-icon .case-glyph-svg { display: block; border: 1px solid var(--border); border-radius: 7px; } + +/* ── featured section header (banner above the hero) ───────── */ +.featured-section { margin: 0 0 22px; } +.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; + border-radius: 14px 14px 0 0; + position: relative; +} +.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; + text-shadow: 0 0 12px var(--accent-glow); +} +.featured-section-head.sev-critical .featured-bracket { color: var(--red); text-shadow: 0 0 12px rgba(248,113,113,0.5); } +.featured-section-head.sev-high .featured-bracket { color: var(--amber); text-shadow: 0 0 12px rgba(251,191,36,0.5); } +.featured-section-label { + font-family: var(--font-display); font-size: 13px; font-weight: 600; + letter-spacing: 0.22em; text-transform: uppercase; color: #eaf6ff; +} +.featured-section-pulse { + display: inline-block; width: 7px; height: 7px; border-radius: 50%; + background: var(--accent); box-shadow: 0 0 10px var(--accent); + animation: featured-pulse 1.8s ease-in-out infinite; +} +.featured-section-head.sev-critical .featured-section-pulse { background: var(--red); box-shadow: 0 0 10px var(--red); } +.featured-section-head.sev-high .featured-section-pulse { background: var(--amber); box-shadow: 0 0 10px var(--amber); } +@keyframes featured-pulse { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } +.featured-section-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; } +.featured-section-meta .muted { color: var(--muted); font-family: ui-monospace, Menlo, monospace; } +.featured { border-radius: 0 0 14px 14px; margin: 0; } +.featured-cta { + display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; + font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; + color: var(--accent); text-transform: uppercase; + opacity: 0.85; transition: gap 0.2s, opacity 0.2s; +} +.featured-link:hover .featured-cta, .featured:hover .featured-cta { opacity: 1; gap: 12px; } +.featured-arrow { transition: transform 0.25s ease; } +.featured:hover .featured-arrow { transform: translateX(4px); } + +/* ── news-item: clickable card with severity-tinted hover ─── */ +.news-item { + position: relative; + display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; + padding: 12px 14px; padding-left: 14px; + margin: 6px 0; + background: rgba(28,34,48,0.0); + border: 1px solid transparent; + border-left: 3px solid transparent; + border-radius: 8px; + transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease; +} +.news-item.is-link { cursor: pointer; } +/* full-card click target (sits under the content, lets text + chip be selectable on real 's) */ +.news-cardlink { + position: absolute; inset: 0; border-radius: inherit; + z-index: 1; text-indent: -9999px; overflow: hidden; +} +.news-item > .news-icon, .news-item > .news-body, .news-item > .news-arrow { position: relative; z-index: 2; pointer-events: none; } +.news-item .news-meta a { pointer-events: auto; } /* explicit links stay clickable */ + +.news-arrow { + align-self: center; font-family: var(--font-display); + color: var(--accent); font-size: 18px; + opacity: 0; transform: translateX(-6px); + transition: opacity 0.18s ease, transform 0.18s ease; +} +.news-item.is-link:hover .news-arrow { opacity: 1; transform: translateX(0); } + +/* severity tints on hover */ +.news-item:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); } +.news-item.sev-critical:hover { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.55); box-shadow: 0 6px 22px rgba(248,113,113,0.18); } +.news-item.sev-high:hover { background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.55); box-shadow: 0 6px 22px rgba(251,191,36,0.16); } +.news-item.sev-medium:hover { background: rgba(253,230,138,0.05); border-color: rgba(253,230,138,0.42); } +.news-item.sev-low:hover { background: rgba(125,133,151,0.06); border-color: var(--border); } +.news-item.news-kind-enforced:hover { background: rgba(30,200,255,0.06); border-color: var(--accent); box-shadow: 0 6px 22px var(--accent-glow); } +.news-item.news-kind-submitted:hover { background: rgba(74,222,128,0.05); border-color: rgba(74,222,128,0.4); } +.news-item.news-kind-rejected:hover, .news-item.news-kind-failed:hover { background: rgba(248,113,113,0.05); border-color: rgba(248,113,113,0.4); } +/* the glyph svg inside the icon — subtle highlight on hover */ +.news-item:hover .case-glyph-svg { filter: drop-shadow(0 0 8px var(--accent-glow)); transform: scale(1.04); transition: filter 0.18s, transform 0.18s; } +.news-icon-glyph { + display: grid; place-items: center; width: 36px; height: 36px; + background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; + font-size: 16px; color: var(--muted); +} + +.news-case-id { color: var(--muted); font-family: ui-monospace, Menlo, monospace; } + +@media (prefers-reduced-motion: reduce) { + .news-item, .news-arrow, .featured-arrow, .featured-cta, .case-glyph-svg, .featured-section-pulse { transition: none; animation: none; } +} diff --git a/src/psyc/cockpit/templates/home.html b/src/psyc/cockpit/templates/home.html index 381c1f4..d103269 100644 --- a/src/psyc/cockpit/templates/home.html +++ b/src/psyc/cockpit/templates/home.html @@ -38,18 +38,24 @@ {% if featured %} -
- +
+
+
+ ⌖ + Featured Threat + +
+
+ {{ featured.classification.severity.value if featured.classification.severity else '—' }} + {{ featured.classification.tlp.value }} + {{ featured.source_metadata.feed or 'unknown' }} · {{ featured.ingested_at.strftime('%Y-%m-%d %H:%M') }} +
+
+
{{ featured_hero|safe }}
-
⌖ FEATURED THREAT
-

{{ featured.summary }}

-
- {{ featured.classification.severity.value if featured.classification.severity else '—' }} - {{ featured.classification.tlp.value }} - from {{ featured.source_metadata.feed or 'unknown' }} - ingested {{ featured.ingested_at.strftime('%Y-%m-%d %H:%M') }} -
+

{{ featured.summary }}

+
Open case →
@@ -71,12 +77,14 @@

{{ b.label }} {{ b.items|length }}

    {% for i in b.items %} -
  1. + {% set has_link = i.case_id %} +
  2. + {% if has_link %}{% endif %}
    {% if i.kind == 'case' and i.case_id and case_glyphs.get(i.case_id) %} {{ case_glyphs[i.case_id]|safe }} {% else %} - {{ i.icon }} + {{ i.icon }} {% endif %}
    @@ -87,9 +95,10 @@
    {{ i.body }}
    - {% if i.case_id %} · {{ i.case_id }}{% endif %} + {% if i.case_id %} · {{ i.case_id }}{% endif %}
    + {% if has_link %}{% endif %}
    3. {% endfor %}