/* squall.cloud — shared theme, matched to weather.city (warm paper + highway-sign green, Overpass typography). Load Overpass + Overpass Mono in each page's . Light only, to read as a sibling of weather.city. */ :root{ --paper:#e6e2da; --card:#ffffff; --ink:#161616; --ink2:#4a463e; --sign:#04663d; --sign-dk:#013d26; --sign-tx:#ffffff; --sign-sub:#bdebcf; --blue:#0a5ca8; --navy:#103e7e; --line:#c9c5bc; --line2:#e4e1d9; --mut:#8a867c; --radar:#0b0d10; /* neutral mat behind imagery */ --maxw:1200px; } *{box-sizing:border-box} html,body{margin:0;background:var(--paper)} body{color:var(--ink);font-family:'Overpass',Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;line-height:1.5} a{color:var(--blue);text-decoration:none} a:hover{color:var(--sign)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px} /* top utility strip (dark, green underline) */ .util{background:var(--ink);color:#cfccc4;border-bottom:3px solid var(--sign); font-family:'Overpass Mono',ui-monospace,monospace;font-size:11.5px;font-weight:700; letter-spacing:.06em} .util .wrap{display:flex;align-items:center;gap:16px;height:34px} .util a{color:#cfccc4}.util a:hover{color:var(--sign-sub)} .util .sp{flex:1} /* masthead — the green interstate sign */ .mast{background:var(--sign);border-radius:10px;color:#fff;padding:16px 20px;margin:16px 0; display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between; box-shadow:inset 0 0 0 4px var(--sign),inset 0 0 0 6px rgba(255,255,255,.9),0 10px 26px rgba(0,0,0,.15)} .mast .word{font-weight:900;font-size:26px;letter-spacing:.01em;color:#fff} .mast .word .yl{color:var(--sign-sub)} .mast .tag{font-family:'Overpass Mono',monospace;font-weight:700;font-size:12px; letter-spacing:.1em;color:var(--sign-sub);text-transform:uppercase} .mast nav{display:flex;gap:6px;flex-wrap:wrap} .mast nav a{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:#eafff2;background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:6px 11px} .mast nav a:hover,.mast nav a.on{background:#fff;color:var(--sign)} /* section rule — uppercase green heading with dashed sign line */ .rule{display:flex;align-items:center;gap:12px;margin:22px 0 12px} .rule h2{margin:0;color:var(--sign);font-size:15px;font-weight:900;text-transform:uppercase; letter-spacing:.12em;white-space:nowrap} .rule .ln{height:3px;flex:1;background:repeating-linear-gradient(90deg,var(--sign) 0 18px,transparent 18px 34px)} .rule .sub{color:var(--mut);font-size:11px;font-weight:700;letter-spacing:.06em; font-family:'Overpass Mono',monospace;text-transform:uppercase} /* cards */ .card{background:var(--card);border:1px solid var(--line);border-radius:9px} .card.pad{padding:14px 16px} /* controls — segmented buttons, chips, primary */ .seg{display:flex;gap:5px;flex-wrap:wrap} .seg button,.chip{font-family:'Overpass',sans-serif;font-weight:800;font-size:12.5px; letter-spacing:.02em;background:var(--card);color:var(--ink2);border:1px solid var(--line); border-radius:7px;padding:7px 13px;cursor:pointer} .seg button:hover,.chip:hover{border-color:var(--sign)} .seg button.on,.chip.on{background:var(--sign);color:#fff;border-color:var(--sign)} .lbl{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700;color:var(--mut); letter-spacing:.09em;text-transform:uppercase} .btn{font-family:'Overpass',sans-serif;font-weight:900;font-size:13px;letter-spacing:.04em; background:var(--blue);color:#fff;border:0;border-radius:7px;padding:9px 16px;cursor:pointer} .btn:hover{background:var(--navy)} .btn.go{background:var(--sign)}.btn.go:hover{background:var(--sign-dk)} /* ────────────────────────────────────────────────────────────────────────── Full-screen satellite pages (state.html / urban.html) The map fills the viewport under a slim green top bar; imagery covers the whole frame (no black matte). A floating interstate-blue banner rides in the upper level and dissolves off to the right. ────────────────────────────────────────────────────────────────────────── */ .fs{height:100%;margin:0;overflow:hidden;display:flex;flex-direction:column} .fstop{display:flex;align-items:center;gap:12px;padding:8px 15px;background:var(--sign); color:#fff;flex:0 0 auto;box-shadow:0 2px 12px rgba(0,0,0,.22);z-index:6;flex-wrap:wrap} .fstop .word{font-weight:900;font-size:17px;color:#fff;letter-spacing:.01em} .fstop .word .yl{color:var(--sign-sub)} .fstop .sp{flex:1 1 auto} .fstop .lbl{font-family:'Overpass Mono',monospace;font-size:9.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6)} .fstop .seg{display:flex;gap:4px;flex-wrap:wrap} .fstop .seg button{font-family:'Overpass',sans-serif;font-weight:800;font-size:11.5px; background:rgba(255,255,255,.12);color:#eafff2;border:1px solid rgba(255,255,255,.3); border-radius:6px;padding:5px 10px;cursor:pointer} .fstop .seg button.on{background:#fff;color:var(--sign)} .fstop a.nav,.fstop .share{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:#eafff2;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:6px 10px;cursor:pointer} .fstop a.nav.on{background:#fff;color:var(--sign)} .fstop a.nav:hover,.fstop .share:hover{background:#fff;color:var(--sign)} .fstop select{font-family:'Overpass',sans-serif;font-weight:800;font-size:13px;color:var(--ink); border:2px solid #fff;border-radius:6px;padding:5px 8px;background:#fff;cursor:pointer} .fsmap{flex:1 1 auto;position:relative;background:#0b0d10} .fsmap #map{position:absolute;inset:0} /* the floating interstate-blue banner — upper level, sails off to the right */ .ibanner{position:absolute;left:0;top:26px;z-index:5;display:flex;align-items:center;gap:14px; padding:12px 190px 12px 22px;pointer-events:none;color:#fff;max-width:82%; background:linear-gradient(90deg, rgba(0,47,108,.94) 0%, rgba(0,47,108,.90) 38%, rgba(11,77,162,.55) 64%, rgba(11,77,162,0) 100%); box-shadow:0 8px 26px rgba(0,0,0,.32); animation:ibsail .9s cubic-bezier(.2,.7,.2,1) both} @keyframes ibsail{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}} .ibanner .ibsh{flex:none;width:40px;height:44px;border-radius:6px;background:#fff; display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4px; box-shadow:0 2px 8px rgba(0,0,0,.3);position:relative;overflow:hidden} .ibanner .ibsh:before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:#b0242e} .ibanner .ibsh b{color:#003f87;font-weight:900;font-size:15px;line-height:1;z-index:1;letter-spacing:-.02em} .ibanner .ibtx{min-width:0} .ibanner .ibttl{font-weight:900;font-size:clamp(22px,3.2vw,34px);line-height:1;letter-spacing:-.01em; text-shadow:0 2px 10px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ibanner .ibsub{font-family:'Overpass Mono',monospace;font-size:11px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:#cfe2f6;margin-top:5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* bottom-left caption chip on the map */ .fscap{position:absolute;left:12px;bottom:26px;z-index:4;background:rgba(255,255,255,.92); border:1px solid var(--line);border-radius:7px;padding:6px 11px;font-family:'Overpass Mono',monospace; font-size:11px;color:var(--ink2)} .fscap b{color:var(--sign)} .maplibregl-ctrl-attrib{font-size:10px} @media(max-width:640px){ .ibanner{padding-right:90px;max-width:94%} .fstop .lbl{display:none} } /* footer */ footer{margin-top:34px;background:var(--ink);color:#cfccc4;border-top:4px solid var(--sign); padding:20px 0;font-size:12.5px} footer .fw{font-weight:900;font-size:19px;color:#fff} footer .fw .yl{color:var(--sign-sub)} footer a{color:#cfccc4}footer a:hover{color:var(--sign-sub)} .mono{font-family:'Overpass Mono',ui-monospace,monospace}