Skip to content

Commit e5d936f

Browse files
CSVillainCSVillain
committed
Complete decorative icon aria-hidden attributes in barriers/failure scenarios
1 parent ae66f7e commit e5d936f

1 file changed

Lines changed: 40 additions & 39 deletions

File tree

‎index.html‎

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1010
<link
11-
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
11+
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
1212
rel="stylesheet">
1313
<script src="https://cdn.jsdelivr.net/npm/lucide@0.462.0/dist/umd/lucide.min.js" defer></script>
1414
<style>
@@ -150,6 +150,8 @@
150150
display: flex;
151151
align-items: center;
152152
gap: 14px;
153+
animation: heroSubFade 0.7s ease 0.05s forwards;
154+
opacity: 0;
153155
}
154156

155157
.hero-eyebrow::before {
@@ -178,6 +180,10 @@
178180
font-weight: 300;
179181
}
180182

183+
.hero-title-secondary {
184+
font-weight: 500;
185+
}
186+
181187
.hero-sub {
182188
font-size: 17px;
183189
color: var(--text2);
@@ -195,7 +201,7 @@
195201
margin: -18px 0 38px;
196202
padding: 18px 20px 16px;
197203
border: 1px solid var(--border);
198-
border-left: 0px solid var(--gold);
204+
border-left: 2px solid var(--gold);
199205
border-radius: 8px;
200206
background:
201207
radial-gradient(700px 220px at 0% 0%, rgba(0, 0, 0, 0.468), transparent 62%),
@@ -231,7 +237,7 @@
231237
padding: 7px 10px;
232238
border-radius: 999px;
233239
border: 1px solid var(--border2);
234-
background: rgba(221, 30, 30, 0.03);
240+
background: rgba(255, 255, 255, 0.03);
235241
font-size: 11px;
236242
color: var(--text2);
237243
line-height: 1.2;
@@ -242,17 +248,14 @@
242248
color: var(--text);
243249
}
244250

245-
.hero-eyebrow {
246-
animation: heroSubFade 0.7s ease 0.05s forwards;
247-
opacity: 0;
248-
}
249-
250251
.hero-divider {
251252
animation: heroSubFade 0.7s ease 1.8s forwards;
252253
opacity: 0;
253254
}
254255

255256
.hero-meta {
257+
display: flex;
258+
gap: 56px;
256259
animation: heroSubFade 0.7s ease 2.0s forwards;
257260
opacity: 0;
258261
}
@@ -269,12 +272,6 @@
269272
}
270273
}
271274

272-
/* can */
273-
.hero-meta {
274-
display: flex;
275-
gap: 56px;
276-
}
277-
278275
.hero-meta-item label {
279276
font-size: 10px;
280277
text-transform: uppercase;
@@ -297,6 +294,10 @@
297294
padding: 100px 80px;
298295
}
299296

297+
.sw--first {
298+
padding-top: 80px;
299+
}
300+
300301
.section-tag {
301302
font-family: 'Space Grotesk', sans-serif;
302303
font-size: 10px;
@@ -3335,7 +3336,7 @@
33353336
}
33363337

