/* Copyright 2026 by John A Kline. See LICENSE.txt for your rights. The four forecast tabs -- 7 Day, Hourly, Alerts, Tides -- in the panel grammar the celestial pages settled on: white sections with a hairline border on the light page, #367ba3 eyebrows, muted captions, everything sized in em so the smartphone twin scales with one .fc-sp override. THEMING. Every color below is a token, so a future site-wide light/dark/auto switch has something to flip. :root carries the light values and .theme-dark redefines them, the same shape css/celestial.css and css/celestial-panels.css use, so one class on will drive all of it. There is deliberately NO prefers-color-scheme rule here: until the site actually offers the switch, a reader whose OS prefers dark must keep seeing the page as designed. The charts need nothing further -- every mark in them is a class, with no color baked into the markup. THE TEXT LADDER IS DERIVED, NOT PICKED. ink / ink-2 / ink-3 / muted / faint are five tiers of one ladder, and the objective is: evenly stepped in PERCEPTUAL lightness (CIE L*), with every tier clearing WCAG AA on every ground it actually lands on. Those grounds were established by walking up from each text node to its first non-transparent background across all eight rendered pages, not by assuming the card -- there are five of them (#ffffff, #f5f7f9, #f0f3f6, #e3e3e3 and #367ba3), and a tier is judged on its worst. The faintest tier sits exactly at the ceiling AA allows, so the ladder uses the whole range available rather than a safe slice of it. TestTextContrast asserts it; do not hand-tune a value back. Two things this replaced, both shipping since 10.0: --fc-faint read 3.10 on white and 2.94 on the tint under the hour table's dew-point and humidity columns, and --fc-link read 4.13. The xg-* names the tides page uses are weewx-xtide's contract and live in css/tides.css, not here. */ :root { --fc-page:#e3e3e3; --fc-surface:#ffffff; --fc-ink:#222222; --fc-ink-2:#343434; --fc-ink-3:#3f4955; --fc-muted:#545e69; --fc-faint:#6a7281; --fc-line:#999999; --fc-hair:#d8dde3; --fc-hair-2:#eaeef2; --fc-rule:#c2c8ce; --fc-accent:#3378a0; --fc-link:#3f7bab; --fc-hi:#aa4444; --fc-lo:#4444aa; --fc-band:#eef1f5; --fc-grid:#e2e6eb; --fc-grid-2:#c8ced6; --fc-axis:#b9c0c9; --fc-rain:#2f6ea8; --fc-dew:#2f7d70; --fc-tint:#f5f7f9; --fc-tint-2:#f0f3f6; --fc-ok:#2f7d4f; /* The page-heading rule, and text that sits ON a filled accent or severity ground -- a selected day tab, an in-effect badge. Tokens because the fill inverts under .theme-dark: white on a pale blue tab would be the one unreadable thing left. */ --fc-head-rule:#666666; --fc-on-accent:#ffffff; /* Alert severity. NWS's own ranking, toned to sit on this page. */ --fc-sev-extreme:#7f1d1d; --fc-sev-severe:#b23a24; --fc-sev-moderate:#b45309; --fc-sev-minor:#367ba3; --fc-sev-unknown:#5c6672; --fc-warn-bg:#fff6e5; --fc-warn-line:#e0b972; --fc-warn-ink:#6b4a10; } .theme-dark { --fc-page:#0a0f22; --fc-surface:#111834; --fc-ink:#e9e4d4; --fc-ink-2:#ded9c9; --fc-ink-3:#c8c3b4; --fc-muted:#8b93b8; --fc-faint:#6e7597; --fc-line:#2a3358; --fc-hair:#232b4c; --fc-hair-2:#1b2340; --fc-rule:#2a3358; --fc-accent:#7fb3d5; --fc-link:#7fb3d5; --fc-hi:#ce6750; --fc-lo:#7f8fe0; --fc-band:#161d3a; --fc-grid:#222a4a; --fc-grid-2:#2f3a63; --fc-axis:#3a4570; --fc-rain:#5b8fc4; --fc-dew:#4fa895; --fc-tint:#151c38; --fc-tint-2:#19203e; --fc-ok:#5fb07f; --fc-head-rule:#2f3a63; --fc-on-accent:#0a0f22; --fc-sev-extreme:#e06a6a; --fc-sev-severe:#e08060; --fc-sev-moderate:#dda15e; --fc-sev-minor:#7fb3d5; --fc-sev-unknown:#8b93b8; --fc-warn-bg:#2a2211; --fc-warn-line:#6b5620; --fc-warn-ink:#e0c68a; /* The drawn forecast icons (weewx-nws >= 5.2). Their light defaults are already right and are NOT restated here -- the module's own PALETTE is the light contract, and a copy of it here could only drift from it. These are the dark counterparts, derived by weewx-nws against THIS card color (--fc-surface #111834) rather than guessed: reproduce the light palette's relative PROMINENCE ratios on a dark ground, lightness free, hue and chroma held. THE CLOUD RAMP IS INVERTED HERE AND THAT IS DELIBERATE. --wx-cloud, the front cloud, is the DARKEST of the three and --wx-cloud-3 the lightest -- the opposite of light mode. It follows from the objective: in light the BACK cloud is the more prominent one, so reproducing that relationship on a dark ground requires the back cloud to be lighter. It also measures better, bkn's gap going from 38.4 in light to 54.3 here. Do not "fix" it. Two grounds carry icons under this theme and they are 4.0 luma apart: --fc-surface (the card) and --fc-tint (.hcard and .hrow.nightrow). The dimmest element clears them by +62.9 and +58.9, so one derivation covers both. weewx-nws's own PALETTE comment records that --wx-hot and --wx-sleet sit at the sRGB ceiling for #111834 specifically. Pinned to nwsicons.DARK by TestIconDarkPalette; never edit a value here without changing it there. */ --wx-sun:#F2B704; --wx-sunray:#E1A904; --wx-moon:#A1AAB8; --wx-cloud:#525963; --wx-cloud-2:#85909E; --wx-cloud-3:#B0BCCB; --wx-rain:#7FBFFF; --wx-snow:#659ECD; --wx-sleet:#8DC4FE; --wx-bolt:#E1A904; --wx-fog:#A2AAB7; --wx-wind:#C5D3E5; --wx-hot:#FF7361; --wx-cold:#7FBFFF; --wx-dust:#CAA369; --wx-smoke:#A2AAB7; --wx-swirl:#C5D3E5; --wx-swirl-2:#9DA8B5; --wx-swirl-3:#7B838C; --wx-op-band:.74; --wx-op-tube:.38; /* --wx-eye is deliberately absent. The cyclone's center is not painted at all, so the card shows through it on any ground; the token exists only for a skin that wants the eye filled, and setting it to `transparent` here would just restate the default. */ } /* ---- the panel ------------------------------------------------------ */ .fc{padding:26px 20px 34px;margin-top:18px;font-size:16px;color:var(--fc-ink); text-align:left} .fc .fcwrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:26px} .fc section{background:var(--fc-surface);border:1px solid var(--fc-line); padding:18px 20px 16px} .fc .eyebrow{color:var(--fc-accent);font-weight:600;font-size:.8em; letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px; border:0;padding:0} .fc .caption{color:var(--fc-muted);font-size:.85em;margin:14px 0 0;max-width:86ch; line-height:1.55} .fc .caption b{color:var(--fc-ink-3)} .fc .cfoot{color:var(--fc-muted);font-size:.82em;border-top:1px solid var(--fc-rule); padding-top:10px} .fc a{color:var(--fc-link);text-decoration:none} .fc .chead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px; border-bottom:2px solid var(--fc-head-rule);padding-bottom:8px} .fc h2.ctitle{margin:0;font-size:2.1em;font-weight:600;color:var(--fc-accent); letter-spacing:.02em} .fc h2.ctitle .over{color:var(--fc-muted);font-weight:400} .fc .sub{color:var(--fc-muted);font-size:.95em;padding-bottom:4px} /* These four are report-time pages: the subtitle carries the five-minute refresh countdown, and each page's *_updater.inc writes this note into it while the reload is in flight. --fc-muted, NOT --fc-faint: .chead sits outside any
, so this renders on --fc-page #e3e3e3, where faint is 3.77 and fails AA. Faint's grounds are the card and the tints; the page ground carries muted only, which is what .sub and .cfoot around it already use. The de-emphasis here comes from the size and the letter-spacing, as it already did. */ .fc .checking{color:var(--fc-muted);font-size:.85em;letter-spacing:.06em} /* ---- drawn icons (weewx-nws 5.2) ------------------------------------ Three class names, all weewx-nws's contract: size them, do not rename them. Sizing hangs off .wxi alone, so all three land in the same box whatever the row is. */ .fc .wxi{display:block} /* A condition NWS added after the drawn set shipped: its own raster, asked for at ?size=large, contained rather than stretched. */ .fc img.wxi-fallback{border-radius:4px;object-fit:contain} /* NWS's own `unknown` condition, which its icon service answers 400 for -- weewx-nws renders an empty box rather than hand the reader a broken image. A faint dashed outline says "no icon for this hour"; an empty box on its own reads as a layout bug. OUTLINE, not border: outlines take no space, so this cannot nudge a 34px hour-table cell. */ .fc .wxi-unknown{outline:1px dashed var(--fc-rule);outline-offset:-1px; border-radius:4px} /* ---- Right now ------------------------------------------------------ */ .fc .nowgrid{display:grid;grid-template-columns:96px 1fr 210px;gap:20px;align-items:start} .fc .nowicon .wxi{width:96px;height:96px} .fc .nowname{font-size:1.35em;font-weight:600;color:var(--fc-accent);margin-bottom:6px} .fc .nowprose{margin:0;line-height:1.55;max-width:64ch;font-size:.98em} .fc .nowstats{border-left:1px solid var(--fc-rule);padding-left:18px} .fc .stat{display:flex;flex-direction:column;margin-bottom:12px} .fc .sl{color:var(--fc-muted);font-size:.78em;letter-spacing:.06em;text-transform:uppercase} .fc .sv{font-size:1.15em;font-variant-numeric:tabular-nums} .fc .hival{color:var(--fc-hi)} .fc .loval{color:var(--fc-lo)} /* ---- the week ------------------------------------------------------- */ .fc .colhead,.fc .day{display:grid;grid-template-columns:112px 236px 1fr;gap:18px} .fc .ch3{display:grid;grid-template-columns:40px 50px 1fr 116px;gap:12px} .fc .colhead{color:var(--fc-muted);font-size:.72em;letter-spacing:.08em; text-transform:uppercase;padding-bottom:8px; border-bottom:1px solid var(--fc-line);align-items:end} .fc .colhead .chr{text-align:right} .fc .days{display:flex;flex-direction:column} .fc .day{align-items:center;padding:14px 0;border-top:1px solid var(--fc-hair)} .fc .day:first-child{border-top:0} .fc .when{line-height:1.2} .fc .wd-name{display:block;font-weight:600;font-size:1.05em} .fc .wd-date{display:block;color:var(--fc-muted);font-size:.82em} .fc .temps{display:flex;align-items:center;gap:10px; font-variant-numeric:tabular-nums;font-size:1.05em} .fc .lo{color:var(--fc-lo);width:2.6em;text-align:right} .fc .hi{color:var(--fc-hi);width:2.6em;text-align:left;font-weight:600} .fc .track{position:relative;flex:1;height:8px;border-radius:4px;background:var(--fc-grid)} .fc .fill{position:absolute;top:0;height:8px;border-radius:4px; background:linear-gradient(90deg,var(--fc-lo) 0%,var(--fc-hi) 100%)} /* A day whose daylight period has already ended: one marker at the low. */ .fc .dot{position:absolute;top:-2px;width:12px;height:12px;margin-left:-6px; border-radius:50%;background:var(--fc-lo)} .fc .hi.part{color:var(--fc-muted);font-size:.78em;font-weight:400} .fc .sun{color:var(--fc-muted);font-size:.76em;margin-top:6px;text-align:center; font-variant-numeric:tabular-nums} .fc .lines{display:flex;flex-direction:column;gap:6px;min-width:0} .fc .line{display:grid;grid-template-columns:40px 50px 1fr 116px;gap:12px;align-items:start} .fc .ic .wxi{width:40px;height:40px} .fc .prose{margin:0;font-size:.84em;line-height:1.5;color:var(--fc-ink-2)} .fc .kind{color:var(--fc-muted);font-weight:600} .fc .chip{font-size:.84em;text-align:right;font-variant-numeric:tabular-nums; line-height:1.5;color:var(--fc-muted)} /* The chance of rain moved next to the icon, so it reads as one unit with it -- the association NWS bakes into its own raster -- and is left-aligned against the icon rather than right-aligned against the prose. */ .fc .chip-pop,.fc .hr-pop{text-align:left} .fc .pop{color:var(--fc-rain);font-weight:600;white-space:nowrap} /* --fc-muted, not --fc-rule: that one is a hairline color and reads at 1.69 against the card, which is fine for a border and not for a glyph that means "no data". */ .fc .pop-na{color:var(--fc-muted);font-weight:400} /* The droplet keeps the Rain column self-describing once the heading has scrolled off -- the phone twin is seven tall rows. */ .fc .drop{width:.62em;height:.78em;fill:currentColor;margin-right:.28em; vertical-align:-.06em} .fc .w{display:block} .fc .wd{display:block;font-size:.86em} /* ---- charts --------------------------------------------------------- Shared by the sparkline, the day chart and the week chart. */ .fc .chartwrap{position:relative} .fc svg.chart{width:100%;height:auto;display:block;touch-action:pan-y;cursor:crosshair} .fc .sparkwrap{margin:0 0 18px} .fc .sparkcap{color:var(--fc-muted);font-size:.8em;margin:6px 0 0} .fc svg.chart .night{fill:var(--fc-band)} .fc svg.chart .hgrid{stroke:var(--fc-grid);stroke-width:1} .fc svg.chart .axis{stroke:var(--fc-axis);stroke-width:1} .fc svg.chart .vgrid{stroke:var(--fc-grid-2);stroke-width:1;stroke-dasharray:2 3} .fc svg.chart .tline{fill:none;stroke:var(--fc-hi);stroke-width:2; stroke-linejoin:round;stroke-linecap:round} .fc svg.chart .tdot{fill:var(--fc-hi)} .fc svg.chart .dline{fill:none;stroke:var(--fc-dew);stroke-width:1.6; stroke-dasharray:4 3;stroke-linejoin:round} .fc svg.chart .parea{fill:var(--fc-rain);opacity:.8} .fc svg.chart .ylab{fill:var(--fc-muted);font-size:10px;text-anchor:end; font-family:'Open Sans',arial,sans-serif} .fc svg.chart .xlab{fill:var(--fc-muted);font-size:11px;text-anchor:middle; font-family:'Open Sans',arial,sans-serif} .fc svg.chart .striplab{fill:var(--fc-muted);font-size:10px;letter-spacing:.09em; text-transform:uppercase; font-family:'Open Sans',arial,sans-serif} .fc svg.chart .peak{text-anchor:end;text-transform:none;letter-spacing:0;font-style:italic} /* The crosshair is hidden by a CLASS, not by the html `hidden` attribute: `hidden` is not valid on an SVG (Nu rejects it) and the UA's [hidden] rule does not reach SVG children anyway, so it was never doing the hiding. Without this rule the crosshair paints at (0,0) whenever nothing is being pointed at. */ .fc .cross.off{display:none} .fc .cross .cx{stroke:var(--fc-muted);stroke-width:1;stroke-dasharray:3 3} .fc .cross .cdot{fill:var(--fc-hi);stroke:var(--fc-surface);stroke-width:1.4} .fc .cross .cdotd{fill:var(--fc-dew);stroke:var(--fc-surface);stroke-width:1.2} .fc .readout{position:absolute;top:0;right:0;background:var(--fc-surface); border:1px solid var(--fc-rule);border-radius:5px;padding:6px 10px; font-size:.8em;display:flex;gap:12px;align-items:baseline; font-variant-numeric:tabular-nums;pointer-events:none; box-shadow:0 1px 4px rgba(0,0,0,.08)} /* A class with display:flex outranks the UA's [hidden] rule. */ .fc .readout[hidden]{display:none} .fc .readout b{color:var(--fc-ink-3);font-weight:600} .fc .readout .ro-t{color:var(--fc-hi);font-weight:600} .fc .readout .ro-d{color:var(--fc-dew)} .fc .readout .ro-r{color:var(--fc-rain)} .fc .legend{display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--fc-muted); font-size:.8em;margin-bottom:10px} .fc .legend span{display:flex;align-items:center;gap:7px} .fc .legend i{width:16px;height:3px;display:inline-block;border-radius:2px} .fc .legend .sw-t{background:var(--fc-hi)} /* Dashed, because the line is dashed. */ .fc .legend .sw-d{background:none;border-top:3px dashed var(--fc-dew);height:0} .fc .legend .sw-r{background:var(--fc-rain);height:10px;border-radius:2px;opacity:.8} .fc .legend .sw-n{background:var(--fc-band);height:12px;border:1px solid var(--fc-hair)} /* ---- Hourly --------------------------------------------------------- */ .fc .hcards{display:grid;grid-template-columns:repeat(12,1fr);gap:6px} .fc .hcard{text-align:center;padding:8px 2px;border-radius:6px;background:var(--fc-tint)} .fc .hcard .ht{color:var(--fc-muted);font-size:.76em;letter-spacing:.03em} .fc .hcard .wxi{width:42px;height:42px;margin:6px auto 2px} .fc .hcard .htemp{font-size:1.1em;font-weight:600;font-variant-numeric:tabular-nums} .fc .hcard .hpop{font-size:.74em;margin-top:2px;min-height:1em} .fc .daytabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .fc .daytab{font:inherit;cursor:pointer;background:var(--fc-tint-2);color:var(--fc-ink-3); border:1px solid var(--fc-grid-2);border-radius:6px;padding:7px 16px; line-height:1.15;text-align:center} .fc .daytab .dt1{display:block;font-weight:600;font-size:.9em} .fc .daytab .dt2{display:block;color:var(--fc-muted);font-size:.72em} .fc .daytab.on,.fc .daytab.xg-active{background:var(--fc-accent); border-color:var(--fc-accent);color:var(--fc-on-accent)} /* One on-accent color, not two. The muted second tone reached only 3.64 on the accent fill at .72em, and the lightest value that passes is indistinguishable from white -- so the differentiation comes from size and weight, which it already did. */ .fc .daytab.on .dt2,.fc .daytab.xg-active .dt2{color:var(--fc-on-accent)} .fc .daypane.off{display:none} .fc .daysun{color:var(--fc-muted);font-size:.8em;margin-bottom:10px} .fc .hhead,.fc .hrow{display:grid; grid-template-columns:70px 34px 52px 1fr 52px 56px 58px 96px;gap:12px; align-items:center;padding-right:16px} .fc .hhead{color:var(--fc-muted);font-size:.72em;letter-spacing:.08em; text-transform:uppercase;padding-bottom:8px; border-bottom:1px solid var(--fc-line)} .fc .hhead .chr{text-align:right} .fc .hrow{padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--fc-hair-2)} .fc .hrow.nightrow{background:var(--fc-tint)} .fc .hr-t{color:var(--fc-ink-3);font-size:.86em;font-variant-numeric:tabular-nums} .fc .hr-i .wxi{width:34px;height:34px} .fc .hr-f{font-size:.84em;min-width:0} .fc .hr-n{text-align:right;font-size:.9em;font-variant-numeric:tabular-nums} .fc .hr-n.dim{color:var(--fc-faint)} .fc .hr-w{text-align:right;font-size:.84em;color:var(--fc-muted); font-variant-numeric:tabular-nums;line-height:1.35} .fc .hr-w .w,.fc .hr-w .wd{display:inline;font-size:1em} .fc .hr-w .wd::before{content:" "} /* ---- Alerts --------------------------------------------------------- */ .fc .acountline{margin:0;font-size:.95em;color:var(--fc-ink-3)} .fc .alert{border-left:6px solid var(--fc-sev-unknown)} .fc .alert .sevdot{width:.82em;height:.82em;border-radius:50%; background:var(--fc-sev-unknown);display:inline-block;flex:none} .fc .sev-extreme{border-left-color:var(--fc-sev-extreme)} .fc .sev-extreme .sevdot{background:var(--fc-sev-extreme)} .fc .sev-severe{border-left-color:var(--fc-sev-severe)} .fc .sev-severe .sevdot{background:var(--fc-sev-severe)} .fc .sev-moderate{border-left-color:var(--fc-sev-moderate)} .fc .sev-moderate .sevdot{background:var(--fc-sev-moderate)} .fc .sev-minor{border-left-color:var(--fc-sev-minor)} .fc .sev-minor .sevdot{background:var(--fc-sev-minor)} .fc .ahead{font-size:1em;display:flex;align-items:center;gap:12px;margin:0 0 10px;border:0; padding:0;flex-wrap:wrap} .fc .aevent{font-size:1.75em;font-weight:600;color:var(--fc-ink)} .fc .badge{font-size:.725em;letter-spacing:.09em;text-transform:uppercase; font-weight:600;padding:4px 10px;border-radius:11px} .fc .badge.on{background:var(--fc-sev-severe);color:var(--fc-on-accent)} .fc .badge.soon{background:var(--fc-warn-bg);color:var(--fc-warn-ink); border:1px solid var(--fc-warn-line)} .fc .badge.past{background:var(--fc-band);color:var(--fc-muted)} .fc .anote{margin-left:auto;color:var(--fc-muted);font-size:.96em} /* Left-aligned in a measured column, which is what retires the hand-rolled wrap_text() that inserted
at computed character positions. */ .fc .aline{margin:0;font-size:1.02em;line-height:1.5;max-width:74ch;color:var(--fc-ink-2)} .fc .asub{margin:8px 0 0;font-size:.86em;color:var(--fc-muted);max-width:82ch; line-height:1.5} .fc .awindow{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:.8em; color:var(--fc-muted);font-variant-numeric:tabular-nums} .fc .aw-t{flex:none} .fc .aw-t.open{color:var(--fc-faint);font-style:italic} .fc .aw-t i{color:var(--fc-faint)} .fc .aw-bar{position:relative;flex:1;height:8px;border-radius:4px;background:var(--fc-grid)} .fc .aw-fill{position:absolute;left:0;top:0;height:8px;border-radius:4px; background:var(--fc-grid-2)} .fc .aw-now{position:absolute;top:-4px;width:3px;height:16px; background:var(--fc-sev-severe);margin-left:-1px} .fc .asecs{border-top:1px solid var(--fc-grid);padding-top:14px} /* Sized for the longest single word the live feed produces (THUNDERSTORMS); break-word is the backstop for the next unguessable one. */ .fc .asec{display:grid;grid-template-columns:152px 1fr;gap:16px;margin-bottom:12px} .fc .ak{color:var(--fc-accent);font-weight:600;font-size:.76em;letter-spacing:.08em; text-transform:uppercase;padding-top:2px;overflow-wrap:break-word} .fc .av{font-size:.92em;line-height:1.5;max-width:76ch} /* Unlabeled prose -- three quarters of real alerts are nothing else -- runs full width at a measure clear of NWS's 58-68 character teletype wrap, so reflowed text reads as reflowed. */ .fc .alead{margin-bottom:12px} .fc .aprose{margin:0 0 10px;font-size:.92em;line-height:1.55;max-width:76ch} .fc .alead .aprose,.fc .alead .abul li{max-width:94ch} .fc .aprose:last-child{margin-bottom:0} .fc .abul{margin:6px 0 0;padding-left:18px} .fc .abul li{font-size:.92em;line-height:1.5;margin-bottom:5px;max-width:74ch} .fc .ado{background:var(--fc-tint);border-left:3px solid var(--fc-accent); padding:14px 16px;margin:6px 0 14px} .fc .ado p{margin:6px 0 0;font-size:.92em;line-height:1.55;max-width:76ch} /* One footer line, not two tables of CAP plumbing. */ .fc .ameta{margin:0;color:var(--fc-faint);font-size:.76em;line-height:1.6; border-top:1px solid var(--fc-grid);padding-top:10px} .fc .allclear{display:flex;gap:20px;align-items:flex-start} .fc .allclear .tick{width:44px;height:44px;flex:none;fill:none;stroke:var(--fc-ok); stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .fc .acname{margin:0 0 8px;font-size:1.4em;font-weight:600;color:var(--fc-ok); border:0;padding:0} .fc .acbody{margin:0 0 10px;font-size:.95em;line-height:1.6;max-width:70ch; color:var(--fc-ink-3)} /* ---- Tides ---------------------------------------------------------- Chrome only; the xg-* graph styling stays in css/tides.css. */ .fc .tnowgrid{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center} .fc .tstate{display:flex;align-items:baseline;gap:14px} .fc .tnowlab,.fc .tnextlab{color:var(--fc-muted);font-size:.78em;letter-spacing:.06em; text-transform:uppercase} .fc .tnowbig{font-size:2.6em;font-weight:600;color:var(--fc-rain); font-variant-numeric:tabular-nums;line-height:1} .fc .tunit{font-size:.4em;font-weight:400;color:var(--fc-muted)} .fc .tdir{display:flex;align-items:center;gap:5px;font-size:.95em;font-weight:600} .fc .tdir.up{color:var(--fc-rain)} .fc .tdir.down{color:var(--fc-sev-moderate)} .fc .tarrow{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .fc .tnext{border-left:1px solid var(--fc-rule);padding-left:26px} .fc .tnextbig{font-size:1.5em;font-weight:600;color:var(--fc-accent);margin-top:2px; font-variant-numeric:tabular-nums} .fc .tnextsub{color:var(--fc-muted);font-size:.9em;margin-top:2px; font-variant-numeric:tabular-nums} .fc .evhead,.fc .xg-evrow{display:grid;grid-template-columns:150px 110px 1fr 150px; gap:16px;align-items:center} .fc .evhead{color:var(--fc-muted);font-size:.72em;letter-spacing:.08em; text-transform:uppercase;padding-bottom:8px; border-bottom:1px solid var(--fc-line)} .fc .xg-evrow{padding:9px 0;border-bottom:1px solid var(--fc-hair-2);font-size:.9em} .fc .xg-evrow.past{opacity:.45} .fc .ev-k{font-weight:600;display:flex;align-items:center;gap:8px} .fc .ev-k::before{content:"";width:9px;height:9px;border-radius:50%;flex:none} /* ev-hi / ev-lo, NOT hi / lo. Those two are the 7 Day page's temperature cells and carry `width:2.6em` -- on a tide row that shrank the 150px Tide column to 37px and broke "High Tide" over two lines. Every page of this family shares one `.fc` namespace, so a modifier here has to be spelled for its own table. */ .fc .ev-k.ev-hi{color:var(--fc-rain)} .fc .ev-k.ev-hi::before{background:var(--fc-rain)} .fc .ev-k.ev-lo{color:var(--fc-sev-moderate)} .fc .ev-k.ev-lo::before{background:var(--fc-sev-moderate)} .fc .ev-l,.fc .ev-t,.fc .ev-w{font-variant-numeric:tabular-nums} .fc .ev-w{color:var(--fc-muted);text-align:right} .fc .tcredit{color:var(--fc-faint);font-size:.78em;margin:8px 0 0} .fc #xg-count{color:var(--fc-ink-3)} /* ---- the smartphone twin -------------------------------------------- One override block, the .cpanel-sp / .xg-sp pattern: the phone shell also renders at viewport width=1124, so the panel scales up and the wide rows unstack. */ .fc-sp{font-size:30px} .fc-sp .fcwrap{gap:34px} .fc-sp section{padding:24px 26px 22px} .fc-sp .chead{flex-direction:column;align-items:flex-start;gap:6px} .fc-sp .nowgrid{grid-template-columns:120px 1fr;gap:22px} .fc-sp .nowicon .wxi{width:120px;height:120px} .fc-sp .nowstats{grid-column:1 / -1;border-left:0;border-top:1px solid var(--fc-rule); padding:16px 0 0;display:flex;gap:44px} .fc-sp .stat{margin-bottom:0} .fc-sp .colhead{grid-template-columns:1fr;font-size:.62em} .fc-sp .colhead > div:first-child,.fc-sp .colhead > div:nth-child(2){display:none} .fc-sp .ch3{grid-template-columns:62px 2.9em 1fr 5.6em;gap:16px} .fc-sp .day{grid-template-columns:1fr;gap:12px;padding:20px 0} .fc-sp .when{display:flex;align-items:baseline;gap:14px} .fc-sp .wd-name{display:inline;font-size:1.1em} .fc-sp .wd-date{display:inline;font-size:.72em} .fc-sp .temps{font-size:1.1em} .fc-sp .lo,.fc-sp .hi{width:2.4em} .fc-sp .track,.fc-sp .fill{height:14px;border-radius:7px} .fc-sp .dot{width:20px;height:20px;margin-left:-10px;top:-3px} .fc-sp .sun{font-size:.62em;margin-top:8px} .fc-sp .line{grid-template-columns:62px 2.9em 1fr 5.6em;gap:16px;align-items:start} .fc-sp .ic .wxi{width:62px;height:62px} .fc-sp .prose,.fc-sp .chip{font-size:.72em} .fc-sp .sparkcap{font-size:.62em} .fc-sp .readout{font-size:.62em;gap:16px;padding:10px 14px} .fc-sp .legend{font-size:.66em;gap:6px 26px} .fc-sp .hcards{grid-template-columns:repeat(6,1fr);gap:10px} .fc-sp .hcard .wxi{width:60px;height:60px} .fc-sp .daytab{padding:10px 18px} .fc-sp .hhead,.fc-sp .hrow{grid-template-columns:3.1em 56px 2.9em 1fr 2.1em 2.3em 2.5em 4.6em; gap:9px} .fc-sp .hr-i .wxi{width:56px;height:56px} .fc-sp .hhead{font-size:.6em} .fc-sp .hr-t,.fc-sp .hr-f,.fc-sp .hr-n,.fc-sp .hr-w{font-size:.7em} .fc-sp .asec{grid-template-columns:1fr;gap:2px} .fc-sp .ahead{gap:10px} .fc-sp .anote{margin-left:0;width:100%} .fc-sp .awindow{flex-wrap:wrap;justify-content:space-between} .fc-sp .aw-bar{flex-basis:100%;order:3;margin-top:4px} .fc-sp .tnowgrid{grid-template-columns:1fr;gap:18px} .fc-sp .tnext{border-left:0;border-top:1px solid var(--fc-rule);padding:16px 0 0} .fc-sp .evhead,.fc-sp .xg-evrow{grid-template-columns:5.2em 3.4em 1fr 5.4em;gap:12px} .fc-sp .xg-evrow{font-size:.7em} .fc-sp .evhead{font-size:.6em} /* SVG label sizes are user units, so the phone's smaller rendered width shrinks them with the chart -- scale them back up, the same correction the star dome's label_scale makes. */ .fc-sp svg.chart .ylab{font-size:17px} .fc-sp svg.chart .xlab{font-size:19px} .fc-sp svg.chart .striplab{font-size:17px}