/* web1-vuln-feed UI — Web1 brand on a Geist-style neutral base. Brand palette from web1.fi: primary pink #ff0083 family (500 #ff5698 / 600 #e64d89 / 700 #cc4479), cream #fdf6ee, Work Sans. Theme: auto via prefers-color-scheme, forced via data-theme on . */ @font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/work-sans-latin.woff2") format("woff2"); } :root { color-scheme: light dark; --bg: #fcf8f2; /* softened web1.fi cream */ --surface: #ffffff; --surface-2: #f7f1e9; --fg: #2a2a2a; --fg-muted: rgba(42, 42, 42, .64); --fg-faint: rgba(42, 42, 42, .44); --border: rgba(42, 42, 42, .1); --border-strong: rgba(42, 42, 42, .2); --accent: #cc4479; /* primary-700 — AA on white */ --accent-strong: #e64d89; /* primary-600 — buttons */ --accent-contrast: #ffffff; --accent-soft: #fff0f5; /* primary-50 */ --brand: #ff0083; --danger: #dc2626; --warn: #b45309; --ok: #16a34a; --shadow: 0 1px 2px rgba(42, 42, 42, .05); --radius: 8px; } /* Theme resolution: data-theme on ("dark"/"light", set from localStorage by theme.js) overrides the browser preference; without it the prefers-color-scheme media query decides. The two dark blocks below must stay identical — CSS cannot share a rule between a media query and a selector. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0c0a0b; --surface: #151113; --surface-2: #1e181b; --fg: #efe9ec; --fg-muted: rgba(239, 233, 236, .62); --fg-faint: rgba(239, 233, 236, .42); --border: rgba(255, 255, 255, .14); --border-strong: rgba(255, 255, 255, .27); --accent: #ff7aae; /* primary-400 — readable on dark */ --accent-strong: #ff5698; /* primary-500 — buttons */ --accent-contrast: #25000f; --accent-soft: rgba(255, 86, 152, .13); --brand: #ff4d9e; --danger: #f87171; --warn: #fbbf24; --ok: #4ade80; --shadow: 0 1px 2px rgba(0, 0, 0, .5); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0c0a0b; --surface: #151113; --surface-2: #1e181b; --fg: #efe9ec; --fg-muted: rgba(239, 233, 236, .62); --fg-faint: rgba(239, 233, 236, .42); --border: rgba(255, 255, 255, .14); --border-strong: rgba(255, 255, 255, .27); --accent: #ff7aae; --accent-strong: #ff5698; --accent-contrast: #25000f; --accent-soft: rgba(255, 86, 152, .13); --brand: #ff4d9e; --danger: #f87171; --warn: #fbbf24; --ok: #4ade80; --shadow: 0 1px 2px rgba(0, 0, 0, .5); } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100%; font: 14.5px/1.55 "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--fg); } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: .08em .35em; } a { color: var(--accent); } /* ── top bar ─────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.75rem; padding: .7rem 1.5rem; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1rem; letter-spacing: -.01em; text-decoration: none; color: var(--fg); } .brand img { height: 22px; width: auto; display: block; } .brand .app-name { padding-left: .6rem; border-left: 1px solid var(--border-strong); color: var(--fg-muted); font-weight: 500; } .topbar nav { display: flex; gap: .15rem; } .topbar nav a { color: var(--fg-muted); text-decoration: none; padding: .35rem .75rem; border-radius: 6px; font-weight: 500; font-size: .92rem; } .topbar nav a:hover { color: var(--fg); background: var(--surface-2); } .topbar nav a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; } .theme-toggle { margin-left: auto; padding: .3rem .8rem; font-size: .8rem; font-weight: 500; color: var(--fg-muted); background: transparent; border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; } .theme-toggle:hover { color: var(--fg); border-color: var(--fg-faint); filter: none; } main { max-width: 1180px; margin: 2rem auto; padding: 0 1.5rem; } footer { max-width: 1180px; margin: 3rem auto 1.5rem; padding: 0 1.5rem; color: var(--fg-faint); font-size: .82rem; } h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 .25rem; } h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; margin: 2rem 0 .75rem; } .subtitle { color: var(--fg-muted); margin: 0 0 1.5rem; font-size: .95rem; } /* ── cards & stats ───────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1rem; } .stat .num { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .stat .label { color: var(--fg-faint); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; } .stat.new .num { color: var(--danger); } .stat.acknowledged .num { color: var(--warn); } .stat.resolved .num { color: var(--ok); } .stat.dismissed .num { color: var(--fg-muted); } /* ── filters ─────────────────────────────────────────────────────────── */ .filterbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filterbar label { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; color: var(--fg-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .filterbar select { min-width: 10rem; padding: .45rem .6rem; font: inherit; font-size: .9rem; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; } .filters { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0; } .filters a { padding: .28rem .8rem; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--fg-muted); background: var(--surface); font-size: .85rem; } .filters a:hover { color: var(--fg); border-color: var(--border-strong); } .filters a.active { background: var(--accent-strong); color: var(--accent-contrast); border-color: var(--accent-strong); font-weight: 600; } /* ── tables ──────────────────────────────────────────────────────────── */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; } table.data th { text-align: left; font-size: .73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); background: var(--surface-2); padding: .55rem .9rem; border-bottom: 1px solid var(--border); } table.data td { padding: .6rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; font-size: .92rem; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:hover td { background: var(--surface-2); } table.data tr.inactive { color: var(--fg-faint); } table.data td a { text-decoration: none; font-weight: 500; color: var(--fg); } table.data td a:hover { color: var(--accent); } table.kv th { width: 11rem; text-align: left; vertical-align: top; background: transparent; } td.actions { white-space: nowrap; } td.actions form { display: inline; margin-left: .35rem; } /* ── badges & status pills ───────────────────────────────────────────── */ .badge { display: inline-block; padding: .1rem .5rem; border-radius: 5px; font-size: .74rem; font-weight: 700; color: #fff; background: var(--fg-muted); } .badge.kev { background: #dc2626; } .badge.sev-critical { background: #7f1d1d; } .badge.sev-high { background: #c2410c; } .badge.sev-medium { background: #a16207; } .badge.sev-low { background: #15803d; } .kind-tag { display: inline-block; padding: .05rem .45rem; border-radius: 5px; font-size: .72rem; font-weight: 500; color: var(--fg-muted); background: var(--surface-2); border: 1px solid var(--border); } .pill { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid transparent; } .pill.status-new { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 25%, transparent); } .pill.status-acknowledged { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); } .pill.status-dismissed { color: var(--fg-muted); background: var(--surface-2); border-color: var(--border); } .pill.status-resolved { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 25%, transparent); } /* legacy status classes used on the detail page */ .status-new { color: var(--danger); font-weight: 700; } .status-acknowledged { color: var(--warn); } .status-dismissed { color: var(--fg-muted); } .status-resolved { color: var(--ok); } /* ── forms & buttons ─────────────────────────────────────────────────── */ form.stacked { max-width: 560px; } form.stacked label { display: block; margin-bottom: .85rem; font-weight: 500; font-size: .92rem; } form.stacked input, form.stacked select, form.stacked textarea { display: block; width: 100%; padding: .5rem .65rem; margin-top: .25rem; font: inherit; font-size: .92rem; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; } form.stacked input:focus, form.stacked select:focus, form.stacked textarea:focus, .filterbar select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } button { background: var(--accent-strong); color: var(--accent-contrast); border: 1px solid var(--accent-strong); padding: .48rem 1.1rem; border-radius: 6px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: opacity .12s ease; } button:hover { opacity: .85; } td.actions button, .filters button { padding: .25rem .7rem; font-size: .8rem; background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); } td.actions button:hover { border-color: var(--fg); opacity: 1; } /* ── misc ────────────────────────────────────────────────────────────── */ .empty-state { padding: 2.5rem; text-align: center; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--fg-muted); } .token-reveal { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .token-reveal pre { overflow-x: auto; padding: .6rem; } .url { word-break: break-all; max-width: 26rem; } .js-hidden { display: none; }