:root {
--gpp-radius: 15px;
}
#wrapper-navbar { --uicore-header--logo-h: 38px;
--uicore-header--logo-padding: 0px; --uicore-header--menu-typo-c: #ffffff;
--uicore-header--menu-typo-ch: #ffffff; --gpp-island-inset: 18px;
--gpp-island-row: 50px;
--gpp-island-max: 1240px; --gpp-island-radius: var(--gpp-radius); --gpp-island-pad-y: 10px; --gpp-logo-scale: 1.2; --gpp-island-bg: rgba(17, 17, 17, 0.72);
--gpp-island-border: rgba(255, 255, 255, 0.14);
--gpp-island-blur: blur(20px) saturate(150%);
} #wrapper-navbar.ui-hide,
#wrapper-navbar.ui-hide .uicore-header-wrapper {
pointer-events: auto !important;
}
#wrapper-navbar.ui-hide .uicore-header-wrapper {
transform: none !important;
opacity: 1 !important;
} #wrapper-navbar .uicore-header-wrapper::before {
display: none !important;
}
#wrapper-navbar .uicore-header-wrapper {
box-shadow: none !important;
} #wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
margin-top: var(--gpp-island-inset);
max-width: min(var(--gpp-island-max), calc(100vw - 2 * var(--gpp-island-inset)));
border: 1px solid var(--gpp-island-border);
border-radius: var(--gpp-island-radius);
background: var(--gpp-island-bg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); padding-block: var(--gpp-island-pad-y) !important;
padding-inline: 30px !important;
-webkit-backdrop-filter: var(--gpp-island-blur);
backdrop-filter: var(--gpp-island-blur);
} @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
#wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
background: rgba(17, 17, 17, 0.9);
}
} #wrapper-navbar .uicore-header-wrapper .uicore-nav-menu {
height: var(--gpp-island-row) !important;
min-height: 0 !important;
}
#wrapper-navbar .uicore-header-wrapper ul.uicore-menu,
#wrapper-navbar .uicore-header-wrapper ul.uicore-menu > li {
height: var(--gpp-island-row) !important;
} #wrapper-navbar .uicore-header-wrapper ul.uicore-menu > li > a {
height: var(--gpp-island-row) !important;
line-height: var(--gpp-island-row) !important;
color: #fff !important;
} #wrapper-navbar .uicore-header-wrapper .uicore-branding {
transform: scale(var(--gpp-logo-scale));
transform-origin: left center;
} #wrapper-navbar .uicore-logo.uicore-main,
#wrapper-navbar .uicore-logo.uicore-mobile-main {
opacity: 0 !important;
}
#wrapper-navbar .uicore-logo.uicore-second,
#wrapper-navbar .uicore-logo.uicore-mobile-second {
opacity: 1 !important;
} @media ( max-width: 1024px ) {
#wrapper-navbar {
--gpp-island-inset: 12px; --gpp-island-row: 36px;
--gpp-logo-scale: 1;
--uicore-header--logo-h: 30px; --uicore-header--menu-typo-h: var(--gpp-island-row);
} #wrapper-navbar .uicore-mobile-head-right,
#wrapper-navbar .uicore-custom-area.uicore-only-mobile {
height: var(--gpp-island-row) !important;
}
#wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
padding-block: 6px !important;
padding-inline: 16px !important;
} #wrapper-navbar .uicore-header-wrapper {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: 999;
} #wrapper-navbar .uicore-header-wrapper > nav.uicore-container,
#wrapper-navbar .uicore-toggle {
pointer-events: auto !important;
} body.admin-bar #wrapper-navbar .uicore-header-wrapper {
top: 32px !important;
}
}
@media ( max-width: 782px ) {
body.admin-bar #wrapper-navbar .uicore-header-wrapper {
top: 46px !important;
}
} .uicore-navigation-wrapper { --gpp-drawer-top: 26px; --gpp-drawer-gap: 16px;
background: rgba(17, 17, 17, 0.85) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%);
backdrop-filter: blur(24px) saturate(140%);
}
.uicore-navigation-wrapper,
.uicore-navigation-wrapper a,
.uicore-navigation-wrapper .uicore-menu li > a,
.uicore-navigation-wrapper .uicore-custom-area,
.uicore-navigation-wrapper .uicore-custom-area a {
color: #fff !important;
} .uicore-navigation-wrapper .uicore-toggle .bar {
background-color: #fff !important;
}  .uicore-navigation-wrapper > .uicore-container {
box-sizing: border-box;
padding-top: var(--gpp-drawer-top) !important;
}
.uicore-navigation-wrapper .uicore-navigation-content {
box-sizing: border-box;
padding-top: var(--gpp-drawer-gap);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.uicore-navigation-wrapper {
background: rgba(17, 17, 17, 0.97) !important;
}
}
@media ( prefers-reduced-transparency: reduce ) {
.uicore-navigation-wrapper {
background: rgba(17, 17, 17, 0.97) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
} @media ( prefers-reduced-transparency: reduce ) {
#wrapper-navbar .uicore-header-wrapper > nav.uicore-container {
background: rgba(17, 17, 17, 0.95);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}