snow-flow 4.2.0 → 4.2.2

package/website/css/hero-inspired-design.css

@@ -0,0 +1,135 @@
+/* =========================================
+   HERO-INSPIRED DESIGN SYSTEM FOR ENTIRE WEBSITE
+   ========================================= */
+
+/* Use hero's beautiful styling throughout the website */
+
+/* HERO-INSPIRED BUTTONS - Beautiful like the hero background */
+.btn-hero-primary {
+  background: linear-gradient(135deg, 
+    rgba(102, 126, 234, 0.9) 0%, 
+    rgba(118, 75, 162, 0.9) 50%, 
+    rgba(240, 147, 251, 0.9) 100%) !important;
+  color: var(--white) !important;
+  border: 2px solid rgba(255, 255, 255, 0.3) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border-radius: var(--radius-2xl) !important;
+  padding: var(--space-4) var(--space-8) !important;
+  font-weight: 600 !important;
+  font-size: var(--font-lg) !important;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 
+    0 8px 32px rgba(102, 126, 234, 0.3),
+    0 0 40px rgba(118, 75, 162, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+.btn-hero-primary:before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+  transform: rotate(45deg);
+  transition: all 0.6s ease;
+  opacity: 0;
+}
+
+.btn-hero-primary:hover:before {
+  animation: shine 0.6s ease-in-out;
+}
+
+.btn-hero-primary:hover {
+  transform: translateY(-4px) scale(1.02) !important;
+  box-shadow: 
+    0 12px 40px rgba(102, 126, 234, 0.4),
+    0 0 60px rgba(118, 75, 162, 0.3) !important;
+}
+
+/* HERO-INSPIRED SECONDARY BUTTON */
+.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(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border-radius: var(--radius-2xl) !important;
+  padding: var(--space-4) var(--space-8) !important;
+  font-weight: 500 !important;
+  font-size: var(--font-lg) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+  box-shadow: 
+    0 4px 16px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
+  transition: all 0.3s ease !important;
+  position: relative !important;
+}
+
+.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.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+}
+
+/* SECTION BACKGROUNDS - HERO INSPIRED */
+.hero-inspired-section {
+  background: 
+    radial-gradient(at 20% 80%, hsla(240, 60%, 20%, 0.3) 0%, transparent 50%),
+    radial-gradient(at 80% 20%, hsla(260, 60%, 25%, 0.3) 0%, transparent 50%),
+    radial-gradient(at 40% 40%, hsla(280, 60%, 15%, 0.3) 0%, transparent 50%),
+    var(--black) !important;
+}
+
+/* CARDS WITH HERO GLASS EFFECT */
+.hero-inspired-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;
+  padding: var(--space-8) !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;
+}
+
+.hero-inspired-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;
+}
+
+@keyframes shine {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/* TEXT HIERARCHY - HERO INSPIRED */
+.hero-inspired-title {
+  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;
+  font-weight: 700 !important;
+  text-shadow: none !important;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
+}
+
+.hero-inspired-subtitle {
+  color: var(--gray-200) !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
+}

package/website/css/hero-size-optimization.css

@@ -0,0 +1,146 @@
+/* =========================================
+   HERO SIZE OPTIMIZATION - Compact & Clean
+   ========================================= */
+
+/* SNOW-FLOW title - even smaller for better proportion */
+.hero-title {
+  font-size: clamp(var(--font-3xl), 5vw, var(--font-5xl)) !important; /* Further reduced for better balance */
+  margin-bottom: var(--space-4) !important; /* Reduced from space-6 */
+  letter-spacing: -0.03em !important; /* Tighter letter spacing */
+}
+
+/* Title letters - tighter spacing */
+.title-letter {
+  margin-right: 0.05em !important; /* Even tighter spacing */
+  font-size: inherit !important;
+}
+
+/* Version badge - more proportional */
+.version-badge {
+  font-size: var(--font-base) !important; /* Reduced from font-xl */
+  padding: var(--space-2) var(--space-4) !important; /* Reduced padding */
+  transform: rotate(-3deg) scale(1) !important; /* Reduced from scale(1.2) */
+  top: -15px !important; /* Adjusted position */
+  right: -20px !important;
+}
+
+/* Hero subtitle - more compact */
+.hero-subtitle {
+  font-size: clamp(var(--font-base), 1.5vw, var(--font-xl)) !important; /* Reduced from 2vw/2xl */
+  margin-bottom: var(--space-6) !important; /* Reduced from space-10 */
+  line-height: var(--leading-snug) !important; /* Tighter line height */
+}
+
+/* Feature pills - smaller and more compact */
+.feature-pills {
+  gap: var(--space-2) !important; /* Reduced gap */
+  margin: var(--space-4) 0 var(--space-6) !important; /* Reduced margins */
+}
+
+.pill {
+  font-size: var(--font-sm) !important; /* Reduced from font-base */
+  padding: var(--space-2) var(--space-4) !important; /* Reduced padding */
+  border-radius: var(--radius-full) !important;
+}
+
+.pill-icon {
+  font-size: var(--font-base) !important; /* Slightly smaller icons */
+}
+
+/* CTA buttons - more proportional */
+.btn-hero-primary,
+.btn-hero-secondary {
+  font-size: var(--font-base) !important; /* Reduced from font-lg */
+  padding: var(--space-3) var(--space-6) !important; /* Reduced padding */
+  border-radius: var(--radius-xl) !important; /* Slightly smaller radius */
+}
+
+.hero-actions {
+  gap: var(--space-3) !important; /* Reduced gap between buttons */
+  margin: var(--space-6) 0 var(--space-8) !important; /* Adjusted margins */
+}
+
+/* Hero stats - more compact with icon styling */
+.hero-stats {
+  padding: var(--space-4) var(--space-6) !important; /* Reduced padding */
+  margin: var(--space-8) auto var(--space-6) !important; /* Reduced margins */
+  max-width: 650px !important; /* Even more compact */
+}
+
+.stat-icon {
+  font-size: var(--font-xl) !important; /* Nice sized icons */
+  margin-bottom: var(--space-1) !important;
+  display: block !important;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
+}
+
+.stat-number {
+  font-size: var(--font-3xl) !important; /* Reduced from font-4xl */
+  margin-bottom: var(--space-1) !important;
+}
+
+.stat-label {
+  font-size: var(--font-xs) !important; /* Smaller labels */
+  margin-top: var(--space-1) !important;
+}
+
+.stat-divider {
+  height: 45px !important; /* Shorter dividers */
+}
+
+.stat-item {
+  text-align: center !important;
+  padding: var(--space-2) !important; /* Reduced padding */
+}
+
+/* Hero content overall spacing */
+.hero-content {
+  padding: var(--space-10) var(--space-4) var(--space-6) !important; /* More compact padding */
+  max-width: 90% !important; /* Slightly more contained */
+}
+
+/* Mountain logo - smaller */
+.hero-logo-container {
+  margin-top: var(--space-2) !important; /* Reduced top margin */
+  margin-bottom: var(--space-3) !important; /* Reduced bottom margin */
+}
+
+.hero-mountain {
+  font-size: var(--font-5xl) !important; /* Reduced from larger size */
+}
+
+/* Responsive adjustments for compact design */
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: clamp(var(--font-2xl), 4vw, var(--font-4xl)) !important; /* Even smaller on mobile */
+  }
+  
+  .hero-subtitle {
+    font-size: var(--font-base) !important;
+    margin-bottom: var(--space-4) !important;
+  }
+  
+  .feature-pills {
+    gap: var(--space-1) !important;
+  }
+  
+  .pill {
+    font-size: var(--font-xs) !important;
+    padding: var(--space-1) var(--space-3) !important;
+  }
+  
+  .hero-actions {
+    flex-direction: column !important;
+    gap: var(--space-2) !important;
+  }
+  
+  .btn-hero-primary,
+  .btn-hero-secondary {
+    width: 100% !important;
+    max-width: 280px !important;
+  }
+  
+  .stat-number {
+    font-size: var(--font-2xl) !important;
+  }
+}

