Skip to content

Commit e6641d0

Browse files
claudeclaude
committed
feat: visual treatment across homepage, framework, challenge
1 parent caccf67 commit e6641d0

3 files changed

Lines changed: 286 additions & 17 deletions

File tree

‎index.html‎

Lines changed: 135 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,100 @@
1616
rel="stylesheet">
1717
<script src="https://cdn.jsdelivr.net/npm/lucide@0.462.0/dist/umd/lucide.min.js" defer></script>
1818
<link rel="stylesheet" href="/assets/css/site.css?v=20260303-1">
19+
<style>
20+
/* ── HERO STAT ENHANCEMENTS ───────────────────────── */
21+
.stat-item {
22+
position: relative;
23+
overflow: hidden;
24+
}
25+
.stat-sparkline {
26+
position: absolute;
27+
bottom: 0; left: 0; right: 0;
28+
height: 40px;
29+
pointer-events: none;
30+
opacity: 0.18;
31+
}
32+
.stat-source {
33+
display: block;
34+
font-family: 'Space Grotesk', sans-serif;
35+
font-size: 9px;
36+
font-weight: 600;
37+
letter-spacing: 0.1em;
38+
text-transform: uppercase;
39+
color: rgba(255,255,255,0.25);
40+
margin-top: 6px;
41+
}
42+
.stat-bar-track {
43+
height: 2px;
44+
background: rgba(255,255,255,0.08);
45+
border-radius: 1px;
46+
margin-top: 8px;
47+
overflow: hidden;
48+
}
49+
.stat-bar-fill {
50+
height: 100%;
51+
border-radius: 1px;
52+
transform: scaleX(0);
53+
transform-origin: left;
54+
transition: transform 1.4s cubic-bezier(0.4,0,0.2,1);
55+
}
56+
.home-hero.vis-ready .stat-bar-fill { transform: scaleX(1); }
57+
58+
/* ── PILLAR CARDS ───────────────────────────────── */
59+
.pillar-card {
60+
position: relative;
61+
overflow: hidden;
62+
}
63+
.pillar-card::after {
64+
content: '';
65+
position: absolute;
66+
bottom: 0; left: 0; right: 0;
67+
height: 1px;
68+
background: linear-gradient(90deg, transparent, var(--p-color, rgba(34,185,220,0.4)), transparent);
69+
opacity: 0;
70+
transition: opacity 0.3s ease;
71+
}
72+
.pillar-card:hover::after { opacity: 1; }
73+
.pillar-card:nth-child(1) { --p-color: rgba(34,185,220,0.5); }
74+
.pillar-card:nth-child(2) { --p-color: rgba(103,212,135,0.5); }
75+
.pillar-card:nth-child(3) { --p-color: rgba(167,139,250,0.5); }
76+
.pillar-metric {
77+
display: flex;
78+
align-items: center;
79+
gap: 8px;
80+
margin-top: 14px;
81+
padding-top: 12px;
82+
border-top: 1px solid rgba(255,255,255,0.06);
83+
}
84+
.pillar-metric-val {
85+
font-family: 'Bricolage Grotesque', sans-serif;
86+
font-size: 20px;
87+
font-weight: 700;
88+
letter-spacing: -0.03em;
89+
color: var(--p-color, rgba(34,185,220,0.9));
90+
line-height: 1;
91+
}
92+
.pillar-metric-label {
93+
font-size: 11px;
94+
color: rgba(255,255,255,0.35);
95+
line-height: 1.4;
96+
}
97+
98+
/* ── CHAPTER CHIPS ───────────────────────────────── */
99+
.chapter-chip {
100+
position: relative;
101+
overflow: hidden;
102+
}
103+
.ch-num {
104+
font-family: 'Space Grotesk', sans-serif;
105+
font-size: 9px;
106+
font-weight: 700;
107+
color: rgba(255,255,255,0.2);
108+
letter-spacing: 0.08em;
109+
margin-bottom: 4px;
110+
display: block;
111+
}
112+
</style>
19113
</head>
20114

