.wp-site
|
nav {
|
--height: fit-content;
|
display: flex;
|
height: var(--height);
|
}
|
body > header,
|
.wp-site-blocks > header nav{
|
--height: 3rem;
|
}
|
|
|
nav ul {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
list-style: none;
|
flex-flow: row wrap;
|
gap: 1rem;
|
padding: 0;
|
margin: 0;
|
}
|
body > header nav > ul,
|
.wp-site-blocks > header nav > ul {
|
flex-flow: row nowrap;
|
gap: 0;
|
}
|
nav a {
|
padding: .25rem 1rem;
|
text-decoration: none;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
nav li,
|
nav a {
|
display: flex;
|
height: var(--height);
|
}
|
nav .has-submenu > a {
|
padding-right: .5rem;
|
}
|
nav a:hover {
|
background-color: var(--action-0);
|
color: var(--light-0);
|
}
|
nav li {
|
list-style: none;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
}
|
nav li + li:before {
|
content: ''
|
}
|
|
nav .has-submenu li a,
|
nav .has-submenu li {
|
width: 100%;
|
height: calc(var(--height) * .8);
|
}
|
|
footer nav:first-of-type a:hover {
|
background-color: transparent;
|
color: var(--action-100);
|
}
|
footer nav:first-of-type li {
|
display: flex;
|
align-items: center;
|
}
|
footer nav:first-of-type li + li::before {
|
content: "ยท";
|
display: block;
|
color: var(--contrast-200);
|
}
|
|
/** Main Navigation **/
|
body > header,
|
.wp-site-blocks > header {
|
position: sticky;
|
top: 0;
|
left: 0;
|
right: 0;
|
height: var(--height);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 .5rem;
|
background-color: var(--base);
|
z-index: 9999;
|
box-shadow: var(--shadow);
|
}
|
|
|
nav.fixed {
|
z-index: 5;
|
--height: 4rem;
|
position: fixed;
|
width: var(--height);
|
height: var(--height);
|
bottom:0;
|
right: 0;
|
}
|
|
nav.fixed.bottom {
|
width: calc(100% - var(--height));
|
left: 0;
|
box-shadow: var(--shadow);
|
}
|
.fixed.bottom ul {
|
justify-content: space-between;
|
background-color: var(--base);
|
}
|
.fixed.bottom li {
|
flex: 1;
|
}
|
.fixed.bottom a {
|
width: 100%;
|
}
|
.fixed.bottom a:hover {
|
background-color: var(--action-0);
|
color: var(--light-0);
|
}
|
|
body > header nav ul,
|
.wp-site-blocks > header nav ul {
|
background-color: var(--overlay-medium);
|
}
|
|
header .title {
|
margin: 0 0 0 .25rem;
|
font-family: var(--heading);
|
font-weight: 400;
|
width: 100%;
|
height: 100%;
|
font-size: var(--small);
|
color: var(--contrast);
|
display: flex;
|
align-items: flex-start;
|
justify-content:center;
|
}
|
.title .icon {
|
--w: 5em;
|
align-items: flex-start;
|
}
|
|
.wp-site-blocks > header p.title:not(:has(a)),
|
.wp-site-blocks > header p.title a {
|
padding: 0;
|
}
|
body > header nav > ul > li > a,
|
body > header nav > ul > li > button,
|
.wp-site-blocks > header nav > ul > li > a,
|
.wp-site-blocks > header nav > ul > li > button {
|
padding: 0 .25em;
|
}
|
|
@media (min-width: 768px){
|
.wp-site-blocks > header p.title:not(:has(a)),
|
p.title a {
|
padding: 0 1rem;
|
}
|
.p-title {
|
margin: 0 0 0 2rem;
|
}
|
}
|
body > header a,
|
.wp-site-blocks > header a {
|
/*text-transform: lowercase;*/
|
color: var(--contrast);
|
padding: 0;
|
font-size: var(--small);
|
}
|
@media (min-width: 768px){
|
body > header a {
|
padding: 0 1em;
|
}
|
}
|
.title a {
|
font-size: var(--small);
|
text-decoration: none;
|
display: flex;
|
align-items: center;
|
}
|
.title a:hover {
|
color: var(--action-0);
|
}
|
.title a::before,
|
.title a::after {
|
font-size: 2em;
|
max-width:.5em;
|
font-weight: 100;
|
}
|
.title a:not(:hover)::before,
|
.title a:not(:hover)::after {
|
color: transparent;
|
}
|
nav ul .icon {
|
padding: 0 .5rem;
|
}
|
/** Submenus **/
|
.has-submenu button.toggle {
|
height: var(--height);
|
padding: 0;
|
background-color: var(--base);
|
color: var(--contrast);
|
border-radius: 0;
|
}
|
.has-submenu button.toggle:hover {
|
background-color: var(--action-0);
|
color: var(--base);
|
}
|
nav button.toggle svg {
|
transform: rotate(0deg);
|
transition: all var(--timing) var(--function);
|
}
|
.has-submenu.open button.toggle:not(.notifications, .quick-help) svg,
|
.has-submenu:hover button.toggle:not(.notifications, .quick-help) svg {
|
transform: rotate(900deg);
|
transition: all var(--timing) var(--function);
|
}
|
.has-submenu.open button.toggle,
|
.has-submenu:hover button.toggle {
|
border-color: var(--action-0);
|
}
|
nav ul.submenu {
|
position: absolute;
|
top: 100%;
|
left: 0;
|
flex-flow: column nowrap;
|
max-height: 0;
|
gap: 0;
|
transform: scaleY(0);
|
width: max-content;
|
min-width: 100%;
|
background-color: var(--overlay-light);
|
border: 2px solid var(--overlay-light);
|
transition: all var(--timing) var(--function);
|
}
|
nav ul.submenu li {
|
background-color: var(--overlay-heavy);
|
border: 1px solid var(--base-50);
|
}
|
nav ul.submenu li:hover {
|
background-color: var(--overlay-action-heavy);
|
}
|
nav ul.submenu a:hover {
|
background-color: transparent;
|
}
|
body > header .submenu,
|
.wp-site-blocks > header .submenu {
|
right: 0;
|
left: auto;
|
}
|
|
.has-submenu.open .submenu,
|
.has-submenu:hover .submenu {
|
transform: scaleY(1);
|
max-height: 1000%;
|
transition: all var(--timing) var(--function);
|
}
|
.notifications .submenu {
|
position: fixed;
|
top: -300vh;
|
left: 0;
|
right: 0;
|
z-index: -1;
|
background-color: var(--overlay-heavy);
|
}
|
.notifications .submenu li {
|
max-width: min(600px, 90vw);
|
background-color: var(--base);
|
}
|
.notifications #view-all {
|
background-color: var(--base-100);
|
}
|
.notifications.has-submenu:hover .submenu,
|
.notifications.open .submenu {
|
top: 3rem;
|
}
|
|
/** Main Nav **/
|
nav.always {
|
width: 5rem;
|
height: 5rem;
|
}
|
/*body > header nav.always > ul,*/
|
.wp-site-blocks>header nav.always > ul {
|
position: fixed;
|
display: flex;
|
flex-flow: column nowrap;
|
justify-content: flex-end;
|
align-items: center;
|
background-color: var(--overlay-medium);
|
backdrop-filter: blur(5px);
|
z-index: 9999999;
|
margin: 0;
|
padding: 4rem 0 2rem;
|
top: 0;
|
right: -300vw;
|
width: 100%;
|
height: calc(100vh - 8rem);
|
overflow:hidden;
|
overflow-y: scroll;
|
transition: right var(--timing) var(--function);
|
}
|
nav.always >ul li:hover,
|
nav.always >ul li:focus-within,
|
nav.always >ul li.active {
|
background-color: var(--overlay-heavy);
|
}
|
nav.always li,
|
nav.always li a{
|
width: 100%;
|
justify-content: flex-end;
|
}
|
nav.always li a{
|
padding-right: 2rem;
|
}
|
nav.always > button.toggle {
|
position:fixed;
|
bottom: 0;
|
right: 0;
|
width: 4rem;
|
height: 4rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background-color: var(--base);
|
color: var(--contrast);
|
transition: width var(--timing) var(--function);
|
transition-property: width, background-color;
|
border-radius: 0;
|
box-shadow: var(--shadow);
|
}
|
|
nav.always.open > button.toggle {
|
z-index: 10000000;
|
width:100%;
|
background-color: var(--overlay-heavy);
|
backdrop-filter: blur(5px);
|
transition: width var(--timing) var(--function);
|
transition-property: width, background-color;
|
}
|
nav.always > button.toggle:hover {
|
background-color: var(--action-0);
|
}
|
nav.always.open > button.toggle .menu,
|
nav.always >button.toggle .close {
|
transform: scale(0);
|
height: 0;
|
width: 0;
|
}
|
nav.always > button.toggle .menu,
|
nav.always.open > button.toggle .close {
|
transform: scale(1);
|
height: 32px;
|
width: 32px;
|
}
|
|
.wp-site-blocks>header nav.always.open > ul {
|
width: calc(100% + 16px);
|
right: -16px;
|
padding-right: 16px;
|
transition: right var(--timing) var(--function);
|
}
|
.wp-site-blocks>header nav.always.open > ul li a {
|
padding-right: 2rem;
|
}
|
|
nav#breadcrumbs {
|
max-width: var(--full);
|
position: absolute;
|
background-color: var(--overlay-medium);
|
font-size: var(--small);
|
padding: .125em;
|
}
|
nav#breadcrumbs ol {
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
display: flex;
|
align-items: center;
|
}
|
nav#breadcrumbs ol li + li:before {
|
content: '/';
|
color: var(--contrast-200);
|
}
|
nav#breadcrumbs li:last-of-type {
|
margin-right: .5em;
|
}
|
nav#breadcrumbs a {
|
padding: 0 .125rem;
|
white-space: nowrap;
|
height: 2em;
|
color: var(--contrast);
|
}
|
nav#breadcrumbs svg {
|
width: 20px;
|
height: 20px;
|
}
|
|
nav.on-this-page {
|
max-width: none;
|
z-index: 99;
|
margin: 0;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
height: 4rem;
|
width: calc(100vw - 6rem);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 .5rem;
|
background-color: var(--overlay-medium);
|
box-shadow: var(--shadow);
|
color: var(--base-200);
|
}
|
nav.on-this-page ul {
|
gap: 0;
|
width: 100%;
|
justify-content: flex-start;
|
}
|
nav.on-this-page a {
|
width: 100%;
|
height: 100%;
|
}
|
nav.on-this-page li:not(.has) {
|
padding: 0;
|
}
|
nav.letters li {
|
width: 100%;
|
max-width: calc(7.69% - 2px);
|
}
|
nav.on-this-page .active a {
|
background-color: var(--overlay-action-heavy);
|
color: var(--light-0);
|
}
|
|
@media (min-width: 768px){
|
nav.letters li {
|
max-width: none;
|
width: fit-content;
|
}
|
nav.letters a,
|
nav.letters li:not(.has){
|
padding: .25rem .66rem;
|
}
|
}
|
nav.index {
|
background-color: var(--overlay-heavy);
|
justify-content: flex-start;
|
gap: .5em;
|
}
|
nav.index ul {
|
--height: 3rem;
|
height: var(--height);
|
justify-content: flex-start;
|
width: fit-content;
|
}
|
|
nav.index li {
|
flex-shrink: 0;
|
transform: scaleX(0);
|
transform-origin: right;
|
max-width: 0;
|
overflow: hidden;
|
transition: transform var(--timing) var(--function);
|
transition-property: transform;
|
height: 100%;
|
}
|
|
nav.index li.active {
|
transform: scaleX(1);
|
transform-origin: left;
|
width: 100%;
|
flex-shrink: 1;
|
max-width: fit-content;
|
}
|
@media (min-width: 768px ){
|
nav.index li.adj {
|
transform: scaleX(1);
|
transform-origin: left;
|
width: 100%;
|
flex-shrink: 1;
|
max-width: fit-content;
|
}
|
}
|
nav.index a {
|
width: 100%;
|
height: calc(100% - 4px);
|
padding-top: 0;
|
padding-bottom: 0;
|
border-bottom: 4px solid transparent;
|
}
|
nav.index .active a {
|
border-color: var(--action-0);
|
color: var(--contrast);
|
}
|
nav.index a:hover,
|
nav.index .active a:hover {
|
background-color: var(--action-0);
|
color: var(--light-0);
|
}
|
nav.index label {
|
display: flex;
|
color: var(--contrast);
|
align-items: center;
|
margin: 0;
|
}
|
nav.index label button {
|
margin-left: 1em;
|
}
|
|
nav.index.open {
|
height: calc(100% - 8rem);
|
z-index: 999999999;
|
width: 100%;
|
display: flex;
|
flex-direction: column-reverse;
|
background-color: var(--overlay-heavy);
|
backdrop-filter: blur(5px);
|
align-items: flex-end;
|
}
|
nav.index.open label {
|
max-width: 90%;
|
margin-top: 1rem;
|
margin-right: 2rem;
|
}
|
nav.index.open .toggle svg {
|
transform: rotate(45deg);
|
}
|
nav.index.open ul {
|
height:100%;
|
max-width: 100%;
|
width: 100%;
|
flex-direction: column;
|
justify-content: flex-end;
|
}
|
nav.index.open ul li {
|
background-color: transparent;
|
max-width: 100%!important;
|
width: 100%;
|
height: var(--height);
|
transform: scaleX(1);
|
flex-shrink: 1;
|
overflow:visible;
|
}
|
nav.index.open ul li a {
|
background-color: transparent;
|
justify-content: flex-end;
|
padding: 0 2rem 0 0;
|
height: calc(var(--height) - 4px);
|
}
|
nav.index.open ul li a:hover {
|
background-color: var(--overlay-action-heavy);
|
}
|
/**
|
To center the logo between two navigations:
|
*/
|
header .title {
|
width: 100%;
|
margin: 0 2rem;
|
}
|
