body {
--header-height: calc( var( --line-height--medium ) + var( --grid-wrap-padding-vertical ) * 2 );
--header-extension-offset: calc( var( --grid-wrap-padding-vertical ) * -2 + 0.2em );
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var( --header-height );
background-color: var( --background-color );
pointer-events: none;
z-index: 80;
}
header {
position: -webkit-sticky;
position: -moz-sticky;
position: sticky;
top: 0;
z-index: 100;
}
#header-inner {
position: relative;
background-color: var( --background-color );
}
#header-inner::before {
content: '';
position: absolute;
top: calc( ( var( --grid-wrap-padding-vertical ) + 5px ) * -1 );
left: 0px;
width: 100%;
height: calc( var( --grid-wrap-padding-vertical ) + 5px );
background-color: var( --background-color );
z-index: 10;
}
#header-inner > * {
z-index: 20;
}
header-extension {
display: block;
position: -webkit-sticky;
position: -moz-sticky;
position: sticky;
top: calc( var( --header-height ) + var( --header-extension-offset ) );
background: var( --background-color );
z-index: 90;
}
header + header-extension {
margin-top: var( --header-extension-offset );
}
body.view-project::before,
.view-project header,
header-extension:not( .is-in ),
.view-project header-extension {
--translateY: -100%;
--transform: translateY( var( --translateY ) ) scale( 0.75 );
-webkit-transform: var( --transform );
-moz-transform: var( --transform );
transform: var( --transform );
pointer-events: none;
}
header-extension:not( .is-in ),
.view-project header + header-extension {
--translateY: calc( -100% - var( --header-height ) );
}
.filter-bar {
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
display: flex;
}
.filter-bar::-webkit-scrollbar {
display: none;
}
.filter-bar .menu {
display: inline-flex;
flex-shrink: 0;
margin-left: auto;
margin-right: auto;
}
.filter-bar .menu .menu-item {
white-space: nowrap;
display: inline-flex;
}
.filter-bar .menu .menu-item:not( :last-child ) {
margin-right: 0.18em;;
}
.filter-bar .menu .menu-item:not( :last-child )::after {
content: ',';
margin-left: -0.025em;
}
#header__page-title a {
color: var( --black );
}
#header__navigation,
#header__language-switch,
#header__social-links {
overflow: hidden;
max-height: calc( var( --line-height ) * var( --ic, 1 ) );
}
#header__language-switch .menu {
display: flex;
}
#header__navigation-toggle {
position: absolute;
top: calc( var( --icon-padding-vertical ) * -0.8 );
right: calc( ( var( --icon-width ) + var( --icon-padding-horizontal ) * 3 ) * -1 );
} @media ( min-width: 700px ) {
.filter-bar .menu {
flex-wrap: wrap;
justify-content: center;
row-gap: 0.25em;
max-width: 100%;
}
} @media ( max-width: 1019px ) {
header {
padding-right: calc( var( --icon-width ) + var( --icon-padding-horizontal ) * 3 ) !important;
}
body:not( .navigation-is-active ) #header__navigation,
body:not( .navigation-is-active ) #header__language-switch,
body:not( .navigation-is-active ) #header__social-links {
margin-top: 0;
max-height: 0px;
}
body.navigation-is-active header {
background-color: var( --background-color );
}
body.navigation-is-active header + header-extension {
margin-top: 0;
}
#header__social-links {
margin-top: 0.15em;
}
} @media ( min-width: 1020px ) {
#header__page-title {
margin-right: calc( var( --grid-column-gap-horizontal ) * 2 );
}
#header__navigation {
overflow: visible;
}
#header-inner,
#header__navigation .menu {
display: flex;
justify-content: center;
}
#header__navigation .menu-item:not( :last-child ) {
margin-right: var( --grid-column-gap-horizontal );
}
#header__language-switch {
position: absolute;
top: 0;
right: 0;
}
#header__social-links {
position: absolute;
top: 0.1em;
left: 0;
}
#header__navigation-toggle {
display: none;
}
}body {
}
.menu-item a,
.lang-item a {
display: inline-block;
}
.menu-item.is-active a,
.lang-item.current-lang a {
--color: var( --black );
}
.lang-item:not( :last-child ) > a::after {
content: '/';
color: var( --gray );
}#footer__navigation .menu {
display: flex;
justify-content: center;
}
#footer__navigation .menu-item {
display: inline-flex;
}
#footer__navigation .menu-item:not( :last-child )::after {
content: '/';
margin: 0 0.2em;
}