From 2700bb6793b56a11762d0c7cb0357dc2aa2c5e57 Mon Sep 17 00:00:00 2001
From: Richard Ward <JohnDoe6345789@gmail.com>
Date: Wed, 31 Dec 2025 00:11:20 +0000
Subject: [PATCH] config: ui,styles,packages (1 files)

---
 packages/ui_header/seed/styles.json | 58 +++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 packages/ui_header/seed/styles.json

diff --git a/packages/ui_header/seed/styles.json b/packages/ui_header/seed/styles.json
new file mode 100644
index 000000000..90ff45f7f
--- /dev/null
+++ b/packages/ui_header/seed/styles.json
@@ -0,0 +1,58 @@
+[
+  {
+    "id": "header_navigation_styles",
+    "type": "component",
+    "category": "navigation",
+    "className": "header-navigation",
+    "description": "Main header navigation bar styling",
+    "css": ".header-navigation {\n  position: sticky;\n  top: 0;\n  z-index: 50;\n  width: 100%;\n  background-color: var(--background);\n  border-bottom: 1px solid var(--border);\n  backdrop-filter: blur(10px);\n  background-color: rgba(255, 255, 255, 0.8);\n}\n\n@supports (backdrop-filter: blur(10px)) {\n  .header-navigation {\n    background-color: rgba(255, 255, 255, 0.8);\n  }\n}"
+  },
+  {
+    "id": "header_container_styles",
+    "type": "component",
+    "category": "layout",
+    "className": "header-container",
+    "description": "Header content container",
+    "css": ".header-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1.5rem;\n  max-width: 1280px;\n  margin: 0 auto;\n}\n\n@media (min-width: 768px) {\n  .header-container {\n    padding: 1rem 2rem;\n  }\n}"
+  },
+  {
+    "id": "header_logo_styles",
+    "type": "component",
+    "category": "branding",
+    "className": "header-logo",
+    "description": "Header logo/brand styling",
+    "css": ".header-logo {\n  font-size: 1.5rem;\n  font-weight: 700;\n  color: var(--foreground);\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.header-logo:hover {\n  opacity: 0.8;\n}"
+  },
+  {
+    "id": "header_nav_links_styles",
+    "type": "component",
+    "category": "navigation",
+    "className": "header-nav-links",
+    "description": "Navigation links container",
+    "css": ".header-nav-links {\n  display: none;\n  gap: 2rem;\n  align-items: center;\n}\n\n@media (min-width: 768px) {\n  .header-nav-links {\n    display: flex;\n  }\n}"
+  },
+  {
+    "id": "header_nav_link_styles",
+    "type": "component",
+    "category": "link",
+    "className": "header-nav-link",
+    "description": "Individual navigation link styling",
+    "css": ".header-nav-link {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--muted-foreground);\n  text-decoration: none;\n  transition: color 0.2s ease-in-out;\n  position: relative;\n}\n\n.header-nav-link:hover {\n  color: var(--foreground);\n}\n\n.header-nav-link::after {\n  content: '';\n  position: absolute;\n  bottom: -4px;\n  left: 0;\n  width: 0;\n  height: 2px;\n  background: var(--primary);\n  transition: width 0.2s ease-in-out;\n}\n\n.header-nav-link:hover::after {\n  width: 100%;\n}\n\n.header-nav-link--active {\n  color: var(--primary);\n  font-weight: 600;\n}\n\n.header-nav-link--active::after {\n  width: 100%;\n}"
+  },
+  {
+    "id": "header_mobile_menu_styles",
+    "type": "component",
+    "category": "navigation",
+    "className": "header-mobile-menu",
+    "description": "Mobile hamburger menu styling",
+    "css": ".header-mobile-menu {\n  display: block;\n}\n\n@media (min-width: 768px) {\n  .header-mobile-menu {\n    display: none;\n  }\n}"
+  },
+  {
+    "id": "header_cta_styles",
+    "type": "component",
+    "category": "button",
+    "className": "header-cta",
+    "description": "Header call-to-action button styling",
+    "css": ".header-cta {\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  border-radius: 0.375rem;\n  background: var(--primary);\n  color: var(--primary-foreground);\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  text-decoration: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.header-cta:hover {\n  opacity: 0.9;\n  transform: translateY(-1px);\n}\n\n.header-cta:active {\n  transform: translateY(0);\n}"
+  }
+]