/**
* Unified Header Styles
* Used across all pages to ensure consistent header height, styling, and layout
* This CSS file is used with includes/header.html and js/header-init.js
*
* Usage:
* 1. Add to :
* 2. Add to :
* 3. No PHP code needed - header is loaded dynamically
*/
:root {
--header-height: 70px;
--primary-color: #023e8a;
--secondary-color: #0077b6;
--dark-color: #212529;
--light-color: #f8f9fa;
}
/* Fix header height and positioning */
header {
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 15px 0;
transition: all 0.4s ease;
}
header.scrolled {
padding: 10px 0;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Logo styling */
.logo {
position: relative;
z-index: 2;
}
.logo h1 {
font-size: 2.2rem;
font-weight: 700;
color: var(--primary-color, #0056b3);
transition: all 0.3s ease;
margin: 0;
}
.logo img {
max-height: 65px;
width: auto;
}
.logo a {
text-decoration: none;
border-bottom: none !important;
background-color: transparent !important;
}
.logo a:hover,
.logo a:focus {
background-color: transparent !important;
border-bottom: none !important;
}
/* Navigation menu styles */
.main-nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.main-nav li {
margin: 0 10px;
}
.main-nav a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: var(--dark-color, #333);
font-weight: 500;
position: relative;
}
.main-nav a.active,
.main-nav a:hover {
color: var(--primary-color, #0056b3);
}
/* Mobile menu toggle */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--dark-color, #333);
padding: 10px;
z-index: 1001;
transition: all 0.3s ease;
outline: none;
}
.mobile-menu-toggle:focus {
outline: none;
}
.mobile-menu-toggle.active {
color: var(--primary-color, #0056b3);
}
/* Prevent scrolling when menu is open */
body.menu-open {
overflow: hidden;
}
/* Responsive Design */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: block;
}
.main-nav {
position: fixed;
top: var(--header-height);
left: -100%;
width: 80%;
max-width: 300px;
height: calc(100vh - var(--header-height));
background: white;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
transition: left 0.3s ease;
z-index: 999;
}
.main-nav.active {
left: 0;
}
.main-nav ul {
flex-direction: column;
gap: 0;
padding: 20px 0;
}
.main-nav ul li {
width: 100%;
margin: 0;
}
.main-nav ul li a {
display: block;
padding: 15px 20px;
border-radius: 0;
}
}
/* Dropdown menu styles */
.main-nav li.has-dropdown {
position: relative;
}
.main-nav .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: white;
list-style: none;
margin: 0;
padding: 10px 0;
min-width: 200px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 4px;
z-index: 1002;
}
.main-nav li.has-dropdown:hover .dropdown-menu {
display: block;
}
.main-nav .dropdown-menu li {
margin: 0;
}
.main-nav .dropdown-menu a {
padding: 12px 20px;
display: block;
color: var(--dark-color, #333);
text-decoration: none;
transition: all 0.3s ease;
}
.main-nav .dropdown-menu a:hover,
.main-nav .dropdown-menu a.active {
background-color: var(--light-color, #f8f9fa);
color: var(--primary-color, #0056b3);
}
/* Ensure page content starts below fixed header */
html {
scroll-padding-top: var(--header-height);
scroll-behavior: smooth;
}
body {
margin-top: var(--header-height);
}
/* Container styling */
.container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}