header{
padding:var(--gap);
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.logo{
width:333px;
max-width:var(--max);
}
.logo img{
display: block;
}
.top-left{
position:absolute;
left:var(--gap);
top:50%;
transform:translateY(-50%);
}
.top-left-btn{
height:60px;
padding:0 20px;
background:var(--bg2);
border:2px solid var(--bc1);
border-radius:var(--br1);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
color:var(--cl3);
user-select:none;
}
.top-right-btn{
width:60px;
height:60px;
background:var(--bg2);
border:2px solid var(--bc1);
border-radius:var(--br1);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:var(--cl3);
user-select:none;
}
.btn-label{
font-family:var(--ff1);
font-size:20px;
font-weight:var(--fw2);
letter-spacing:var(--ls1);
}
.chevron{
margin-left:-4px;
position:relative;
top:2px;
}
.top-left.open .chevron{
transform:rotate(180deg);
}
.top-left-btn:hover,.top-right-btn:hover{
border-color:var(--cl1);
color:var(--cl1);
}
.top-left.open .top-left-btn,.top-right.open .top-right-btn{
border-color:var(--cl1);
color:var(--cl1);
}
.top-left-drop,.top-right-drop{
position:absolute;
top:calc(100% + 12px);
background:var(--bg2);
border:2px solid var(--bc1);
border-radius:var(--br1);
opacity:0;
visibility:hidden;
transform:translateY(-10px);
z-index:100;
overflow:hidden;
}
.top-left-drop{
left:0;
min-width:180px;
}
.top-right-drop{
right:0;
min-width:180px;
}
.top-left.open .top-left-drop,.top-right.open .top-right-drop{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.top-left-drop a,.top-right-drop a{
display:flex;
align-items:center;
gap:12px;
padding:0 20px;
height:60px;
font-family:var(--ff1);
font-size:20px;
font-weight:var(--fw2);
letter-spacing:var(--ls1);
color:var(--cl3);
border-bottom:2px solid var(--bc1);
user-select:none;
}
.top-left-drop a:last-child,.top-right-drop a:last-child{
border-bottom:none;
}
.top-left-drop a:hover,.top-right-drop a:hover{
color:var(--cl1);
background:var(--bg4);
}
.top-left-drop svg{
flex-shrink:0;
}
.top-right{
position:absolute;
right:var(--gap);
top:50%;
transform:translateY(-50%);
}