Merge pull request #35 from ValienteTechnologies/staging

Staging

Author: otuva

_includes/layout/nav-header.html

@@ -84,6 +84,7 @@
 
 <!-- Header -->
 <header class="masthead">
+  <div class="masthead-bg" aria-hidden="true"></div>
   <canvas id="meshNetwork" class="mesh-network-canvas"></canvas>
   <div class="container">
     <div class="intro-text">

_layouts/error.html

@@ -35,4 +35,4 @@
   </div>
 </div>
 
-<script src="/assets/js/space-bg.js"></script>
+<script src="/assets/js/space-bg.js" defer></script>

_pages/404.md

@@ -8,8 +8,8 @@ sitemap: false
 
 {% assign t = site.data["404"][site.active_lang] | default: site.data["404"].tr %}
 
-<div class="error-content">
-  <h1 class="error-title">{{ t.heading }}</h1>
+<div class="error-content page-section">
+  <h1 class="section-heading text-uppercase">{{ t.heading }}</h1>
   <a href="/" class="btn btn-primary btn-xl">{{ t.button }}</a>
   <div class="error-image">
     <img src="/assets/img/404.svg" alt="404 - Page Not Found" />

_sass/base/_mixins.scss

@@ -24,7 +24,6 @@
 }
 
 // Layout & section mixins