21115
<body class="home-landing">
@@ -55,10 +149,20 @@ <h1 class="fade-in visible">Introducing <span>Knowledge Intelligence</span></h1>
55149
<div class="stat-item">
56150
<span class="stat-value">84-91%</span>
57151
<p>of market value is tied to intangible assets rooted in organisational knowledge.</p>
152+
<span class="stat-source">Ocean Tomo, 2015–2020</span>
153+
<div class="stat-bar-track"><div class="stat-bar-fill" style="width:88%;background:var(--accent,#22b9dc)"></div></div>
154+
<svg class="stat-sparkline" viewBox="0 0 200 40" preserveAspectRatio="none" aria-hidden="true">
155+
<polyline points="0,35 30,30 60,25 90,18 130,12 170,8 200,5" fill="none" stroke="#22b9dc" stroke-width="1.5"/>
156+
</svg>
58157
</div>
59158
<div class="stat-item">
60159
<span class="stat-value">48%</span>
61160
<p>of leaders report critical knowledge loss each year.</p>
161+
<span class="stat-source">KMWorld, 2024</span>
162+
<div class="stat-bar-track"><div class="stat-bar-fill" style="width:48%;background:#e0bc56"></div></div>
163+
<svg class="stat-sparkline" viewBox="0 0 200 40" preserveAspectRatio="none" aria-hidden="true">
164+
<polyline points="0,10 40,14 80,18 110,24 150,30 200,35" fill="none" stroke="#e0bc56" stroke-width="1.5"/>
165+
</svg>
62166
</div>
63167
</aside>
64168
</div>
@@ -75,16 +179,28 @@ <h2 class="section-title">Three Core Capabilities</h2>
75179
<div class="pillar-icon-wrap"><i data-lucide="layers-3"></i></div>
76180
<h3>Clarity and Insight</h3>
77181
<p>Map the full knowledge landscape and make material gaps visible.</p>
182+
<div class="pillar-metric">
183+
<div class="pillar-metric-val">80%</div>
184+
<div class="pillar-metric-label">of knowledge estate is tacit and currently invisible</div>
185+
</div>
78186
</article>
79187
<article class="pillar-card fade-in">
80188
<div class="pillar-icon-wrap"><i data-lucide="shield-check"></i></div>
81189
<h3>Governance Framework</h3>
82190
<p>Establish ownership, controls, and accountability across the knowledge lifecycle.</p>
191+
<div class="pillar-metric">
192+
<div class="pillar-metric-val">8</div>
193+
<div class="pillar-metric-label">governed CKA attributes across 3 operating dimensions</div>
194+
</div>
83195
</article>
84196
<article class="pillar-card fade-in">
85197
<div class="pillar-icon-wrap"><i data-lucide="trending-up"></i></div>
86198
<h3>Strategic Impact</h3>
87199
<p>Strengthen decision quality and convert knowledge into durable advantage.</p>
200+
<div class="pillar-metric">
201+
<div class="pillar-metric-val">6–12mo</div>
202+
<div class="pillar-metric-label">signal lead time advantage over ungoverned alternatives</div>
203+
</div>
88204
</article>
89205
</div>
90206
</div>
@@ -99,25 +215,30 @@ <h2 class="section-title">Read by Chapter</h2>
99215
<p class="chapters-sub fade-in">Review each section independently to assess capability design, governance
100216
controls, and implementation risk.</p>
101217
<div class="chapter-grid">
102-
<a class="chapter-chip fade-in" href="/assets.html"><i data-lucide="layout-grid"></i><span>The
103-
Assets</span></a>
104-
<a class="chapter-chip fade-in" href="/challenge.html"><i data-lucide="triangle-alert"></i><span>The
105-
Challenge</span></a>
106-
<a class="chapter-chip fade-in" href="/whynow.html"><i data-lucide="clock-3"></i><span>Why Now</span></a>
107-
<a class="chapter-chip fade-in" href="/capability.html"><i data-lucide="star"></i><span>The
108-
Capability</span></a>
109-
<a class="chapter-chip fade-in" href="/framework.html"><i data-lucide="globe"></i><span>The
110-
Framework</span></a>
111-
<a class="chapter-chip fade-in" href="/decisions.html"><i data-lucide="grid-3x3"></i><span>The
112-
Decisions</span></a>
113-
<a class="chapter-chip fade-in" href="/measurement.html"><i data-lucide="chart-column"></i><span>The
114-
Measurement</span></a>
115-
<a class="chapter-chip fade-in" href="/barriers.html"><i data-lucide="ban"></i><span>The Barriers</span></a>
218+
<a class="chapter-chip fade-in" href="/assets.html"><span class="ch-num">01</span><i data-lucide="layout-grid"></i><span>The Assets</span></a>
219+
<a class="chapter-chip fade-in" href="/challenge.html"><span class="ch-num">02</span><i data-lucide="triangle-alert"></i><span>The Challenge</span></a>
220+
<a class="chapter-chip fade-in" href="/whynow.html"><span class="ch-num">03</span><i data-lucide="clock-3"></i><span>Why Now</span></a>
221+
<a class="chapter-chip fade-in" href="/capability.html"><span class="ch-num">04</span><i data-lucide="star"></i><span>The Capability</span></a>
222+
<a class="chapter-chip fade-in" href="/framework.html"><span class="ch-num">05</span><i data-lucide="globe"></i><span>The Framework</span></a>
223+
<a class="chapter-chip fade-in" href="/decisions.html"><span class="ch-num">06</span><i data-lucide="grid-3x3"></i><span>The Decisions</span></a>
224+
<a class="chapter-chip fade-in" href="/measurement.html"><span class="ch-num">07</span><i data-lucide="chart-column"></i><span>The Measurement</span></a>
225+
<a class="chapter-chip fade-in" href="/barriers.html"><span class="ch-num">08</span><i data-lucide="ban"></i><span>The Barriers</span></a>
116226
</div>
117227
</div>
118228
</section>
119229
</main>
120230
<script src="/assets/js/site.js?v=20260303-1" defer></script>
231+
<script>
232+
// Trigger stat bar animations when hero is visible
233+
(function(){
234+
var hero = document.querySelector('.home-hero');
235+
if (!hero) return;
236+
var io = new IntersectionObserver(function(e){
237+
if (e[0].isIntersecting) { hero.classList.add('vis-ready'); io.unobserve(hero); }
238+
}, { threshold: 0.3 });
239+
io.observe(hero);
240+
}());
241+
</script>
121242
</body>
122243

