Step 1.5: Build header template with navigation and mobile menu

2025-11-28 16:07:57 -06:00
parent 9f88802dee
commit 62f051376d
10 changed files with 390 additions and 4 deletions
@@ -0,0 +1,220 @@
+/**
+ * Site Header Styles
+ *
+ * @package HomeProz
+ */
+
+.site-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: var(--color-bg-dark);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.header-container {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.header-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+}
+
+// Logo / Branding
+.site-branding {
+    flex-shrink: 0;
+
+    .custom-logo-link {
+        display: block;
+
+        img {
+            max-height: 60px;
+            width: auto;
+        }
+    }
+
+    .site-title-link {
+        text-decoration: none;
+    }
+
+    .site-title {
+        font-family: var(--font-display);
+        font-size: 1.5rem;
+        color: var(--color-text);
+        letter-spacing: 0.02em;
+    }
+}
+
+// Desktop Navigation
+.main-navigation {
+    display: none;
+    flex-grow: 1;
+    justify-content: center;
+
+    @media (min-width: 1024px) {
+        display: flex;
+    }
+
+    .nav-menu {
+        display: flex;
+        align-items: center;
+        gap: 2rem;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .menu-item {
+        a {
+            display: block;
+            padding: 0.5rem 0;
+            color: var(--color-text-muted);
+            font-size: 0.875rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            text-decoration: none;
+
+            &:hover {
+                color: var(--color-text);
+            }
+        }
+
+        &.current-menu-item a,
+        &.current_page_item a {
+            color: var(--color-accent-light);
+        }
+    }
+}
+
+// Mobile Menu Toggle
+.menu-toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+
+    @media (min-width: 1024px) {
+        display: none;
+    }
+
+    .menu-toggle-icon {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+    }
+
+    .bar {
+        display: block;
+        width: 24px;
+        height: 2px;
+        background-color: var(--color-text);
+    }
+
+    &[aria-expanded="true"] {
+        .bar:nth-child(1) {
+            transform: translateY(7px) rotate(45deg);
+        }
+        .bar:nth-child(2) {
+            opacity: 0;
+        }
+        .bar:nth-child(3) {
+            transform: translateY(-7px) rotate(-45deg);
+        }
+    }
+}
+
+// Header CTA
+.header-cta {
+    display: none;
+    flex-shrink: 0;
+
+    @media (min-width: 1024px) {
+        display: block;
+    }
+
+    .header-phone {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.625rem 1.25rem;
+        background-color: var(--color-accent);
+        color: white;
+        font-size: 0.875rem;
+        font-weight: 600;
+        text-decoration: none;
+        border-radius: 0.25rem;
+
+        &:hover {
+            background-color: var(--color-accent-hover);
+            color: white;
+        }
+    }
+}
+
+// Mobile Navigation
+.mobile-navigation {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: var(--color-bg-card);
+    border-bottom: 1px solid var(--color-border);
+    padding: 1rem;
+
+    &.is-open {
+        display: block;
+    }
+
+    @media (min-width: 1024px) {
+        display: none !important;
+    }
+
+    .mobile-nav-menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .menu-item {
+        border-bottom: 1px solid var(--color-border);
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        a {
+            display: block;
+            padding: 1rem 0;
+            color: var(--color-text);
+            font-size: 1rem;
+            text-decoration: none;
+
+            &:hover {
+                color: var(--color-accent-light);
+            }
+        }
+    }
+
+    .mobile-menu-cta {
+        margin-top: 1.5rem;
+        padding-top: 1.5rem;
+        border-top: 1px solid var(--color-border);
+
+        .btn {
+            display: block;
+            width: 100%;
+            text-align: center;
+        }
+    }
+}