From c61509e40442f8d330b4908b7c072ee8d591c8f4 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Sun, 19 Oct 2025 15:50:50 +1300
Subject: [PATCH] fix(ui): restore visible icons in Framework Capabilities
 cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SUMMARY:
Fixed missing icons/diagrams in Framework Capabilities section caused
by duplicate class attributes overwriting background gradients.

ISSUE:
All 6 capability cards had duplicate class attributes:
  <div class="w-14..." class="bg-gradient-service-X">
The second class attribute overwrote the first, losing all sizing and
layout classes, leaving only the gradient (which has no dimensions).

FIX:
Merged duplicate class attributes into single declarations:
- Instruction: Added bg-gradient-service-instruction to main class list
- Validator: Added bg-gradient-service-validator to main class list
- Boundary: Added bg-gradient-service-boundary to main class list
- Pressure: Added bg-gradient-service-pressure to main class list
- Metacognitive: Added bg-gradient-service-metacognitive to main class list
- Deliberation: Added bg-gradient-service-deliberation to main class list

IMPACT:
Icons now display properly with colored gradient backgrounds:
- Indigo (InstructionPersistence)
- Purple (CrossReferenceValidator)
- Green (BoundaryEnforcer)
- Amber (ContextPressureMonitor)
- Rose (MetacognitiveVerifier)
- Teal (PluralisticDeliberation)

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/index.html b/public/index.html
index fa366fa7..ee59c4d3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -262,7 +262,7 @@ Navigate the business case, compliance requirements, and competitive advantages
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 
         <div class="card-base card-interactive card-service instruction animate-on-scroll" data-animation="slide-up" data-stagger="100">
-          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" class="bg-gradient-service-instruction">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-instruction">
             <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
             </svg>
@@ -274,7 +274,7 @@ Quadrant-based classification (STR/OPS/TAC/SYS/STO) with time-persistence metada
         </div>
 
         <div class="card-base card-interactive card-service validator animate-on-scroll" data-animation="slide-up" data-stagger="200">
-          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" class="bg-gradient-service-validator">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-validator">
             <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
             </svg>
@@ -286,7 +286,7 @@ Validates AI actions against explicit user instructions to prevent pattern-based
         </div>
 
         <div class="card-base card-interactive card-service boundary animate-on-scroll" data-animation="slide-up" data-stagger="300">
-          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" class="bg-gradient-service-boundary">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-boundary">
             <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
             </svg>
@@ -298,7 +298,7 @@ Implements Tractatus 12.1-12.7 boundaries - values decisions architecturally req
         </div>
 
         <div class="card-base card-interactive card-service pressure animate-on-scroll" data-animation="slide-up" data-stagger="400">
-          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" class="bg-gradient-service-pressure">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-pressure">
             <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
             </svg>
@@ -310,7 +310,7 @@ Detects degraded operating conditions (token pressure, errors, complexity) and a
         </div>
 
         <div class="card-base card-interactive card-service metacognitive animate-on-scroll" data-animation="slide-up" data-stagger="500">
-          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" class="bg-gradient-service-metacognitive">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-metacognitive">
             <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
             </svg>
@@ -322,7 +322,7 @@ AI self-checks alignment, coherence, safety before execution - structural pause-
         </div>
 
         <div class="card-base card-interactive card-service deliberation animate-on-scroll" data-animation="slide-up" data-stagger="600">
-          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4" class="bg-gradient-service-deliberation">
+          <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-4 bg-gradient-service-deliberation">
             <svg aria-hidden="true" class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
             </svg>