/* ClearCVE theme colour experiment — Carbon + Electric Mint / Verdigris.
*
* Both modes are one declaration per token via light-dark(); the theme switch
* sets color-scheme and nothing else. Geometry, type, component structure and
* severity classification are unchanged — this file changes colour only.
*
* The page is carbon. The accent is the 5% and is spent deliberately: the one
* primary action, the selected tab and row, the focus ring, contextual links.
* Dense lists of identifiers are neutral until interacted with. Severity keeps
* its own ramp and never borrows the accent.
*/
:root {
color-scheme: light dark;
/* --- Surfaces. Carbon, and overwhelmingly neutral: the accent appears on
* interactive and identity elements only, never as a surface.
*
* Dark steps UP from the page; light steps up to the panel (a card catches
* the light) and DOWN for raised and hover (a filled chip on paper is an
* inset). Spaced by CIE L*, not by ratio — near white and near black the
* ratio between adjacent surfaces compresses to nothing:
*
* page chrome panel raised hover input
* light 96.0 97.8 100.0 93.1 89.4 100.0
* dark 2.6 4.4 6.0 10.3 15.0 4.8
*
* Chrome is one step off the page toward the panel in both themes, which
* is what keeps the band legible as a different surface without letting it
* read as a card. What carries its lower boundary is --rule. --- */
--surface-page: light-dark(#f3f4ef, #080a0b);
--surface-panel: light-dark(#ffffff, #101416);
--surface-raised: light-dark(#e9ece7, #171d20);
--surface-hover: light-dark(#dee2dc, #1f272b);
--surface-chrome: light-dark(#f8f9f5, #0c1012);
--surface-input: light-dark(#ffffff, #0d1113);
--surface-overlay: light-dark(#ffffff, #1f272b);
--shadow-overlay: light-dark(rgb(0 0 0 / 14%), rgb(0 0 0 / 50%));
/* Light only. In dark this resolves to transparent, which makes both layers
of the cards' box-shadow a no-op there: on a carbon ground the surface
step is the separation, and a glow would be the thing this palette is
specifically not. Neutral, never tinted with the accent. */
--shadow-card: light-dark(rgb(17 22 20 / 8%), transparent);
/* Three boundary roles, three weights.
--rule region boundaries and the grouping rule down the left of every
card, plus the low / unknown verdict indicator. 3.24 page /
3.59 panel / 3.39 chrome light, 3.54 / 3.31 / 3.41 dark; a 1px
region boundary and a 3-4px indicator each owe 3:1.
--border-strong the card EDGE. 1.74 / 1.93 light, 1.98 / 1.85 dark.
--border the hairline between rows INSIDE a card, and the quietest of
the three by design.
--border-control the edge of a form control, which is what identifies
it as one: WCAG 1.4.11 wants 3:1 and --border-strong is
decorative weight. 3.93 on the light input, 5.30 on the dark
one. Neutral, not the accent — a resting input is not active. */
--rule: light-dark(#7e8a84, #5c6a70);
--border: light-dark(#cdd3cf, #283137);
--border-strong: light-dark(#b4bdb7, #38444b);
--border-control: light-dark(#78837e, #7a8a90);
/* --- Text, four levels. Slightly green-shifted greys rather than pure
* neutrals, so the carbon relates to the accent without carrying it. --- */
--text-primary: light-dark(#111614, #f2f5f4);
--text-secondary: light-dark(#56615d, #9aa6a3);
/* The token the surface ramp is pinned by: it sits on --surface-raised and
--surface-hover all over the page, so AA on those two decides how far the
ramp can go. Both values are darker (light) and lighter (dark) than the
mid-greys this palette was drawn with, which measured 3.07 and 3.17 on
the hover surface. Worst case is now 4.64 light and 5.22 dark. */
--text-muted: light-dark(#5c6461, #8e9a97);
--text-disabled: light-dark(#7f8884, #626d6a); /* inactive controls only */
/* --- Electric mint / verdigris: the brand, and the one colour that means
* "you can act on this". It is never a surface, never a heading, never a
* severity, and it never glows.
*
* It is DELIBERATELY SCARCE. The accent marks the one primary action, the
* selected tab and row, the focus ring, and contextual links — it does not
* mark everything that happens to be clickable. Three places that were
* accent by default are now neutral until they are hovered, focused or
* selected: the Related CVE identifiers, the Copy link button, and the
* ordered-step counters in "How it works", which were never interactive at
* all. A sidebar of ten accent-coloured IDs competes with the CVE the
* reader opened; the same ten in --text-primary do not, and the standing
* underline is what still says "link" (see .related-id).
*
* FILL and TEXT are separate roles and the split is load-bearing in light.
* #147a67 carries a white label at 5.24:1, which is the button — but as
* TEXT it measures 4.39 on --surface-raised and 4.00 on --surface-hover,
* both under AA, and .copy-btn and the vendor summaries sit on exactly
* those. So the light text role is one step deeper at #0f6656 (5.77 and
* 5.24). Dark needs no such split: the mint runs 8.52-11.14:1 on every
* surface, and the button flips its label to near-black at 11.14:1 rather
* than dulling the mint to suit a requirement only the text role has. --- */
--accent: light-dark(#147a67, #43d9b0);
--accent-hover: light-dark(#0f6656, #67e4c2);
--accent-pressed: light-dark(#0b4f42, #2dbf98);
--accent-fg: light-dark(#ffffff, #080a0b);
--accent-text: light-dark(#0f6656, #43d9b0);
--accent-text-hover: light-dark(#0b4f42, #67e4c2);
--accent-text-pressed: light-dark(#083b31, #8defd4);
--accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
--accent-edge: color-mix(in srgb, var(--accent) 38%, transparent);
--focus-ring: light-dark(#147a67, #43d9b0);
/* --- Semantic status. Never used for interaction, and deliberately kept
* off the accent's hue: critical 0, high 23-25, medium 35-37, low 214,
* against the accent at 164-169 degrees. Low is the closest of the four at
* 46-51 degrees and stays where it is — the accent never appears in a
* severity role, so the two are never read against each other, and moving
* a status colour to suit the brand is the thing the separation exists to
* prevent. Low is a blue rather than the green it was under the warm
* palette, and with a mint accent that matters more, not less: green would
* now sit next to the brand, and this page has no success state for green
* to mean.
*
* Light values hold the hues and drop in lightness, because all of these
* are used as text somewhere and the dark ones sit near 3:1 on paper. --- */
--critical: light-dark(#bd1c1c, #f87171);
--high: light-dark(#a84306, #fb8c3c);
--medium: light-dark(#8a5000, #f0a838);
--low: light-dark(#1d5fb8, #74a9f0);
--neutral: light-dark(#57625e, #8a9693);
/* --- Emphasis tiers, unchanged in construction:
* LOUD solid saturated fill 6.05-7.90:1 against the card
* MEDIUM 20% tint + solid border the tint can never outshout a fill
* QUIET no fill, outline only
* LOUD is only for what someone is ACTUALLY DOING to this CVE, and stays
* two hues, because "known exploited" and "exploit code is public" are
* different claims. The accent is not a tier and never appears here. --- */
--loud-alarm: light-dark(#bd1c1c, #ff5c5c);
--loud-warn: light-dark(#a84306, #ff8a3d);
--loud-fg: light-dark(#ffffff, #080a0b);
/* The severity badge is NOT a tier: it answers "how bad", the tiers answer
"how urgent". Full semantic chroma in border and label, a tint instead of
a fill, so a 9.8 nobody is exploiting cannot outshout an actively
exploited 7.5. */
--sev-tint: 16%;
--sev-ground: var(--surface-panel);
/* Chips and dots tint from the semantic set, so a new status needs no new
hand-picked hex — only a --tone- pair. */
--tone-alarm: var(--critical);
--tone-warn: var(--high);
--tone-quiet: var(--neutral);
--tone-unknown: var(--text-disabled);
/* --- Type --- */
--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, monospace;
--text-xs: 0.75rem;
--text-sm: 0.8125rem;
--text-base: 0.9375rem;
--text-md: 1.0625rem;
--text-lg: 1.3125rem;
--text-xl: 1.75rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-semi: 600;
/* --- Motion and shape --- */
--dur: 150ms;
/* The landing-to-result swap. Longer than --dur because it moves a whole
screen rather than one control, short enough that it is never a wait:
this fires on every lookup, dozens of times in a sitting. */
--dur-swap: 200ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--radius: 6px;
--radius-sm: 4px;
}
/* The toggle. One property, because light-dark() reads exactly this. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* Honour the OS setting rather than animating anyway. Zeroing the token
disables every transition in the sheet at once. */
@media (prefers-reduced-motion: reduce) {
:root {
--dur: 0ms;
--dur-swap: 0ms;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
* {
box-sizing: border-box;
}
/* ---------------------------------------------------------------------------
* hidden means hidden.
*
* The browser's own [hidden] { display: none } lives in the user-agent
* origin, which loses to EVERY author rule regardless of specificity. So any
* element this file gives a `display` to could not be hidden from JS, and the
* fix was a per-element [hidden] override next to each one. That is a rule
* you have to remember, and it was forgotten four times: the empty result
* grid rendered before the first lookup, the collapsed input line sat beside
* the real field as a permanent second box, the reachability tooltip could
* not be dismissed, and the fix panel's link note would never have hidden.
*
* Three of those reached a browser. The utility was the problem, not the call
* sites, so it is fixed here once: an author rule beats an author rule, and
* !important beats one carrying a `display` at any specificity. Every
* per-element override is now deleted, and adding `display` to anything can
* no longer break its ability to hide.
*
* !important is load-bearing rather than lazy. Without it this rule still
* loses to `#result.layout { display: grid }` on specificity alone, which is
* exactly the bug. There is no case in this app where an element carrying the
* hidden attribute should still be on screen — that is what the attribute
* means — so nothing legitimate is being overridden.
*
* The one thing this forecloses is hidden="until-found", where the browser
* reveals content for find-in-page. Not used here, and it would need
* `content-visibility: hidden` rather than this attribute anyway; if it is
* ever wanted, exempt it with [hidden="until-found"] rather than weakening
* this.
* ------------------------------------------------------------------------ */
[hidden] {
display: none !important;
}
/* The one thing the chrome band needs from outside itself.
*
* The band escapes the body's padding with `margin-inline: calc(50% - 50vw)`,
* and vw counts the scrollbar while the layout does not — so on a page long
* enough to scroll the band is a scrollbar-width too wide and asks for a
* horizontal scrollbar it has no use for. Clipping it here is the fix that
* doesn't cost a wrapper element.
*
* `clip`, never `hidden`. Overflow on html or body propagates to the
* viewport, and `hidden` would make the viewport a scroll container — which
* silently breaks position: sticky and scrollIntoView behaviour for anything
* added later. `clip` does neither; it only refuses to scroll to what is
* outside. Nothing on this page needs to be reachable off the right edge:
* the one thing that can overflow is the reachability tooltip, and that
* measures itself and picks the edge that keeps it on screen. */
html {
overflow-x: clip;
}
body {
margin: 0;
/* Tokenised because the chrome band has to reach past the top one and put
it back inside itself; two literals would drift the moment either moved. */
--page-pad-y: 2rem;
padding: var(--page-pad-y) clamp(1rem, 3vw, 2.5rem);
background: var(--surface-page);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
/* Every link takes the accent. Without this a link added anywhere outside a
styled block falls back to the user agent's own blue, which is exactly the
second accent this palette exists to avoid. */
a {
color: var(--accent-text);
text-underline-offset: 2px;
transition: color var(--dur) var(--ease);
}
a:hover {
color: var(--accent-text-hover);
}
a:active {
color: var(--accent-text-pressed);
}
/* One ring definition for everything keyboard reachable, so a new control
inherits it instead of needing its own rule. */
:where(a, button, summary, input, [tabindex], [role="tab"], [role="tabpanel"]):focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Results use the whole window. The cap only stops the columns pulling
apart on an ultrawide display. */
.page {
position: relative; /* the anchor for .theme-toggle */
max-width: 1800px;
margin: 0 auto;
/* A block formatting context, and it is here for exactly one reason: the
chrome band's negative top margin. Without it that margin collapses
THROUGH this element — a parent with no top border or padding takes its
first child's top margin as its own — and the whole page, theme toggle
and results included, rides up by the body's top padding instead of just
the band. `flow-root` is the version of that fix with no side effects:
no float behaviour, no clearing, nothing overflowing hidden. */
display: flow-root;
}
/* ---------------------------------------------------------------------------
* Cards
*
* A card marks a DISTINCT UNIT, not merely a section. Everything on the main
* column was one for a while — urgency, severity, description, tab panel —
* and four identical rectangles is separation without hierarchy: the eye gets
* borders everywhere and ranking nowhere, which is the flatness the tiering
* fixed for chips reappearing at the level of the page.
*
* So the test is whether the content is a thing rather than a passage:
*
* #verdict yes — the primary answer, and the only card above the
* fold. Carries the verdict rule, see below.
* [role=tabpanel] yes — it holds switchable content, and the box is what
* says the tabs above it change what is inside.
* .col-side yes — a separate column with its own subject.
* #fix-summary yes — the one instruction in the batch view.
* .triage yes — a table.
* #cvss-block NO. A heading and whitespace say "different question"
* perfectly well, and boxing it made the severity compete
* with the verdict directly above it.
* #result-description NO. It is body text. A box around a paragraph says
* the paragraph is a component, which it is not.
*
* Three things do the separating, and which one carries the weight depends on
* the theme (see --shadow-card):
*
* surface panel against page. Real in dark, nearly invisible in light.
* edge --border-strong, not --border. Worst case against the two
* surfaces it runs between is 1.83:1 light and 1.85:1 dark.
* shadow light only. Two layers: a 1px contact shadow that sits the card
* on the page, and a wide soft one that lifts it. In dark
* --shadow-card is transparent and both layers are a no-op.
*
* The 3px left rule is the fourth thing and it is not separation — it is
* grouping. Every card starts on the same vertical line, so a column of them
* reads as one stack of answers rather than as scattered boxes, and the eye
* has an edge to run down. Neutral by definition: see --rule.
*
* There is no .card class because nothing in app.js needs to add one; the
* sections are all fixed parts of the page and naming them here keeps the
* markup free of presentational classes.
* ------------------------------------------------------------------------ */
#verdict,
[role="tabpanel"],
.col-side,
#fix-summary,
.triage {
background: var(--surface-panel);
border: 1px solid var(--border-strong);
border-left: 3px solid var(--rule);
border-radius: var(--radius);
box-shadow: 0 1px 1px var(--shadow-card), 0 3px 10px -3px var(--shadow-card);
}
/* Everything except the table, which pads its own cells. Individual sections
override this where they were already tuned; this is the default so a new
card needs no padding rule of its own. */
#verdict,
[role="tabpanel"],
.col-side,
#fix-summary {
padding: 1rem 1.25rem;
}
/* ---------------------------------------------------------------------------
* Theme toggle
*
* Out of the flow, top right. The landing header is a 100vh centred block, so
* a bar above it would push the fold down and re-centre everything below —
* paying for a 36px control with the composition of the whole empty state.
* Absolutely positioned it costs nothing, and the top of the landing is empty
* anyway because the header centres its content.
*
* Anchored to .page rather than .page-head: .page-head is capped at 720px and
* a control pinned to its right edge would sit in the middle of a results
* screen, where the page runs to 1800px. On a results view it clears the
* title, which is centred and short.
* ------------------------------------------------------------------------ */
.theme-toggle {
position: absolute;
top: 0;
right: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-muted);
cursor: pointer;
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Not the accent. Changing the theme is housekeeping, not one of the things
this page is for, and the accent is reserved for the primary action. */
.theme-toggle:hover:not(:disabled) {
background: var(--surface-raised);
border-color: var(--border-strong);
color: var(--text-primary);
}
.theme-toggle:active:not(:disabled) {
background: var(--surface-hover);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* Which icon shows is the EFFECTIVE theme, and only app.js knows that: the
page is either following the system or pinned by the reader, and stating
that pair in CSS alone means declaring it three times over — once for the
media query, once for each [data-theme] — which is the duplication the
token block exists to avoid. So app.js writes the answer onto the button
and this reads it.
A CSS-driven swap rather than the hidden attribute, because which icon
shows is a function of the button's own state and nothing in JS needs to
toggle either one. (It used to say the hidden attribute would not work
here; since the global [hidden] rule at the top of this file, that is no
longer true, and either approach would now work. This one still reads
better — the state lives in one place.) */
.theme-icon {
display: none;
width: 1.05rem;
height: 1.05rem;
}
.theme-toggle[data-theme="dark"] .theme-icon-sun,
.theme-toggle[data-theme="light"] .theme-icon-moon {
display: block;
}
/* ---------------------------------------------------------------------------
* The chrome band
*
* The title and the search box are the tool; everything below the rule is
* what the tool returned. They were on one continuous sheet, which said the
* search box and the answer were the same kind of thing — so the band gives
* the controls their own ground and the rule is where the reading starts.
*
* It is one element wrapping the header and nothing else. .page-head is
* capped at 720px and centred, and a band cannot be: it has to reach the
* window edges while the column inside it stays where it was.
* ------------------------------------------------------------------------ */
.head-band {
/* Out to the window and back again. 50% is half this element's containing
block and 50vw is half the viewport, so the pair cancels exactly whatever
inset the body's padding and .page's 1800px cap have put this column at —
without naming either of them, and without a second wrapper to hang the
background on. The margin takes the box out; the padding puts the content
back. See the html rule at the top for the scrollbar's share of it. */
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50%);
/* Up past the body's top padding, then that padding restored on the inside:
chrome starts at the top of the window, and the title starts where it
always did. */
margin-top: calc(var(--page-pad-y) * -1);
padding-top: var(--page-pad-y);
background: var(--surface-chrome);
/* The lower edge, and the only rule on this page that separates two regions
rather than heading a section. --rule holds 3.37:1 light and 3.54:1 dark
against the band; a 1px boundary owes 3:1. */
border-bottom: 1px solid var(--rule);
/* A stacking context, and it is load-bearing rather than tidiness. The glow
behind the title is a z-index: -1 pseudo-element, and negative z-index
descendants paint BEFORE any block background in the same stacking
context — so without one here the band's own fill would cover the glow
outright. Inside one the order is: band background, glow, header. The
theme toggle sits at z-index 1 on .page, above both. */
position: relative;
z-index: 0;
}
/* The search box is the exception: a full-bleed text input is worse to use
than a narrow one, so the header stays centred over the columns. */
.page-head {
max-width: 720px;
margin: 0 auto;
}
/* With nothing else on the page, the header takes the screen rather than
sitting in a band at the top with a void beneath it. It drops back to
normal flow the moment there is a result to read.
*
* The centring lives on .page-head unconditionally and only min-height is
* toggled, which is what makes the collapse animatable. It used to toggle
* `display: flex` alongside the height: at the moment of the swap the content
* stopped being centred and jumped to the top of a box that was still
* 836px tall, so there was nothing left to animate — the title had already
* arrived. Centred throughout, the same 703px of height leaving the box
* carries the title from the middle of the screen to the top of it.
*
* min-height: 0 on a flex column with justify-content: center is inert, so
* the result view is laid out exactly as it was before.
*
* See "the swap" below for why this is transitioned and the h1 with it. */
.page-head {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
body:not([data-view]) .page-head {
min-height: calc(100vh - var(--page-pad-y) * 2 - 4rem);
}
/* ---------------------------------------------------------------------------
* Empty state
*
* The page before a search is the only place with any atmosphere. Everything
* here is static — a fixed gradient and a fixed noise layer, no animation
* beyond a single fade on load — and all of it is confined to the header.
* Once a CVE is on screen the reading area is flat and calm, which is the
* whole point: you are reading this at 3am to make a decision.
* ------------------------------------------------------------------------ */
/* The glow. Sized and positioned to sit behind the header only; it ends well
above the results, so no body text is ever read against a gradient. */
.page-head {
position: relative;
}
.page-head::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
/* Sized against the header, not the viewport. A vw-based width overflowed
at 380px, and neither html nor body can clip it away: overflow on either
propagates to the viewport rather than clipping. Bounding it here is the
only fix that doesn't reach for a wrapper element. */
width: 100%;
height: 32rem;
transform: translate(-50%, -50%);
background: none;
pointer-events: none;
z-index: -1;
}
/* Noise, fixed so it never scrolls against the content and never redraws.
2.5% over a dark ramp is enough to stop the flat areas banding. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1 {
font-family: var(--font-sans);
font-size: clamp(2.75rem, 7vw, 4.5rem);
font-weight: 700;
letter-spacing: -0.045em;
line-height: 1.05;
text-align: center;
color: var(--text-primary);
margin: 0 0 1rem;
}
/* The wordmark keeps --text-primary from the rule above. Splitting it as
neutral "Clear" + mint "CVE" would need the markup to name the two halves —
index.html has , one text node — and
there is no colour-only way to reach the second half of a word. A
hard-stopped background-clip gradient could fake it, but it would land on a
different letter the moment the webfont fell back, and a decorative
gradient is the thing this palette is specifically without. So the whole
wordmark stays neutral: painting it --accent-text would put the interaction
colour on the largest non-interactive element on the page, directly above
the one primary button. */
.tagline {
max-width: 46ch;
margin: 0 auto 1.75rem;
text-align: center;
font-size: var(--text-md);
line-height: 1.55;
color: var(--text-secondary);
text-wrap: pretty;
}
/* The notice above the search box. Sized and coloured like the
tagline it follows, with a left rule so it reads as a notice rather than a
second tagline. In the stylesheet, not a style attribute: the notice must
cost the CSP nothing. */
.noscript-note {
max-width: 46ch;
margin: 0 auto 1.75rem;
padding: 0.6rem 0.9rem;
border-left: 3px solid var(--border-strong);
background: var(--surface-panel);
border-radius: 4px;
text-align: left;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--text-secondary);
text-wrap: pretty;
}
.noscript-note a {
color: var(--accent-text);
}
/* --- Example chips --- */
.examples {
margin-top: 1.25rem;
text-align: center;
}
.examples-label {
display: block;
margin-bottom: 0.6rem;
font-size: var(--text-sm);
color: var(--text-muted);
}
.example-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
/* The labels are questions now, not two-word captions, so a chip is a column
in a row of three rather than something sized by its text. Equal basis with
a cap, so the three read as three of a kind and the label wraps to two
lines instead of stretching the row. The is the flex item — .example
is the button inside it. */
.example-list > li {
display: flex;
flex: 1 1 13rem;
max-width: 15rem;
}
/* Straight to one per row, rather than letting it find its own break. Flex
lines are decided on flex-basis and not on the shrunk width, so three
13rem items in a 500px row still fit two on the first line — and 2 + 1 is
the arrangement that reads as a mistake rather than as a layout. The
breakpoint is where three across stops fitting: the header caps at 720px
and the body pads it by up to 2.5rem a side. */
@media (max-width: 700px) {
.example-list > li {
flex-basis: 100%;
max-width: none;
}
}
/* Interactive, so it takes the accent — the severity palette stays out of
the empty state entirely. */
.example {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.5rem 0.85rem;
text-align: left;
background: var(--surface-panel);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.example:hover {
background: var(--surface-raised);
border-color: var(--accent-edge);
transform: translateY(-1px);
}
.example:active {
transform: translateY(0);
}
/* The action the chip performs, and the primary line. It replaced a CVE ID
set in mono — the ID was the checkable half of a claim about one lookup,
and two of these three chips no longer run one. So it is prose now, in the
body face, and it carries the accent because the chip is the interactive
thing in the empty state.
No underline, unlike the links elsewhere that carry the same token: this
sits inside a button that is already bordered and hoverable, and underlining
it would offer a second, narrower target that is not one. Weight separates
it from the note instead. --accent-text holds 4.5:1 on both surfaces the
chip uses — panel at rest, raised on hover. */
.example-action {
font-size: var(--text-sm);
font-weight: var(--weight-semi);
color: var(--accent-text);
}
.example-note {
font-size: var(--text-xs);
line-height: 1.4;
color: var(--text-muted);
/* Two lines of roughly equal length rather than a full line and one
orphaned word — these are sentences now, and they wrap. */
text-wrap: balance;
}
/* --- Retire the empty state once there is an answer --- */
body[data-view] .tagline,
body[data-view] .examples {
display: none;
}
/* The title steps back rather than disappearing, so the page keeps its
identity without spending a third of the screen on it. */
body[data-view] h1 {
font-size: var(--text-xl);
letter-spacing: -0.02em;
margin-bottom: 1.75rem;
}
/* And the glow retires with it: nothing decorative sits behind a result. */
body[data-view] .page-head::before {
display: none;
}
/* --- Load fade. One pass, header only, never on the results view. --- */
@keyframes intro-rise {
from {
opacity: 0;
transform: translateY(0.5rem);
}
to {
opacity: 1;
transform: none;
}
}
/* backwards, not both, and the difference matters. `backwards` is the half
this needs: it holds the `from` values through the stagger delay below, so
nothing sits at full opacity for 180ms and then jumps down to rise again.
`forwards` was doing nothing visible — the `to` values are opacity 1 and
transform none, which is what these elements compute to anyway — but a
filling animation outranks normal author declarations in the cascade, so
it would have gone on overriding them for the life of the page. That is
not theoretical: the recede in the swap block below sets opacity and
transform on these exact two elements, and a `both` here silently wins. */
body:not([data-view]) h1,
body:not([data-view]) .tagline,
body:not([data-view]) #search-form,
body:not([data-view]) .examples {
animation: intro-rise 500ms var(--ease) backwards;
}
body:not([data-view]) .tagline { animation-delay: 60ms; }
body:not([data-view]) #search-form { animation-delay: 120ms; }
body:not([data-view]) .examples { animation-delay: 180ms; }
/* The global reduced-motion block already collapses the duration; clearing
the delays too means nothing sits invisible waiting for its turn. */
@media (prefers-reduced-motion: reduce) {
body:not([data-view]) h1,
body:not([data-view]) .tagline,
body:not([data-view]) #search-form,
body:not([data-view]) .examples {
animation: none;
animation-delay: 0s;
}
}
/* ---------------------------------------------------------------------------
* The swap, landing to result
*
* A lookup runs dozens of times in a sitting, so the one rule this obeys is
* that nothing ever waits on it. The recede is a transition set the moment
* the request goes out, which means it overlaps the network rather than being
* spent before it: on a warm cache the answer lands first and the empty state
* is simply gone, on a cold one the page has already acknowledged the click.
* The result's own entrance is a keyframe that runs on paint. Neither is
* awaited by anything in app.js.
*
* A transition and not an animation for the outgoing half, because it has to
* be reversible — an invalid ID or an unreachable server puts the reader back
* on the landing page, and a keyframe that has already run cannot be undone.
*
* Only the landing recedes. Following a related CVE from one result to the
* next hides the old result outright, which is deliberate and older than this:
* a rejected input must never leave a stale answer sitting under the error.
*
* --- What was actually wrong with it ---
*
* Both halves of this always fired. Instrumented: the recede starts on the
* click, view-in starts on the frame #result is unhidden and runs its full
* 200ms, and prefers-reduced-motion was not matching. Nothing here was
* broken, and none of that was visible.
*
* What drowned it was the header, which was not part of the effect at all.
* Setting data-view collapsed .page-head from `min-height: calc(100vh - 4rem)`
* to normal flow and the h1 from clamp(2.75rem, 7vw, 4.5rem) to --text-xl in
* ONE FRAME. Measured at 1280x900: 836px of header became 133px, the title
* went 72px to 28px, and the document grew 900 to 1621 — between two
* consecutive rAF samples. Against a 703px unanimated jump, a 1.5% scale and
* a fade on the incoming block is not subtle, it is invisible.
*
* So the fix is not more effect on the result. It is animating the thing that
* was already moving: the height leaves the header over the same 200ms, the
* title rides it down from the middle of the screen to the top, and the
* result — which is on screen and opaque from the first frame — surfaces into
* the space as it closes. One motion, and the answer is not waiting on it.
* ------------------------------------------------------------------------ */
/* The collapse. min-height is a layout property and animating one is usually
a bad trade; here the animating subtree is a title, an input and a button
inside a 720px column, and it is what the reader is actually watching. The
alternative — a transform on the header — cannot be made to work, because
the point is that the 703px LEAVES the flow and pulls the result up with
it, which a transform by definition does not do. */
.page-head {
transition: min-height var(--dur-swap) var(--ease);
}
/* The title rides the collapse rather than cutting to its small size at the
top of it. Same duration, so the two read as one movement.
Not scoped to the swap, because CSS has no way to say "only when data-view
caused it". The one other thing that changes this font-size is a window
resize between about 630px and 1030px, where the clamp is on its 7vw leg;
there the title now follows the drag 200ms behind instead of tracking it
exactly. Judged the better trade — a resize is not a thing anyone watches
closely, and the swap is. */
h1 {
transition: font-size var(--dur-swap) var(--ease),
margin-bottom var(--dur-swap) var(--ease);
}
.tagline,
.examples {
transition: opacity var(--dur-swap) var(--ease),
transform var(--dur-swap) var(--ease);
}
body[data-busy] .tagline,
body[data-busy] .examples {
opacity: 0;
/* Small on purpose. Enough to read as stepping back, not enough to read as
a thing that moved. */
transform: scale(0.97);
}
@keyframes view-in {
from {
opacity: 0;
transform: scale(0.985) translateY(0.4rem);
}
to {
opacity: 1;
transform: none;
}
}
/* Restarts on its own each lookup: both of these are shown and hidden with
the hidden attribute, and an animation re-runs whenever an element comes
back from display:none. No JS hook, and nothing to reset between CVEs. */
#result:not([hidden]),
#batch:not([hidden]) {
/* No delay, so there is nothing for a fill to cover — and see intro-rise
above for why a `forwards` here would be worse than useless. */
animation: view-in var(--dur-swap) var(--ease) backwards;
}
/* Straight swap, as asked: no transform anywhere, and the landing holds still
while the request is out rather than blinking away and back on an error.
The global reduce block only collapses durations, which would still apply
the receded state — instantly, which is worse than not at all. */
@media (prefers-reduced-motion: reduce) {
body[data-busy] .tagline,
body[data-busy] .examples {
opacity: 1;
transform: none;
}
#result:not([hidden]),
#batch:not([hidden]) {
animation: none;
}
}
#search-form {
display: flex;
align-items: flex-start; /* or the button stretches as the box grows */
gap: 0.5rem;
}
/* A textarea wearing an input's clothes. It is a textarea so a multi-line
paste survives (an cannot do once the cells have their own backgrounds. */
.triage-row[data-linked] > td:first-child {
box-shadow: inset 3px 0 0 var(--accent-text);
}
.triage-row[data-linked] > .triage-id {
font-weight: var(--weight-semi);
}
/* An answer, not a gap — so it reads as stated rather than missing. */
.fix-none {
font-size: var(--text-sm);
color: var(--text-muted);
cursor: help;
}
/* Several release lines, behind a toggle. Indented under the product because
the choice between them is the reader's — which one they are running. */
.fix-trains {
list-style: none;
margin: 0.35rem 0 0;
padding: 0 0 0 1rem;
border-left: 2px solid var(--border);
}
.fix-trains li {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.12rem 0;
}
.fix-train-label {
min-width: 5.5rem;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
}
.fix-more {
margin-top: 0.6rem;
padding-top: 0.6rem;
border-top: 1px solid var(--border);
}
.fix-more summary {
cursor: pointer;
font-size: var(--text-sm);
color: var(--text-muted);
border-radius: var(--radius-sm);
transition: color var(--dur) var(--ease);
}
.fix-more summary:hover {
color: var(--accent-text);
}
.fix-more .fix-list {
margin-top: 0.5rem;
}
/* --- Verdict sections ---------------------------------------------------
*
* The reader is meant to be able to stop after the first one, so the break
* between sections is a real one: a ruled band, not just a bolder row.
* ---------------------------------------------------------------------- */
.triage-group th {
padding: 0.65rem 0.6rem 0.35rem;
text-align: left;
font-size: var(--text-xs);
font-weight: var(--weight-semi);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
background: var(--surface-raised);
border-bottom: 1px solid var(--border-strong);
cursor: help;
}
/* The first section needs no rule above it — the table head is already there. */
.triage tbody tr.triage-group:not(:first-child) th {
border-top: 1px solid var(--border-strong);
}
/* Confirmed exploited already, so the prediction beside it stops competing
with the badge. Muted, not hidden: it is still information. */
.triage-epss[data-secondary] {
color: var(--text-muted);
font-weight: var(--weight-normal);
}
/* --- Not found ----------------------------------------------------------
*
* A row, not a footnote. The count above the table has to be the count that
* was pasted, and a triage view that quietly drops one is worse than useless.
* ---------------------------------------------------------------------- */
.triage-missing {
cursor: default;
}
.triage-missing:hover {
background: none;
}
.triage-missing .triage-id {
color: var(--text-muted);
}
.triage-missing-note {
font-size: var(--text-sm);
font-style: italic;
color: var(--text-muted);
cursor: help;
}
/* --- Home link -----------------------------------------------------------
*
* The title is the way back. Accent on hover rather than by default: at rest
* it is a heading and should read as one, but it has to answer the pointer
* like every other site's masthead does.
* ---------------------------------------------------------------------- */
#home-link {
color: inherit;
text-decoration: none;
cursor: pointer;
border-radius: var(--radius-sm);
transition: color var(--dur) var(--ease);
}
#home-link:hover {
color: var(--accent-text);
}
#home-link:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
}
/* --- Fixed versions, collapsed ------------------------------------------
*
* One line per product by default. This block sits above the table and was
* the longest thing on the page when it listed every line of every product.
* ---------------------------------------------------------------------- */
.fix-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.5rem;
}
.fix-branches {
margin-top: 0.2rem;
}
.fix-branches summary {
cursor: pointer;
font-size: var(--text-xs);
color: var(--text-muted);
border-radius: var(--radius-sm);
transition: color var(--dur) var(--ease);
}
.fix-branches summary:hover {
color: var(--accent-text);
}
.fix-branches .fix-trains {
margin-top: 0.3rem;
}
/* The editions inside a group toggle. Indented and ruled off the same way the
release lines are, one level up, because the choice between them is the
same kind of choice: which one are you running. */
.fix-group > .fix-branches > .fix-list {
margin-top: 0.4rem;
padding-left: 1rem;
border-left: 2px solid var(--border);
}
/* Stated, not silently applied: NVD lists every vendor that ships an
affected component, and the reader should know some were filtered. */
.fix-dropped {
margin: 0.6rem 0 0;
padding-top: 0.6rem;
border-top: 1px solid var(--border);
font-size: var(--text-xs);
color: var(--text-muted);
cursor: help;
}
/* The standing caveat closing the panel. Same weight as .fix-dropped — both
* are notes about the list rather than part of it — but no cursor: help,
* because it carries no title to reveal. */
.fix-caveat {
margin: 0.6rem 0 0;
padding-top: 0.6rem;
border-top: 1px solid var(--border);
font-size: var(--text-xs);
color: var(--text-muted);
}
/* One rule under both notes, not two stacked rules. */
.fix-dropped + .fix-caveat {
margin-top: 0.35rem;
padding-top: 0;
border-top: none;
}
/* --- All clear -----------------------------------------------------------
*
* The most common outcome for a vendor monthly bundle, and the one the flat
* table served worst. The conclusion carries the weight here; the table is
* still one click away for anyone who wants to check the working.
* ---------------------------------------------------------------------- */
#batch-summary[data-all-clear="true"] {
font-size: var(--text-lg);
color: var(--text-primary);
}
/* Every case except the all-clear: the table is simply the table, so the
disclosure it lives in has to leave no trace of itself. */
#batch:not([data-all-clear="true"]) #triage-toggle {
display: none;
}
#triage-toggle {
margin-top: 1.25rem;
padding: 0.5rem 0;
cursor: pointer;
font-size: var(--text-sm);
color: var(--text-muted);
border-radius: var(--radius-sm);
transition: color var(--dur) var(--ease);
}
#triage-toggle:hover {
color: var(--accent-text);
}
#triage-toggle:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* Small public information pages and the shared footer. */
.site-footer {
padding: 1.25rem 0;
text-align: center;
color: var(--text-muted);
font-size: var(--text-sm);
line-height: 1.5;
}
.site-footer a {
display: inline-block;
padding: 0.25rem 0.15rem;
color: inherit;
}
.site-footer a:hover {
color: var(--accent-text-hover);
}
.info-page .page {
min-height: calc(100vh - var(--page-pad-y) * 2);
display: flex;
flex-direction: column;
}
.info-content {
width: 100%;
max-width: 720px;
margin: 0 auto;
flex: 1;
line-height: 1.7;
}
body.info-page .info-content h1 {
margin: 1.5rem 0;
font-size: var(--text-xl);
text-align: left;
letter-spacing: -0.02em;
background: none;
color: var(--text-primary);
animation: none;
transition: none;
}
.info-content h2 {
margin: 1.5rem 0 0.5rem;
font-size: var(--text-md);
}
.info-content p {
margin: 0 0 1rem;
color: var(--text-secondary);
}
.back-to-search {
display: inline-block;
font-size: var(--text-sm);
}
/* --- "What do I search for?" sub-tabs ----------------------------------- *
* Two tabs inside the tab: what the vendor's advisory says to check, and our
* generated starting queries. Underlined like the side panel's tabs, not
* filled like the main strip — a filled strip inside a filled strip would
* read as a second page. One class more specific than the generic [role=tab]
* rules, which is what makes these win. */
.detect-tabs {
gap: 0.15rem;
margin: 0;
border-bottom: 1px solid var(--border);
}
.detect-tabs .detect-tab {
padding: 0.35rem 0.6rem;
margin-bottom: -1px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: none;
box-shadow: none;
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-muted);
}
.detect-tabs .detect-tab:hover {
background: none;
box-shadow: none;
color: var(--text-primary);
}
.detect-tabs .detect-tab[aria-selected="true"] {
background: none;
box-shadow: none;
color: var(--text-primary);
font-weight: var(--weight-semi);
border-bottom-color: var(--accent-text);
}
/* Not a card inside the card: the outer tab panel is the box. */
#detect .detect-panel {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
.vendor-check-source p {
margin: 0;
max-width: 70ch;
font-size: var(--text-sm);
color: var(--text-secondary);
}
.vendor-check-source .vendor-check-dates {
color: var(--text-muted);
}
.vendor-check-age {
margin: 0 0 0.5rem;
font-size: var(--text-sm);
color: var(--text-muted);
}
.vendor-check-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.vendor-check-item {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.5rem;
}
/* Quoted text wraps rather than scrolls, like the queries: a long grep is
still one thing to copy, and the copy button takes it whole. */
.vendor-check-text {
flex: 1 1 auto;
min-width: 0;
padding: 0.35rem 0.5rem;
font-family: var(--font-mono);
font-size: var(--text-sm);
white-space: pre-wrap;
overflow-wrap: anywhere;
background: var(--surface-raised);
border-radius: var(--radius-sm);
}
.vendor-check-algo,
.vendor-check-link {
flex: none;
align-self: center;
font-size: var(--text-xs);
}
.vendor-check-algo {
color: var(--text-muted);
}
.vendor-check-item .copy-btn {
flex: none;
}
/* A group's heading with its "Copy all" at the end of the same line. */
.vendor-check-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin: 0 0 0.5rem;
}
.vendor-check-head .detect-head {
margin: 0;
}
.vendor-check-head .copy-btn {
flex: none;
}
.vendor-check-links ul {
margin: 0;
padding-left: 1.1rem;
font-size: var(--text-sm);
color: var(--text-secondary);
}
/* Under the ID, never beside it: the ID column is sized for a six-digit ID
at phone width, and the flag is shorter than that, so it adds height only. */
.triage-id .triage-vendor-check {
display: block;
width: max-content;
margin-top: 0.2rem;
font-family: inherit;
}
/* A vendor's placeholder inside a quoted value (""): marked so it
cannot be pasted as a literal path. QUIET — a tint, not a highlight. */
.vendor-check-placeholder {
padding: 0 0.1rem;
color: inherit;
background: color-mix(in srgb, var(--medium) 18%, transparent);
border-radius: 2px;
}
.vendor-check-placeholder-note,
.vendor-check-elsewhere,
.vendor-check-context {
margin: 0 0 0.5rem;
font-size: var(--text-sm);
color: var(--text-muted);
}
/* The vendor's line that makes a hash an indicator: its own row under the
hash, in the same muted style as the section notes. */
.vendor-check-context {
flex: 1 0 100%;
margin: -0.2rem 0 0;
}
/* A signature ID's line sits once under the whole group, not under an item. */
.vendor-check-group .vendor-check-group-context {
margin: 0.4rem 0 0;
max-width: 70ch;
}
/* One label at a time: the long one, or below 480px the short one. */
.detect-tab-short {
display: none;
}
@media (max-width: 480px) {
.detect-tab-long {
display: none;
}
.detect-tab-short {
display: inline;
}
}
/* Why a young CVE's sources are silent, under its verdict; and the CVEs
* the same update fixes, under the fix line. */
.verdict-age-note,
.fix-siblings {
margin: 0.35rem 0 0;
max-width: 60ch;
font-size: var(--text-sm);
color: var(--text-muted);
}
/* The KEV entry's notes, which "What CISA requires" refers to. */
.kev-notes {
margin: 0.35rem 0 0;
font-size: var(--text-sm);
color: var(--text-muted);
}
/* What the vendor says to do after patching, under the fix line. */
.post-patch {
margin: 0.5rem 0 0;
font-size: var(--text-sm);
}
.post-patch-lead {
margin: 0;
}
.post-patch-steps {
margin: 0.25rem 0 0;
padding-left: 1.25rem;
}
.post-patch-steps code {
font-family: var(--font-mono, ui-monospace, monospace);
overflow-wrap: anywhere;
}