/* V657 — Weather. Scoped to .wx-*; every colour is a site token from line_escape.css so light/dark track the site with no per-tool theme. V658 rewrote the top of this file. His note was *"this should be the main section (all the tabs).exactly pls"* with the reference panel attached, and then two that changed it further: *"location , then degrees details, then time and other details"* *"can we remove top tow and mention the value in the tab headers"* so the facts row that used to sit under the temperature is gone and the two numbers it carried are in the tab labels. Nothing in this file draws a scrollbar and nothing embosses a calendar cell -- both were asked for and then withdrawn, and the reasons are in v658-shipped.md. */ .wx-wrap{max-width:1040px;margin:0 auto;padding:0 14px 40px; /* The rail fade has to start at the page ground, and the page ground is a different colour per theme. `transparent` is not the answer: it means transparent BLACK, which draws a grey smear across a white page. */ --wx-fade0:rgba(11,46,34,0); /* V660: Samaya's weekend wash, stated per theme like every other colour here. */ --wx-wknd:rgba(255,156,138,.10)} html:not([data-dark]) .wx-wrap{--wx-fade0:rgba(255,255,255,0);--wx-wknd:rgba(179,38,30,.06)} /* search */ .wx-search{position:relative;max-width:500px;margin:10px auto 16px;display:flex; align-items:center;gap:4px} .wx-field{position:relative;flex:1;min-width:0} .wx-search input{width:100%;padding:12px 46px 12px 40px;border:1px solid var(--line);border-radius:10px; font:inherit;font-size:var(--fld-fs,15px);background:var(--panel);color:var(--text)} .wx-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--pad)} .wx-search input:focus:not(:focus-visible){ outline: none; } .wx-search input.detecting{color:var(--muted);font-style:italic} .wx-pin{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex} .wx-locate{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:32px;height:32px;min-width:32px;border:none;border-radius:8px; background:var(--btn);color:var(--text);cursor:pointer;font-size:15px;line-height:1} .wx-locate:hover{background:var(--line)} .wx-locate.on{background:var(--accent);color:var(--accent-fg)} .wx-locate.busy{opacity:.6} /* V660: the hint is now the ⓘ popover's body, not a line under the box. Width is stated because .idot-pop has none of its own and a one-line popover 460px wide would hang off a phone. */ /* V660: the ⓘ IS INKED HARDER HERE THAN THE SITE DEFAULT, and the contrast sweep is why. `button.idot` is `--muted2` at 75% opacity, which is fine on `--panel` (#f4f4f7) where most of the site's dots sit -- and this one sits on the search row, which is `--bg`. On the light theme that is PURE WHITE, and 75% of #66667a over white measures 3.30:1 against a 4.5 floor. `--muted` at full strength is the same family two steps darker and clears it, and the dot is a control rather than a decoration, so it should not have been the faintest thing on the row. */ .wx-idot{margin-left:2px} .wx-idot .idot{color:var(--muted);opacity:1} .wx-idot .idot:hover,.wx-idot .idot[aria-expanded="true"]{color:var(--text)} .wx-hint{font-size:12.5px;color:var(--muted);width:min(280px,calc(100vw - 40px))} /* V658: the hint used to claim device location whatever had actually happened. It has states now, and this is the one that says a permission was refused. */ .wx-hint.warn{color:var(--bad)} /* The dot itself goes amber when what is behind it is a warning, so a folded-away failure still has a mark on the page. */ .idot.warn{color:var(--bad);opacity:1} .wx-hint b{color:var(--text);font-weight:600} .wx-suggest{position:absolute;top:52px;left:0;right:0;background:var(--panel);border:1px solid var(--line); border-radius:10px;overflow:hidden;z-index:15;display:none} .wx-suggest.open{display:block} .wx-suggest button{display:flex;width:100%;justify-content:space-between;gap:8px;padding:10px 14px;background:none; border:none;border-bottom:1px solid var(--line);font:inherit;font-size:14px;text-align:left;cursor:pointer;color:var(--text)} .wx-suggest button:last-child{border-bottom:none} .wx-suggest button:hover{background:var(--btn)} .wx-suggest .r{color:var(--muted);font-size:12px} /* ---------------- the main section (V658) ---------------- */ .wx-hero{background:var(--panel);border:1px solid var(--line);border-radius:14px; margin:0 0 18px;overflow:hidden} .wx-hero-in{display:flex;gap:18px;padding:14px 16px;flex-wrap:wrap;align-items:flex-start} .wx-hero-l{flex:1;min-width:0} .wx-hero-r{text-align:right;margin-left:auto} .wx-place{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--text)} .wx-temprow{display:flex;gap:12px;align-items:center;margin-top:10px} .wx-ico{font-size:40px;line-height:1} .wx-deg{font-size:52px;font-weight:300;letter-spacing:-.03em;line-height:1; font-variant-numeric:tabular-nums;color:var(--text)} .wx-when{font-size:12.5px;color:var(--muted)} .wx-cond{font-size:13.5px;color:var(--text);margin-top:1px} .wx-extra{font-size:12.5px;color:var(--muted);margin-top:6px} .wx-unit{display:inline-flex;flex-direction:column;line-height:1.35} .wx-ubtn{border:none;background:none;color:var(--muted);cursor:pointer;font:inherit; font-weight:700;font-size:12px;line-height:1.35;padding:2px 4px;min-height:20px} .wx-ubtn.active{color:var(--accent);text-decoration:underline} /* V671: 44x20 measured -- wide enough, a third of a fingertip tall. The `min-height: 20px` above is deliberate and stays; this adds the reach only on a touch screen, and the negative margin keeps the row beside the temperature the height it is today. */ @media (pointer: coarse) { .wx-ubtn { min-height: 44px; padding: 0 10px; margin: -12px 0; display: inline-flex; align-items: center; } } /* HIS ORDER SURVIVES THE WRAP. On a wide screen the right column sits beside the temperature and reads after it; at phone width the two columns are side by side at the SAME height, so "Sunday 5:00 PM" lands level with the place and the degrees end up third -- the opposite of *"location , then degrees details, then time and other details"*. Stacked, the reading order is the one he asked for. */ @media(max-width:560px){ .wx-hero-in{flex-direction:column;gap:8px} .wx-hero-r{text-align:left;margin-left:0} } /* The tabs carry the live value -- his "clear some real estate". */ .wx-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none} .wx-tabs::-webkit-scrollbar{display:none} .wx-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted); padding:10px 13px;font:inherit;font-weight:600;font-size:13px;line-height:1;cursor:pointer; min-height:42px;white-space:nowrap} .wx-tab b{font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;margin-left:5px} .wx-tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)} .wx-tab[aria-selected="true"] b{color:var(--accent)} .wx-chart-wrap{padding:12px 8px 2px} #wx-chart{display:block;width:100%;height:108px;color:var(--text)} .wx-hours{display:flex;justify-content:space-between;padding:0 12px 10px;font-size:11px;color:var(--muted)} /* V660: TWO LINES PER READING -- the hour, and the date under it. His ask, and it became necessary the moment the window started rolling into tomorrow: half these labels are now a different day from the one in the heading, and "3 AM" alone does not say which. `.turn` is the first label of a new date -- inked rather than muted, so the day change is legible in the row as well as on the rule above it. */ .wx-hours span{font-variant-numeric:tabular-nums;display:flex;flex-direction:column; align-items:center;line-height:1.25;min-width:0} .wx-hours span b{font-weight:600} .wx-hours span i{font-style:normal;font-size:9.5px;color:var(--muted2);opacity:.85} .wx-hours span.turn i{color:var(--text);font-weight:700;opacity:1} /* The board flip, V660. His pick of three was *"C. Morph"*, and the labels are the half of it CSS can own: the values are interpolated in weather.js because a path `d` cannot be transitioned, but a label just turns over. The stagger is set as an inline animation-delay per span so the row reads left to right. */ @keyframes wx-flip{from{transform:scaleY(.08);opacity:.15}to{transform:scaleY(1);opacity:1}} .wx-hours span.flip{animation:wx-flip 260ms ease both} @media(prefers-reduced-motion:reduce){.wx-hours span.flip{animation:none}} /* Three tabs carrying three values need every pixel of a 360px phone; without this the Wind tab was clipped by the scroll edge and read as missing. */ @media(max-width:560px){ .wx-tabs{padding:0 4px} .wx-tab{padding:10px 7px;font-size:12px} .wx-tab b{margin-left:3px} } .wx-meta{font-size:12px;color:var(--muted);margin:0;padding:0 16px 12px} /* ---------------- this-week strip ---------------- */ /* V658, his note: a rail you scroll by touch or trackpad, and NO scrollbar either way. A permanent bar under eight cards is a control almost nobody drags, taking a row of height on the screen that has the least of it. */ .wx-railwrap{position:relative;margin-bottom:20px} .wx-railwrap::after{content:"";position:absolute;top:2px;right:0;bottom:8px;width:30px; pointer-events:none;background:linear-gradient(90deg,var(--wx-fade0),var(--bg))} .wx-week{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none} .wx-week::-webkit-scrollbar{display:none} /* ================================================= V660: THE OVERFLOW, FOUND His note, twice: *"this is still overflowing"* -- with a photograph of the four lines in a card coming out SIDE BY SIDE and spilling into the neighbours. THE CAUSE IS AN ASSUMPTION, NOT A WIDTH. This rule never said which way the card's children stack; it relied on the browser's default for a