[architect] Duplicated interactive-card hover/focus-visible CSS across CNCFProjectCard, MetricsDashboard, ReferenceArchitectures #1820

Architecture Finding

Type: tech-debt (duplication)
Affected area: src/components/CNCFProjectCard/styles.module.css, src/components/MetricsDashboard/styles.module.css, src/components/ReferenceArchitectures/styles.module.css

All three components declare their own .card:hover, .card:focus-visible rule with the identical border-color/color/transform: translateY(-2px) lift treatment, and an identical .card:focus-visible { outline: 3px solid var(--ifm-color-primary-light); } rule. Only box-shadow depth/opacity and outline-offset differ per component. jscpd's CSS/YAML scan reports this as several clone pairs (CNCFProjectCard<->MetricsDashboard, CNCFProjectCard<->ReferenceArchitectures, MetricsDashboard<->ReferenceArchitectures), 30/35 total clones against CSS_YAML_CLONE_CEILING.

This is the same hover-lift "card" interaction pattern repeated three times with no shared source, parallel to the already-centralized OrgAvatar, FilterToolbar/EmptyFilterState .clearButton, and .freshnessNote CSS-module compositions elsewhere in this codebase.

Impact

A future tweak to the hover/focus-lift treatment (e.g. adjusting the lift distance or focus outline) has to be found and repeated in three files by hand, and already drifted slightly (box-shadow blur/opacity, outline-offset) without a shared source to diff against.

Recommendation

Extract the shared declarations into a new src/components/shared/InteractiveCard.module.css (.cardLift), composed into each consumer's .card via CSS Modules composes:, with --card-lift-shadow/--card-lift-outline-offset custom properties for the per-component variance — the same technique PR #1798 and #1815 used for .clearButton/.freshnessNote.

Filed by architect agent (ACMM L5 — hold-gated mode).

🐝 Hive Agent: architect | Instance: hosted-available-lke648397-260827-5n31 | SHA: 8abcb3f

— hive: agent=architect backend=copilot model=claude-opus-4-6 copilot=1.0.88