✨feature: Update navigation styles

Co-authored-by: Copilot <copilot@github.com>

lib/show-template.php

@@ -157,17 +157,19 @@ class ShowTemplate {
 
 		$fudge = isset( $get_footer ) ? $get_footer : $wp_footer;
 
+        // phpcs:disable
 		if ( $fudge === $this->template || $fudge === false ) {
-			echo wp_kses_post( "<!-- Active Template: {$this->template} -->\n" );
+			echo "<!-- Active Template: {$this->template} -->\n";
 		} else {
-			echo esc_html( "<!--\n" );
-			echo esc_html( "The template loader logic has chosen a different template than what was used.\n\n" );
-			echo esc_html( "Chosen Template: {$this->template}\n" );
-			echo esc_html( "Actual Template: $fudge\n\n" );
-			echo esc_html( "This will usually occur if the template file was overriden using an action on template_redirect.\n" );
-			echo esc_html( "This is a best effort guess to catch such scenarios as mentioned above but can be incorrect.\n" );
-			echo esc_html( "-->\n" );
+			echo "<!--\n";
+			echo "The template loader logic has chosen a different template than what was used.\n\n";
+			echo "Chosen Template: {$this->template}\n";
+			echo "Actual Template: $fudge\n\n";
+			echo "This will usually occur if the template file was overriden using an action on template_redirect.\n";
+			echo "This is a best effort guess to catch such scenarios as mentioned above but can be incorrect.\n";
+			echo "-->\n";
 		}
+        // phpcs:enable
 	}
 }
 

styles/base/colors.css

@@ -1,13 +1,16 @@
 /* Theme color definitions */
 
-@theme {
+@theme inline {
     --color-black:      oklch(0% 0 0);
     --color-white:      oklch(100% 0 0);
 
     --color-background: oklch(89.75% 0 0);
     --color-text:       var(--color-black);
 
-  --color-primary:     oklch(0.57 0.203362 257.1706);
+    --color-cwc-blue-01: oklch(47.31% 0.1141 242.9);
+    --color-cwc-blue-02: oklch(28.99% 0.0614 237.9);
+
+    --color-primary:     var(--color-cwc-blue-01);
     --color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
     --color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
     --color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);

styles/components/site-header.css

@@ -6,6 +6,8 @@
 
     .header__nav-main {
         max-width: 80.5rem;
+
+        .nav-main { @apply self-stretch; }
     }
 
 	.nav-aux__container {

styles/navigation/nav-main-default.css

@@ -13,24 +13,41 @@
 /* desktop */
 @media screen and (min-width: 62.5rem) {
     .nav-main .menu-vdi {
-        @apply flex items-end justify-end p-0 m-0;
+        @apply flex items-center justify-end p-0 m-0 h-full;
 
         >li {
+            @apply h-full;
+
             >a,
             >.menu-vdi__toggle {
                 /* text styles */
-                @apply font-semibold text-20px text-white hover:text-light no-underline leading-snug;
+                @apply font-semibold text-20px text-white no-underline leading-snug whitespace-nowrap;
 
                 /* spacing & display */
-                @apply mx-2 p-0 no-underline;
+                @apply flex items-center px-4 -my-4 no-underline;
+                height: calc(100% + 2rem);
+
+                /* interaction */
+                &:hover {
+                    @apply bg-cwc-blue-02 text-light;
+                    box-shadow: inset 0 -4px 0 #F26B53;
+                }
             }
 
             &.menu-vdi__item--contact {
+                @apply h-auto;
+
                 >a {
-                    @apply mr-0;
+                    @apply ml-2 mr-0 my-0;
+                    height: auto;
                     background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%);
-                    border-radius: 20px 4px;
+                    border-radius: 1.25rem 0.25rem;
                     padding: .5rem 2rem;
+
+                    &:hover {
+                        box-shadow: none;
+                        background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%);
+                    }
                 }
             }
         }
@@ -46,25 +63,28 @@
         .menu-vdi__submenu {
             top: calc(100% + 1rem);
 
-            @apply bg-white shadow-lg left-4 w-64 flex-col;
+            @apply bg-cwc-blue-02 shadow-lg left-4 w-64 flex-col;
 
-            >li { @apply w-full; }
+            >li {
+                @apply w-full border-b border-[#D24D32];
+                &:last-child { @apply border-b-0; }
+            }
 
             .menu-vdi__item {
                 /* text styles */
-                @apply font-bold text-18px text-black hover:text-light no-underline leading-snug;
+                @apply font-bold text-18px text-white no-underline leading-snug;
 
                 /* spacing & display */
                 @apply block w-full;
 
                 /* interaction */
-                @apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
+                @apply focus-visible:bg-cwc-blue-01 hover:bg-cwc-blue-01;
 
                 a { @apply block w-full; }
             }
 
             a.menu-vdi__item,
-            .menu-vdi__item a { @apply p-4; }
+            .menu-vdi__item a { @apply p-4 text-white; }
         }
     }
 }