-// Ensures a consistent, full‑viewport section layout with snap scrolling.
 @mixin full-viewport-section {
   min-height: 100vh;
   display: flex;

_sass/base/_page.scss

@@ -79,10 +79,6 @@ body {
   width: 100%;
 }
 
-#pagecontainer {
-  scroll-snap-align: start;
-  scroll-snap-stop: normal;
-}
 
 footer {
   flex-shrink: 0;

_sass/components/_navbar.scss

@@ -82,16 +82,12 @@
   #mainNav {
     padding-top: 25px;
     padding-bottom: 25px;
-    -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
-    -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
     transition: padding-top 0.3s, padding-bottom 0.3s;
     border: none;
     border-bottom: 1px solid $surface-subtle;
 
     .navbar-brand {
       font-size: 1.75em;
-      -webkit-transition: all 0.3s;
-      -moz-transition: all 0.3s;
       transition: all 0.3s;
     }
 

_sass/layout/_error.scss

@@ -8,6 +8,8 @@
   flex-direction: column;
   justify-content: center;
   box-sizing: border-box;
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
 
   // Bootstrap row: fill remaining height, center content
   > .row {
@@ -24,15 +26,12 @@
     justify-content: center;
     width: 100%;
 
-    .error-title {
-      color: $white;
-      font-family: 'Montserrat', sans-serif;
-      font-size: 1.1rem;
-      font-weight: 700;
-      letter-spacing: 0.15em;
-      text-transform: uppercase;
-      margin: 3rem 0 0.75rem;
-      opacity: 0.9;
+    &.page-section {
+      padding-block: 0;
+    }
+
+    .section-heading {
+      margin: 3rem 0 1.25rem;
     }
 
     .btn {

_sass/layout/_footer.scss

@@ -35,8 +35,6 @@ ul.social-buttons {
       display: block;
       width: 38px;
       height: 38px;
-      -webkit-transition: all 0.3s;
-      -moz-transition: all 0.3s;
       transition: all 0.3s;
       color: white;
       border-radius: 100%;

_sass/layout/_masthead.scss

@@ -6,39 +6,55 @@ header.masthead {
   overflow: hidden;
   @include full-viewport-section;
   align-items: center;
-  
+  // Solid fallback colour while .masthead-bg renders
+  background: $valiente-midnight;
+
+  // GPU-composited gradient layer — animates via transform, not background-position
+  .masthead-bg {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+      135deg,
+      $valiente-midnight 0%,
+      $valiente-ink 16%,
+      darken($valiente-violet, 5%) 32%,
+      darken($valiente-fuchsia, 5%) 48%,
+      darken($valiente-magenta, 7%) 64%,
+      darken($valiente-rose, 12%) 82%,
+      darken($valiente-ink, 6%) 100%
+    );
+    animation: gradientDrift 20s ease-in-out infinite;
+    will-change: transform;
+    pointer-events: none;
+    z-index: 0;
+  }
+
   // Mesh network canvas
   .mesh-network-canvas {
+    display: none; // Hidden by default on mobile
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1;
+    z-index: 3;
     pointer-events: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
   }
-  
+
   // Container and text should be above canvas
   .container {
     position: relative;
-    z-index: 2;
+    z-index: 4;
     width: 100%;
   }
-  
-  // Animated colorful gradient background - smoother with more color stops
-  background: linear-gradient(
-    135deg,
-    $valiente-midnight 0%,
-    $valiente-ink 16%,
-    darken($valiente-violet, 5%) 32%,
-    darken($valiente-fuchsia, 5%) 48%,
-    darken($valiente-magenta, 7%) 64%,
-    darken($valiente-rose, 12%) 82%,
-    darken($valiente-ink, 6%) 100%
-  );
-  background-size: 300% 300%;
-  animation: gradientShift 20s ease-in-out infinite;
-  
+
   // Logo background detail with low opacity
   &::before {
     content: '';
@@ -53,18 +69,18 @@ header.masthead {
     background-repeat: no-repeat;
     opacity: 0.08;
     pointer-events: none;
-    z-index: 0;
+    z-index: 1;
   }
-  
-  // Add animated overlay and particles combined
+
+  // Animated overlay (transform only — composited)
   &::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: 
+    background:
       radial-gradient(ellipse 60% 40% at 20% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 60%),
       radial-gradient(ellipse 50% 50% at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
       radial-gradient(ellipse 40% 60% at 50% 20%, rgba($valiente-violet, 0.25) 0%, transparent 50%),
@@ -74,22 +90,12 @@ header.masthead {
       radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.3), transparent),
       radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.25), transparent),
       radial-gradient(1px 1px at 33% 80%, rgba(255, 255, 255, 0.35), transparent);
-    background-size: 
-      100% 100%,
-      100% 100%,
-      100% 100%,
-      200% 200%,
-      200% 200%,
-      200% 200%,
-      200% 200%,
-      200% 200%,
-      200% 200%;
-    animation: overlayMove 25s ease-in-out infinite, particlesMove 25s linear infinite;
+    animation: overlayMove 25s ease-in-out infinite;
     pointer-events: none;
     opacity: 0.9;
-    z-index: 0;
+    z-index: 2;
   }
-  
+
   .intro-text {
     position: relative;
     z-index: 1;
@@ -122,26 +128,16 @@ header.masthead {
   }
 }
 
-// Gradient animation - smoother circular movement
-@keyframes gradientShift {
-  0% {
-    background-position: 0% 50%;
-  }
-  25% {
-    background-position: 100% 0%;
-  }
-  50% {
-    background-position: 100% 100%;
-  }
-  75% {
-    background-position: 0% 100%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
+// GPU-composited gradient drift — uses transform not background-position
+@keyframes gradientDrift {
+  0%   { transform: translate(0%, 0%); }
+  25%  { transform: translate(25%, 0%); }
+  50%  { transform: translate(25%, 25%); }
+  75%  { transform: translate(0%, 25%); }
+  100% { transform: translate(0%, 0%); }
 }
 
-// Overlay movement animation - smoother transitions
+// Overlay movement animation — transform only (composited)
 @keyframes overlayMove {
   0% {
     transform: translate(0, 0) scale(1) rotate(0deg);
@@ -165,15 +161,6 @@ header.masthead {
   }
 }
 
-// Particles movement animation
-@keyframes particlesMove {
-  0% {
-    background-position: 0% 0%;
-  }
-  100% {
-    background-position: 100% 100%;
-  }
-}
 @media (min-width: 768px) {
   header.masthead {
     .intro-text {

_sass/layout/_services.scss

@@ -10,6 +10,7 @@ $services-accent-bright: lighten($primary, 8%);
   padding-block: var(--space-section-y);
   color: var(--color-text-on-dark);
   overflow: hidden;
+  contain: layout style paint;
   @include full-viewport-section;
 
   .section-heading {