123244
</html>

‎pages/challenge.html‎

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,42 @@
1818
rel="stylesheet">
1919
<script src="https://cdn.jsdelivr.net/npm/lucide@0.462.0/dist/umd/lucide.min.js" defer></script>
2020
<link rel="stylesheet" href="/assets/css/site.css?v=20260303-1">
21+
<style>
22+
/* ── DIAGNOSTIC SEVERITY BAR ANIMATION ─────────────────── */
23+
.diag-sev-bar {
24+
transform: scaleX(0);
25+
transform-origin: left;
26+
transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
27+
}
28+
.diag-panel.vis .diag-sev-bar { transform: scaleX(1); }
29+
.diag-panel.vis .diag-row:nth-child(2) .diag-sev-bar { transition-delay: 0.1s; }
30+
.diag-panel.vis .diag-row:nth-child(3) .diag-sev-bar { transition-delay: 0.2s; }
31+
.diag-panel.vis .diag-row:nth-child(4) .diag-sev-bar { transition-delay: 0.3s; }
32+
.diag-panel.vis .diag-row:nth-child(5) .diag-sev-bar { transition-delay: 0.4s; }
33+
34+
/* ── STAT TRIO ENHANCEMENTS ────────────────────────────── */
35+
.ch-stat {
36+
position: relative;
37+
overflow: hidden;
38+
}
39+
.ch-stat-bar {
40+
height: 2px;
41+
margin-top: 10px;
42+
border-radius: 1px;
43+
overflow: hidden;
44+
background: rgba(255,255,255,0.06);
45+
}
46+
.ch-stat-bar-fill {
47+
height: 100%;
48+
border-radius: 1px;
49+
transform: scaleX(0);
50+
transform-origin: left;
51+
transition: transform 1.2s cubic-bezier(0.4,0,0.2,1);
52+
}
53+
.ch-stat-trio.vis .ch-stat-bar-fill { transform: scaleX(1); }
54+
.ch-stat-trio.vis .ch-stat:nth-child(2) .ch-stat-bar-fill { transition-delay: 0.2s; }
55+
.ch-stat-trio.vis .ch-stat:nth-child(3) .ch-stat-bar-fill { transition-delay: 0.4s; }
56+
</style>
2157
</head>
2258

