Fix viz tabs (were stacking) + mobile responsive

This commit is contained in:
gator 2026-08-15 00:30:07 +00:00
parent e56ef2ddb6
commit d20596989c

View file

@ -170,3 +170,40 @@ html:not(.ppcb-authed) body{overflow:hidden}
#ppcb-gate input:focus{border-color:var(--acc)}
.gate-go{width:100%;justify-content:center;margin-top:4px}
.gate-msg{font-family:var(--mono);font-size:13px;margin-top:14px;min-height:18px}
/* fix: hidden viz panels must actually hide (display:flex was overriding [hidden]) */
.vizpanel[hidden]{display:none !important}
/* ---------- mobile ---------- */
@media(max-width:820px){
body{font-size:16px}
.wrap{padding:0 18px}
.top .wrap{gap:14px;height:56px}
nav.main{gap:16px}
nav.main a{font-size:13px}
.credits{font-size:12px;padding:6px 10px}
.hero{min-height:76vh}
.sec{padding:60px 0}
.vals{gap:22px;margin-top:40px}
.detail{grid-template-columns:1fr;gap:26px;padding:26px 0 60px}
.viz,.viewer{position:static}
.vizpanel,.viewer{height:56vh;min-height:320px}
.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pins{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.dactions{gap:8px}
.searchbar input{font-size:16px}
}
@media(max-width:540px){
.top .wrap{gap:10px}
nav.main{gap:12px}
nav.main a{font-size:12px}
.brand small{display:none}
.credits{display:none}
.hero h1{font-size:clamp(34px,10vw,56px)}
.grid{grid-template-columns:1fr}
.row2{grid-template-columns:1fr}
.viztabs{width:100%}
.viztabs button{flex:1;padding:9px 8px;text-align:center}
.assets{gap:12px;font-size:12px}
.gate-h{font-size:24px}
}