package/website/css/hero-spacing-improvements.css

@@ -0,0 +1,139 @@
+/* =========================================
+   HERO SPACING IMPROVEMENTS - More Breathing Room
+   ========================================= */
+
+/* Hero section - more spacious and better flow */
+.hero {
+  min-height: 100vh !important;
+  padding: 0 0 var(--space-20) !important; /* More bottom padding to prevent overlap */
+  position: relative !important;
+  margin-bottom: var(--space-16) !important; /* Clear separation from next section */
+}
+
+/* Hero content - more generous spacing */
+.hero-content {
+  padding: var(--space-16) var(--space-6) var(--space-12) !important; /* More generous padding */
+  max-width: 95% !important;
+  margin: 0 auto !important;
+  /* Better vertical centering with more space */
+  min-height: 90vh !important;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  align-items: center !important;
+}
+
+/* Mountain logo - more breathing room */
+.hero-logo-container {
+  margin: var(--space-6) 0 var(--space-8) !important; /* More space around logo */
+}
+
+/* Title spacing improvements */
+.hero-title {
+  margin: var(--space-6) auto var(--space-8) auto !important; /* More space around title */
+}
+
+/* Subtitle - better spacing */
+.hero-subtitle {
+  margin-bottom: var(--space-8) !important; /* More space before pills */
+  max-width: 800px !important; /* Constrain width for better readability */
+  line-height: var(--leading-relaxed) !important; /* More line spacing */
+}
+
+/* Feature pills - more generous spacing */
+.feature-pills {
+  margin: var(--space-8) 0 var(--space-10) !important; /* More generous margins */
+  gap: var(--space-3) !important; /* Better gap between pills */
+  max-width: 900px !important; /* Constrain width */
+  justify-content: center !important;
+}
+
+/* CTA buttons - better spacing */
+.hero-actions {
+  margin: var(--space-10) 0 var(--space-12) !important; /* More space around buttons */
+  gap: var(--space-4) !important; /* Better gap between buttons */
+}
+
+/* Hero stats - more breathing room */
+.hero-stats {
+  margin: var(--space-12) auto var(--space-16) !important; /* Much more space around stats */
+  padding: var(--space-6) var(--space-8) !important; /* More internal padding */
+  max-width: 750px !important; /* Slightly wider for better proportion */
+}
+
+/* Section separation - prevent overlap */
+.section {
+  position: relative !important;
+  margin-top: var(--space-20) !important; /* Clear separation from hero */
+  padding-top: var(--space-16) !important; /* Extra top padding */
+}
+
+/* First section after hero - extra separation */
+#servers {
+  margin-top: var(--space-24) !important; /* Even more separation */
+  padding-top: var(--space-20) !important;
+}
+
+/* Scroll indicator positioning */
+.scroll-indicator {
+  position: absolute !important;
+  bottom: var(--space-8) !important; /* More space from edge */
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+}
+
+/* Mobile spacing adjustments */
+@media (max-width: 768px) {
+  .hero {
+    padding-bottom: var(--space-16) !important;
+    margin-bottom: var(--space-12) !important;
+  }
+  
+  .hero-content {
+    padding: var(--space-12) var(--space-4) var(--space-8) !important;
+    min-height: 85vh !important;
+  }
+  
+  .hero-title {
+    margin: var(--space-4) auto var(--space-6) auto !important;
+  }
+  
+  .hero-subtitle {
+    margin-bottom: var(--space-6) !important;
+  }
+  
+  .feature-pills {
+    margin: var(--space-6) 0 var(--space-8) !important;
+    gap: var(--space-2) !important;
+  }
+  
+  .hero-actions {
+    margin: var(--space-8) 0 var(--space-10) !important;
+    gap: var(--space-3) !important;
+  }
+  
+  .hero-stats {
+    margin: var(--space-10) auto var(--space-12) !important;
+    padding: var(--space-4) var(--space-6) !important;
+  }
+  
+  .section {
+    margin-top: var(--space-16) !important;
+    padding-top: var(--space-12) !important;
+  }
+  
+  #servers {
+    margin-top: var(--space-20) !important;
+    padding-top: var(--space-16) !important;
+  }
+}
+
+/* Smooth scroll behavior for better transitions */
+html {
+  scroll-behavior: smooth !important;
+}
+
+/* Section transitions */
+.section {
+  scroll-margin-top: 100px !important; /* Account for navbar when scrolling */
+}