2359
<body>
@@ -216,21 +252,24 @@ <h1>Why knowledge has resisted being governed until now.</h1>
216252
<div class="ch-stat-trio fade-in">
217253
<div class="ch-stat" data-accent="blue">
218254
<i data-lucide="building-2" aria-hidden="true"></i>
219-
<div class="ch-stat-num">84–91<span>%</span></div>
255+
<div class="ch-stat-num" id="stat-num-1">84–91<span>%</span></div>
220256
<p>of S&amp;P 500 market value is intangible — knowledge is its core driver.</p>
221257
<div class="ch-stat-src">Ocean Tomo, 2015–2020</div>
258+
<div class="ch-stat-bar"><div class="ch-stat-bar-fill" style="width:88%;background:rgba(34,185,220,0.7)"></div></div>
222259
</div>
223260
<div class="ch-stat" data-accent="warn">
224261
<i data-lucide="user-minus" aria-hidden="true"></i>
225-
<div class="ch-stat-num">48<span>%</span></div>
262+
<div class="ch-stat-num" id="stat-num-2">48<span>%</span></div>
226263
<p>of executives confirm critical knowledge leaves with departing people every year.</p>
227264
<div class="ch-stat-src">KMWorld, 2024</div>
265+
<div class="ch-stat-bar"><div class="ch-stat-bar-fill" style="width:48%;background:rgba(224,188,86,0.7)"></div></div>
228266
</div>
229267
<div class="ch-stat" data-accent="danger">
230268
<i data-lucide="shield-off" aria-hidden="true"></i>
231-
<div class="ch-stat-num">75<span>%</span></div>
269+
<div class="ch-stat-num" id="stat-num-3">75<span>%</span></div>
232270
<p>of leaders do not trust their own data enough to act on it with confidence.</p>
233271
<div class="ch-stat-src">Dataversity / Gartner, 2025</div>
272+
<div class="ch-stat-bar"><div class="ch-stat-bar-fill" style="width:75%;background:rgba(239,107,107,0.7)"></div></div>
234273
</div>
235274
</div>
236275

@@ -456,6 +495,19 @@ <h3>Confidence is absent from all current frameworks</h3>
456495
</a>
457496
</nav>
458497
<script src="/assets/js/site.js?v=20260303-1" defer></script>
498+
<script>
499+
(function(){
500+
var io = new IntersectionObserver(function(entries){
501+
entries.forEach(function(e){
502+
if (e.isIntersecting) { e.target.classList.add('vis'); io.unobserve(e.target); }
503+
});
504+
}, { threshold: 0.2 });
505+
var diag = document.querySelector('.diag-panel');
506+
var trio = document.querySelector('.ch-stat-trio');
507+
if (diag) io.observe(diag);
508+
if (trio) io.observe(trio);
509+
}());
510+
</script>
459511
</body>
460512

461513
</html>

0 commit comments

Comments
 (0)