header{
display:flex;
align-items:center;
justify-content:center;
width:100%;
margin:var(--gap) auto;
position:relative;
gap:var(--gap);
max-width:var(--max);
}
.logo{
display:flex;
align-items:center;
justify-content:center;
-webkit-user-drag:none;
user-select:none;
}
.logo img{
-webkit-user-drag:none;
user-select:none;
pointer-events:none;
transition:transform 100ms ease,box-shadow 100ms ease;
height:var(--lz1);
width:auto;
display:block;
color:transparent;
font-size:0;
box-shadow:var(--fbs);
border:2px solid #000;
border-radius:50%;
}
.logo{
transition:150ms;
}
.logo:hover{
/*transform:rotate(10deg);*/
/*box-shadow:none;*/
}
.header-btn{
width:var(--iz1);
height:var(--iz1);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex-shrink:0;
box-shadow:var(--fbs);
transition:background-color .15s,border-color .15s;
}
.header-btn:hover{
background-color:var(--hv1);
}
.header-btn.active{
background-color:var(--cl1);
}
.header-btn svg{
width:31px;
height:31px;
fill:var(--g88);
stroke:var(--g88);
transition:fill .15s,stroke .15s,transform .15s;
}
.header-btn svg path,
.header-btn svg line,
.header-btn svg circle{
fill:var(--g88);
stroke:var(--g88);
transition:fill .15s,stroke .15s;
}
.header-btn:hover svg,
.header-btn:hover svg path,
.header-btn:hover svg line,
.header-btn:hover svg circle{
fill:var(--cl1);
stroke:var(--cl1);
}
.header-btn.active svg,
.header-btn.active svg path,
.header-btn.active svg line,
.header-btn.active svg circle{
fill:var(--blk);
stroke:var(--blk);
}
.menu-btn svg{
width:31px;
height:31px;
transform-origin:center;
will-change:transform;
transform:rotate(90deg);
}
.menu-btn.active svg{
transform:rotate(0deg);
}
.search-btn svg{
transform-origin:center;
}
.search-btn.active svg{
transform:scale(1.2);
}
.side-panel{
position:fixed;
top:var(--gap);
width:340px;
max-width:calc(100% - var(--gap)*2);
max-height:calc(100vh - var(--gap)*2);
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
box-shadow:var(--fbs);
z-index:900;
display:flex;
flex-direction:column;
opacity:0;
pointer-events:none;
overflow:hidden;
visibility:hidden;
transition:transform .15s,opacity .15s,visibility .15s;
}
.side-panel.left{
left:var(--gap);
transform:translateX(calc(-100% - var(--gap)));
}
.side-panel.right{
right:var(--gap);
transform:translateX(calc(100% + var(--gap)));
}
.side-panel.active{
opacity:1;
pointer-events:auto;
transform:translateX(0);
visibility:visible;
}
#menuPanel{
user-select:none;
}
#searchPanel .search-item,
#searchPanel .search-footer-link{
user-select:none;
}
.panel-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:var(--gd4) var(--gap);
border-bottom:var(--bw1) solid var(--bc1);
flex-shrink:0;
background-color:var(--bg3);
border-radius:var(--br1) var(--br1) 0 0;
}
.panel-title-link{
text-decoration:none;
}
.panel-title-link:hover .panel-title{
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:4px;
}
.panel-title{
font-family:var(--ff2);
font-size:20px;
font-weight:700;
color:var(--cl1);
text-transform:uppercase;
letter-spacing:1px;
margin:0;
}
.panel-close{
width:46px;
height:46px;
background-color:transparent;
border:var(--bw1) solid var(--bc1);
border-radius:var(--br0);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
color:var(--tx2);
font-size:30px;
font-weight:400;
line-height:1;
padding:0;
flex-shrink:0;
}
.panel-close:hover{
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.panel-body{
flex:1;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:thin;
scrollbar-color:var(--bc2) transparent;
}
.panel-body::-webkit-scrollbar{
width:6px;
}
.panel-body::-webkit-scrollbar-track{
background:transparent;
}
.panel-body::-webkit-scrollbar-thumb{
background-color:var(--bc2);
border-radius:3px;
}
.panel-body::-webkit-scrollbar-thumb:hover{
background-color:var(--tx3);
}
.panel-body::-webkit-scrollbar-button{
display:none;
}
.panel-footer{
padding:var(--gd4) var(--gap);
border-top:var(--bw1) solid var(--bc1);
background-color:var(--bg3);
text-align:center;
flex-shrink:0;
}
.panel-footer-link{
color:var(--tx2);
font-size:15px;
font-weight:600;
}
.panel-footer-link:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:1px;
}
.title,
.hub-hero h1{
font-family:var(--ff2);
font-size:48px;
font-weight:800;
color:var(--tx1);
margin:var(--gap) auto;
padding:4px 24px;
letter-spacing:1px;
word-break:break-word;
overflow-wrap:break-word;
background-color:var(--bg4);
border-radius:var(--br0);
box-shadow:0 1px 3px var(--kb3);
display:block;
text-align:center;
user-select:none;
width:fit-content;}
.title a{
color:inherit;
text-decoration:none;
}
.page-desc{
font-size:22px;
color:var(--tx2);
margin:0;
line-height:1.6;
text-align:center;
}
.hub-hero{
margin:var(--gap) auto;
text-align:center;
}
.page-info{
width:var(--pw1);
max-width:100%;
margin:var(--gap) auto;
text-align:center;
font-size:24px;
color:var(--tx2);
}
.page-info mark{
border-radius:var(--br0);
background-color:var(--cl1);
color:var(--mk1);
padding:4px 12px;
}
.title-link:hover{
text-decoration:none;
}