From fe6ac7264d377a79f83caff7cf14c4828b9e635e Mon Sep 17 00:00:00 2001
From: Mark Atwood <mark@wolfssl.com>
Date: Mon, 8 Jun 2026 17:48:46 -0700
Subject: [PATCH] fix: correct brand color to official Pantone 7466 U

Updates primary teal from #1fbeca to #00B2A9 (Pantone 7466 U) across
all MkDocs skin files. This matches the official color specified in the
original 2012 logo design (CMYK 70/0/23/0).

The previous #1fbeca was close but not brand-accurate. Adds documentation
comments to all skin.css files explaining the Pantone specification.

Files updated:
- common/skin.css (shared by all manuals)
- wolfSSH/src/skin.css (English)
- wolfSSH/src-ja/skin.css (Japanese)

Coordinates with blog color fix (posts.wolfssl.com).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 common/skin.css         | 22 ++++++++++++++--------
 wolfSSH/src-ja/skin.css | 21 +++++++++++++--------
 wolfSSH/src/skin.css    | 21 +++++++++++++--------
 3 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/common/skin.css b/common/skin.css
index 6f1809a3..a5ba3af6 100644
--- a/common/skin.css
+++ b/common/skin.css
@@ -1,29 +1,35 @@
+/* wolfSSL Brand Colors
+ * Primary Teal: #00B2A9 (PANTONE 7466 U)
+ * CMYK: 70/0/23/0 (from 2012 original logo)
+ * Previous incorrect value: #1fbeca
+ */
+
 .md-header{
     background-color: #fff;
 }
 
 .md-ellipsis{
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 1.1rem;
 }
 
 .md-ellipsis-nav {
     margin-right: 3%;
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 16px;
     width: 450px;
 }
 
 .md-ellipsis-nav a{
     color:#fff;
-    background-color: #1fbeca;
+    background-color: #00B2A9;
     padding: 6px;
     border-radius: 3.5px;
     margin-left: 3px;
 }
 
 .md-ellipsis-nav a:hover{
-    color: #1fbeca;
+    color: #00B2A9;
     background-color: #000;
 }
 
@@ -53,11 +59,11 @@
 }
 
 .md-nav__link:is(:focus, :hover){
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-nav__item .md-nav__link--active {
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-header__button.md-logo :is(img, svg){
@@ -70,7 +76,7 @@
 }
 
 .md-typeset a:hover {
-     color: #1fbeca;
+     color: #00B2A9;
 }
 
 .md-footer {
@@ -79,7 +85,7 @@
 }
 
 .md-icon svg {
-    fill: #1fbeca;
+    fill: #00B2A9;
 }
 
 .md-footer-meta {
diff --git a/wolfSSH/src-ja/skin.css b/wolfSSH/src-ja/skin.css
index 95cdae71..36a18bd9 100644
--- a/wolfSSH/src-ja/skin.css
+++ b/wolfSSH/src-ja/skin.css
@@ -1,29 +1,34 @@
+/* wolfSSL Brand Colors
+ * Primary Teal: #00B2A9 (PANTONE 7466 U)
+ * CMYK: 70/0/23/0 (from 2012 original logo)
+ * Previous incorrect value: #1fbeca
+ */
 .md-header{
     background-color: #fff;
 }
 
 .md-ellipsis{
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 1.1rem;
 }
 
 .md-ellipsis-nav {
     margin-right: 3%;
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 16px;
     width: 450px;
 }
 
 .md-ellipsis-nav a{
     color:#fff;
-    background-color: #1fbeca;
+    background-color: #00B2A9;
     padding: 6px;
     border-radius: 3.5px;
     margin-left: 3px;
 }
 
 .md-ellipsis-nav a:hover{
-    color: #1fbeca;
+    color: #00B2A9;
     background-color: #000;
 }
 
@@ -53,11 +58,11 @@
 }
 
 .md-nav__link:is(:focus, :hover){
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-nav__item .md-nav__link--active {
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-header__button.md-logo :is(img, svg){
@@ -70,7 +75,7 @@
 }
 
 .md-typeset a:hover {
-     color: #1fbeca;
+     color: #00B2A9;
 }
 
 .md-footer {
@@ -79,7 +84,7 @@
 }
 
 .md-icon svg {
-    fill: #1fbeca;
+    fill: #00B2A9;
 }
 
 .md-footer-meta {
diff --git a/wolfSSH/src/skin.css b/wolfSSH/src/skin.css
index 95cdae71..36a18bd9 100644
--- a/wolfSSH/src/skin.css
+++ b/wolfSSH/src/skin.css
@@ -1,29 +1,34 @@
+/* wolfSSL Brand Colors
+ * Primary Teal: #00B2A9 (PANTONE 7466 U)
+ * CMYK: 70/0/23/0 (from 2012 original logo)
+ * Previous incorrect value: #1fbeca
+ */
 .md-header{
     background-color: #fff;
 }
 
 .md-ellipsis{
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 1.1rem;
 }
 
 .md-ellipsis-nav {
     margin-right: 3%;
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 16px;
     width: 450px;
 }
 
 .md-ellipsis-nav a{
     color:#fff;
-    background-color: #1fbeca;
+    background-color: #00B2A9;
     padding: 6px;
     border-radius: 3.5px;
     margin-left: 3px;
 }
 
 .md-ellipsis-nav a:hover{
-    color: #1fbeca;
+    color: #00B2A9;
     background-color: #000;
 }
 
@@ -53,11 +58,11 @@
 }
 
 .md-nav__link:is(:focus, :hover){
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-nav__item .md-nav__link--active {
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-header__button.md-logo :is(img, svg){
@@ -70,7 +75,7 @@
 }
 
 .md-typeset a:hover {
-     color: #1fbeca;
+     color: #00B2A9;
 }
 
 .md-footer {
@@ -79,7 +84,7 @@
 }
 
 .md-icon svg {
-    fill: #1fbeca;
+    fill: #00B2A9;
 }
 
 .md-footer-meta {