/* Copyright 2019-2026 John A Kline */ /* See LICENSE.txt for your rights */ /* The monthly and yearly climatological summaries, set as a page from a climate yearbook rather than as a computer printout: serif figures, small-caps section rules, dot leaders, hairlines, warm stock, no zebra, and one warm accent. This is a deliberate grammar break, and the second one on this site -- the celestial pages have carried their own since 7.2 (body.night-page + .cnight inside the stock light chrome). The chrome here is stock too; only the sheet speaks differently. The sheet wears a HAIRLINE, not the thick-thin binding rule the first draft had. The rule carried no meaning and was the one element that read as costume; the hairline is what every other card on the site wears, and dropping it is most of what makes this page belong. Ships light-only for now. The dark palette below is complete and measured, but nothing on these pages activates it: there is no prefers-color-scheme rule, by the same reasoning css/forecast.css records -- a reader whose OS prefers dark must keep seeing the page as designed until the SITE offers the switch. .theme-dark is NOT a name invented here. It is already live on this site: celestial_today.inc, celestial_stars.inc and celestial_satellites.inc put it on their panel divs beside .cnight, and css/forecast.css and css/celestial-panels.css define tokens under it. Following that, the tokens below are written to be turned on by the class landing on ANY ancestor of the sheet -- the sheet itself, #contents, or -- since custom properties inherit. Nothing here loads on a celestial page and nothing there loads this, so the two token sets cannot collide today; keep it that way. */ /* Source Serif 4, self-hosted, following the Open Sans convention in liveseasons.css. Two VARIABLE files -- roman and italic -- cover every weight this page uses (400 text, 600 heads and figures, 700 totals), so the four static faces that would otherwise be needed are two fetches instead. 260 KB for the pair, latin subset only. woff2 ONLY, unlike Open Sans beside it: WOFF1 has no variable-font format to fall back to. Every browser that lacks woff2 predates 2016 and lands on Georgia, which is the point of the stack below. Lining figures are why this face and not Georgia: Georgia's numerals are old-style, and a column of 31 varying-height figures is harder to read down than across. Licensed SIL OFL 1.1 -- fonts/sourceserif/license.txt. */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; src: url('../fonts/sourceserif/SourceSerif4-Roman.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900; src: url('../fonts/sourceserif/SourceSerif4-Italic.woff2') format('woff2'); font-display: swap; } /* THE PALETTE IS MEASURED, NOT PICKED. Every text tier clears WCAG AA (4.5:1) on the stock it actually lands on, and every category rule clears 3.0:1 as non-text. Two light values moved after measuring: --al-faint read 3.52 and the yellow AQI rule 1.74. Dark follows the shape forecast.css established -- tokens on :root, .theme-dark redefining them, and deliberately NO prefers-color-scheme rule, so a reader whose OS prefers dark keeps seeing the page as designed until the site actually offers the switch. The dark sheet is WARM, not neutral: the sheet-on-a-ground reading is what makes this page an object, and it sits at 1.25:1 against the page where the light sheet sits at 1.21:1 -- the same separation, carried over. The page ground itself is forecast.css's --fc-page, so the sheet floats on the site's dark, not on one of its own. */ :root { --al-page:#e3e3e3; --al-paper:#faf8f2; --al-ink:#221f1a; /* 15.46 on the sheet */ --al-ink-2:#443f36; /* 9.84 */ --al-muted:#6b6459; /* 5.50 */ --al-faint:#756d60; /* 4.81 -- was #8b8378 at 3.52, under AA */ --al-rule:#2a2621; --al-hair:#cfc8ba; --al-hair-2:#e4ded1; --al-accent:#7a3b22; /* the one warm accent: extremes and heads */ --al-cool:#2f4c76; /* EPA air-quality categories, as printed rules under the figure. Darkened from the screen-chip values to clear 3.0 on cream. */ --al-aq-good:#6b9970; /* 3.08 -- was #7aa87e at 2.56 */ --al-aq-mod:#9d8722; /* 3.34 -- was #d8bd5a at 1.74 */ --al-aq-usg:#ad6d28; /* 3.96 -- was #d9944e at 2.38 */ --al-aq-unh:#b8524c; /* 4.55 */ --al-aq-vunh:#8a5a93; /* 4.99 */ --al-aq-haz:#8a4a4a; /* 6.26 */ } .theme-dark { --al-page:#0a0f22; /* forecast.css's --fc-page */ --al-paper:#2a251d; /* warm dark stock, 1.25 against the page */ --al-ink:#ece5d6; /* 12.13 on the sheet */ --al-ink-2:#d6cfc0; /* 9.81 */ --al-muted:#a79d8d; /* 5.69 */ --al-faint:#9a9180; /* 4.88 */ --al-rule:#b9b0a0; /* the rules invert with the ink */ --al-hair:#4a4337; --al-hair-2:#3a342b; --al-accent:#d99a6e; /* 6.37 -- the warm accent lifted, hue held */ --al-cool:#8fb0dd; /* 6.82 */ --al-aq-good:#8fc494; --al-aq-mod:#e6d178; --al-aq-usg:#e8a869; --al-aq-unh:#e0817a; --al-aq-vunh:#b98cc2; --al-aq-haz:#b06a6a; } /* THE ACCENT DIAL. Brown is the yearbook's own; blue is the site's -- and it is forecast.css's --fc-accent #3378a0, not the title bar's #367ba3, which reads 4.38 on this cream stock and misses AA. */ .al { font-family:'Source Serif 4',Charter,Georgia,'Times New Roman',serif; color:var(--al-ink); text-align:left; padding:22px 20px 46px; } /* The sheet: warm stock inside a thick-thin frame. */ .al-sheet { max-width:1000px; margin:0 auto; background:var(--al-paper); border:1px solid var(--al-hair); padding:0 54px 46px; box-shadow:0 1px 3px rgba(0,0,0,.10); } /* Masthead. */ .al-mast { text-align:center; padding:34px 0 22px; } .al-kicker { font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--al-muted); margin:0 0 12px; } /* The countdown used to land here, in a span scripts/almanac.js injected into the kicker, with a CHECKING FOR UPDATE note and a COULD NOT UPDATE one beside it. 12.0.1 moved it to the submenubar as the site's countdown pill, and the three notices became the pill's own colors. */ /* Before the first payload arrives. */ .al-loading { color:var(--al-muted); font-style:italic; text-align:center; padding:56px 0; margin:0; } .al-error { color:var(--al-accent); text-align:center; padding:56px 0; margin:0; } .al-mast h2 { font-size:44px; font-weight:600; margin:0; border:0; padding:0; letter-spacing:.01em; color:var(--al-ink); } .al-place { font-size:15px; font-style:italic; color:var(--al-muted); margin:10px 0 0; } .al-mast .rule { border-bottom:1px solid var(--al-rule); margin:22px 0 0; } /* Section heads: small caps between hairlines. */ .al h3 { font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:var(--al-accent); text-align:center; margin:40px 0 0; padding:0 0 8px; border:0; border-bottom:1px solid var(--al-hair); } .al .lede { font-size:13.5px; font-style:italic; color:var(--al-muted); text-align:center; margin:10px 0 0; } /* The record: dot leaders, two columns, the way an index is set. */ .al-record { columns:2; column-gap:56px; margin:22px 0 6px; } .al-rec { display:flex; align-items:baseline; break-inside:avoid; font-size:15.5px; padding:5px 0; } .al-rec .lbl { color:var(--al-ink-2); white-space:nowrap; } .al-rec .lead { flex:1; border-bottom:1.5px dotted var(--al-hair); margin:0 7px; transform:translateY(-4px); } .al-rec .fig { font-weight:600; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; } .al-rec .fig .u { font-weight:400; color:var(--al-muted); font-size:.86em; margin-left:.18em; } .al-rec .fig.warm { color:var(--al-accent); } .al-rec .fig.cool { color:var(--al-cool); } .al-rec .when { color:var(--al-faint); font-size:.82em; font-style:italic; margin-left:7px; } /* Tables: hairlines only, figures in old-style, nothing striped. */ /* A backstop only. A table too wide for the phone is split into two sections by scripts/almanac.js instead; this just guarantees the PAGE never scrolls sideways if one ever slips through. */ .al-scroll { overflow-x:auto; } .al table { border-collapse:collapse; width:100%; margin-top:18px; font-size:14px; font-variant-numeric:tabular-nums lining-nums; } .al thead th { font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--al-muted); padding:0 8px 7px; text-align:right; white-space:nowrap; border:0; border-bottom:1px solid var(--al-rule); } /* A heading allowed to break over two lines. Used by the threshold columns, whose labels ("Max >=90 deg") are the widest on the page and whose figures are the narrowest -- letting the HEADING wrap costs nothing and keeps the table inside the sheet without shrinking type or abbreviating the label into ambiguity. th only: the figures below must stay on one line. */ .al thead th.wrap { white-space:normal; } .al thead th.k { text-align:left; } .al tbody td { padding:3px 8px; text-align:right; white-space:nowrap; color:var(--al-ink-2); border-bottom:1px solid var(--al-hair-2); } .al tbody td.k { text-align:left; color:var(--al-ink); font-weight:600; } .al tbody td.at { color:var(--al-faint); font-size:.9em; font-style:italic; } .al tbody tr:last-child td { border-bottom:1px solid var(--al-rule); } .al tfoot td { padding:8px 8px 0; text-align:right; font-weight:700; color:var(--al-ink); } .al tfoot td.k { text-align:left; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--al-muted); } .al .warm { color:var(--al-accent); font-weight:700; } .al .cool { color:var(--al-cool); font-weight:700; } .al .two { display:grid; grid-template-columns:1fr 1fr; gap:0 56px; } /* One concession to color: the EPA's air-quality categories, as a rule under the figure rather than a chip -- a printed page would underline. */ .al .aq { border-bottom:3px solid transparent; padding-bottom:1px; } .aq.good{border-color:var(--al-aq-good)} .aq.mod{border-color:var(--al-aq-mod)} .aq.usg{border-color:var(--al-aq-usg)} .aq.unh{border-color:var(--al-aq-unh)} .aq.vunh{border-color:var(--al-aq-vunh)} .aq.haz{border-color:var(--al-aq-haz)} .al .legend { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px; font-size:12px; font-style:italic; color:var(--al-muted); margin-top:14px; } .al .legend span { display:flex; align-items:center; gap:7px; } .al .legend i { width:16px; height:3px; display:block; } .lg-good{background:var(--al-aq-good)} .lg-mod{background:var(--al-aq-mod)} .lg-usg{background:var(--al-aq-usg)} .lg-unh{background:var(--al-aq-unh)} .lg-vunh{background:var(--al-aq-vunh)} .lg-haz{background:var(--al-aq-haz)} .al-colophon { margin:44px -54px 0; padding:16px 54px 0; border-top:1px solid var(--al-rule); font-size:12.5px; font-style:italic; color:var(--al-muted); display:flex; justify-content:space-between; gap:20px; } .al-colophon a { color:var(--al-accent); } .theme-dark .al-sheet { box-shadow:0 10px 26px rgba(0,0,0,.45); } /* The page ground follows the theme. The !important that used to be here existed only to defeat the inline background-color the page templates carried on ; 11.5 took that attribute off all 36 of them, so ordinary cascade order is enough -- this stylesheet is linked after liveseasons.css. */ body { background-color:var(--al-page); } /* ---- the smartphone twin ------------------------------------------- Both twins render at width=1124; the phone page just sets everything larger, the way css/tides.css forks on .xg-sp. Type scales from one root size wherever the sheet uses em, so only the pixel values and the sheet's own padding are restated here. */ .al-sp .al-sheet { padding:0 28px 40px; max-width:none; } .al-sp .al-kicker { font-size:24px; letter-spacing:.28em; } .al-sp .al-mast { padding:44px 0 26px; } .al-sp .al-mast h2 { font-size:74px; } .al-sp .al-place { font-size:26px; } .al-sp h3 { font-size:23px; letter-spacing:.22em; margin-top:52px; } .al-sp .lede { font-size:24px; } /* One column: two columns of dot leaders at this size wrap badly. */ .al-sp .al-record { columns:1; } .al-sp .al-rec { font-size:28px; padding:9px 0; } .al-sp table { font-size:24px; } .al-sp thead th { font-size:19px; letter-spacing:.10em; padding:0 7px 9px; } .al-sp tbody td { padding:6px 7px; } .al-sp tfoot td { padding:12px 7px 0; } .al-sp tfoot td.k { font-size:19px; } /* Barometer and CO2 stack rather than sit side by side. */ .al-sp .two { grid-template-columns:1fr; gap:0; } .al-sp .legend { font-size:21px; gap:8px 26px; } .al-sp .legend i { width:26px; height:4px; } .al-sp .al-colophon { margin:44px -28px 0; padding:20px 28px 0; font-size:21px; } .al-sp .al-loading, .al-sp .al-error { font-size:28px; }