.hub-grid{
display:flex;
flex-direction:column;
gap:var(--gap);
}
.hub-section{
display:flex;
flex-direction:column;
background-color:var(--bg2);
border:var(--bw1) solid var(--bc1);
border-radius:var(--br1);
padding:var(--gap);
box-shadow:var(--fbs);
}
.hub-section-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:var(--gap);
}
.hub-section.collapsed .hub-section-header{
margin-bottom:0;
}
.hub-section-title{
display:flex;
align-items:center;
gap:12px;
}
.hub-section-toggle{
width:28px;
height:28px;
min-width:28px;
background-color:var(--bg3);
border:var(--bw1) solid var(--bc1);
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
margin-left:auto;
font-size:20px;
font-weight:400;
color:var(--tx2);
line-height:1;
padding:0;
}
.hub-section-toggle:hover{
background-color:var(--hv1);
border-color:var(--cl1);
color:var(--cl1);
}
.hub-section-toggle .icon-minus{
display:block;
}
.hub-section-toggle .icon-plus{
display:none;
}
.hub-section.collapsed .hub-section-toggle .icon-minus{
display:none;
}
.hub-section.collapsed .hub-section-toggle .icon-plus{
display:block;
}
.hub-section.collapsed .hub-items{
display:none;
}
.hub-section-icon{
width:28px;
height:28px;
color:var(--cl1);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.hub-section-icon svg{
width:28px;
height:28px;
fill:currentColor;
}
.hub-section-header h2{
font-family:var(--ff2);
font-size:22px;
font-weight:700;
color:var(--cl1);
margin:0;
text-transform:uppercase;
letter-spacing:1px;
}
.hub-section-count{
font-size:16px;
color:var(--tx3);
font-weight:500;
white-space:nowrap;
}
.hub-cat-toggle{
display:inline-flex;
align-items:center;
gap:10px;
}
.hub-cat-toggle .hub-section-icon{
pointer-events:none;
}
.hub-cat-toggle-text{
font-family:var(--ff2);
font-size:22px;
font-weight:700;
color:var(--cl1);
text-transform:uppercase;
letter-spacing:1px;
}
.hub-cat-dropdown-menu .hub-cat-menu-item{
display:flex;
align-items:center;
height:40px;
min-height:40px;
flex-shrink:0;
padding:0 14px;
background:none;
border:none;
border-radius:var(--br0);
cursor:pointer;
font-family:var(--ff2);
font-size:16px;
font-weight:700;
color:var(--tx2);
white-space:nowrap;
transition:60ms;
}
.hub-cat-dropdown-menu .hub-cat-menu-item:hover{
background-color:var(--hv1);
color:var(--cl1);
}
.hub-cat-dropdown-menu .hub-cat-menu-item.active{
color:var(--cl1);
background-color:rgba(255,85,17,0.1);
}
.hub-cat-dropdown-menu .hub-cat-menu-item.pressed{
transform:translateY(1px) scale(0.98);
}
.hub-items{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:var(--gap);
align-items:stretch;
}
.hub-item{
display:flex;
align-items:start;
gap:14px;
}
.hub-item::before{
content:"•";
color:var(--cl1);
font-weight:800;
font-size:28px;
line-height:1;
flex-shrink:0;
pointer-events:none;
}
.hub-item-content{
display:flex;
flex-direction:column;
gap:4px;
flex:1;
min-width:0;
}
.hub-item-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.hub-item h3{
font-size:var(--fz1);
font-weight:700;
margin:0;
color:var(--tx1);
line-height:1.4;
}
.hub-item h3 a{
color:inherit;
text-decoration:none;
}
.hub-item h3 a:hover{
color:var(--cl1);
text-decoration:underline;
text-decoration-thickness:1px;
}
.hub-item-desc{
font-size:16px;
color:var(--tx2);
margin:0;
line-height:1.5;
}
.hub-item-footer{
display:flex;
align-items:center;
gap:12px;
margin-top:4px;
}
.hub-item-icons{
display:flex;
align-items:center;
gap:6px;
flex-shrink:0;
}
.hub-item-link{
display:inline-flex;
align-items:center;
gap:5px;
font-size:16px;
font-weight:600;
color:var(--lnk);
line-height:1.4;
flex-shrink:0;
}
.hub-item-link svg{
width:12px;
height:12px;
fill:var(--lnk);
stroke:var(--lnk);
}
.hub-item-link:hover{
text-decoration:underline;
color:var(--cl1);
}
.hub-item-link:hover svg{
fill:var(--cl1);
stroke:var(--cl1);
}
.hub-item-icon{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
opacity:0.35;
}
.hub-item-icon svg{
width:20px;
height:20px;
fill:var(--tx2);
}
.hub-item-icon:hover{
opacity:1;
}
.hub-item-icon-brand{
cursor:default;
opacity:0.55;
}
.hub-item-icon.filter-active{
opacity:0.55;
}