fix: Remove green tint from website, add Docs link to navbar

- Change --bg from #0a1a0f (green-tinted) to #000000 (pure black)
- Reduce QuantumCanvas opacity and green glow intensity
- Reduce radial-glow and box-shadow green values
- Add Docs link to navigation pointing to documentation site
- Add Documentation link to footer

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: gHashTag

website/src/components/Footer.tsx

@@ -54,6 +54,11 @@ export default function Footer() {
               <li><a href="#solution" style={{ color: 'var(--text)', textDecoration: 'none', fontSize: '0.85rem', opacity: 0.7, transition: 'opacity 0.2s' }}>{t.nav?.solution || 'Solution'}</a></li>
               <li><a href="#technology" style={{ color: 'var(--text)', textDecoration: 'none', fontSize: '0.85rem', opacity: 0.7, transition: 'opacity 0.2s' }}>{t.nav?.technology || 'Technology'}</a></li>
               <li><a href="#invest" style={{ color: 'var(--text)', textDecoration: 'none', fontSize: '0.85rem', opacity: 0.7, transition: 'opacity 0.2s' }}>{t.nav?.invest || 'Invest'}</a></li>
+              <li>
+                <a href="https://gHashTag.github.io/trinity/" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '0.85rem', fontWeight: 600, transition: 'opacity 0.2s' }}>
+                  Documentation
+                </a>
+              </li>
             </ul>
           </div>
 

website/src/components/Navigation.tsx

@@ -38,6 +38,14 @@ export default memo(function Navigation() {
           {item}
         </a>
       ))}
+      <a
+        href="https://gHashTag.github.io/trinity/"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ color: 'var(--accent)', fontWeight: 600 }}
+      >
+        Docs
+      </a>
       <LanguageSwitcher />
     </nav>
   )

website/src/components/QuantumCanvas.tsx

@@ -102,7 +102,7 @@ export default function QuantumCanvas({ mode, particleCount = 1500, interactive
       const scale = Math.min(w, h) / 800;
 
       // Background grid
-      ctx.strokeStyle = 'rgba(0, 255, 136, 0.05)';
+      ctx.strokeStyle = 'rgba(0, 255, 136, 0.02)';
       ctx.lineWidth = 1;
       for (let x = 0; x < w; x += 50) {
         ctx.beginPath();
@@ -121,8 +121,8 @@ export default function QuantumCanvas({ mode, particleCount = 1500, interactive
       const coreRadius = 120 * scale;
 
       // Outer rotating ring
-      ctx.strokeStyle = 'rgba(0, 255, 136, 0.3)';
-      ctx.lineWidth = 2;
+      ctx.strokeStyle = 'rgba(0, 255, 136, 0.15)';
+      ctx.lineWidth = 1;
       ctx.beginPath();
       ctx.arc(cx, cy, coreRadius + 40, 0, TAU);
       ctx.stroke();
@@ -141,15 +141,15 @@ export default function QuantumCanvas({ mode, particleCount = 1500, interactive
 
         // Node glow
         const grad = ctx.createRadialGradient(x, y, 0, x, y, 50 * scale);
-        grad.addColorStop(0, nodes[i].color + '40');
+        grad.addColorStop(0, nodes[i].color + '20');
         grad.addColorStop(1, 'transparent');
         ctx.fillStyle = grad;
         ctx.beginPath();
         ctx.arc(x, y, 50 * scale, 0, TAU);
         ctx.fill();
 
         // Node circle
-        ctx.fillStyle = nodes[i].color + '80';
+        ctx.fillStyle = nodes[i].color + '40';
         ctx.beginPath();
         ctx.arc(x, y, 35 * scale, 0, TAU);
         ctx.fill();

website/src/index.css

@@ -1,5 +1,5 @@
 :root {
-  --bg: #0a1a0f;
+  --bg: #000000;
   --accent: #00FF88;
   --accent-dark: #00CC66;
   --text: #FFFFFF;
@@ -33,7 +33,7 @@ body {
   inset: 0;
   z-index: -10;
   pointer-events: none;
-  opacity: 0.6;
+  opacity: 0.35;
 }
 
 /* Typography Fluid Design */
@@ -139,7 +139,7 @@ section {
 .premium-card:hover {
   border-color: var(--accent) !important;
   transform: translateY(-2px);
-  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.05);
 }
 
 /* Buttons: Pill Style */
@@ -382,7 +382,7 @@ nav a.active {
   transform: translate(-50%, -50%);
   width: 100%;
   height: 100%;
-  background: radial-gradient(circle at center, rgba(0, 255, 136, 0.1) 0%, transparent 60%);
+  background: radial-gradient(circle at center, rgba(0, 255, 136, 0.03) 0%, transparent 60%);
   z-index: -1;
   pointer-events: none;
 }
@@ -629,7 +629,7 @@ input[type="range"]::-webkit-slider-thumb {
 
 .btn-animated:hover {
   transform: translateY(-2px) scale(1.05);
-  box-shadow: 0 10px 20px rgba(0, 255, 136, 0.2);
+  box-shadow: 0 10px 20px rgba(0, 255, 136, 0.08);
 }
 
 .btn-animated:active {