Prepare migration to Tailwind

assets/css/header.css

@@ -0,0 +1,166 @@
+/* Header Styles */
+.cs-header {
+  position: relative;
+  z-index: 1000;
+}
+
+.cs-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.cs-header__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+}
+
+.cs-header__inner-desktop {
+  display: flex;
+}
+
+.cs-header__inner-mobile {
+  display: none;
+}
+
+.cs-header__col {
+  display: flex;
+  align-items: center;
+}
+
+.cs-col-center {
+  flex: 1;
+  justify-content: center;
+}
+
+.cs-logo img {
+  height: 38px;
+  width: auto;
+}
+
+.cs-header__nav-inner {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 30px;
+}
+
+.cs-header__nav-inner li a {
+  color: #333;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.cs-header__nav-inner li a:hover {
+  color: #007bff;
+}
+
+.cs-header__custom-button {
+  background: #007bff;
+  color: white;
+  padding: 8px 16px;
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 500;
+  transition: background 0.3s ease;
+}
+
+.cs-header__custom-button:hover {
+  background: #0056b3;
+}
+
+.cs-header__search-toggle {
+  cursor: pointer;
+  margin-right: 15px;
+}
+
+/* Mobile Styles */
+@media (max-width: 1024px) {
+  .cs-header__inner-desktop {
+    display: none;
+  }
+  
+  .cs-header__inner-mobile {
+    display: flex;
+  }
+  
+  .cs-header__offcanvas {
+    position: fixed;
+    top: 0;
+    left: -300px;
+    width: 300px;
+    height: 100vh;
+    background: white;
+    z-index: 1001;
+    transition: left 0.3s ease;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
+  }
+  
+  .cs-header__offcanvas.active {
+    left: 0;
+  }
+  
+  .cs-header__offcanvas-nav ul {
+    list-style: none;
+    padding: 20px;
+  }
+  
+  .cs-header__offcanvas-nav ul li {
+    margin-bottom: 15px;
+  }
+  
+  .cs-header__offcanvas-nav ul li a {
+    color: #333;
+    text-decoration: none;
+    font-weight: 500;
+  }
+  
+  .cs-search-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    z-index: 1002;
+    display: none;
+  }
+  
+  .cs-search {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    padding: 30px;
+    border-radius: 8px;
+    z-index: 1003;
+    display: none;
+    min-width: 300px;
+  }
+}
+
+.cs-search__form {
+  display: flex;
+  gap: 10px;
+}
+
+.cs-search__input {
+  flex: 1;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.cs-search__submit {
+  padding: 10px 20px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}