Skip to content

Commit 057efa4

Browse files
CSVillainclaude
CSVillain
and
claude
committed
Fix Decisions + Measurement layout consistency
Decisions: replace 2-column variable-height card grid with single-column horizontal sidebar rows (148px sidebar | 1fr content). Each row has a centred numbered sidebar with tag + icon on the left and full-width body on the right, eliminating height mismatch. Measurement: force KPI grid to repeat(2,1fr) + align-items:start to replace the 3-narrow-column auto-fit layout. Add kpi-signal-type pill badges (Good Signal / Warning / At Risk) to all 15 KPI signal blocks, colour-coded via existing --success/--danger/--gold tokens. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent c6fec60 commit 057efa4

1 file changed

Lines changed: 185 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4447,6 +4447,176 @@
44474447
.req-after-zone { padding: 12px 18px 18px; }
44484448
.req-arrow { margin: 0 18px; }
44494449
}
4450+
4451+
/* ═══════════════════════════════════════════════════════════════
4452+
STRUCTURAL REDESIGNS — Decisions + Measurement
4453+
═══════════════════════════════════════════════════════════════ */
4454+
4455+
/* ── DECISION CASES: horizontal sidebar rows ────────────────── */
4456+
/* Replaces the mismatched 2-column card grid with a consistent
4457+
numbered-row layout: [sidebar: number + icon] | [content] */
4458+
.cases-grid--decisions {
4459+
grid-template-columns: 1fr !important;
4460+
gap: 3px !important;
4461+
margin: 44px 0;
4462+
}
4463+
.cases-grid--decisions .case-item:last-child {
4464+
grid-column: 1 !important;
4465+
}
4466+
.cases-grid--decisions .case-item {
4467+
display: grid !important;
4468+
grid-template-columns: 148px 1fr;
4469+
align-items: stretch;
4470+
padding: 0 !important;
4471+
border-radius: 8px;
4472+
min-height: unset;
4473+
overflow: hidden;
4474+
}
4475+
/* Remove the tall decorative orb — unnecessary in row layout */
4476+
.cases-grid--decisions .case-item::after { display: none; }
4477+
/* Restore the left-edge accent as a 3px strip on the sidebar */
4478+
.cases-grid--decisions .case-item::before {
4479+
top: 0; bottom: 0; width: 3px; height: auto;
4480+
border-radius: 0;
4481+
}
4482+
.cases-grid--decisions .case-header {
4483+
flex-direction: column;
4484+
align-items: center;
4485+
justify-content: center;
4486+
gap: 12px;
4487+
margin-bottom: 0;
4488+
padding: 28px 16px;
4489+
border-right: 1px solid rgba(255,255,255,0.05);
4490+
background: rgba(0,0,0,0.18);
4491+
text-align: center;
4492+
}
4493+
.cases-grid--decisions .cn {
4494+
font-size: 28px !important;
4495+
font-weight: 800;
4496+
letter-spacing: -0.03em;
4497+
padding: 0 !important;
4498+
border: none !important;
4499+
background: transparent !important;
4500+
border-radius: 0 !important;
4501+
line-height: 1;
4502+
color: var(--text);
4503+
}
4504+
.cases-grid--decisions .ctag {
4505+
font-size: 9px;
4506+
text-align: center;
4507+
line-height: 1.4;
4508+
}
4509+
.cases-grid--decisions .case-icon {
4510+
margin-left: 0;
4511+
background: rgba(255,255,255,0.04);
4512+
}
4513+
.cases-grid--decisions .case-body {
4514+
padding: 24px 28px;
4515+
display: flex;
4516+
flex-direction: column;
4517+
justify-content: center;
4518+
}
4519+
.cases-grid--decisions .case-body h3 {
4520+
font-size: 17px;
4521+
margin-bottom: 8px;
4522+
}
4523+
.cases-grid--decisions .case-body p {
4524+
font-size: 13.5px;
4525+
line-height: 1.65;
4526+
margin: 0 0 14px;
4527+
}
4528+
.cases-grid--decisions .case-out {
4529+
margin-top: 0;
4530+
}
4531+
4532+
/* ── KPI GRID: 2-column, consistent height, signal badges ───── */
4533+
/* Replaces the 3-column auto-fit layout that produced mismatched
4534+
card heights with a fixed 2-column grid + start alignment */
4535+
.kpi-grid {
4536+
grid-template-columns: repeat(2, 1fr) !important;
4537+
align-items: start !important;
4538+
}
4539+
/* Force kpi-name to a consistent min-height so title wrap
4540+
doesn't shift card content start positions */
4541+
.kpi-name {
4542+
min-height: 2.8em;
4543+
display: flex;
4544+
align-items: flex-start;
4545+
}
4546+
/* Signal type badge — colored pill above the bars */
4547+
.kpi-signal {
4548+
gap: 0;
4549+
}
4550+
.kpi-signal-type {
4551+
display: inline-flex;
4552+
align-items: center;
4553+
gap: 5px;
4554+
font-family: 'Space Grotesk', sans-serif;
4555+
font-size: 9px;
4556+
font-weight: 700;
4557+
letter-spacing: 0.12em;
4558+
text-transform: uppercase;
4559+
padding: 3px 8px 3px 6px;
4560+
border-radius: 999px;
4561+
margin-bottom: 8px;
4562+
width: fit-content;
4563+
}
4564+
.kpi-signal-type::before {
4565+
content: '';
4566+
width: 6px;
4567+
height: 6px;
4568+
border-radius: 50%;
4569+
flex-shrink: 0;
4570+
}
4571+
.kpi-signal--good .kpi-signal-type {
4572+
color: #8fe3a6;
4573+
background: rgba(103,212,135,0.12);
4574+
border: 1px solid rgba(103,212,135,0.25);
4575+
}
4576+
.kpi-signal--good .kpi-signal-type::before { background: #67d487; }
4577+
4578+
.kpi-signal--warn .kpi-signal-type {
4579+
color: #e6c86c;
4580+
background: rgba(224,188,86,0.12);
4581+
border: 1px solid rgba(224,188,86,0.25);
4582+
}
4583+
.kpi-signal--warn .kpi-signal-type::before { background: #e0bc56; }
4584+
4585+
.kpi-signal--risk .kpi-signal-type {
4586+
color: #f19393;
4587+
background: rgba(239,107,107,0.12);
4588+
border: 1px solid rgba(239,107,107,0.25);
4589+
}
4590+
.kpi-signal--risk .kpi-signal-type::before { background: #ef6b6b; }
4591+
4592+
/* Responsive overrides */
4593+
@media (max-width: 860px) {
4594+
.cases-grid--decisions .case-item {
4595+
grid-template-columns: 100px 1fr;
4596+
}
4597+
.cases-grid--decisions .case-header {
4598+
padding: 20px 10px;
4599+
}
4600+
.cases-grid--decisions .case-body {
4601+
padding: 18px 18px;
4602+
}
4603+
.cases-grid--decisions .cn { font-size: 22px !important; }
4604+
}
4605+
@media (max-width: 600px) {
4606+
.cases-grid--decisions .case-item {
4607+
grid-template-columns: 1fr !important;
4608+
}
4609+
.cases-grid--decisions .case-header {
4610+
flex-direction: row;
4611+
justify-content: flex-start;
4612+
padding: 14px 16px;
4613+
border-right: none;
4614+
border-bottom: 1px solid rgba(255,255,255,0.05);
4615+
}
4616+
.kpi-grid {
4617+
grid-template-columns: 1fr !important;
4618+
}
4619+
}
44504620
</style>
44514621
</head>
44524622

@@ -5894,6 +6064,7 @@ <h2>How you know it's working.</h2>
58946064
<div class="kpi-desc">The proportion of knowledge queries that return a result the user accepts as useful -
58956065
defined not by whether a result appeared, but whether the user acted on it.</div>
58966066
<div class="kpi-signal kpi-signal--good">
6067+
<div class="kpi-signal-type">Good Signal</div>
58976068
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">What movement looks like</div>
58986069
<div class="kpi-signal-val">Baseline typically 40-60% in ungoverned estates. Governed estates with hybrid
58996070
retrieval reach 75-90%.</div>
@@ -5905,6 +6076,7 @@ <h2>How you know it's working.</h2>
59056076
gaps in taxonomy coverage, ingestion failure, or misalignment between how knowledge is classified and how
59066077
it is searched.</div>
59076078
<div class="kpi-signal kpi-signal--warn">
6079+
<div class="kpi-signal-type">Warning</div>
59086080
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">Why it matters</div>
59096081
<div class="kpi-signal-val">Every zero-result query is a decision made without support. Tracked over time,
59106082
it directly maps to coverage gaps the taxonomy must close.</div>
@@ -5916,6 +6088,7 @@ <h2>How you know it's working.</h2>
59166088
window. Varies by domain - a regulatory policy may require 90-day review; a product specification may be
59176089
annual.</div>
59186090
<div class="kpi-signal kpi-signal--risk">
6091+
<div class="kpi-signal-type">At Risk</div>
59196092
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">The failure mode</div>
59206093
<div class="kpi-signal-val">Without ownership and review incentives, content becomes stale regardless of
59216094
tooling. Freshness SLA makes staleness visible before it becomes a decision risk.</div>
@@ -5927,6 +6100,7 @@ <h2>How you know it's working.</h2>
59276100
assets in Trust, Review, and Retire states. Tracks whether estate quality is improving or degrading over
59286101
time.</div>
59296102
<div class="kpi-signal kpi-signal--good">
6103+
<div class="kpi-signal-type">Good Signal</div>
59306104
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">Target direction</div>
59316105
<div class="kpi-signal-val">Trust proportion should rise over time as governance matures. A static or
59326106
declining Trust proportion signals that ingestion is outpacing governance.</div>
@@ -5950,6 +6124,7 @@ <h2>How you know it's working.</h2>
59506124
upon. Applies across functions - from a service agent resolving a case, to a strategist validating an
59516125
assumption before a board presentation.</div>
59526126
<div class="kpi-signal kpi-signal--good">
6127+
<div class="kpi-signal-type">Good Signal</div>
59536128
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">Evidence from production</div>
59546129
<div class="kpi-signal-val">UCB (biopharma) reduced regulatory response assembly time by 90% - from three
59556130
weeks to two days - after governing retrieval over a large clinical and R&D content estate.</div>
@@ -5961,6 +6136,7 @@ <h2>How you know it's working.</h2>
59616136
knowledge retrieval. Measured across service, legal, compliance, and HR workflows where knowledge
59626137
retrieval is embedded in the resolution path.</div>
59636138
<div class="kpi-signal kpi-signal--good">
6139+
<div class="kpi-signal-type">Good Signal</div>
59646140
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">Evidence from production</div>
59656141
<div class="kpi-signal-val">A knowledge graph-enhanced retrieval deployment at LinkedIn reduced median
59666142
per-issue resolution time by 28.6% after six months, with retrieval quality improvement of +77.6% MRR.
@@ -5973,6 +6149,7 @@ <h2>How you know it's working.</h2>
59736149
knowledge they need. Captures the upstream friction that precedes a decision or action, including search
59746150
time, re-escalation, and rework.</div>
59756151
<div class="kpi-signal kpi-signal--good">
6152+
<div class="kpi-signal-type">Good Signal</div>
59766153
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">Evidence from production</div>
59776154
<div class="kpi-signal-val">A financial services deployment reported an 86% reduction in time spent
59786155
searching for knowledge, an 11.25% reduction in average handle time, and 2.5 days saved per new hire in
@@ -5985,6 +6162,7 @@ <h2>How you know it's working.</h2>
59856162
knowledge rather than requiring new retrieval, reconstruction, or escalation. High reuse rates indicate
59866163
that classification is working and the estate is genuinely navigable.</div>
59876164
<div class="kpi-signal kpi-signal--warn">
6165+
<div class="kpi-signal-type">Warning</div>
59886166
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">What it indicates</div>
59896167
<div class="kpi-signal-val">Low reuse despite high coverage signals taxonomy misalignment. High reuse with
59906168
declining freshness signals the estate is being used but not maintained - a compounding risk.</div>
@@ -6008,6 +6186,7 @@ <h2>How you know it's working.</h2>
60086186
the same analysis or deliverable. Calculated as reuse events multiplied by average asset creation time and
60096187
blended rate - calibrated to the organisation.</div>
60106188
<div class="kpi-signal kpi-signal--warn">
6189+
<div class="kpi-signal-type">Warning</div>
60116190
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">The signal to watch</div>
60126191
<div class="kpi-signal-val">Rising reuse with flat external spend indicates the savings are real. Flat
60136192
reuse with rising external spend indicates coverage gaps that cost money.</div>
@@ -6018,6 +6197,7 @@ <h2>How you know it's working.</h2>
60186197
<div class="kpi-desc">Time from start date to independent contribution in role-relevant workflows that
60196198
depend on governed knowledge access.</div>
60206199
<div class="kpi-signal kpi-signal--risk">
6200+
<div class="kpi-signal-type">At Risk</div>
60216201
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">Failure signal</div>
60226202
<div class="kpi-signal-val">If onboarding time stays flat while retrieval quality improves, local adoption
60236203
or workflow integration is failing.</div>
@@ -6028,6 +6208,7 @@ <h2>How you know it's working.</h2>
60286208
<div class="kpi-desc">Reduction in vendor or consultancy spend for questions that can be answered from
60296209
internal governed knowledge.</div>
60306210
<div class="kpi-signal kpi-signal--risk">
6211+
<div class="kpi-signal-type">At Risk</div>
60316212
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">Failure signal</div>
60326213
<div class="kpi-signal-val">Repeated external purchases following high-volume internal zero-result queries
60336214
indicate unresolved coverage gaps.</div>
@@ -6051,6 +6232,7 @@ <h2>How you know it's working.</h2>
60516232
people hold the relevant expertise. A domain where only one or two people are the recognised source of
60526233
truth is a concentration risk - regardless of whether that knowledge has been documented.</div>
60536234
<div class="kpi-signal kpi-signal--risk">
6235+
<div class="kpi-signal-type">At Risk</div>
60546236
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">When it becomes urgent</div>
60556237
<div class="kpi-signal-val">Concentration risk is invisible until it crystallises - a departure, a health
60566238
event, a reorg. Tracking it continuously enables deliberate mitigation before the loss occurs.</div>
@@ -6062,6 +6244,7 @@ <h2>How you know it's working.</h2>
60626244
without manual intervention. A declining rate signals the estate is evolving faster than the
60636245
classification model.</div>
60646246
<div class="kpi-signal kpi-signal--warn">
6247+
<div class="kpi-signal-type">Warning</div>
60656248
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">The signal to watch</div>
60666249
<div class="kpi-signal-val">High alignment with low retrieval success means the taxonomy is consistent but
60676250
wrong. Both must be tracked together.</div>
@@ -6072,6 +6255,7 @@ <h2>How you know it's working.</h2>
60726255
<div class="kpi-desc">The rate at which knowledge leaves the estate without capture - through departures,
60736256
project completions, or system retirements where no elicitation or transfer has occurred.</div>
60746257
<div class="kpi-signal kpi-signal--risk">
6258+
<div class="kpi-signal-type">At Risk</div>
60756259
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">The compounding risk</div>
60766260
<div class="kpi-signal-val">Knowledge loss is almost never measured in real time. By the time it registers
60776261
as a problem, the knowledge is already gone. This metric is most valuable as a lead indicator.</div>
@@ -6082,6 +6266,7 @@ <h2>How you know it's working.</h2>
60826266
<div class="kpi-desc">The proportion of material decisions that include a complete attribution trail showing
60836267
which assets and contributors influenced the decision.</div>
60846268
<div class="kpi-signal kpi-signal--risk">
6269+
<div class="kpi-signal-type">At Risk</div>
60856270
<div class="kpi-signal-bars"><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div><div class="kpi-signal-bar"></div></div><div class="kpi-signal-label">Failure signal</div>
60866271
<div class="kpi-signal-val">Low coverage means value cannot be credited and accountability cannot be
60876272
audited, which weakens both incentives and governance.</div>

0 commit comments

Comments
 (0)