package/website/css/hero-stats-visibility.css

@@ -0,0 +1,98 @@
+/* =========================================
+   HERO STATS VISIBILITY & LAYOUT FIXES
+   ========================================= */
+
+/* HERO STATS - MUCH MORE VISIBLE */
+.hero-stats {
+  background: rgba(0, 0, 0, 0.8) !important; /* Dark semi-transparent background */
+  border: 2px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: var(--radius-2xl) !important;
+  padding: var(--space-6) var(--space-8) !important;
+  margin: var(--space-12) auto !important; /* More space from other elements */
+  backdrop-filter: blur(15px) !important;
+  -webkit-backdrop-filter: blur(15px) !important;
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.5),
+    0 0 40px rgba(255, 255, 255, 0.1) !important; /* Subtle glow */
+  max-width: 800px !important; /* Constrain width for better presentation */
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  position: relative !important;
+  z-index: 15 !important;
+}
+
+/* Individual stat items */
+.stat-item {
+  text-align: center !important;
+  flex: 1 !important;
+  padding: var(--space-3) !important;
+  color: white !important;
+}
+
+/* Stat numbers - HIGH CONTRAST */
+.stat-number {
+  font-size: var(--font-4xl) !important; /* Larger for better visibility */
+  font-weight: 800 !important;
+  color: var(--white) !important;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
+  line-height: 1 !important;
+  margin-bottom: var(--space-1) !important;
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 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.8)) !important;
+}
+
+/* Stat labels - READABLE */
+.stat-label {
+  font-size: var(--font-sm) !important;
+  color: var(--gray-200) !important;
+  font-weight: 500 !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
+  text-transform: uppercase !important;
+  letter-spacing: var(--tracking-wider) !important;
+}
+
+/* Stat dividers */
+.stat-divider {
+  width: 1px !important;
+  height: 60px !important;
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
+  margin: 0 var(--space-4) !important;
+}
+
+/* HERO SIZE ADJUSTMENT - Fixed height to prevent overlap */
+.hero {
+  padding: var(--space-8) 0 var(--space-16) !important; /* Less padding to fit in viewport */
+  overflow: hidden !important; /* Contain content within bounds */
+}
+
+/* Hero content spacing adjustment */
+.hero-content {
+  margin-bottom: var(--space-16) !important; /* More space for stats */
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .hero-stats {
+    flex-direction: column !important;
+    gap: var(--space-4) !important;
+    padding: var(--space-4) !important;
+  }
+  
+  .stat-divider {
+    width: 60px !important;
+    height: 1px !important;
+    margin: var(--space-2) 0 !important;
+  }
+  
+  .stat-number {
+    font-size: var(--font-3xl) !important;
+  }
+  
+  .hero {
+    padding-bottom: var(--space-20) !important;
+  }
+}