From 9137fdb0f7cb2279bb5bbe9f53bca254b9cb3bfe Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Sat, 9 May 2026 14:35:16 -0500 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feature:=20Update=20navigation=20style?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Copilot --- lib/show-template.php | 18 ++++--- styles/base/colors.css | 69 ++++++++++++++------------ styles/components/site-header.css | 2 + styles/navigation/nav-main-default.css | 40 +++++++++++---- 4 files changed, 78 insertions(+), 51 deletions(-) diff --git a/lib/show-template.php b/lib/show-template.php index eb53ecf..7304a4b 100644 --- a/lib/show-template.php +++ b/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( "\n" ); + echo "\n"; } else { - echo esc_html( "\n" ); + echo "\n"; } + // phpcs:enable } } diff --git a/styles/base/colors.css b/styles/base/colors.css index 73cd2e3..5c5c94b 100644 --- a/styles/base/colors.css +++ b/styles/base/colors.css @@ -1,41 +1,44 @@ /* Theme color definitions */ -@theme { - --color-black: oklch(0% 0 0); - --color-white: oklch(100% 0 0); +@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-background: oklch(89.75% 0 0); + --color-text: var(--color-black); - --color-primary: oklch(0.57 0.203362 257.1706); - --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); - --color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white); - --color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white); - --color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white); - --color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white); - --color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white); - --color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white); + --color-cwc-blue-01: oklch(47.31% 0.1141 242.9); + --color-cwc-blue-02: oklch(28.99% 0.0614 237.9); - --color-secondary: oklch(0.56 0.0176 257.23); - --color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white); - --color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white); - --color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white); - --color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white); - --color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white); - --color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white); - --color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white); - --color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white); - --color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white); + --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); + --color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white); + --color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white); + --color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white); + --color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white); + --color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white); + --color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white); - --color-bodylinks: oklch(0.48 0.0789 211.58); - --color-footlinks: oklch(0.65 0.1104 212.2); + --color-secondary: oklch(0.56 0.0176 257.23); + --color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white); + --color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white); + --color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white); + --color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white); + --color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white); + --color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white); + --color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white); + --color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white); + --color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white); - --color-success: oklch(64.01% 0.1751 146.7); - --color-info: oklch(0.55 0.0922 211.57); - --color-warning: oklch(84.42% 0.1722 84.93); - --color-danger: oklch(0.5126 0.1865 22.61); - --color-light: oklch(98.16% 0.0017 247.8); - --color-dark: oklch(34.51% 0.0133 248.2); + --color-bodylinks: oklch(0.48 0.0789 211.58); + --color-footlinks: oklch(0.65 0.1104 212.2); + + --color-success: oklch(64.01% 0.1751 146.7); + --color-info: oklch(0.55 0.0922 211.57); + --color-warning: oklch(84.42% 0.1722 84.93); + --color-danger: oklch(0.5126 0.1865 22.61); + --color-light: oklch(98.16% 0.0017 247.8); + --color-dark: oklch(34.51% 0.0133 248.2); } diff --git a/styles/components/site-header.css b/styles/components/site-header.css index fe607d5..9825a33 100644 --- a/styles/components/site-header.css +++ b/styles/components/site-header.css @@ -6,6 +6,8 @@ .header__nav-main { max-width: 80.5rem; + + .nav-main { @apply self-stretch; } } .nav-aux__container { diff --git a/styles/navigation/nav-main-default.css b/styles/navigation/nav-main-default.css index 12cd561..ba84354 100644 --- a/styles/navigation/nav-main-default.css +++ b/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; } } } }