.page-nav-wrap{
position:relative;
width:var(--pw3);
max-width:100%;
margin:var(--gap) auto;
}
.page-nav-wrap .title{
margin:0 auto;
cursor:pointer;
transition:60ms;
position:relative;
z-index:101;
background-color:var(--bg4);
display:flex;
align-items:center;
gap:10px;
width:fit-content;
}
.page-nav-arrow{
display:inline-flex;
align-items:center;
color:currentColor;
transition:transform .2s ease,color .2s ease;
}
.page-nav-arrow svg{
width:24px;
height:24px;
fill:currentColor;
}
.page-nav-wrap .title.open .page-nav-arrow{
transform:rotate(180deg);
color:var(--cl1);
}
.page-nav-wrap .title.pressed{
transform:translateY(2px) scale(0.97);
}
.page-nav-wrap .title.open{
background-color:var(--bg2);
}
.page-nav-wrap .title.open a{
color:var(--cl1);
}
.page-nav-close{
display:none;
position:absolute;
right:var(--gap);
top:50%;
transform:translateY(-50%);
z-index:102;
width:60px;
height:60px;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
font-size:38px;
line-height:1;
color:var(--tx3);
cursor:pointer;
transition:60ms;
}
.page-nav-close:hover{
color:var(--cl1);
border-color:var(--cl1);
}
.page-nav-close.pressed{
transform:translateY(calc(-50% + 1px)) scale(0.96);
}
.page-nav-wrap.nav-open .page-nav-close{
display:flex;
align-items:center;
justify-content:center;
}
.page-nav-panel{
position:absolute;
left:50%;
transform:translateX(-50%);
top:calc(-1 * var(--gap));
width:var(--pw3);
max-width:100%;
background-color:var(--bg2);
border:var(--bw1) solid var(--cl1);
border-radius:var(--br1);
box-shadow:0 2px 4px rgba(0,0,0,0.15);
z-index:100;
display:none;
box-sizing:border-box;
box-shadow:var(--fbs);
}
.page-nav-panel.open{
display:flex;
flex-direction:column;
align-items:center;
border-color:#000;
}
.page-nav-spacer{
width:100%;
pointer-events:none;
flex-shrink:0;
}
.page-nav-list{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--gd4);
list-style:none;
margin:0;
padding:var(--gap) var(--gap) var(--gap);
width:100%;
box-sizing:border-box;
}
.page-nav-item{
display:flex;
align-items:center;
gap:14px;
height:52px;
padding:0 22px;
background:none;
border:var(--bw1) solid transparent;
border-radius:var(--br0);
font-family:var(--ff2);
font-size:19px;
font-weight:700;
color:var(--tx2);
cursor:pointer;
transition:60ms;
white-space:nowrap;
text-decoration:none;
}
.page-nav-item:hover{
background-color:var(--hv1);
border-color:var(--bc1);
color:var(--cl1);
}
.page-nav-item.active{
color:var(--cl1);
background-color:rgba(255,85,17,0.1);
border-color:rgba(255,85,17,0.25);
}
.page-nav-item.pressed{
transform:translateY(1px) scale(0.98);
}
.page-nav-item.placeholder{
opacity:0.3;
cursor:default;
pointer-events:none;
}
.page-nav-home{
display:none;
position:absolute;
left:var(--gap);
top:50%;
transform:translateY(-50%);
z-index:102;
width:60px;
height:60px;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
color:var(--tx3);
cursor:pointer;
transition:60ms;
text-decoration:none;
}
.page-nav-home svg{
width:26px;
height:26px;
fill:currentColor;
}
.page-nav-home:hover{
color:var(--cl1);
border-color:var(--cl1);
}
.page-nav-home.pressed{
transform:translateY(calc(-50% + 1px)) scale(0.96);
}
.page-nav-wrap.nav-open .page-nav-home{
display:flex;
align-items:center;
justify-content:center;
}
.page-nav-item-icon{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.page-nav-item-icon svg{
width:26px;
height:26px;
fill:currentColor;
}
@media(max-width:1100px){
.page-nav-list{
grid-template-columns:repeat(3,1fr);
}
}
@media(max-width:800px){
.page-nav-list{
grid-template-columns:repeat(2,1fr);
padding:var(--gd2);
}
.page-nav-item{
font-size:16px;
height:44px;
padding:0 16px;
}
}
@media(max-width:500px){
.page-nav-list{
grid-template-columns:1fr;
}
}