/* Header-specific styling for Pannonvera */
.shell-header {
background: rgba(253, 251, 248, 0.96);
backdrop-filter: blur(18px);
}
.shell-header__brand {
display: flex;
align-items: center;
gap: var(--space-3);
}
.shell-header__logo-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
}
.shell-header__logo-mark {
width: 32px;
height: 32px;
border-radius: 50%;
background: radial-gradient(circle at 30% 20%, #ffffff 0, #f7f2ea 40%, #e2dbcf 100%);
box-shadow: var(--shadow-sm);
position: relative;
}
.shell-header__logo-mark::after {
content: "P";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 1rem;
color: var(--gray-800);
}
.shell-header__logo-text {
font-family: var(--font-serif);
font-size: 1.25rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gray-900);
}
.shell-header__cta-wrap {
display: none;
}
.shell-header__cta {
white-space: nowrap;
}
/* Mobile menu toggle */
.shell-header__toggle {
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
background: linear-gradient(135deg, #ffffff, #f4ece1);
cursor: pointer;
box-shadow: var(--shadow-xs);
}
.shell-header__toggle-bar {
width: 18px;
height: 1.5px;
border-radius: 999px;
background-color: var(--gray-800);
transition: transform var(--transition-fast) ease-out,
opacity var(--transition-fast) ease-out;
}
/* Nav base */
.shell-header__nav {
position: fixed;
inset-inline: 0;
top: 60px;
background: rgba(253, 251, 248, 0.98);
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-normal) var(--transition-timing);
}
.shell-header__nav-list {
flex-direction: column;
padding: var(--space-4) var(--layout-gutter) var(--space-5);
}
.shell-header__nav-list .site-nav__link {
display: block;
padding-block: 0.35rem;
}
/* Open state */
.shell-header--menu-open .shell-header__nav {
max-height: 360px;
}
.shell-header--menu-open .shell-header__toggle-bar:first-child {
transform: translateY(3.75px) rotate(45deg);
}
.shell-header--menu-open .shell-header__toggle-bar:last-child {
transform: translateY(-3.75px) rotate(-45deg);
}
@media (max-width: 960px) {
.shell-header__nav {
display: block;
}
}
/* Desktop layout */
@media (min-width: 960px) {
.shell-header__toggle {
display: none;
}
.shell-header__nav {
position: static;
max-height: none;
border-bottom: none;
background: transparent;
}
.shell-header__nav-list {
flex-direction: row;
padding: 0;
}
.shell-header__cta-wrap {
display: block;
}
}
/* Active link handling via data attribute (optional enhancement) */
.site-nav__link[aria-current="page"] {
color: var(--color-primary-strong);
}
Document