feat: add top header with logo, phone and demo CTA

2026-04-03 01:07:39 +05:00
parent 4019a565ec
commit 37ddc9119d
3 changed files with 162 additions and 0 deletions
@@ -480,3 +480,109 @@ body.sidebar-overlay::after {
        margin-left: 0;
    }
 }
+
+/* ==========================================================================
+   Top header bar
+   ========================================================================== */
+
+.top-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--header-height);
+    padding: 0 32px;
+    background: var(--color-white);
+    border-bottom: 1px solid var(--color-gray-light);
+
+    /* Positioned to the right of the collapsed sidebar */
+    position: fixed;
+    top: 0;
+    left: var(--sidebar-width-collapsed);
+    right: 0;
+    z-index: 900;
+}
+
+.top-header__left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.top-header__logo {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+}
+
+.top-header__logo img {
+    height: 30px;
+    width: auto;
+}
+
+.top-header__tagline {
+    font-size: 0.875rem;
+    color: var(--color-gray-text);
+}
+
+.top-header__right {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+}
+
+.top-header__phone {
+    font-weight: 700;
+    color: var(--color-black);
+    text-decoration: none;
+    font-size: 0.875rem;
+}
+
+.top-header__phone:hover,
+.top-header__phone:focus {
+    color: var(--color-primary);
+    text-decoration: none;
+}
+
+.top-header__search {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-black);
+    padding: 4px;
+    transition: color var(--transition-base);
+}
+
+.top-header__search:hover,
+.top-header__search:focus {
+    color: var(--color-primary);
+}
+
+.top-header__search:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+/* Offset main content below the fixed top header */
+.site-content,
+.site-header,
+.site-footer {
+    margin-top: var(--header-height);
+}
+
+@media (max-width: 767px) {
+    .top-header {
+        left: 0;
+        padding: 0 16px 0 56px; /* leave room for hamburger button */
+    }
+
+    .top-header__tagline {
+        display: none;
+    }
+
+    .top-header__phone {
+        display: none;
+    }
+}