33373338
/* RESPONSIVE */
3338-
@media(max-width:900px) {
3339+
@media (max-width: 900px) {
33393340

33403341
.hero,
33413342
.sw {
@@ -3470,7 +3471,7 @@
34703471

34713472
}
34723473

3473-
@media(max-width:600px) {
3474+
@media (max-width: 600px) {
34743475
.kpi-grid {
34753476
grid-template-columns: 1fr;
34763477
}
@@ -4180,7 +4181,7 @@
41804181
}
41814182

41824183
/* ── RESPONSIVE ─────────────────────────────────────────────── */
4183-
@media(max-width:900px) {
4184+
@media (max-width: 900px) {
41844185
.div-full {
41854186
width: calc(100% - 48px);
41864187
}
@@ -4622,7 +4623,7 @@
46224623

46234624
<body>
46244625

4625-
<nav>
4626+
<nav aria-label="Main navigation">
46264627
<div class="nav-logo">Knowledge Intelligence</div>
46274628
<div class="nav-links">
46284629
<a href="#knowledge">The Assets</a>
@@ -4639,8 +4640,8 @@
46394640
<div class="hero-bg"></div>
46404641

46414642
<h1 id="hero-title" aria-label="Knowledge Intelligence"><span class="hero-title-word"
4642-
id="htw1">Knowledge</span><br><span class="hero-title-word" id="htw2"
4643-
style="color:var(--text3);font-weight:500;">Intelligence</span></h1>
4643+
id="htw1">Knowledge</span><br><span class="hero-title-word hero-title-secondary"
4644+
id="htw2">Intelligence</span></h1>
46444645
<p class="hero-sub">Making the case for a new strategic capability - and what it takes to finally see, measure, and
46454646
govern everything an organisation knows.</p>
46464647
<div class="hero-divider"></div>
@@ -4663,7 +4664,7 @@ <h1 id="hero-title" aria-label="Knowledge Intelligence"><span class="hero-title-
46634664
</div>
46644665

46654666
<!-- OPENING -->
4666-
<div class="sw" id="opening" style="padding-top:80px;">
4667+
<div class="sw sw--first" id="opening">
46674668
<div class="section-tag">Opening Statement</div>
46684669
<h2>Organisations have never been able to see everything they know.</h2>
46694670
<div class="opening-block fade-in">
@@ -5256,13 +5257,13 @@ <h2>Three conditions have converged to make this both necessary and possible.</h
52565257
</div>
52575258
<div class="journey-nodes">
52585259
<div class="journey-node" data-step="01" role="presentation" aria-hidden="true">
5259-
<span class="journey-core"><i class="journey-icon" data-lucide="network"></i></span>
5260+
<span class="journey-core"><i class="journey-icon" data-lucide="network" aria-hidden="true"></i></span>
52605261
</div>
52615262
<div class="journey-node" data-step="02" role="presentation" aria-hidden="true">
5262-
<span class="journey-core"><i class="journey-icon" data-lucide="cpu"></i></span>
5263+
<span class="journey-core"><i class="journey-icon" data-lucide="cpu" aria-hidden="true"></i></span>
52635264
</div>
52645265
<div class="journey-node" data-step="03" role="presentation" aria-hidden="true">
5265-
<span class="journey-core"><i class="journey-icon" data-lucide="shield-check"></i></span>
5266+
<span class="journey-core"><i class="journey-icon" data-lucide="shield-check" aria-hidden="true"></i></span>
52665267
</div>
52675268
</div>
52685269
</div>
@@ -5951,7 +5952,7 @@ <h2>Five decisions that Knowledge Intelligence makes newly possible.</h2>
59515952
<div class="case-header">
59525953
<div class="cn">01</div>
59535954
<div class="ctag">Strategic Timing</div>
5954-
<div class="case-icon"><i data-lucide="eye" class="lucide"></i></div>
5955+
<div class="case-icon"><i data-lucide="eye" class="lucide" aria-hidden="true"></i></div>
59555956
</div>
59565957
<div class="case-body">
59575958
<h3>Detecting emerging themes before they are named</h3>
@@ -5967,7 +5968,7 @@ <h3>Detecting emerging themes before they are named</h3>
59675968
<div class="case-header">
59685969
<div class="cn">02</div>
59695970
<div class="ctag">Risk</div>
5970-
<div class="case-icon"><i data-lucide="user-x" class="lucide"></i></div>
5971+
<div class="case-icon"><i data-lucide="user-x" class="lucide" aria-hidden="true"></i></div>
59715972
</div>
59725973
<div class="case-body">
59735974
<h3>Measuring concentration risk in the knowledge estate</h3>
@@ -5985,7 +5986,7 @@ <h3>Measuring concentration risk in the knowledge estate</h3>
59855986
<div class="case-header">
59865987
<div class="cn">03</div>
59875988
<div class="ctag">Concept Health</div>
5988-
<div class="case-icon"><i data-lucide="brain" class="lucide"></i></div>
5989+
<div class="case-icon"><i data-lucide="brain" class="lucide" aria-hidden="true"></i></div>
59895990
</div>
59905991
<div class="case-body">
59915992
<h3>Evidence-based evolution of strategic concepts</h3>
@@ -6001,7 +6002,7 @@ <h3>Evidence-based evolution of strategic concepts</h3>
60016002
<div class="case-header">
60026003
<div class="cn">04</div>
60036004
<div class="ctag">Confidence</div>
6004-
<div class="case-icon"><i data-lucide="shield-check" class="lucide"></i></div>
6005+
<div class="case-icon"><i data-lucide="shield-check" class="lucide" aria-hidden="true"></i></div>
60056006
</div>
60066007
<div class="case-body">
60076008
<h3>Governing confidence across the knowledge estate</h3>
@@ -6018,7 +6019,7 @@ <h3>Governing confidence across the knowledge estate</h3>
60186019
<div class="case-header">
60196020
<div class="cn">05</div>
60206021
<div class="ctag">External Alignment</div>
6021-
<div class="case-icon"><i data-lucide="arrow-left-right" class="lucide"></i></div>
6022+
<div class="case-icon"><i data-lucide="arrow-left-right" class="lucide" aria-hidden="true"></i></div>
60226023
</div>
60236024
<div class="case-body">
60246025
<h3>Deliberate alignment between internal knowledge and external context</h3>
@@ -6306,7 +6307,7 @@ <h2>Three shifts that cannot be delegated.</h2>
63066307
<div class="req-card req-card--asset">
63076308
<div class="req-icon-zone">
63086309
<div class="req-icon-ring"></div>
6309-
<i data-lucide="layers" class="req-icon"></i>
6310+
<i data-lucide="layers" class="req-icon" aria-hidden="true"></i>
63106311
</div>
63116312
<div class="req-before-zone">
63126313
<div class="req-from">From</div>
@@ -6325,7 +6326,7 @@ <h2>Three shifts that cannot be delegated.</h2>
63256326
<div class="req-card req-card--confidence">
63266327
<div class="req-icon-zone">
63276328
<div class="req-icon-ring"></div>
6328-
<i data-lucide="shield-check" class="req-icon"></i>
6329+
<i data-lucide="shield-check" class="req-icon" aria-hidden="true"></i>
63296330
</div>
63306331
<div class="req-before-zone">
63316332
<div class="req-from">From</div>
@@ -6343,7 +6344,7 @@ <h2>Three shifts that cannot be delegated.</h2>
63436344
<div class="req-card req-card--trajectory">
63446345
<div class="req-icon-zone">
63456346
<div class="req-icon-ring"></div>
6346-
<i data-lucide="trending-up" class="req-icon"></i>
6347+
<i data-lucide="trending-up" class="req-icon" aria-hidden="true"></i>
63476348
</div>
63486349
<div class="req-before-zone">
63496350
<div class="req-from">From</div>
@@ -6376,7 +6377,7 @@ <h2>The obstacles are real. They are not reasons to stop.</h2>
63766377
<div class="case-header">
63776378
<div class="cn">01</div>
63786379
<div class="ctag">Culture</div>
6379-
<div class="case-icon"><i data-lucide="users" class="lucide"></i></div>
6380+
<div class="case-icon"><i data-lucide="users" class="lucide" aria-hidden="true"></i></div>
63806381
</div>
63816382
<div class="barrier-severity">
63826383
<div class="barrier-severity-pips">
@@ -6401,7 +6402,7 @@ <h3>Knowledge hoarding is rational behaviour</h3>
64016402
<div class="case-header">
64026403
<div class="cn">02</div>
64036404
<div class="ctag">Complexity</div>
6404-
<div class="case-icon"><i data-lucide="layers" class="lucide"></i></div>
6405+
<div class="case-icon"><i data-lucide="layers" class="lucide" aria-hidden="true"></i></div>
64056406
</div>
64066407
<div class="barrier-severity">
64076408
<div class="barrier-severity-pips">
@@ -6427,7 +6428,7 @@ <h3>Knowledge estates are vast and varied</h3>
64276428
<div class="case-header">
64286429
<div class="cn">03</div>
64296430
<div class="ctag">Investment</div>
6430-
<div class="case-icon"><i data-lucide="hourglass" class="lucide"></i></div>
6431+
<div class="case-icon"><i data-lucide="hourglass" class="lucide" aria-hidden="true"></i></div>
64316432
</div>
64326433
<div class="barrier-severity">
64336434
<div class="barrier-severity-pips">
@@ -6453,7 +6454,7 @@ <h3>The returns are real but not immediate</h3>
64536454
<div class="case-header">
64546455
<div class="cn">04</div>
64556456
<div class="ctag">AI Dependency</div>
6456-
<div class="case-icon"><i data-lucide="cpu" class="lucide"></i></div>
6457+
<div class="case-icon"><i data-lucide="cpu" class="lucide" aria-hidden="true"></i></div>
64576458
</div>
64586459
<div class="barrier-severity">
64596460
<div class="barrier-severity-pips">
@@ -6531,7 +6532,7 @@ <h3 style="margin-top:44px;margin-bottom:14px;">Three failure scenarios to activ
65316532
<div class="case-header">
65326533
<div class="cn">A</div>
65336534
<div class="ctag">Technical</div>
6534-
<div class="case-icon"><i data-lucide="flame" class="lucide"></i></div>
6535+
<div class="case-icon"><i data-lucide="flame" class="lucide" aria-hidden="true"></i></div>
65356536
</div>
65366537
<div class="case-body">
65376538
<h3>Confidence drift from stale or conflicting sources</h3>
@@ -6545,7 +6546,7 @@ <h3>Confidence drift from stale or conflicting sources</h3>
65456546
<div class="case-header">
65466547
<div class="cn">B</div>
65476548
<div class="ctag">Governance</div>
6548-
<div class="case-icon"><i data-lucide="sliders-horizontal" class="lucide"></i></div>
6549+
<div class="case-icon"><i data-lucide="sliders-horizontal" class="lucide" aria-hidden="true"></i></div>
65496550
</div>
65506551
<div class="case-body">
65516552
<h3>Automation without clear thresholds or owners</h3>
@@ -6559,7 +6560,7 @@ <h3>Automation without clear thresholds or owners</h3>
65596560
<div class="case-header">
65606561
<div class="cn">C</div>
65616562
<div class="ctag">Cultural</div>
6562-
<div class="case-icon"><i data-lucide="user-minus" class="lucide"></i></div>
6563+
<div class="case-icon"><i data-lucide="user-minus" class="lucide" aria-hidden="true"></i></div>
65636564
</div>
65646565
<div class="case-body">
65656566
<h3>Low contribution because value is not credited</h3>

0 commit comments

Comments
 (0)