| |
| :root { --bg:#0c1424; --glass:rgba(14,22,38,.46); --line:rgba(255,255,255,.14); --mute:rgba(235,242,255,.76); --dim:rgba(235,242,255,.52); |
| --accent:#5ec8ff; --r:22px; --blur:18px; --side:320px; --sky:linear-gradient(180deg,#1d3b6e,#5a8fd0); --tint:transparent; color-scheme:dark; } |
| * { box-sizing:border-box; } |
| html, body { margin:0; height:100%; background:var(--bg); color:#fff; font:400 15px/1.45 Outfit, system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-tap-highlight-color:transparent; } |
| button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; } |
| a { color:inherit; } svg { display:block; } |
| :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } |
|
|
| |
| #bg { position:fixed; inset:-14px; background:var(--sky); overflow:hidden; transform:translate3d(var(--px,0px),var(--py,0px),0); transition:transform .6s cubic-bezier(.2,.8,.2,1); } |
| #bg .slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.8s ease; will-change:opacity,transform; } |
| #bg .slide.on { opacity:1; } #bg .slide.kb { animation:kb var(--kd,14s) linear both; } |
| @keyframes kb { from { transform:scale(1.05) translate(var(--kx0,0),var(--ky0,0)); } to { transform:scale(1.17) translate(var(--kx1,0),var(--ky1,0)); } } |
| #bg .shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,10,20,.55) 0%,rgba(6,10,20,.1) 26%,rgba(6,10,20,.16) 50%,rgba(6,10,20,.74) 100%); } |
| #bg .shade::after { content:""; position:absolute; inset:0; background:var(--tint); transition:background 1.2s; } |
| #fx { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; } |
|
|
| #app { position:relative; z-index:2; height:100%; display:grid; grid-template-columns:minmax(0,1fr); } |
| .wide #app { grid-template-columns:var(--side) minmax(0,1fr); } |
| .glass, #side, .card, .iconbtn { background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(var(--blur)) saturate(1.4); -webkit-backdrop-filter:blur(var(--blur)) saturate(1.4); } |
|
|
| |
| #side { display:flex; flex-direction:column; gap:14px; padding:18px; border-width:0 1px 0 0; overflow:auto; view-transition-name:side; } |
| html:not(.wide) #side { position:fixed; z-index:20; left:0; top:0; bottom:0; width:min(86vw,340px); transform:translateX(-105%); transition:transform .35s cubic-bezier(.2,.8,.2,1); background:rgba(12,18,32,.9); padding-top:calc(18px + env(safe-area-inset-top)); } |
| html:not(.wide) body.drawer #side { transform:none; box-shadow:20px 0 60px rgba(0,0,0,.4); } |
| #scrim { position:fixed; inset:0; z-index:19; background:rgba(4,8,16,.5); opacity:0; pointer-events:none; transition:opacity .3s; } |
| html:not(.wide) body.drawer #scrim { opacity:1; pointer-events:auto; } |
| .brand { display:flex; align-items:center; gap:12px; } .logo { width:42px; height:42px; filter:drop-shadow(0 6px 16px rgba(59,91,255,.45)); } |
| .brand b { display:block; font:800 21px/1 Outfit; letter-spacing:-.01em; } .brand span { font-size:12.5px; color:var(--mute); font-weight:600; } |
| .search { position:relative; } |
| #q { width:100%; background:rgba(255,255,255,.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px 50%/18px no-repeat; |
| border:1px solid var(--line); border-radius:14px; padding:12px 14px 12px 40px; color:#fff; font:inherit; outline:none; -webkit-appearance:none; transition:border-color .2s, background-color .2s; } |
| #q:focus { border-color:var(--accent); background-color:rgba(255,255,255,.14); } #q::placeholder { color:var(--dim); } |
| #results { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:3; background:rgba(16,24,42,.97); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.45); display:none; } |
| #results.on { display:block; animation:pop .2s ease; } |
| #results button { display:flex; width:100%; align-items:center; gap:10px; padding:11px 14px; text-align:left; border-top:1px solid rgba(255,255,255,.06); } |
| #results button:first-child { border-top:0; } #results button:hover, #results button.act { background:rgba(255,255,255,.1); } |
| #results small { color:var(--dim); display:block; font-size:12.5px; } |
| .cc { flex:none; font:700 10.5px/1 Outfit; letter-spacing:.04em; padding:5px 6px; border-radius:6px; background:rgba(255,255,255,.14); } |
| .cities { display:flex; flex-direction:column; gap:8px; } |
| .city { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; text-align:left; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid transparent; transition:background .2s, border-color .2s, transform .15s; } |
| .city:hover { background:rgba(255,255,255,.11); } .city:active { transform:scale(.98); } |
| .city.on { border-color:var(--accent); background:rgba(255,255,255,.13); } |
| .city b { display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .city small { color:var(--dim); font-size:12.5px; } |
| .city .ct { display:flex; align-items:center; gap:6px; font:300 26px/1 Outfit; } .city .wi { width:30px; height:30px; } |
| .city .del { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:#26324a; border:1px solid var(--line); font-size:13px; line-height:20px; text-align:center; opacity:0; transition:opacity .2s; } |
| .city:hover .del, .city:focus-within .del { opacity:1; } @media (hover:none) { .city .del { opacity:.8; } } |
| .pin { font-size:11px; color:var(--accent); font-weight:700; letter-spacing:.05em; text-transform:uppercase; } |
| .sidefoot { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; } |
| .ghost { padding:9px 14px; border-radius:12px; border:1px solid var(--line); font-size:13.5px; font-weight:600; text-decoration:none; background:rgba(255,255,255,.05); transition:background .2s; } |
| .ghost:hover { background:rgba(255,255,255,.12); } |
|
|
| |
| #main { height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:0 clamp(16px,3vw,40px) 30px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; } |
| .topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 0 10px; } |
| .wide #menuBtn { visibility:hidden; } |
| .iconbtn { flex:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center; transition:transform .15s, background .2s; } |
| .iconbtn:hover { background:rgba(255,255,255,.16); } .iconbtn:active { transform:scale(.9); } .iconbtn.sm { width:34px; height:34px; border-radius:11px; } |
| .iconbtn svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .iconbtn.sm svg { width:17px; height:17px; } |
| .iconbtn.spin svg { animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } |
| .dots { display:flex; gap:6px; } .dots i { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,.4); transition:all .35s cubic-bezier(.2,.8,.2,1); cursor:pointer; } .dots i.on { width:20px; background:#fff; } |
| .dots i.here { background:var(--accent); } |
|
|
| #hero { position:relative; min-height:calc(100dvh - 210px); display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:58px 0 24px; user-select:none; -webkit-user-select:none; touch-action:pan-y; } |
| .wide #hero { min-height:min(66vh,660px); } |
| .place h1 { margin:0; font:700 clamp(30px,4.6vw,50px)/1.05 Outfit; letter-spacing:-.02em; text-shadow:0 2px 24px rgba(0,0,0,.4); view-transition-name:city; } |
| .place p { margin:4px 0 0; color:var(--mute); font-weight:500; text-shadow:0 1px 10px rgba(0,0,0,.4); } |
| .now { display:flex; align-items:center; gap:clamp(12px,2vw,28px); } |
| .temp { display:flex; align-items:flex-start; font:200 clamp(104px,15vw,188px)/.88 Outfit; letter-spacing:-.06em; text-shadow:0 10px 50px rgba(0,0,0,.35); view-transition-name:temp; transition:transform .2s; font-variant-numeric:tabular-nums; } |
| .temp:hover { transform:scale(1.02); } .temp:active { transform:scale(.97); } |
| .temp sup { font-size:.36em; font-weight:300; margin:.14em 0 0 .04em; letter-spacing:0; } |
| .nowicon .wi { width:clamp(66px,8vw,100px); height:clamp(66px,8vw,100px); filter:drop-shadow(0 8px 20px rgba(0,0,0,.3)); } |
| .cond p { margin:0; color:var(--mute); font-weight:500; } #condText { color:#fff; font:600 clamp(19px,2vw,24px)/1.2 Outfit; margin:4px 0 2px; } |
| .summary { margin:6px 0 0; max-width:640px; font-size:clamp(15.5px,1.4vw,18px); color:#eef4ff; text-shadow:0 1px 12px rgba(0,0,0,.5); min-height:1.4em; } |
| .scrubtag { display:inline-flex; align-self:flex-start; align-items:center; gap:10px; margin-top:4px; background:var(--accent); color:#06121f; border-radius:999px; padding:5px 5px 5px 14px; font-weight:700; font-size:14px; animation:pop .25s ease; } |
| .scrubtag[hidden] { display:none; } .scrubtag button { background:#06121f; color:#fff; border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; } |
| .landmark { position:absolute; right:0; bottom:24px; max-width:42%; text-align:right; text-decoration:none; padding:8px 12px; border-radius:14px; transition:background .2s, opacity .6s; text-shadow:0 1px 10px rgba(0,0,0,.6); } |
| .landmark:hover { background:var(--glass); } .landmark span { display:block; font-weight:700; font-size:15px; } .landmark small { color:var(--mute); font-size:12.5px; } |
| .landmark.off { opacity:0; pointer-events:none; } |
| .lmnav { position:absolute; right:0; top:6px; display:flex; gap:8px; transition:opacity .3s; } .lmnav.off { opacity:0; pointer-events:none; } |
| html:not(.wide) .landmark { top:4px; bottom:auto; left:0; right:auto; max-width:calc(100% - 90px); text-align:left; padding:6px 0; } |
| html:not(.wide) .landmark:hover { background:none; } |
|
|
| |
| #panels { display:grid; gap:14px; grid-template-columns:minmax(0,1fr); opacity:0; transform:translateY(20px); transition:opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); } |
| body.ready #panels { opacity:1; transform:none; } |
| @media (min-width:1200px) { .wide #panels { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); grid-template-areas:"h h" "i d" "t d" "c c"; align-items:start; } |
| .wide #hourlyCard { grid-area:h; } .wide #insightsCard { grid-area:i; } .wide #dailyCard { grid-area:d; } .wide #tiles { grid-area:t; } .wide .credit { grid-area:c; } } |
| .card { position:relative; border-radius:var(--r); padding:16px 18px; overflow:hidden; } |
| .card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(380px circle at var(--mx,-999px) var(--my,-999px),rgba(255,255,255,.13),transparent 42%); pointer-events:none; opacity:0; transition:opacity .3s; } |
| .card:hover::before { opacity:1; } |
| #hourlyCard { view-transition-name:hourly; } #dailyCard { view-transition-name:daily; } #insightsCard { view-transition-name:insights; } #tiles { view-transition-name:tiles; } |
| .cardh { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; } |
| .cardh h2 { margin:0; font:700 12.5px Outfit; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); } .hint { font-size:12px; color:var(--dim); } |
|
|
| .hourly { overflow-x:auto; overflow-y:hidden; margin:0 -18px; padding:0 18px 4px; cursor:grab; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent); } |
| .hourly::-webkit-scrollbar { display:none; } .hourly.grab { cursor:grabbing; } |
| .hours { position:relative; display:flex; width:max-content; } |
| .h { position:relative; width:60px; flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; padding:20px 0 8px; border-radius:16px; transition:background .2s; } |
| .h:hover { background:rgba(255,255,255,.07); } .h.sel { background:rgba(255,255,255,.18); } |
| .h .t { font-size:13px; color:var(--mute); font-weight:500; } .h.now .t { color:#fff; font-weight:700; } .h .wi { width:30px; height:30px; } |
| .h .gap { height:70px; } .h .p { font-size:12px; color:#8fd0ff; height:16px; font-weight:600; } |
| .h .pb { width:22px; border-radius:4px 4px 2px 2px; background:linear-gradient(#6fc0ff,#3b7cff); opacity:.8; min-height:2px; } |
| .h.mid::before { content:attr(data-day); position:absolute; top:2px; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); } |
| .h.mid::after { content:""; position:absolute; left:0; top:18px; bottom:10px; border-left:1px dashed rgba(255,255,255,.22); } |
| .hchart { position:absolute; left:0; top:74px; pointer-events:none; overflow:visible; } |
| .hchart text { fill:#fff; font:600 13px Outfit; paint-order:stroke; stroke:rgba(0,0,0,.25); stroke-width:3px; } |
|
|
| .insights { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); } |
| .ins { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid transparent; animation:rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--k,0) * 60ms); } |
| .ins.warn { background:rgba(255,110,70,.17); border-color:rgba(255,140,90,.38); } .ins.good { background:rgba(80,220,160,.12); border-color:rgba(90,230,170,.28); } |
| .ins .e { font-size:22px; line-height:1.1; flex:none; } .ins b { display:block; font-size:14.5px; font-weight:600; } .ins span { font-size:13.5px; color:var(--mute); } |
|
|
| .tiles { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); } |
| @media (min-width:640px) { .tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } } |
| @media (min-width:1700px) { .wide .tiles { grid-template-columns:repeat(4,minmax(0,1fr)); } } |
| .tile { text-align:left; display:flex; flex-direction:column; gap:6px; min-height:178px; cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s; animation:rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--k,0) * 40ms); } |
| .tile:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.28); } .tile:active { transform:scale(.97); } |
| .tile h3 { margin:0; display:flex; align-items:center; gap:6px; font:700 11.5px Outfit; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); } |
| .tile .v { font:300 32px/1.05 Outfit; letter-spacing:-.02em; } .tile .v small { font-size:15px; font-weight:500; margin-left:3px; color:var(--mute); } |
| .tile .s { font-size:13px; color:var(--mute); margin-top:auto; } .tile .lvl { font-weight:600; font-size:14.5px; } |
| .tile svg.viz { width:100%; height:auto; overflow:visible; } |
| .bar { position:relative; height:6px; border-radius:3px; margin:6px 0 2px; } .bar i { position:absolute; top:50%; width:12px; height:12px; margin:-6px; border-radius:50%; background:#fff; border:2px solid #0c1424; transition:left .8s cubic-bezier(.2,.8,.2,1); } |
| .compass .arrow { transition:transform 1s cubic-bezier(.2,.8,.2,1); transform-origin:50px 50px; } |
| .kv { display:flex; justify-content:space-between; font-size:13px; color:var(--mute); } .kv b { color:#fff; font-weight:600; } |
|
|
| .daily { display:flex; flex-direction:column; } |
| .d { display:grid; grid-template-columns:58px 34px 44px 38px minmax(50px,1fr) 38px; align-items:center; gap:8px; padding:9px 8px; border-radius:14px; text-align:left; transition:background .2s, transform .15s; animation:rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--k,0) * 30ms); } |
| .d:hover { background:rgba(255,255,255,.09); } .d:active { transform:scale(.985); } |
| .d .n { font-weight:600; } .d .n small { display:block; font-size:11.5px; color:var(--dim); font-weight:500; } .d .wi { width:30px; height:30px; } |
| .d .pp { font-size:12.5px; color:#8fd0ff; font-weight:600; } .d .lo { color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; } .d .hi { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; } |
| .rng { position:relative; height:6px; border-radius:3px; background:rgba(255,255,255,.13); } .rng i { position:absolute; top:0; bottom:0; border-radius:3px; } |
| .rng b { position:absolute; top:50%; width:10px; height:10px; margin:-5px; border-radius:50%; background:#fff; border:2px solid #0c1424; } |
| .credit { margin:6px 0 0; font-size:12.5px; color:var(--dim); text-align:center; } .credit a { color:var(--mute); } .credit b { color:#fff; } |
|
|
| |
| dialog { border:0; padding:0; background:transparent; color:#fff; width:min(600px,94vw); max-width:none; max-height:none; overflow:visible; } |
| dialog::backdrop { background:rgba(4,8,16,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } |
| .sheet { background:rgba(16,24,42,.95); border:1px solid var(--line); border-radius:24px; padding:20px; max-height:86vh; overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.5); } |
| dialog[open] .sheet { animation:pop .28s cubic-bezier(.2,.8,.2,1); } |
| html:not(.wide) dialog { width:100%; margin:auto 0 0; } |
| html:not(.wide) dialog .sheet { border-radius:24px 24px 0 0; padding-bottom:calc(20px + env(safe-area-inset-bottom)); max-height:90vh; } |
| html:not(.wide) dialog .sheet::before { content:""; display:block; width:44px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); margin:-8px auto 12px; } |
| html:not(.wide) dialog[open] .sheet { animation:up .34s cubic-bezier(.2,.8,.2,1); } |
| .sheeth { display:flex; align-items:center; gap:14px; margin-bottom:12px; } .sheeth h3 { margin:0; font:700 20px Outfit; flex:1; } .sheeth .wi { width:52px; height:52px; } |
| .sheeth small { display:block; color:var(--mute); font-size:13.5px; font-weight:500; } |
| .sheet label { display:block; margin:16px 0 7px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); } |
| .seg { display:flex; background:rgba(255,255,255,.08); border-radius:12px; padding:3px; gap:3px; } |
| .seg button { flex:1; padding:9px 6px; border-radius:9px; font-weight:600; font-size:14px; color:var(--mute); transition:background .2s, color .2s; } .seg button.on { background:#fff; color:#0c1424; } |
| .small { font-size:12.5px; color:var(--dim); margin:16px 0 0; } |
| .big { font:300 44px/1 Outfit; margin:4px 0 2px; } .big small { font-size:16px; color:var(--mute); font-weight:500; margin-left:6px; } |
| .grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; } |
| .grid2 div { background:rgba(255,255,255,.06); border-radius:14px; padding:10px 12px; font-size:13px; color:var(--mute); } .grid2 b { display:block; color:#fff; font-size:16px; font-weight:600; } |
| .chart { position:relative; margin-top:12px; touch-action:pan-y; } .chart svg { width:100%; height:200px; overflow:visible; } |
| .chart text { fill:var(--dim); font:500 11.5px Outfit; } .chart .tip { position:absolute; top:0; transform:translateX(-50%); background:#fff; color:#0c1424; font-weight:700; font-size:13px; padding:4px 9px; border-radius:9px; pointer-events:none; white-space:nowrap; transition:left .05s; } |
| .chart .tip small { font-weight:500; color:#4a5670; margin-left:4px; } |
| .strip { display:flex; gap:4px; overflow-x:auto; margin-top:10px; scrollbar-width:none; } .strip div { flex:none; width:52px; text-align:center; font-size:12.5px; color:var(--mute); } .strip .wi { width:28px; height:28px; margin:2px auto; } .strip b { color:#fff; font-weight:600; } |
|
|
| #toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:40; transform:translate(-50%,20px); background:#fff; color:#0c1424; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s; box-shadow:0 10px 30px rgba(0,0,0,.3); } |
| #toast.on { opacity:1; transform:translate(-50%,0); } |
|
|
| |
| .wi .rays { transform-origin:24px 24px; animation:spin 24s linear infinite; } |
| .wi .i-cloud { animation:drift 6s ease-in-out infinite alternate; } |
| .wi .i-rain line { animation:fall 1s linear infinite; } .wi .i-snow circle { animation:flake 2s ease-in-out infinite; } |
| .wi .i-bolt { animation:bolt 3s infinite; } .wi .i-fog line { animation:drift 4s ease-in-out infinite alternate; } |
| @keyframes drift { to { transform:translateX(2px); } } |
| @keyframes fall { from { transform:translateY(-3px); opacity:0; } 30% { opacity:1; } to { transform:translateY(6px); opacity:0; } } |
| @keyframes flake { 0%,100% { transform:translate(0,-2px); } 50% { transform:translate(1.5px,3px); } } |
| @keyframes bolt { 0%,86%,100% { opacity:1; } 90% { opacity:.2; } 94% { opacity:1; } 96% { opacity:.4; } } |
| @keyframes pop { from { transform:scale(.96); opacity:0; } } |
| @keyframes up { from { transform:translateY(100%); } } |
| @keyframes rise { from { opacity:0; transform:translateY(12px); } } |
|
|
| |
| .skel { background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06)); background-size:200% 100%; animation:shim 1.2s infinite; border-radius:12px; } |
| @keyframes shim { to { background-position:-200% 0; } } |
|
|
| |
| @media (max-width:899px) { |
| :root { --blur:12px; --r:20px; } |
| .tile { min-height:160px; padding:14px; } .tile .v { font-size:28px; } |
| .d { grid-template-columns:50px 30px 38px 34px minmax(40px,1fr) 34px; gap:6px; padding:9px 4px; } |
| } |
| |
| .lite { --blur:0px; } .lite .card, .lite .iconbtn, .lite #side { background:rgba(14,22,38,.8); } |
| @media (prefers-reduced-motion:reduce) { #bg .slide.kb, .wi *, .ins, .tile, .d { animation:none !important; } } |
| ::view-transition-old(root), ::view-transition-new(root) { animation-duration:.45s; } |
| .windrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .windrow .compass { width:92px; flex:none; } |
| .topbar::before { content:""; position:absolute; inset:0 calc(-1 * clamp(16px,3vw,40px)); background:linear-gradient(180deg,rgba(6,10,20,.7),rgba(6,10,20,0)); opacity:0; transition:opacity .3s; pointer-events:none; z-index:-1; } |
| .topbar.solid::before { opacity:1; } |
| .kv { flex-wrap:wrap; gap:4px 10px; } |
| @media (max-width:899px) { .windrow { gap:8px; } .windrow .compass { width:72px; } .tile .v small { font-size:13px; } } |
| .tile svg.viz:not(.compass) { max-height:84px; } |
|
|
