Added Navigation Bar Animation (#36)

* Hero Counter additon and update to main script file.

* Updated gap on Proof Splide

* Updated Gap

* Update to main script

* Updated Splide JS

* Update to Testimonial Slider to fix mobile view

* Splitting component scripts out

* Blog Template Page customisations and scripts.

* Update to CSS file

* Updated Class Selector for Section Banner

* Refactored CSS code to remove !important

* Updated comments on css file.

* Update to CSS formatting

* Updates to CSS and JS files for new components

* update to css file

* Fix issues in css file

* Splitting Font Update CSS

* updated js files and split js from main solcast.webflow.scripts.js into individual js files.

* Navbar Animation

* Formatting clean up in css file and additional comments in footer js file.

assets/css/solcast.webflow.style.css

@@ -348,6 +348,57 @@ Code by Liam Hammersley of Rework Digital (liam@reworkdigital.com.au)
     width: 20em;
 }
 
+/* Navigation Bar Colour Change Animation */
+.nav_component {
+  --nav-animation-in: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+  --nav-animation-out: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+
+  transition: var(--nav-animation-in);
+
+  & .nav_menu_link.is-heading,
+    .nav_logo.is-light,
+    .nav_api-status,
+    .nav_api-status,
+    .nav_hamburger,
+    .nav_hamburger.is-light {
+      transition: var(--nav-animation-in);
+  }
+}
+
+.scrolled {
+  background: var(--background-color--background-white);
+  transition: var(--nav-animation-out);
+
+  & .nav_menu_link.is-heading {
+      color: var(--link-color--link-secondary);
+      transition: var(--nav-animation-out);
+  }
+
+  & .nav_menu_link:hover {
+      color: var(--link-color--link-primary);
+  }
+
+  & .nav_logo.is-light{
+      opacity: 0;
+      transition: var(--nav-animation-out);
+  }
+
+  & .nav_api-status {
+      color: var(--link-color--link-secondary);
+      transition: var(--nav-animation-out);
+  }
+
+  & .nav_hamburger {
+      opacity: 1;
+      transition: var(--nav-animation-out);
+  }
+
+  & .nav_hamburger.is-light {
+      opacity: 0;
+      transition: var(--nav-animation-out);
+  }
+}
+
 /* Table Properties */
 
 .table_wrapper {