snow-flow 4.2.0 → 4.2.2

package/website/css/mobile-hero-fix.css

@@ -0,0 +1,215 @@
+/* =========================================
+   MOBILE HERO FIXES - Complete Mobile Redesign
+   ========================================= */
+
+/* Mobile hero specific improvements */
+@media (max-width: 768px) {
+  /* Hero container - better mobile proportions */
+  .hero {
+    min-height: 100vh !important;
+    padding: var(--space-4) 0 !important;
+  }
+  
+  /* Hero content - mobile optimized */
+  .hero-content {
+    padding: var(--space-8) var(--space-3) var(--space-6) !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  
+  /* SNOW-FLOW title - much better mobile sizing */
+  .hero-title {
+    font-size: clamp(var(--font-2xl), 8vw, var(--font-4xl)) !important;
+    margin: var(--space-4) 0 var(--space-6) !important;
+    line-height: 1.1 !important;
+    /* Better mobile letter spacing */
+    letter-spacing: -0.01em !important;
+  }
+  
+  /* Title letters - mobile optimized */
+  .title-letter {
+    margin-right: 0.08em !important; /* Better mobile spacing */
+  }
+  
+  /* Version badge - mobile friendly */
+  .version-badge {
+    font-size: var(--font-sm) !important;
+    padding: var(--space-1) var(--space-3) !important;
+    top: -10px !important;
+    right: -15px !important;
+    transform: rotate(-3deg) scale(0.9) !important;
+  }
+  
+  /* Hero subtitle - mobile optimized */
+  .hero-subtitle {
+    font-size: clamp(var(--font-sm), 4vw, var(--font-lg)) !important;
+    margin-bottom: var(--space-6) !important;
+    padding: 0 var(--space-2) !important;
+    line-height: var(--leading-relaxed) !important;
+  }
+  
+  /* Feature pills - mobile stack */
+  .feature-pills {
+    flex-direction: column !important;
+    gap: var(--space-2) !important;
+    margin: var(--space-6) 0 !important;
+    align-items: center !important;
+  }
+  
+  .pill {
+    width: 100% !important;
+    max-width: 280px !important;
+    justify-content: center !important;
+    font-size: var(--font-sm) !important;
+    padding: var(--space-2) var(--space-4) !important;
+  }
+  
+  /* CTA buttons - mobile stack */
+  .hero-actions {
+    flex-direction: column !important;
+    gap: var(--space-3) !important;
+    margin: var(--space-8) 0 !important;
+    width: 100% !important;
+  }
+  
+  .btn-hero-primary,
+  .btn-hero-secondary {
+    width: 100% !important;
+    max-width: 300px !important;
+    padding: var(--space-3) var(--space-6) !important;
+    font-size: var(--font-base) !important;
+    justify-content: center !important;
+  }
+  
+  /* Hero stats - mobile optimized */
+  .hero-stats {
+    flex-direction: column !important;
+    gap: var(--space-3) !important;
+    padding: var(--space-4) !important;
+    margin: var(--space-8) auto var(--space-6) !important;
+    max-width: 320px !important;
+  }
+  
+  .stat-item {
+    width: 100% !important;
+    padding: var(--space-3) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    border-radius: var(--radius-lg) !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+  }
+  
+  .stat-divider {
+    width: 80% !important;
+    height: 1px !important;
+    margin: 0 auto !important;
+  }
+  
+  .stat-icon {
+    font-size: var(--font-lg) !important;
+    margin-bottom: var(--space-1) !important;
+  }
+  
+  .stat-number {
+    font-size: var(--font-2xl) !important;
+    margin-bottom: var(--space-1) !important;
+  }
+  
+  .stat-label {
+    font-size: var(--font-xs) !important;
+    margin-top: var(--space-1) !important;
+  }
+  
+  /* Mobile floating orbs - reduce interference */
+  .floating-orb {
+    opacity: 0.1 !important; /* Much more subtle on mobile */
+    filter: blur(60px) !important; /* More blur to reduce visual noise */
+  }
+  
+  /* Mobile navigation spacing */
+  .navbar {
+    padding: var(--space-2) 0 !important;
+  }
+  
+  .navbar-container {
+    padding: 0 var(--space-3) !important;
+  }
+}
+
+/* Extra small screens - ultra mobile optimization */
+@media (max-width: 480px) {
+  .hero {
+    min-height: 100vh !important;
+    padding: var(--space-2) 0 !important;
+  }
+  
+  .hero-content {
+    padding: var(--space-6) var(--space-2) var(--space-4) !important;
+  }
+  
+  .hero-title {
+    font-size: clamp(var(--font-lg), 6vw, var(--font-2xl)) !important;
+    margin: var(--space-3) 0 var(--space-4) !important;
+  }
+  
+  .title-letter {
+    margin-right: 0.04em !important;
+  }
+  
+  .version-badge {
+    font-size: var(--font-xs) !important;
+    padding: 4px 8px !important;
+    top: -8px !important;
+    right: -10px !important;
+  }
+  
+  .hero-subtitle {
+    font-size: var(--font-sm) !important;
+    padding: 0 var(--space-1) !important;
+    margin-bottom: var(--space-4) !important;
+  }
+  
+  .feature-pills {
+    gap: var(--space-1) !important;
+    margin: var(--space-4) 0 var(--space-6) !important;
+  }
+  
+  .pill {
+    max-width: 240px !important;
+    font-size: var(--font-xs) !important;
+    padding: var(--space-1) var(--space-3) !important;
+  }
+  
+  .hero-actions {
+    margin: var(--space-6) 0 var(--space-8) !important;
+    gap: var(--space-2) !important;
+  }
+  
+  .btn-hero-primary,
+  .btn-hero-secondary {
+    max-width: 260px !important;
+    font-size: var(--font-sm) !important;
+    padding: var(--space-2) var(--space-4) !important;
+  }
+  
+  .hero-stats {
+    max-width: 260px !important;
+    padding: var(--space-3) !important;
+    margin: var(--space-6) auto var(--space-4) !important;
+  }
+  
+  .stat-item {
+    padding: var(--space-2) !important;
+  }
+  
+  .stat-icon {
+    font-size: var(--font-base) !important;
+  }
+  
+  .stat-number {
+    font-size: var(--font-xl) !important;
+  }
+  
+  .stat-label {
+    font-size: 10px !important;
+  }
+}

package/website/css/navbar-hero-styling.css

@@ -0,0 +1,70 @@
+/* =========================================
+   NAVBAR HERO-INSPIRED STYLING
+   ========================================= */
+
+/* Navbar gets hero glass effect and consistency */
+.navbar {
+  background: rgba(0, 0, 0, 0.8) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
+  position: fixed !important;
+  top: 0 !important;
+  width: 100% !important;
+  z-index: 900 !important;
+  transition: all 0.3s ease !important;
+}
+
+.navbar.scrolled {
+  background: rgba(0, 0, 0, 0.95) !important;
+  backdrop-filter: blur(25px) !important;
+  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+/* Navbar logo styling */
+.navbar-logo {
+  color: var(--white) !important;
+  font-family: var(--font-sans) !important;
+  font-weight: 700 !important;
+  font-size: var(--font-xl) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
+}
+
+.logo-mountain {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
+}
+
+/* Navbar version tag - hero inspired */
+.navbar .version-tag {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+  color: var(--white) !important;
+  padding: var(--space-1) var(--space-2) !important;
+  border-radius: var(--radius-md) !important;
+  font-size: var(--font-xs) !important;
+  font-weight: 600 !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  margin-left: var(--space-2) !important;
+}
+
+/* Navigation links */
+.navbar-menu a {
+  color: var(--gray-200) !important;
+  font-family: var(--font-sans) !important;
+  font-weight: 500 !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
+  transition: all 0.3s ease !important;
+}
+
+.navbar-menu a:hover {
+  color: var(--white) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
+}
+
+/* Mobile menu hero styling */
+.navbar-menu.active {
+  background: rgba(0, 0, 0, 0.95) !important;
+  backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: var(--radius-xl) !important;
+}

package/website/css/reference-text-contrast.css

@@ -0,0 +1,101 @@
+/* =========================================
+   REFERENCE PAGE TEXT CONTRAST FIXES
+   ========================================= */
+
+/* Fix black text on black background issues */
+
+/* All MCP server content - force white text */
+.mcp-server,
+.mcp-server * {
+  color: var(--white) !important;
+}
+
+.server-title {
+  color: var(--white) !important;
+  font-weight: 700 !important;
+}
+
+.server-purpose {
+  color: var(--gray-200) !important;
+  font-style: italic !important;
+}
+
+/* Tool cards - proper contrast */
+.tool-card {
+  background: rgba(255, 255, 255, 0.08) !important;
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  color: var(--white) !important;
+}
+
+.tool-name {
+  color: var(--white) !important;
+  font-weight: 600 !important;
+}
+
+.tool-description {
+  color: var(--gray-200) !important;
+}
+
+.tool-params {
+  color: var(--gray-300) !important;
+}
+
+/* Reference page body - proper spacing */
+body {
+  background: var(--black) !important;
+  color: var(--white) !important;
+  margin-top: 80px !important; /* Navbar clearance */
+}
+
+/* Header content */
+.reference-header {
+  color: var(--white) !important;
+}
+
+.reference-header h1 {
+  color: var(--white) !important;
+}
+
+.reference-header p {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+/* Search box contrast */
+.search-box input {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  color: var(--white) !important;
+}
+
+.search-box input::placeholder {
+  color: var(--gray-400) !important;
+}
+
+/* Filter tabs - better contrast */
+.filter-tab {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  color: var(--white) !important;
+}
+
+.filter-tab.active {
+  background: rgba(102, 126, 234, 0.8) !important;
+  border-color: #667eea !important;
+  color: var(--white) !important;
+}
+
+/* Stat badges - proper contrast */
+.stat-badge {
+  background: rgba(102, 126, 234, 0.8) !important;
+  color: var(--white) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+}
+
+/* TOC links - if they exist */
+.toc-link {
+  color: var(--white) !important;
+}
+
+.toc-link:hover {
+  color: var(--gray-200) !important;
+}

package/website/css/scroll-overlap-nuclear-fix.css

@@ -0,0 +1,127 @@
+/* =========================================
+   SCROLL OVERLAP NUCLEAR FIX - Disable All Scroll Effects
+   ========================================= */
+
+/* DISABLE ALL SCROLL-BASED ANIMATIONS AND EFFECTS */
+
+/* Turn off all scroll-triggered animations */
+* {
+  scroll-behavior: auto !important; /* No smooth scroll that might cause issues */
+  scroll-snap-type: none !important; /* No scroll snapping */
+}
+
+/* HERO - Lock in place during scroll */
+.hero {
+  position: relative !important;
+  z-index: 1000 !important; /* Maximum z-index */
+  height: 100vh !important; /* Exact viewport height */
+  overflow: visible !important; /* Allow content to show */
+  isolation: isolate !important;
+  /* Disable any scroll effects */
+  background-attachment: local !important;
+  transform: none !important;
+  will-change: auto !important;
+}
+
+/* HERO CONTENT - Lock positioning */
+.hero-content {
+  position: relative !important;
+  z-index: 1001 !important;
+  transform: none !important; /* No transforms that might shift */
+  height: 100% !important;
+  width: 100% !important;
+  will-change: auto !important;
+}
+
+/* ALL SECTIONS - Force static positioning */
+.section {
+  position: static !important; /* Static to prevent any positioning issues */
+  z-index: 1 !important;
+  transform: none !important; /* No transforms */
+  background-attachment: scroll !important;
+  /* Clear any margins that might cause overlap */
+  margin-top: 0 !important;
+  padding-top: var(--space-20) !important; /* Clear separation */
+  will-change: auto !important;
+}
+
+/* SPECIFIC REVOLUTIONARY FEATURES - Nuclear isolation */
+#new-features {
+  position: static !important; /* Completely static */
+  z-index: 1 !important;
+  transform: none !important;
+  margin-top: 0 !important;
+  padding-top: var(--space-24) !important; /* Extra separation */
+  /* Create barrier */
+  border-top: var(--space-16) solid transparent !important;
+}
+
+/* NAVBAR - Ensure it doesn't interfere */
+.navbar {
+  position: fixed !important;
+  z-index: 9999 !important;
+  transform: none !important;
+  will-change: transform !important; /* Only navbar can transform */
+}
+
+/* DISABLE FLOATING/PARALLAX EFFECTS */
+.floating,
+.parallax,
+.scroll-effect {
+  animation: none !important;
+  transform: none !important;
+  position: static !important;
+}
+
+/* VERSION BADGE - Ensure it doesn't cause issues */
+.version-badge {
+  position: absolute !important;
+  z-index: 1002 !important;
+  transform: rotate(-3deg) !important; /* Keep only essential transform */
+}
+
+/* BACKGROUND ELEMENTS - Lock in place */
+.hero-bg-animation,
+.floating-orb {
+  position: absolute !important;
+  z-index: 0 !important;
+  transform: none !important; /* No floating animations during scroll */
+  animation-play-state: paused !important; /* Pause during scroll */
+}
+
+/* SECTION BACKGROUNDS - Prevent interference */
+.section {
+  background-attachment: local !important; /* Local to prevent parallax */
+}
+
+/* Mobile - Extra static positioning */
+@media (max-width: 768px) {
+  .hero {
+    height: 100vh !important;
+    position: relative !important;
+  }
+  
+  .section {
+    position: static !important;
+    padding-top: var(--space-16) !important;
+  }
+  
+  #new-features {
+    padding-top: var(--space-20) !important;
+  }
+}
+
+/* DEBUGGING - Visual separation (remove in production) */
+.hero {
+  /* box-shadow: 0 0 0 3px red inset !important; */
+}
+
+.section {
+  /* box-shadow: 0 0 0 3px blue inset !important; */
+}
+
+/* Force immediate layout recalculation */
+.hero,
+.section {
+  contain: layout !important;
+}

package/website/css/section-layering-fix.css

@@ -0,0 +1,85 @@
+/* =========================================
+   SECTION LAYERING FIX - Prevent Overlap During Scroll
+   ========================================= */
+
+/* Hero section - much higher z-index to stay on top during scroll */
+.hero {
+  position: relative !important;
+  z-index: 100 !important; /* Much higher than sections */
+  isolation: isolate !important; /* Create stacking context */
+}
+
+/* All sections - much lower z-index to stay behind hero during scroll */
+.section {
+  position: relative !important;
+  z-index: 1 !important; /* Much lower than hero */
+  background-attachment: scroll !important; /* Prevent background issues */
+  /* Force sections to stay behind */
+  transform: translateZ(-1px) !important;
+}
+
+/* First section after hero - specific overlap prevention */
+#servers {
+  z-index: 1 !important; /* Ensure it stays behind hero */
+  position: relative !important;
+  /* Force behind hero with transform */
+  transform: translateZ(-1px) !important;
+  /* Clear separation without overlap */
+  margin-top: 0 !important; /* Remove excessive margin */
+  padding-top: var(--space-16) !important; /* Internal padding instead of margin */
+}
+
+/* Revolutionary Features section - specific fix */
+#new-features {
+  z-index: 1 !important; /* Behind hero */
+  position: relative !important;
+  transform: translateZ(-1px) !important; /* Force behind */
+}
+
+/* Hero content - proper stacking above sections */
+.hero-content {
+  position: relative !important;
+  z-index: 200 !important; /* Much higher to stay above all sections */
+  transform: translateZ(1px) !important; /* Force forward */
+}
+
+/* Hero background elements - lowest z-index */
+.hero-bg-animation,
+.floating-orb {
+  z-index: 0 !important; /* Background layer */
+}
+
+/* Navbar - highest z-index (unchanged) */
+.navbar {
+  z-index: 1000 !important; /* Always on top */
+}
+
+/* Smooth section transitions without overlap */
+.section-transition {
+  background: linear-gradient(to bottom, transparent 0%, var(--black) 20%) !important;
+  height: var(--space-8) !important;
+  position: relative !important;
+  z-index: 2 !important;
+  margin-top: -var(--space-8) !important;
+}
+
+/* Fix any transform issues during scroll */
+.section * {
+  transform-style: preserve-3d !important; /* Prevent transform issues */
+}
+
+/* Mobile layering adjustments */
+@media (max-width: 768px) {
+  .hero {
+    z-index: 10 !important;
+  }
+  
+  .section {
+    z-index: 1 !important;
+  }
+  
+  #servers {
+    margin-top: 0 !important;
+    padding-top: var(--space-12) !important;
+  }
+}