:root {
    --hhight: 108px;
}
body.spacer {
    margin-top: var(--hhight);
}

.site-header {
    transition: all 0.33s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.site-header.scrolled {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    position: fixed;
    top: calc( -1 * var(--hhight) );
    z-index: 100;
    width: 100%;
}

.site-header.scrolled.animated {
    top: 0;
}

.site-header.scrolled.animated .topbar{
    display: none;
}