header{
padding:26px;
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
margin:0 auto;
}
.header-right{
display:flex;
align-items:center;
gap:var(--gd2);
}
.logo{
display:flex;
align-items:center;
font-size:1.6rem;
font-weight:700;
color:var(--cl1);
letter-spacing:-0.5px;
font-family:var(--ff2);
text-decoration:none;
}
.logo-img{
height:var(--lz1);
width:var(--lz1);
object-fit:contain;
}
.logo:hover{
text-decoration:none;
}
.logo span{
color:var(--ac1);
}
.header-lang-wrap{
position:relative;
}
.header-lang-btn{
width:var(--lz1);
height:var(--lz1);
min-width:0;
display:flex;
align-items:center;
justify-content:center;
background:none;
border:none;
border-radius:100px;
color:var(--cl2);
cursor:pointer;
padding:0;
font-family:var(--ff2);
font-size:0.82rem;
font-weight:700;
letter-spacing:0;
transition:background 100ms,color 100ms;
}
.header-lang-btn:hover{
background:var(--bg3);
color:var(--cl1);
}
.header-lang-code{
line-height:1;
}
.header-lang-dropdown{
position:absolute;
top:calc(100% + 6px);
right:0;
background:var(--bg2);
border:none;
border-radius:0;
width:180px;
box-shadow:var(--bs1);
z-index:1000;
display:none;
flex-direction:column;
max-height:calc(100vh - 96px);
overflow-y:auto;
font-family:var(--ff2);
font-size:1rem!important;
}
.header-lang-dropdown.open{
display:flex;
}
.header-lang-dropdown button{
width:100%;
padding:10px 14px;
background:none;
border:none;
color:var(--cl2);
font-family:var(--ff2);
font-size:inherit;
text-align:left;
cursor:pointer;
transition:background 100ms,color 100ms;
}
.header-lang-dropdown button:hover,.header-lang-dropdown button.active{
background:var(--bg3);
color:var(--cl1);
}
.login-btn{
padding:13px 30px;
background:var(--ac1);
color:var(--bgc);
border:none;
border-radius:100px;
font-size:1.05rem;
font-weight:600;
font-family:var(--ff2);
cursor:pointer;
}
.login-modal{
position:fixed;
inset:0;
width:100%;
height:100%;
max-width:none;
max-height:none;
margin:0;
padding:0;
border:0;
background:rgba(0,0,0,0.6);
z-index:2000;
display:none;
align-items:center;
justify-content:center;
backdrop-filter:blur(4px);
}
.login-modal[open]{
display:flex;
}
.login-modal-content{
background:var(--bg2);
border-radius:0;
padding:32px;
max-width:380px;
width:90%;
position:relative;
box-shadow:var(--bs2);
}
.login-modal-close{
position:absolute;
top:12px;
right:16px;
background:none;
border:none;
color:var(--cl3);
font-size:1.5rem;
cursor:pointer;
padding:4px;
line-height:1;
}
.login-modal-close:hover{
color:var(--cl1);
}
.login-modal-header{
text-align:center;
margin-bottom:24px;
}
.login-modal-logo{
height:48px;
margin-bottom:12px;
}
.login-modal-header h2{
font-size:1.3rem;
font-weight:700;
color:var(--cl1);
font-family:var(--ff2);
margin:0 0 6px;
}
.login-modal-header p{
color:var(--cl3);
font-size:0.9rem;
margin:0;
font-family:var(--ff2);
}
.login-modal-buttons{
display:flex;
flex-direction:column;
gap:10px;
}
.login-oauth-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px 16px;
border-radius:0;
font-size:0.95rem;
font-weight:600;
font-family:var(--ff2);
text-decoration:none;
transition:opacity 100ms;
cursor:pointer;
background:var(--bg2);
color:var(--fg);
}
.login-oauth-btn:hover{
opacity:0.85;
}
.login-google svg{width:24px;height:24px;}
.login-microsoft svg{width:22px;height:22px;}
.login-yahoo svg{width:26px;height:26px;}
.um-wrap{
position:relative;
}
.um-btn{
width:var(--lz1);
height:var(--lz1);
min-width:0;
display:flex;
align-items:center;
justify-content:center;
background:none;
border:none;
border-radius:100px;
color:var(--cl2);
cursor:pointer;
padding:0;
transition:background 100ms,color 100ms;
}
.um-btn:hover{
background:var(--bg3);
color:var(--cl1);
}
.um-btn svg{
width:28px;
height:28px;
flex-shrink:0;
opacity:0.9;
}
.um-dropdown{
position:absolute;
top:calc(100% + 6px);
right:0;
background:var(--bg2);
border:none;
border-radius:0;
width:340px;
box-shadow:var(--bs1);
z-index:1000;
display:none;
flex-direction:column;
max-height:calc(100vh - 96px);
overflow-y:auto;
font-family:var(--ff2);
font-size:1rem!important;
}
.um-dropdown *{
font-size:1rem!important;
}
.um-dropdown.open{
display:flex;
}
.um-user-row{
display:flex;
align-items:center;
gap:12px;
padding:14px 16px;
}
.um-user-pic{
position:relative;
width:36px;
height:36px;
border-radius:100px;
overflow:hidden;
background:var(--bg3);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.um-user-img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.um-user-initial{
font-family:var(--ff2);
font-weight:700;
color:var(--cl1);
font-size:inherit;
}
.um-user-meta{
min-width:0;
flex:1;
}
.um-user-name{
font-family:var(--ff2);
font-size:inherit;
color:var(--cl1);
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.um-user-email{
font-family:var(--ff2);
font-size:inherit;
color:var(--cl2);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.um-signin{
margin:12px 16px;
font-size:inherit;
}
.um-footer-sec{
padding:0;
}
.um-item{
display:flex;
align-items:center;
gap:10px;
width:100%;
padding:10px 16px;
background:none;
border:none;
color:var(--cl2);
font-family:var(--ff2);
font-size:inherit;
text-align:left;
text-decoration:none;
cursor:pointer;
transition:background 100ms,color 100ms;
}
.um-item:hover{
background:var(--bg3);
color:var(--cl1);
}
.um-item svg{
width:18px;
height:18px;
flex-shrink:0;
opacity:0.7;
}
body.unified-menu-on .text-float-btn{
display:none!important;
}
@media(max-width:600px){
.header-lang-dropdown{
position:fixed;
top:calc(var(--lz1) + 20px);
right:8px;
width:180px;
max-height:calc(100vh - var(--lz1) - 36px);
}
.um-dropdown{
position:fixed;
top:calc(var(--lz1) + 20px);
right:8px;
left:8px;
width:auto;
max-width:none;
max-height:calc(100vh - var(--lz1) - 36px);
}
}