snow-flow 4.2.0 → 4.2.2

package/website/css/style.css

@@ -473,9 +473,15 @@ a.link-animated:hover::after {
 
 .hero-content {
   position: relative;
-  z-index: 2; /* Above the noise overlay */
+  z-index: 20; /* CONTRAST FIX: Higher z-index above all background elements */
   text-align: center;
   padding: var(--space-8);
+  /* READABILITY FIX: Semi-transparent dark backdrop for better text contrast */
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: var(--radius-2xl);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .hero-title {
@@ -485,6 +491,10 @@ a.link-animated:hover::after {
   margin-bottom: var(--space-6);
   position: relative;
   display: inline-block;
+  /* CONTRAST FIX: Ensure title is always readable */
+  color: var(--white);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.6);
+  z-index: 10;
 }
 
 @keyframes gradientShift {
@@ -495,10 +505,14 @@ a.link-animated:hover::after {
 
 .hero-subtitle {
   font-size: clamp(var(--font-lg), 2vw, var(--font-2xl));
-  color: var(--gray-400);
+  color: var(--gray-200); /* CONTRAST FIX: Lighter for better readability */
   margin-bottom: var(--space-10);
-  font-weight: 300;
+  font-weight: 400; /* Slightly bolder for better readability */
   letter-spacing: var(--tracking-wide);
+  /* READABILITY FIX: Add text shadow for contrast */
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  z-index: 10;
+  position: relative;
 }
 
 /* =========================================
@@ -520,8 +534,9 @@ a.link-animated:hover::after {
   position: absolute;
   border-radius: 50%;
   filter: blur(40px);
-  opacity: 0.5;
+  opacity: 0.2; /* CONTRAST FIX: Reduced opacity so they don't interfere with text */
   animation: float 20s infinite ease-in-out;
+  z-index: 1; /* Keep below text content */
 }
 
 .orb-1 {
@@ -598,7 +613,6 @@ a.link-animated:hover::after {
 /* Enhanced Logo */
 .hero-logo-container {
   margin-bottom: var(--space-8);
-  position: relative;
 }
 
 .logo-glow-container {
@@ -658,12 +672,17 @@ a.link-animated:hover::after {
 
 /* Enhanced Title */
 .gradient-text {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%);
+  /* CONTRAST FIX: Much brighter, more contrastive gradient */
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 25%, #e0f2fe 50%, #bfdbfe 75%, #ffffff 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   background-size: 200% auto;
   animation: gradient-animate 5s ease infinite;
+  /* FALLBACK: If gradient fails, show white text */
+  color: var(--white);
+  /* CONTRAST ENHANCEMENT: Text shadow visible through transparency */
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
 }
 
 @keyframes gradient-animate {
@@ -710,8 +729,11 @@ a.link-animated:hover::after {
 }
 
 .highlight-text {
-  color: #f5576c;
+  color: #ff6b7a; /* CONTRAST FIX: Brighter red for better visibility */
   font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* Better contrast */
+  position: relative;
+  z-index: 15;
 }
 
 /* Feature Pills */
@@ -724,14 +746,18 @@ a.link-animated:hover::after {
 }
 
 .pill {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.6); /* CONTRAST FIX: Darker background for better text visibility */
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3); /* Brighter border */
   padding: 0.5rem 1rem;
   border-radius: 50px;
   font-size: 0.85rem;
-  color: white;
+  color: var(--white); /* Ensure pure white text */
   animation: pill-intro 0.5s ease-out;
+  /* READABILITY FIX: Text shadow for extra contrast */
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  position: relative;
+  z-index: 15;
 }
 
 .pill-glow { animation: pill-glow 3s ease-in-out infinite; }
@@ -1119,6 +1145,7 @@ a.link-animated:hover::after {
   transform: translateX(-50%);
   text-align: center;
   animation: bounce 2s ease-in-out infinite;
+  z-index: 999;
 }
 
 .scroll-text {

package/website/css/title-layout-fix.css

@@ -0,0 +1,58 @@
+/* =========================================
+   TITLE LAYOUT EMERGENCY FIX
+   ========================================= */
+
+/* Override ALL conflicting CSS to force horizontal layout */
+.hero-title {
+  /* Reset to normal heading behavior */
+  display: block !important;
+  text-align: center !important;
+  margin: 0 auto !important;
+  width: 100% !important;
+  /* Remove any flexbox behavior that could stack vertically */
+  flex-direction: unset !important;
+  align-items: unset !important;
+  justify-content: unset !important;
+}
+
+/* Force letters to display horizontally inline - TIGHT SPACING */
+.title-letter {
+  /* CRITICAL: inline-block allows horizontal layout with animations */
+  display: inline-block !important;
+  /* Never let these become block or flex */
+  flex-direction: unset !important;
+  /* Keep letters side by side */
+  float: none !important;
+  /* TIGHTER letter spacing to fit in container */
+  margin-right: 0.02em !important; /* Much tighter spacing */
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+  /* White color for visibility */
+  color: var(--white) !important;
+  /* Strong text shadow for contrast */
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
+  /* RESPONSIVE: Scale with container */
+  transform: scale(1) !important;
+}
+
+/* Override any parent containers that might affect layout */
+.hero-content {
+  text-align: center !important;
+  /* Don't let flex affect title layout */
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Specifically target title to prevent inheritance issues */
+h1.hero-title {
+  line-height: 1.2 !important;
+  white-space: nowrap !important; /* Prevent text wrapping */
+}
+
+/* Version badge positioning fix */
+.version-badge {
+  /* Keep badge inline with title but slightly offset */
+  display: inline-block !important;
+  margin-left: 1rem !important;
+  vertical-align: top !important;
+}

package/website/css/ultimate-overlap-fix.css

@@ -0,0 +1,101 @@
+/* =========================================
+   ULTIMATE OVERLAP FIX - Nuclear Option
+   ========================================= */
+
+/* HERO - Maximum z-index protection */
+.hero {
+  position: relative !important;
+  z-index: 500 !important; /* Nuclear z-index level */
+  isolation: isolate !important;
+  transform-style: preserve-3d !important; /* Enable 3D context */
+}
+
+/* HERO CONTENT - Ultra high z-index */
+.hero-content {
+  position: relative !important;
+  z-index: 600 !important; /* Above everything except navbar */
+  transform: translateZ(10px) !important; /* Significantly forward */
+  isolation: isolate !important;
+}
+
+/* ALL SECTIONS - Force behind with multiple techniques */
+.section,
+#servers,
+#new-features,
+#docs,
+#install {
+  position: relative !important;
+  z-index: 1 !important; /* Much lower */
+  transform: translateZ(-10px) !important; /* Significantly behind */
+  /* Create negative space */
+  margin-top: 0 !important;
+  /* Prevent any upward movement */
+  will-change: auto !important;
+}
+
+/* SPECIFIC REVOLUTIONARY FEATURES FIX */
+#new-features {
+  z-index: 0 !important; /* Even lower */
+  transform: translateZ(-20px) !important; /* Far behind */
+  position: relative !important;
+  /* Prevent any layering tricks */
+  contain: layout style paint !important;
+}
+
+/* NAVBAR - Absolute highest */
+.navbar {
+  z-index: 9999 !important; /* Maximum */
+  position: fixed !important;
+  isolation: isolate !important;
+}
+
+/* Version badge - ensure it stays with hero */
+.version-badge {
+  z-index: 700 !important; /* Above hero content */
+  position: absolute !important;
+}
+
+/* Hero background - behind everything */
+.hero-bg-animation,
+.floating-orb {
+  z-index: 0 !important;
+  transform: translateZ(-5px) !important;
+}
+
+/* Additional protection - force rendering order */
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  background: transparent;
+  pointer-events: none;
+}
+
+/* Mobile specific fixes */
+@media (max-width: 768px) {
+  .hero {
+    z-index: 500 !important;
+  }
+  
+  .hero-content {
+    z-index: 600 !important;
+  }
+  
+  .section {
+    z-index: 1 !important;
+    transform: translateZ(-10px) !important;
+  }
+}
+
+/* Debugging - remove in production */
+.hero {
+  /* border: 2px solid red !important; /* Visual debug */
+}
+
+.section {
+  /* border: 2px solid blue !important; /* Visual debug */
+}

package/website/css/website-hero-consistency.css

@@ -0,0 +1,101 @@
+/* =========================================
+   WEBSITE-WIDE HERO CONSISTENCY
+   ========================================= */
+
+/* Apply hero's beautiful design language to all sections */
+
+/* All sections get hero-inspired backgrounds */
+.section {
+  background: 
+    radial-gradient(at 20% 80%, hsla(240, 60%, 20%, 0.2) 0%, transparent 50%),
+    radial-gradient(at 80% 20%, hsla(260, 60%, 25%, 0.2) 0%, transparent 50%),
+    radial-gradient(at 40% 40%, hsla(280, 60%, 15%, 0.2) 0%, transparent 50%),
+    var(--black) !important;
+  position: relative !important;
+}
+
+/* Hero-inspired section headers */
+.section h2,
+.section h3 {
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 50%, #e0f2fe 100%) !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
+  text-align: center !important;
+  font-family: var(--font-sans) !important;
+}
+
+/* All cards get hero glass effect */
+.card {
+  background: rgba(255, 255, 255, 0.08) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  border-radius: var(--radius-2xl) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
+  transition: all 0.3s ease !important;
+}
+
+.card:hover {
+  background: rgba(255, 255, 255, 0.12) !important;
+  border-color: rgba(255, 255, 255, 0.25) !important;
+  transform: translateY(-4px) !important;
+  box-shadow: 
+    0 16px 48px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
+}
+
+/* Hero-inspired text styling throughout */
+.section p {
+  color: var(--gray-200) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
+}
+
+/* All buttons get hero styling */
+.btn:not(.btn-hero-primary):not(.btn-hero-secondary) {
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: var(--white) !important;
+  border: 2px solid rgba(255, 255, 255, 0.3) !important;
+  backdrop-filter: blur(15px) !important;
+  border-radius: var(--radius-xl) !important;
+  padding: var(--space-3) var(--space-6) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
+  transition: all 0.3s ease !important;
+}
+
+.btn:not(.btn-hero-primary):not(.btn-hero-secondary):hover {
+  background: rgba(255, 255, 255, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.5) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Navigation gets hero glass effect */
+.navbar {
+  background: rgba(0, 0, 0, 0.7) !important;
+  backdrop-filter: blur(20px) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Footer gets hero styling */
+footer {
+  background: 
+    radial-gradient(at 50% 0%, hsla(240, 60%, 15%, 0.3) 0%, transparent 50%),
+    var(--black) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+/* Code blocks get hero glass effect */
+.code-block,
+pre,
+code {
+  background: rgba(0, 0, 0, 0.6) !important;
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  backdrop-filter: blur(10px) !important;
+  border-radius: var(--radius-lg) !important;
+  color: var(--gray-100) !important;
+}

package/website/enterprise-features.html

@@ -0,0 +1,147 @@
+<!-- Enterprise Features Showcase for v4.2.0 -->
+<section id="enterprise" class="section" style="background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%); padding: var(--space-32) 0;">
+    <div class="container">
+        <div class="text-center" style="margin-bottom: var(--space-20);">
+            <h2 style="font-size: var(--font-6xl); font-weight: 900; color: var(--white); margin-bottom: var(--space-4);">
+                🏢 Enterprise Edition Features
+            </h2>
+            <p style="font-size: var(--font-xl); color: var(--gray-300); margin-bottom: var(--space-8);">
+                Professional ServiceNow automation for large organizations
+            </p>
+            <div class="enterprise-badge" style="display: inline-block; background: linear-gradient(45deg, #10b981, #059669); padding: var(--space-2) var(--space-6); border-radius: var(--radius-full); font-weight: 700; color: white;">
+                ✨ NEW in v4.2.0 ENTERPRISE
+            </div>
+        </div>
+
+        <!-- Enterprise Features Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-3" style="gap: var(--space-8); margin-bottom: var(--space-16);">
+            
+            <!-- ITAM Feature -->
+            <div class="enterprise-card" style="background: var(--gradient-glass); padding: var(--space-8); border-radius: var(--radius-2xl); border: 1px solid var(--gray-700);">
+                <div class="feature-icon" style="font-size: var(--font-5xl); margin-bottom: var(--space-4);">🏢</div>
+                <h3 style="color: var(--white); font-size: var(--font-2xl); font-weight: 700; margin-bottom: var(--space-3);">
+                    IT Asset Management
+                </h3>
+                <p style="color: var(--gray-300); margin-bottom: var(--space-6);">
+                    Complete asset lifecycle automation with license optimization and compliance reporting
+                </p>
+                
+                <div class="feature-tools" style="margin-bottom: var(--space-6);">
+                    <h4 style="color: var(--white); font-size: var(--font-lg); margin-bottom: var(--space-3);">6 Enterprise Tools:</h4>
+                    <ul style="list-style: none; padding: 0;">
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_create_asset</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_manage_software_license</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_track_asset_lifecycle</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_asset_compliance_report</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_optimize_licenses</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm);">✅ snow_asset_discovery</li>
+                    </ul>
+                </div>
+                
+                <div class="enterprise-benefits" style="background: var(--green-900); padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--green-700);">
+                    <strong style="color: var(--green-400);">Enterprise Value:</strong>
+                    <p style="color: var(--green-200); font-size: var(--font-sm); margin-top: var(--space-1);">
+                        15-25% asset cost reduction • 90% automated compliance • Real-time license optimization
+                    </p>
+                </div>
+            </div>
+
+            <!-- SecOps Feature -->
+            <div class="enterprise-card" style="background: var(--gradient-glass); padding: var(--space-8); border-radius: var(--radius-2xl); border: 1px solid var(--gray-700);">
+                <div class="feature-icon" style="font-size: var(--font-5xl); margin-bottom: var(--space-4);">🛡️</div>
+                <h3 style="color: var(--white); font-size: var(--font-2xl); font-weight: 700; margin-bottom: var(--space-3);">
+                    Security Operations
+                </h3>
+                <p style="color: var(--gray-300); margin-bottom: var(--space-6);">
+                    Advanced security incident response with threat intelligence and automated SOAR capabilities
+                </p>
+                
+                <div class="feature-tools" style="margin-bottom: var(--space-6);">
+                    <h4 style="color: var(--white); font-size: var(--font-lg); margin-bottom: var(--space-3);">6 Security Tools:</h4>
+                    <ul style="list-style: none; padding: 0;">
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_create_security_incident</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_analyze_threat_intelligence</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_execute_security_playbook</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_vulnerability_risk_assessment</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_security_dashboard</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm);">✅ snow_automate_threat_response</li>
+                    </ul>
+                </div>
+                
+                <div class="enterprise-benefits" style="background: var(--red-900); padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--red-700);">
+                    <strong style="color: var(--red-400);">Security Value:</strong>
+                    <p style="color: var(--red-200); font-size: var(--font-sm); margin-top: var(--space-1);">
+                        40-60% faster incident response • Automated threat correlation • Real-time SOC dashboard
+                    </p>
+                </div>
+            </div>
+
+            <!-- Notifications Feature -->
+            <div class="enterprise-card" style="background: var(--gradient-glass); padding: var(--space-8); border-radius: var(--radius-2xl); border: 1px solid var(--gray-700);">
+                <div class="feature-icon" style="font-size: var(--font-5xl); margin-bottom: var(--space-4);">📨</div>
+                <h3 style="color: var(--white); font-size: var(--font-2xl); font-weight: 700; margin-bottom: var(--space-3);">
+                    Notification Framework
+                </h3>
+                <p style="color: var(--gray-300); margin-bottom: var(--space-6);">
+                    Enterprise multi-channel notification system with templates, analytics, and preference management
+                </p>
+                
+                <div class="feature-tools" style="margin-bottom: var(--space-6);">
+                    <h4 style="color: var(--white); font-size: var(--font-lg); margin-bottom: var(--space-3);">6 Communication Tools:</h4>
+                    <ul style="list-style: none; padding: 0;">
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_send_notification</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_create_notification_template</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_notification_preferences</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_emergency_broadcast</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm); margin-bottom: var(--space-1);">✅ snow_notification_analytics</li>
+                        <li style="color: var(--gray-400); font-size: var(--font-sm);">✅ snow_schedule_notification</li>
+                    </ul>
+                </div>
+                
+                <div class="enterprise-benefits" style="background: var(--blue-900); padding: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--blue-700);">
+                    <strong style="color: var(--blue-400);">Communication Value:</strong>
+                    <p style="color: var(--blue-200); font-size: var(--font-sm); margin-top: var(--space-1);">
+                        Multi-channel delivery • Template automation • Emergency broadcasting • Analytics insights
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Performance Improvements Section -->
+        <div class="enterprise-improvements" style="background: var(--gradient-glass); padding: var(--space-12); border-radius: var(--radius-2xl); border: 1px solid var(--gray-700); margin-bottom: var(--space-16);">
+            <h3 style="color: var(--white); font-size: var(--font-3xl); font-weight: 700; text-align: center; margin-bottom: var(--space-8);">
+                🚀 v4.2.0 Performance Optimizations
+            </h3>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4" style="gap: var(--space-6);">
+                <div class="perf-metric" style="text-align: center;">
+                    <div style="font-size: var(--font-4xl); font-weight: 900; color: var(--green-400); margin-bottom: var(--space-2);">-10,135</div>
+                    <p style="color: var(--gray-400); font-size: var(--font-sm);">Lines of Code Removed</p>
+                </div>
+                <div class="perf-metric" style="text-align: center;">
+                    <div style="font-size: var(--font-4xl); font-weight: 900; color: var(--blue-400); margin-bottom: var(--space-2);">85%</div>
+                    <p style="color: var(--gray-400); font-size: var(--font-sm);">Memory Allocation Reduction</p>
+                </div>
+                <div class="perf-metric" style="text-align: center;">
+                    <div style="font-size: var(--font-4xl); font-weight: 900; color: var(--purple-400); margin-bottom: var(--space-2);">5MB+</div>
+                    <p style="color: var(--gray-400); font-size: var(--font-sm);">Widget Support (vs 30k)</p>
+                </div>
+                <div class="perf-metric" style="text-align: center;">
+                    <div style="font-size: var(--font-4xl); font-weight: 900; color: var(--yellow-400); margin-bottom: var(--space-2);">200k</div>
+                    <p style="color: var(--gray-400); font-size: var(--font-sm);">Token Limits (vs 20k)</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Summary -->
+        <div class="text-center">
+            <p style="font-size: var(--font-2xl); color: var(--white); font-weight: 700; margin-bottom: var(--space-4);">
+                From Framework to Complete Enterprise Platform
+            </p>
+            <p style="color: var(--gray-400); font-size: var(--font-lg);">
+                Snow-Flow v4.2.0 ENTERPRISE: 355+ tools across 23 specialized MCP servers with memory optimization, 
+                massive widget support, and complete enterprise ServiceNow coverage including ITAM, SecOps, and multi-channel notifications.
+            </p>
+        </div>
+    </div>
+</section>