funky now

Author: tstromberg

src/css/main.css

@@ -165,7 +165,7 @@ a:hover {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: calc(var(--spacing-unit) * 1) 0;
+    padding: calc(var(--spacing-unit) * 0.5) 0;
 }
 
 .logo-link {
@@ -242,7 +242,7 @@ a:hover {
 /* Hero Section */
 .hero {
     background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
-    padding: calc(var(--spacing-section) * 1.5) 0 var(--spacing-section);
+    padding: calc(var(--spacing-section) * 0.8) 0 calc(var(--spacing-section) * 0.8);
     position: relative;
     overflow: hidden;
     margin-top: -1px;
@@ -270,6 +270,18 @@ a:hover {
 
 .hero-text {
     padding-right: calc(var(--spacing-unit) * 2);
+    animation: fadeInGroove 1.5s ease-out;
+}
+
+@keyframes fadeInGroove {
+    0% {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
 .hero-image {
@@ -282,9 +294,11 @@ a:hover {
     height: 320px;
     filter: drop-shadow(0 16px 64px rgba(0, 0, 0, 0.15));
     transition: var(--transition-bounce);
-    animation: jazzFunkGroove 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite,
+    animation: groovyBounce 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite,
+               funkySpin 8s linear infinite,
                rhythmicPulse 1.5s ease-in-out infinite,
-               warmGlow 4s ease-in-out infinite;
+               discoGlow 3s ease-in-out infinite,
+               jazzWobble 6s ease-in-out infinite;
     transform-origin: center center;
 }
 
@@ -295,32 +309,6 @@ a:hover {
             drop-shadow(0 16px 60px rgba(78, 205, 196, 0.2));
 }
 
-@keyframes jazzFunkGroove {
-    0%, 100% { 
-        transform: translateY(0px) rotate(0deg) scale(1);
-    }
-    12.5% { 
-        transform: translateY(-10px) rotate(-5deg) scale(1.03);
-    }
-    25% { 
-        transform: translateY(-15px) rotate(3deg) scale(1.05);
-    }
-    37.5% { 
-        transform: translateY(-8px) rotate(-2deg) scale(1.02);
-    }
-    50% { 
-        transform: translateY(-18px) rotate(6deg) scale(1.06);
-    }
-    62.5% { 
-        transform: translateY(-10px) rotate(-4deg) scale(1.03);
-    }
-    75% { 
-        transform: translateY(-12px) rotate(2deg) scale(1.04);
-    }
-    87.5% { 
-        transform: translateY(-5px) rotate(-1deg) scale(1.01);
-    }
-}
 
 @keyframes rhythmicPulse {
     0%, 100% { 
@@ -346,6 +334,72 @@ a:hover {
     }
 }
 
+@keyframes groovyBounce {
+    0%, 100% {
+        transform: translateY(0) scale(1) rotate(0deg);
+    }
+    20% {
+        transform: translateY(-20px) scale(1.1) rotate(-5deg);
+    }
+    40% {
+        transform: translateY(-10px) scale(0.95) rotate(5deg);
+    }
+    60% {
+        transform: translateY(-25px) scale(1.15) rotate(-3deg);
+    }
+    80% {
+        transform: translateY(-5px) scale(1.05) rotate(2deg);
+    }
+}
+
+@keyframes funkySpin {
+    0% {
+        transform: rotate(0deg);
+    }
+    25% {
+        transform: rotate(10deg);
+    }
+    50% {
+        transform: rotate(-10deg);
+    }
+    75% {
+        transform: rotate(5deg);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
+@keyframes discoGlow {
+    0%, 100% {
+        filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.5))
+                drop-shadow(0 0 40px rgba(255, 255, 0, 0.3));
+    }
+    33% {
+        filter: drop-shadow(0 0 25px rgba(155, 89, 182, 0.6))
+                drop-shadow(0 0 50px rgba(155, 89, 182, 0.3));
+    }
+    66% {
+        filter: drop-shadow(0 0 25px rgba(78, 205, 196, 0.6))
+                drop-shadow(0 0 50px rgba(78, 205, 196, 0.3));
+    }
+}
+
+@keyframes jazzWobble {
+    0%, 100% {
+        transform: perspective(400px) rotateX(0deg) rotateY(0deg);
+    }
+    25% {
+        transform: perspective(400px) rotateX(10deg) rotateY(-10deg);
+    }
+    50% {
+        transform: perspective(400px) rotateX(-5deg) rotateY(10deg);
+    }
+    75% {
+        transform: perspective(400px) rotateX(5deg) rotateY(-5deg);
+    }
+}
+
 /* Buttons */
 .cta-button,
 .cta-button-small {
@@ -607,7 +661,7 @@ a:hover {
 /* Page Specific Styles */
 .page-header {
     background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
-    padding: calc(var(--spacing-section) * 0.6) 0 calc(var(--spacing-section) * 0.5);
+    padding: calc(var(--spacing-section) * 0.4) 0 calc(var(--spacing-section) * 0.3);
     margin-bottom: 0;
     position: relative;
     text-align: center;

src/index.njk

@@ -9,9 +9,9 @@ description: Great tools amplify human capability without getting in the way. We
         <div class="hero-content">
             <div class="hero-text">
                 <h1>Developer tools that bring back the joy of coding.</h1>
-                <p class="tagline">Code review and collaboration tools that make shipping feel like jamming with your best band.</p>
+                <p class="tagline">Code review and collaboration tools that make shipping feel like jamming with your favorite band.</p>
                 <p style="font-size: 1.125rem; margin: 2rem 0; color: var(--color-gray-dark);">
-                    We build the developer velocity tools that turn tedious workflows into smooth grooves. Because coding should be fun, collaborative, and fast.
+                   Out-ship your competition with joy and intent. Because coding should be fun, collaborative, and fast.
                 </p>
                 <a href="javascript:void(0)" class="cta-button mt-3" onclick="sendEmail()">See Our Tools</a>
             </div>
@@ -29,7 +29,7 @@ description: Great tools amplify human capability without getting in the way. We
         <p style="max-width: 700px; margin: 0 auto 3rem; font-size: 1.25rem; line-height: 1.8;">
             When your team's in sync, code flows like music. Our developer tools turn chaotic workflows into smooth rhythms—so you can ship at the speed of inspiration.
         </p>
-        
+
         <div class="feature-grid" style="max-width: 1000px; margin: 0 auto;">
             <div class="card">
                 <h3>🎸 Code Review Jam Sessions</h3>
@@ -48,7 +48,7 @@ description: Great tools amplify human capability without getting in the way. We
                 <p>Automated code review enforcement with smart exception handling. Stay compliant with SOC 2 and ISO 27001 without the bureaucracy.</p>
             </div>
         </div>
-        
+
         <p style="font-size: 1.5rem; margin: 3rem auto; max-width: 600px; font-weight: 600; color: var(--color-accent);">
             "It's like going from playing solo to having a full band" <br>
             <span style="font-size: 1rem; color: var(--color-gray); font-weight: normal;">- Engineering teams using codeGROOVE</span>
@@ -97,4 +97,4 @@ description: Great tools amplify human capability without getting in the way. We
             </div>
         </div>
     </div>
-</section>
+</section>