:root {  --color-primary: #E4CBBE; --color-white: #FFFFFF; --color-black: #242424; --color-dark: #333333; --color-text: #777777; --color-accent: #89A6B0; --color-light-bg: #F7F7F7; --color-dark-bg: #0A0A0A;  --color-border: rgba(255, 255, 255, 0.3);
} .site-header {
background-color: var(--color-primary);
width: 100%; font-family: var(--font-ui); position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 1000;
}
.header-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
} .header-top-bar {
padding: 12px 0; max-height: 60px;
}
.header-contact-info {
display: flex;
gap: 30px;
align-items: center;
}
.header-email {
font-family: var(--font-ui);
font-size: 0.85rem;
font-weight: 400;
color: var(--color-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.header-email:hover {
color: var(--color-accent);
} .header-main {
padding: 0;
}
.header-main-inner {
display: flex;
align-items: stretch; justify-content: space-between;
gap: 40px; height: 120px; } .site-branding {
flex-shrink: 0;
display: flex;
align-items: center;
}
.site-branding .custom-logo-link {
display: flex;
align-items: stretch;
height: 100%;
line-height: 1;
}
.site-branding .custom-logo {
display: block;
height: 100%; width: auto;
max-width: 100%;
object-fit: contain; mix-blend-mode: multiply;
filter: brightness(1.06);
}
.site-branding .site-title-text a {
font-family: var( --font-title );
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-black);
text-decoration: none;
line-height: 1.2;
transition: color 0.3s ease;
}
.site-branding .site-title-text a:hover {
color: var(--color-accent);
} .main-navigation {
flex-grow: 1;
display: flex;
align-items: center; } .main-navigation .menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
}
.main-navigation .menu-toggle .menu-toggle-text {
display: none;
}
.main-navigation .menu-toggle .hamburger {
display: block;
width: 25px;
height: 20px;
position: relative;
}
.main-navigation .menu-toggle .hamburger span {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-black);
position: absolute;
left: 0;
transition: all 0.3s ease;
}
.main-navigation .menu-toggle .hamburger span:nth-child(1) {
top: 0;
}
.main-navigation .menu-toggle .hamburger span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.main-navigation .menu-toggle .hamburger span:nth-child(3) {
bottom: 0;
}
.main-navigation .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
transform: rotate(45deg);
top: 9px;
}
.main-navigation .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
opacity: 0;
}
.main-navigation .menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
transform: rotate(-45deg);
bottom: 9px;
} .main-navigation .primary-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
gap: 35px;
}
.main-navigation .primary-menu li {
position: relative;
}
.main-navigation .primary-menu li a {
font-family: var(--font-ui);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-black);
text-decoration: none;
padding: 10px 0;
display: block;
transition: color 0.3s ease;
position: relative;
}
.main-navigation .primary-menu li a:hover,
.main-navigation .primary-menu li a:focus,
.main-navigation .primary-menu li a.current-menu-item,
.main-navigation .primary-menu li.current-menu-item > a,
.main-navigation .primary-menu li.current_page_item > a {
color: var(--color-accent);
} .main-navigation .primary-menu li a::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 1px;
background-color: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.main-navigation .primary-menu li a:hover::after,
.main-navigation .primary-menu li a.current-menu-item::after,
.main-navigation .primary-menu li.current-menu-item > a::after,
.main-navigation .primary-menu li.current_page_item > a::after {
transform: scaleX(1);
transform-origin: left;
} @media (max-width: 968px) {
.header-main {
padding: 12px 0;
} .header-main-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; gap: 20px;
height: auto; } .main-navigation {
display: contents;
}
.main-navigation .menu-toggle {
display: block;
order: 1; margin: 0;
} .main-navigation .primary-menu {
order: 2;
flex: 1 1 100%; flex-direction: column;
gap: 0;
display: none;
text-align: center;
padding: 8px 0;
background: var(--color-primary);
}
.main-navigation .primary-menu.toggled {
display: flex;
}
.main-navigation .primary-menu li a {
padding: 15px 0;
border-bottom: 1px solid var(--color-border);
} .main-navigation .primary-menu li:last-child a {
border-bottom: none;
}
.main-navigation .primary-menu li a::after {
display: none;
}
.site-branding .custom-logo-link {
height: auto;
}
.site-branding .custom-logo {
height: auto;
max-height: 60px;
}
.site-branding .site-title-text a {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
.header-top-bar {
text-align: center;
}
.header-top-bar .header-contact-info {
justify-content: center;
flex-direction: column;
gap: 8px;
}
.site-branding .custom-logo {
max-height: 90px;
}
.site-branding .site-title-text a {
font-size: 1.4rem;
}
} .site-header.is-compact .header-top-bar {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden; visibility: hidden;
}
.site-header.is-compact .header-main-inner {
height: 80px;
} @media (max-width: 968px) {
.site-header.is-compact .header-main {
padding: 6px 0;
}
.site-header.is-compact .header-main-inner {
height: auto; gap: 10px;
}
.site-header.is-compact .site-branding .custom-logo {
max-height: 44px;
}
}
@media (max-width: 480px) {
.site-header.is-compact .site-branding .custom-logo {
max-height: 36px;
}
}