/* Copyright 2026 by John A Kline. See LICENSE for your rights. The About page in the panel grammar the celestial pages settled on and the forecast tabs, Highs/Lows, Graphs and the imagery tabs have carried since: white sections with a hairline border on the light page, a #367ba3 eyebrow, muted captions, everything sized in em so the phone layout scales with one .ab font-size rule under the phone query. THE TEXT LADDER IS NOT NEW. ink / ink-2 / ink-3 / muted / faint are the five tiers css/forecast.css derived against measured grounds and css/tempestas.css now carries as --tp-*; they are restated here under --ab-* only so this page can be themed as a unit, and every value is a copy, not a fresh pick. Do not hand-tune one. THEMING. :root carries the light values, .theme-dark redefines them, and there is deliberately NO prefers-color-scheme rule -- until the site actually offers the switch a reader whose OS prefers dark must keep seeing this page as designed. --------------------------------------------------------------------- THE PLATE, AGAIN. The location map is an OpenStreetMap raster we do not draw and cannot honestly recolor -- the same problem css/radar.css solved for NWS RIDGE, and the same answer: the map sits on .plate--lit, a pale ground that stays pale under .theme-dark, so a lit panel sits inside a dark instrument and OSM's own colors go on meaning what OSM means by them. The photographs get .plate--photo, which is neutral in both themes: a photograph has no key to misread, it just wants a mat that is not competing with it. */ :root { --ab-surface:#ffffff; --ab-ink:#222222; --ab-ink-2:#343434; --ab-ink-3:#3f4955; --ab-muted:#545e69; --ab-faint:#5e6574; /* --tp-faint; see tempestas.css */ --ab-line:#999999; --ab-hair:#d8dde3; --ab-hair-2:#eaeef2; --ab-rule:#c2c8ce; --ab-accent:#246a92; --ab-link:#2b6897; --ab-tint:#f5f7f9; --ab-ok:#2f7d4f; --ab-warn:#8a6d03; --ab-bad:#a94442; --ab-on-accent:#ffffff; --ab-plate-lit:#ffffff; --ab-plate-photo:#f0f3f6; --ab-plate-line:#c2c8ce; /* The five instrument families. Used as an 8px dot beside a roster row and a timeline entry -- never as a text color, so none has to clear a contrast bar on its own. (Through 11.5 they colored the lifeline chart's bars too; the chart is gone, the dots are not.) */ --ab-fam-station:#2f6ea8; --ab-fam-rain:#2f7d70; --ab-fam-air:#7a5ea8; --ab-fam-seismic:#b8860b; --ab-fam-computing:#8a6d03; --ab-fam-off:#b6bec7; } .theme-dark { --ab-surface:#111834; --ab-ink:#e9e4d4; --ab-ink-2:#ded9c9; --ab-ink-3:#d4cfbf; --ab-muted:#b2bae1; --ab-faint:#b2bae1; /* --tp-faint; see tempestas.css */ --ab-line:#2a3358; /* Lc 18, 8 and 30, as in light; they were Lc 0, nearly invisible. */ --ab-hair:#555c7d; --ab-hair-2:#3b4261; --ab-rule:#70789a; --ab-accent:#99c2dd; --ab-link:#99c2dd; --ab-tint:#151c38; --ab-ok:#7acb99; --ab-warn:#ebae6b; --ab-bad:#ffa08d; --ab-on-accent:#0a0f22; /* Deliberately NOT dark -- see the plate note above. */ --ab-plate-lit:#dfe4ea; --ab-plate-photo:#0e1430; --ab-plate-line:#2a3358; --ab-fam-station:#5b8fc4; --ab-fam-rain:#4fa895; --ab-fam-air:#a58fd0; --ab-fam-seismic:#d8a93a; --ab-fam-computing:#c9a34a; --ab-fam-off:#333c63; } /* The [hidden] guard css/radar.css records the reason for: a UA rule of specificity (0,1,0) loses to any class rule that sets display. */ .ab [hidden]{display:none !important} /* ---- the panel ------------------------------------------------------ */ .ab{padding:1.625rem 1.25rem 2.125rem;margin-top:1.125rem;font-size:min(calc(1rem + var(--tp-step)), max(1rem, var(--tp-cap)));color:var(--ab-ink); text-align:left;font-family:'Open Sans',arial,sans-serif} .ab .abwrap{max-width:77.5rem;margin:0 auto;display:flex;flex-direction:column;gap:1.625rem} /* The way back, the same shape the graphs pages use -- centered under the last card, on the content column rather than inside it. */ .ab .gotop{text-align:center;margin:0;font-size:1em} .ab section{background:var(--ab-surface);border:.0625rem solid var(--ab-line); padding:1.125rem 1.25rem 1rem} .ab .eyebrow{color:var(--ab-accent);font-weight:600;font-size:.8em; letter-spacing:.08em;text-transform:uppercase;margin:0 0 .75rem; border:0;padding:0} .ab .caption{color:var(--ab-muted);font-size:.85em;margin:.875rem 0 0;max-width:86ch; line-height:1.55} .ab .caption b{color:var(--ab-ink-3)} .ab .cfoot{color:var(--ab-muted);font-size:.82em;border-top:.0625rem solid var(--ab-rule); padding-top:.625rem;margin-top:1rem} .ab a{color:var(--ab-link);text-decoration:none} .ab a:hover{text-decoration:underline} .ab .railh{color:var(--ab-accent);font-weight:600;font-size:.8em; letter-spacing:.08em;text-transform:uppercase;margin:1.375rem 0 .5rem} .ab .railh:first-child{margin-top:0} .ab .railh--pill{display:flex;align-items:center;gap:.625rem; justify-content:space-between;flex-wrap:wrap;white-space:nowrap} /* The pill itself is SITE-WIDE now (css/tempestas.css): 12.0.1 put the same element on every live page, so this page stopped carrying a private copy of it. Only .railh--pill above, which is the heading's layout rather than the pill's dress, stays here. */ .ab .meta{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.375rem .875rem; font-size:.86em} .ab .meta dt{color:var(--ab-muted);font-size:.92em;letter-spacing:.04em; text-transform:uppercase;white-space:nowrap} .ab .meta dd{margin:0;color:var(--ab-ink-2);font-variant-numeric:tabular-nums} /* ---- the plate ------------------------------------------------------ */ .ab .plate{border:.0625rem solid var(--ab-plate-line);display:grid;place-items:center; padding:.625rem;border-radius:.1875rem} .ab .plate img{display:block;max-width:100%;height:auto} .ab .plate--lit{background:var(--ab-plate-lit)} /* The map's own 400 px, in frame units so it scales with the page like everything else; a raster keeps its natural CSS px otherwise. In the stylesheet, not inline, so the phone query's .ab .plate img below can still fill the phone column. */ .ab .plate--lit img{width:25rem} .ab .plate--photo{background:var(--ab-plate-photo);padding:.375rem} /* ---- the three-column head ------------------------------------------ auto 1fr auto: the map takes the raster's natural width, the roster takes the rest, the vitals rail takes what it needs. */ .ab .headgrid{display:grid;grid-template-columns:auto minmax(0,1fr) 16em;gap:1.5rem; align-items:start} .ab .headgrid > div{min-width:0} /* ---- the instrument roster ------------------------------------------ What the shipped list never said: which measurement each box is responsible for. A reader looking at a number on any other page can find out here what produced it. */ .ab .roster{display:grid;grid-template-columns:auto 1fr auto;gap:0 .875rem; font-size:.88em;align-items:baseline} .ab .roster .rdot{width:.5rem;height:.5rem;border-radius:50%;align-self:center; margin-top:.1em} .ab .roster .rn{color:var(--ab-ink);font-weight:600;padding:.4375rem 0 0} .ab .roster .rs{color:var(--ab-faint);font-size:.86em;text-align:right; white-space:nowrap;padding:.4375rem 0 0;font-variant-numeric:tabular-nums} .ab .roster .rm{grid-column:2/4;color:var(--ab-muted);font-size:.88em; padding:.0625rem 0 .5rem;border-bottom:.0625rem solid var(--ab-hair-2); line-height:1.5} .ab .roster .rm:last-child{border-bottom:0} .ab .fam-station{background:var(--ab-fam-station)} .ab .fam-rain{background:var(--ab-fam-rain)} .ab .fam-air{background:var(--ab-fam-air)} .ab .fam-seismic{background:var(--ab-fam-seismic)} .ab .fam-computing{background:var(--ab-fam-computing)} /* ---- the live vitals rail ------------------------------------------- Everything on this page that is not a photograph or a fixed fact. The rail states its own age rather than borrowing the site's LIVE label, because these cells are the only live thing on the page and a reader should not have to look elsewhere to know whether they are fresh. */ .ab .vitals{font-size:.86em} .ab .vitals dl{margin:0 0 .25rem;display:grid;grid-template-columns:1fr auto;gap:.3125rem .625rem} .ab .vitals dt{color:var(--ab-muted)} .ab .vitals dd{margin:0;color:var(--ab-ink-2);text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .ab .vitals .ok{color:var(--ab-ok);font-weight:600} .ab .vitals .low{color:var(--ab-bad);font-weight:600} .ab .vitals .vsplit{border-top:.0625rem solid var(--ab-hair);margin:.75rem 0 .625rem} /* ---- credits -------------------------------------------------------- Three columns of pairs rather than one 27-row table in a 30% cell. */ .ab .creds{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1.875rem; align-items:start;font-size:.86em} .ab .creds .cgroup{margin:0 0 1rem} .ab .creds h4{margin:0 0 .375rem;color:var(--ab-muted);font-size:.86em;font-weight:600; letter-spacing:.07em;text-transform:uppercase; border-bottom:.0625rem solid var(--ab-hair);padding-bottom:.25rem} .ab .creds ul{margin:0;padding:0;list-style:none} .ab .creds li{display:flex;justify-content:space-between;gap:.75rem;padding:.125rem 0; line-height:1.5} .ab .creds .who{color:var(--ab-muted);text-align:right;white-space:nowrap} /* ---- downstream ----------------------------------------------------- Where this station's observations go. Before the About rebuild this existed on the home page and on the phone About page, and not on the desktop About page at all. */ .ab .downstream{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem 1.125rem; font-size:.86em} .ab .downstream a{display:block;padding:.5rem .625rem;background:var(--ab-tint); border:.0625rem solid var(--ab-hair);border-radius:.1875rem} .ab .downstream a:hover{border-color:var(--ab-accent);text-decoration:none} .ab .downstream .dnet{display:block;color:var(--ab-muted);font-size:.86em; letter-spacing:.05em;text-transform:uppercase} .ab .downstream .did{display:block;color:var(--ab-ink-2);font-weight:600} /* ---- the timeline --------------------------------------------------- A spine with the date on it. The shipped page centers everything and separates entries with a 20%-wide table cell carrying a bottom border; this puts the dates on one axis so the eye can read the rhythm, and gives each entry one

so the page has an outline. */ .ab .tl{position:relative;margin-top:.375rem} .ab .tl::before{content:"";position:absolute;left:9.5em;top:0;bottom:0;width:.0625rem; background:var(--ab-hair)} .ab .tlyear{position:relative;display:grid;grid-template-columns:9.5em 1fr; align-items:center;gap:0 2.4em;margin:1.625rem 0 .875rem} .ab .tlyear .y{text-align:right;color:var(--ab-accent);font-weight:600; font-size:1.5em;letter-spacing:.03em; font-variant-numeric:tabular-nums} .ab .tlyear .yline{height:.0625rem;background:var(--ab-rule)} .ab .tlrow{display:grid;grid-template-columns:9.5em 1fr;gap:0 2.4em; margin:0 0 1.375rem;position:relative} /* A link to one entry (the Solar Array page's way back) lands with air above it. */ .ab .tlrow[id]{scroll-margin-top:1rem} .ab .tlrow .when{text-align:right;color:var(--ab-muted);font-size:.82em; line-height:1.5;padding-top:.2em;padding-right:1.1em} .ab .tlrow .when .approxmark{color:var(--ab-faint)} .ab .tlrow .dot{position:absolute;left:9.5em;top:.45em;width:.5625rem;height:.5625rem; border-radius:50%;transform:translateX(-.28125rem); box-shadow:0 0 0 .1875rem var(--ab-surface)} .ab .tlrow h4{margin:0 0 .125rem;font-size:1.02em;font-weight:600;color:var(--ab-ink)} .ab .tlrow .tsub{color:var(--ab-ink-3);font-size:.86em;margin:0 0 .375rem} .ab .tlrow .tbody{color:var(--ab-muted);font-size:.86em;line-height:1.6;margin:0; max-width:70ch} .ab .tlrow .tret{color:var(--ab-faint);font-size:.82em;margin:.25rem 0 0} .ab .tlshots{display:flex;gap:.625rem;margin:.625rem 0 0;flex-wrap:wrap} /* A height cap, not a height: a thumbnail wider than its column shrinks with its shape kept, where a fixed height widened the row past a phone's screen (a 2.6:1 chart, since replaced). Every thumbnail is at least 226 px tall, above the cap on any screen up to about 1690 px wide (a touch screen's root keeps growing past the frame, css/tempestas.css), so each shows at the cap exactly as a fixed height would. */ .ab .tlshot{background:transparent;border:0;padding:0;cursor:zoom-in;display:block; max-width:100%} .ab .tlshot img{display:block;background:var(--ab-plate-photo); border:.0625rem solid var(--ab-plate-line);border-radius:.125rem; height:auto;width:auto;max-height:9.375rem;max-width:100%} /* ITS ROOM IS KEPT BEFORE IT LOADS. The thirty are lazy, and a picture of unknown size takes none: the page moved under the thumb as each arrived. The template gives each its shape (--r, width over height, and --h, its own height: AssetStamps.picture_size), so the width the cap implies is arithmetic, and the rule above is what is left for a picture whose shape could not be read. Still a cap and not a height: wider than its column it shrinks with its shape kept, and it is never drawn taller than it is. */ .ab .tlshot img[style]{max-height:none;aspect-ratio:var(--r); width:calc(min(var(--ab-thumb, 9.375rem), var(--h)) * var(--r))} .ab .tlshot:hover img{border-color:var(--ab-accent)} /* ---- the lightbox --------------------------------------------------- The full-resolution photograph is fetched only when somebody asks for it. Everything above is a thumbnail. */ .ab-lb{position:fixed;inset:0;background:rgba(8,12,26,.86);z-index:50; display:grid;place-items:center;padding:1.5rem} .ab-lb img{max-width:94vw;max-height:82vh;background:#fff;padding:.375rem; border-radius:.125rem} .ab-lb figcaption{color:#e6ecf5;font:400 min(calc(.875rem + var(--tp-step)), max(.875rem, var(--tp-cap)))/1.6 'Open Sans',arial,sans-serif; max-width:70ch;margin:.875rem auto 0;text-align:center} .ab-lb .lbclose{position:absolute;top:1rem;right:1.25rem;background:transparent; border:.0625rem solid #7d8aa5;color:#e6ecf5;border-radius:.1875rem; padding:.375rem .75rem;font:600 min(calc(.8125rem + var(--tp-step)), max(.8125rem, var(--tp-cap))) 'Open Sans',arial,sans-serif; cursor:pointer} .ab-lb figure{margin:0;text-align:center} /* ---- the phone layout ---------------------------------------------- Under the width query, and not a narrow layout: the phone keeps the same 1124-px frame as a wider screen (the root rule in css/tempestas.css scales it) and sets the type larger. One override does the page. */ @media (max-width: 600px){.ab{font-size:min(calc(1.875rem + var(--tp-step)), max(1.875rem, var(--tp-cap)))}} @media (max-width: 600px){.ab .abwrap{gap:2.125rem}} @media (max-width: 600px){.ab section{padding:1.5rem 1.625rem 1.375rem}} @media (max-width: 600px){.ab .headgrid{grid-template-columns:1fr}} @media (max-width: 600px){.ab .creds{grid-template-columns:repeat(2,1fr)}} @media (max-width: 600px){.ab .downstream{grid-template-columns:repeat(2,1fr)}} @media (max-width: 600px){.ab .tl::before{left:7.5em}} @media (max-width: 600px){.ab .tlyear,.ab .tlrow{grid-template-columns:7.5em 1fr;gap:0 1.6em}} @media (max-width: 600px){.ab .tlrow .dot{left:7.5em}} @media (max-width: 600px){.ab .tlshot img{max-height:18.75rem}} @media (max-width: 600px){.ab{--ab-thumb:18.75rem}} @media (max-width: 600px){.ab .plate img{width:100%}} /* THE PHONE STANDARD (tests/_floors.py) for what is set in em off this page's shrinking size and has no phone size below: the blocks take the label size whole, the timeline's paragraphs are what a reader came for and take the body size. Not by raising .ab's own size: the timeline's spine and date column are measured in that em. */ @media (max-width: 600px){.ab.ab .vitals,.ab.ab .creds,.ab.ab .mine,.ab.ab .downstream,.ab.ab .gotop{font-size:var(--tp-phone-label)}} @media (max-width: 600px){.ab.ab .creds h4{font-size:11.5px}} /* (one column each: two columns of pairs at a readable size are wider than the phone, and a name that may not wrap pushed the page sideways) */ @media (max-width: 600px){.ab.ab .creds,.ab.ab .mine{grid-template-columns:minmax(0,1fr)}} /* (a row of the credits holds two links, and the rows were 19 px apart: 24 lets each link have its own 24 px circle) */ @media (max-width: 600px){.ab.ab .creds li{padding:max(.125rem, 3px) 0}} @media (max-width: 600px){.ab.ab .downstream{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width: 600px){.ab.ab .mine .mw,.ab.ab .downstream .dnet,.ab.ab sub{font-size:11px}} @media (max-width: 600px){.ab.ab .tlrow h4{font-size:max(1.02em, 14px)}} @media (max-width: 600px){.ab.ab .tlrow .tbody{font-size:var(--tp-phone-body)}} /* The lightbox a tap on a photograph opens: its caption was 4.9 px on a phone and CLOSE a 25 by 13 px target. (It is outside .ab, on the body.) */ @media (max-width: 600px){.ab-lb figcaption,.ab-lb .lbclose{font-size:var(--tp-phone-label)}} /* (16 px down, or the top of its hit region is off the top of the screen) */ @media (max-width: 600px){.ab-lb .lbclose{top:16px;right:max(1.25rem, 12px)}} @media (max-width: 600px){.ab-lb .lbclose::before{content:"";position:absolute;left:-8px;right:-8px; top:50%;height:44px;margin-top:-22px}} /* ---- written here --------------------------------------------------- The eleven components of this site written by the person running it. Its own band under the three credit columns rather than a fourth column: each row is a name and what the thing does, which needs the width, and eleven rows was the group that unbalanced the three-column grid. */ .ab .mine{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem 1.875rem; font-size:.86em;margin-top:.125rem} .ab .mine .mrow{padding:.25rem 0 .375rem;border-bottom:.0625rem solid var(--ab-hair-2)} .ab .mine .mn{display:block;font-weight:600} .ab .mine .mw{display:block;color:var(--ab-muted);font-size:.9em;line-height:1.45} @media (max-width: 600px){.ab .mine{grid-template-columns:repeat(2,1fr)}} /* PHONE TEXT SIZES MEASURED ON AN IPHONE. Under the old 1124 pin, iOS Safari enlarged this family's small text on its own; these are the sizes it showed (screen px at 402 wide, as rem of the scaled frame), so the device-width page reads the same. Rules Safari left alone are not restated. */ @media (max-width: 600px){.ab.ab .tlrow .tsub{font-size:max(var(--tp-phone-label), 1.725rem)}} @media (max-width: 600px){.ab.ab .roster{font-size:max(var(--tp-phone-label), 1.964rem)}} @media (max-width: 600px){.ab.ab .roster .rm{font-size:max(var(--tp-phone-label), 1.821rem)}} @media (max-width: 600px){.ab.ab .roster .rs{font-size:max(11px, 1.419rem)}} @media (max-width: 600px){.ab.ab .tlrow .tret{font-size:max(var(--tp-phone-label), 1.727rem)}} @media (max-width: 600px){.ab.ab .cfoot{font-size:max(var(--tp-phone-label), 1.765rem)}} @media (max-width: 600px){.ab.ab .caption{font-size:max(var(--tp-phone-label), 2.062rem)}} @media (max-width: 600px){.ab.ab .railh{font-size:max(11.5px, 1.84rem)}} @media (max-width: 600px){.ab.ab .eyebrow{font-size:max(11.5px, 1.835rem)}} @media (max-width: 600px){.ab.ab .tlrow .when{font-size:max(var(--tp-phone-label), 1.573rem)}} @media (max-width: 600px){.ab.ab .vitals dt{font-size:max(var(--tp-phone-label), 1.728rem)}}