/* * DeWedda 3.0 stylesheet (branch v3, staging only). * * The design system agreed on 5 September 2026: light is the default, dark * follows the device and can be pinned either way with data-theme on . * Loaded AFTER styles.css on the pages that have moved to 3.0, so pages migrate * one at a time. Nothing in here is page-specific; a page's own rules stay in * its inline style block as before. * * Sections: tokens, base, shell (bar, page header, columns), data-block header, * surfaces and controls, conditions card, tables, charts, image block, presence, * phone contents sheet, footer, responsive. */ /* ------------------------------------------------------------------------- Tokens. Bare :root is the complete LIGHT set. The dark set is applied by the device setting unless data-theme="light" pins light, and by data-theme="dark" regardless. Dark ladder lifted on Hayden's call: the page ground sits at the tone of the old cards so text never sits on near-black. ------------------------------------------------------------------------- */ :root { color-scheme: light; --s0: #ffffff; /* page */ --s1: #eef2f8; /* panel: the v2.8 card tint, carried forward */ --s2: #e4eaf4; /* inset: tiles inside a panel, table heads (v2.8 card hover) */ /* v2.8 cues carried forward (Hayden, 5 Sep): the bar on the card tint with its drop shadow so content passes underneath, and the fade from the viewport edge toward the page column. */ --bar-bg: #eef2f8; --bar-shadow: 0 4px 4px rgba(0, 0, 0, 0.28); --edge: #dbe6f0; /* viewport edge, Atlantic blue */ --edge-soft: #f2f6fa; /* beside the column */ --line: #d3dbe6; /* hairline */ --line-2: #e6ebf2; /* lighter hairline, row dividers */ --ink: #151b23; --ink-2: #3d4652; /* body */ --ink-3: #66717f; /* labels, captions */ --ink-4: #8a94a1; /* faint: decoration only, never text a reader needs */ --act: #0b57c2; /* the one interactive colour */ --act-ink: #ffffff; --act-wash: rgba(11, 87, 194, 0.09); --fresh: #1a7f37; --sign-bg: #eff7f1; /* the signup box: 7% of the freshness green over white (Hayden, 5 Sep) */ --sign-line: #a8cdb3; --t-cool: #2166c9; --t-mid: #d8c48a; --t-hot: #c8321c; /* temperature bands: 70°F blue, 80° sand, 90° red (Hayden, 5 Sep) */ --stale: #a16207; --crit: #c62828; --fab-bg: #6db3ff; --fab-ink: #0f1720; /* the phone's "On this page" button: in light, the dark theme's blue (Hayden, 7 Sep 2026) */ --tier-1: #b45309; /* hazard ladder: amber, orange, red, purple */ --tier-2: #c2410c; --tier-3: #b91c1c; --tier-4: #6d28d9; --feel-cool-bg: #dbeafe; --feel-cool: #0550ae; --feel-warm-bg: #fef3c7; --feel-warm: #7c4a00; --feel-hot-bg: #ffedd5; --feel-hot: #9a3412; --feel-ext-bg: #fee2e2; --feel-ext: #991b1b; --feel-dng-bg: #ede9fe; --feel-dng: #5b21b6; --c-band: #b8740f; /* chart marks, validated on #ffffff */ --c-feel: #d1226b; --c-rain: #0055cc; --c-day: #b8740f; --c-breeze: #00998c; /* trade winds: a cool teal, apart from rain's blue and the temperature band (Hayden, 5 Sep) */ --c-cmp: #5c6a7a; --c-grid: #e6ebf2; --c-axis: #d3dbe6; --r-ctl: 6px; --r-box: 10px; --r-pill: 999px; --shadow-float: 0 8px 24px rgba(21, 27, 35, 0.14), 0 2px 6px rgba(21, 27, 35, 0.08); --font: Inter, 'Inter Fallback', Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px; --t-2xl: 30px; --t-fig: 56px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --s0: #212833; --s1: #2a3340; --s2: #343e4d; --line: #43505f; --line-2: #3a4552; --ink: #eef2f6; --ink-2: #d2d9e1; --ink-3: #a9b3bf; --ink-4: #8b95a2; --act: #6db3ff; --act-ink: #0d1117; --act-wash: rgba(109, 179, 255, 0.16); --fresh: #3fb950; --stale: #dfae2f; --crit: #ff7b72; --sign-bg: #2c3f3b; --sign-line: #4c7a5c; --t-cool: #4d8fe6; --t-mid: #cdb36a; --t-hot: #e0503a; --tier-1: #e3b341; --tier-2: #ff7f11; --tier-3: #ff7b72; --tier-4: #c9a3ff; --fab-bg: var(--ink); --fab-ink: var(--s0); --feel-cool-bg: #23364e; --feel-cool: #79c0ff; --feel-warm-bg: #443c1c; --feel-warm: #ffda6a; --feel-hot-bg: #442e1f; --feel-hot: #ffac6a; --feel-ext-bg: #3d2029; --feel-ext: #ff7b86; --feel-dng-bg: #2e2440; --feel-dng: #c9a3ff; --c-band: #c6862a; --c-feel: #e0457a; --c-rain: #3a90dc; --c-day: #d4af37; --c-breeze: #2aa89f; --c-cmp: #8fa0b3; --c-grid: #3a4552; --c-axis: #4a5665; --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); --bar-bg: #2a3340; --bar-shadow: 0 4px 4px rgba(0, 0, 0, 0.7); --edge: #1a2029; --edge-soft: #1f2630; } } :root[data-theme="dark"] { color-scheme: dark; --s0: #212833; --s1: #2a3340; --s2: #343e4d; --line: #43505f; --line-2: #3a4552; --ink: #eef2f6; --ink-2: #d2d9e1; --ink-3: #a9b3bf; --ink-4: #8b95a2; --act: #6db3ff; --act-ink: #0d1117; --act-wash: rgba(109, 179, 255, 0.16); --fresh: #3fb950; --stale: #dfae2f; --crit: #ff7b72; --sign-bg: #2c3f3b; --sign-line: #4c7a5c; --t-cool: #4d8fe6; --t-mid: #cdb36a; --t-hot: #e0503a; --tier-1: #e3b341; --tier-2: #ff7f11; --tier-3: #ff7b72; --tier-4: #c9a3ff; --fab-bg: var(--ink); --fab-ink: var(--s0); --feel-cool-bg: #23364e; --feel-cool: #79c0ff; --feel-warm-bg: #443c1c; --feel-warm: #ffda6a; --feel-hot-bg: #442e1f; --feel-hot: #ffac6a; --feel-ext-bg: #3d2029; --feel-ext: #ff7b86; --feel-dng-bg: #2e2440; --feel-dng: #c9a3ff; --c-band: #c6862a; --c-feel: #e0457a; --c-rain: #3a90dc; --c-day: #d4af37; --c-breeze: #2aa89f; --c-cmp: #8fa0b3; --c-grid: #3a4552; --c-axis: #4a5665; --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); --bar-bg: #2a3340; --bar-shadow: 0 4px 4px rgba(0, 0, 0, 0.7); --edge: #1a2029; --edge-soft: #1f2630; } /* Bridge: the old token names still used by shared includes (header, footer, feels-* chips, freshness badge) resolve to the 3.0 set on a migrated page. */ :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg-primary: var(--s0); --bg-card: var(--s1); --bg-card-hover: var(--s2); --border: var(--line); --border-light: var(--line-2); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); --text-faint: var(--ink-4); --accent-blue: var(--act); --accent-blue-light: var(--act); --accent-blue-dim: var(--act-wash); --link-color: var(--act); --heading-color: var(--ink); --error-red: var(--crit); --success-green-hover: var(--fresh); --warning-yellow: var(--stale); --bg-input: var(--s0); --radius-sm: var(--r-ctl); --radius-md: var(--r-box); --shadow-card: none; --shadow-card-hover: none; --font-body: var(--font); --font-heading: var(--font); } /* ------------------------------------------------------------------------- Base ------------------------------------------------------------------------- */ html { scroll-padding-top: 72px; } body.v3 { background: var(--s0); color: var(--ink-2); font: var(--t-base)/1.6 var(--font); background-image: none; /* the paper fade outside the column is gone */ } .v3 h1, .v3 h2, .v3 h3, .v3 h4 { color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -0.01em; } .v3 p { margin: 0 0 var(--sp-3); max-width: none; } .v3 main a, .v3 footer a { color: var(--act); } .v3 :focus-visible { outline: 2px solid var(--act); outline-offset: 2px; } .v3 button, .v3 select, .v3 input { font: inherit; } /* Units: the same body[data-units] convention as production. Scoped to spans because the body itself carries the attribute. */ .v3 span.imperial { display: none; } body.v3[data-units="imperial"] span.imperial { display: inline; } body.v3[data-units="imperial"] span.metric { display: none; } .v3 .stamp { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); } .v3 .t-xs { font-size: var(--t-xs); color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .v3 .t-sm { font-size: var(--t-sm); color: var(--ink-3); } .v3 .flag { display: inline-block; width: 18px; height: 13px; border-radius: 2px; vertical-align: -1px; object-fit: cover; } .v3 .flag.lg { width: 26px; height: 19px; vertical-align: -2px; margin-right: 6px; } /* ------------------------------------------------------------------------- Shell: one 56px bar, the page title in the content, a sticky right column ------------------------------------------------------------------------- */ .v3 .bar { position: sticky; top: 0; z-index: 1100; /* above the map's own layers (Leaflet uses up to 1000), so the bar's menus never slide under it */ background: var(--bar-bg); border-bottom: 1px solid var(--line); box-shadow: var(--bar-shadow); } /* staging only: the fixed red banner is 28px tall, so the bar sticks below it */ body.v3:has(#staging-banner) .bar { top: 28px; } .v3 .bar .in { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: var(--sp-4); height: 56px; padding: 0 var(--sp-5); } .v3 .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; font-size: var(--t-md); letter-spacing: -0.02em; } .v3 .brand img { width: 24px; height: 24px; border-radius: 50%; } .v3 .bar .links { display: flex; gap: 2px; margin-left: var(--sp-3); } .v3 .bar .links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: var(--t-sm); padding: 6px 10px; border-radius: var(--r-ctl); position: relative; } .v3 .bar .links a.on { color: var(--ink); background: var(--act-wash); font-weight: 600; } .v3 .bar .links a:hover { background: var(--act-wash); text-decoration: none; } .v3 .bar .right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); } .v3 .bar .fav { display: inline-flex; gap: 5px; align-items: center; padding: 4px 8px; border-radius: var(--r-ctl); border: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); } .v3 .bar .menu { display: none; } .v3 .wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-5) var(--sp-8); } .v3 .shell { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-6); align-items: start; } /* A page with one job (storm alerts, legal, 404): no column, one 760px column at the left (Hayden, 8 Sep 2026) */ .v3 .shell.one-col { grid-template-columns: minmax(0, 1fr); } .v3 .shell.one-col > main { max-width: 760px; } /* Compact (Hayden, 5 Sep): the three lines under the bar take less height so the content starts sooner. */ .v3 .page-h { padding: var(--sp-4) 0 var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: 0; } .v3 .page-h .eyebrow { font-size: 11px; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; } .v3 .page-h h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .v3 .page-h .dek { color: var(--ink-3); margin: 3px 0 0; font-size: var(--t-sm); } .v3 .pres-line { display: none; align-items: center; gap: 5px 8px; flex-wrap: wrap; white-space: nowrap; font-size: var(--t-sm); color: var(--ink-3); margin: 0; position: relative; } /* the reader's islands lead the line, who is online sits at the right (Hayden's pick A, 7 Sep 2026) */ .v3 .pres-line .isl-pins.row-mode { display: inline-flex; position: relative; } .v3 .page-h + .pres-line { margin-top: 0; } /* on an island's page: the island marked when pinned; leading the line with the star when not (Hayden, 7 Sep 2026) */ .v3 .isl-pins.row-mode .isl-nm.here { background: var(--act-wash); color: var(--ink); } .v3 .isl-pins.row-mode .isl-cur { display: inline-flex; align-items: center; } .v3 .isl-pins.row-mode .isl-cur + .isl-nm::before { content: "·"; color: var(--ink-4); margin-right: 7px; font-weight: 400; } .v3 .isl-pins.row-mode .isl-nm.unp { color: var(--ink-2); padding-left: 2px; } .v3 .isl-pins.row-mode .isl-line-star { font: inherit; font-size: 15px; line-height: 1; color: var(--ink-4); background: transparent; border: 0; padding: 2px 3px 2px 4px; cursor: pointer; } .v3 .isl-pins.row-mode .isl-add .isl-line-star { padding: 0; color: var(--ink-4); } /* the star before "Pin Dominica" on an unpinned island's page */ .v3 .isl-pins.row-mode .isl-line-star:hover { color: var(--tier-1); } .v3 .pres-line b { color: var(--ink); } .v3 .pres-line .pl-now { display: inline-flex; align-items: center; gap: 6px; } .v3 .pres-line .pl-sp { flex: 1; } .v3 .pres-line .pl-from { display: inline-flex; align-items: center; gap: 4px; } .v3 .pres-line .pl-lab { color: var(--ink-4); } .v3 section.blk { padding-top: 40px; } .v3 section.blk:first-of-type { padding-top: 20px; } /* ------------------------------------------------------------------------- Data-block header: title, kind, then one line of source, time, freshness ------------------------------------------------------------------------- */ .v3 .dbh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--sp-3); margin: 0 0 var(--sp-3); } .v3 .dbh h2 { font-size: var(--t-lg); font-weight: 600; } .v3 .dbh h3 { font-size: var(--t-md); font-weight: 600; } .v3 .dbh .src { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); } .v3 .kind { display: inline-block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; vertical-align: middle; } .v3 .kind.measured { color: var(--fresh); border-color: color-mix(in srgb, var(--fresh) 45%, var(--line)); } .v3 .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fresh); margin-right: 5px; vertical-align: 1px; } .v3 .dot.stale { background: var(--stale); } .v3 .dot.crit { background: var(--crit); } .v3 .fresh { display: inline-flex; align-items: center; font-size: var(--t-xs); color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; background: var(--s0); } .v3 .fresh.stale { color: var(--stale); border-color: color-mix(in srgb, var(--stale) 40%, var(--line)); } .v3 .fresh.crit { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); } .v3 .sub { font-size: var(--t-sm); color: var(--ink-3); margin: 0 0 var(--sp-3); max-width: none; } .v3 .blockh { margin: 28px 0 8px; } .v3 .blockh h3 { font-size: var(--t-md); font-weight: 600; } /* ------------------------------------------------------------------------- Surfaces and controls ------------------------------------------------------------------------- */ .v3 .panel { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-box); padding: var(--sp-4) var(--sp-5); } .v3 .tile { background: var(--s2); border-radius: var(--r-ctl); padding: 10px 12px; min-width: 0; text-decoration: none; color: inherit; display: block; } .v3 a.tile:hover { background: color-mix(in srgb, var(--s2) 70%, var(--act-wash)); text-decoration: none; } .v3 .tile .h { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .v3 .tile .v { font-size: var(--t-lg); font-weight: 600; color: var(--ink); line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; } .v3 .tile .v small { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); } .v3 .tile .s { font-size: var(--t-sm); color: var(--ink-3); } /* The one note style (Hayden, 5 Sep): a quiet panel with a hairline and a grey rule, no blue wash. A status sentence may colour the rule from its hazard tier; everything else stays grey. */ .v3 .aside { border: 1px solid var(--line); border-left: 3px solid var(--line); padding: 10px 16px; background: var(--s1); border-radius: var(--r-ctl); font-size: var(--t-sm); color: var(--ink-2); max-width: none; margin: var(--sp-3) 0 0; line-height: 1.55; } .v3 .aside b { color: var(--ink); } .v3 .aside p { margin: 0 0 6px; max-width: none; } .v3 .aside p:last-child { margin: 0; } .v3 .pill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-weight: 600; color: var(--act); background: var(--act-wash); border-radius: var(--r-pill); padding: 5px 12px; text-decoration: none; } .v3 .pill:hover { text-decoration: none; background: color-mix(in srgb, var(--act-wash) 60%, var(--act) 12%); } .v3 .chip { display: inline-block; font-size: var(--t-sm); font-weight: 600; border-radius: var(--r-pill); padding: 2px 9px; font-variant-numeric: tabular-nums; white-space: nowrap; } .v3 .chip.cool { background: var(--feel-cool-bg); color: var(--feel-cool); } .v3 .chip.warm { background: var(--feel-warm-bg); color: var(--feel-warm); } .v3 .chip.hot { background: var(--feel-hot-bg); color: var(--feel-hot); } .v3 .chip.ext { background: var(--feel-ext-bg); color: var(--feel-ext); } .v3 .chip.dng { background: var(--feel-dng-bg); color: var(--feel-dng); } .v3 .ctl { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--s0); color: var(--ink-2); font-size: var(--t-sm); cursor: pointer; } .v3 .ctl:hover { background: var(--s1); } .v3 .ctl.primary { background: var(--act); color: var(--act-ink); border-color: var(--act); font-weight: 600; } .v3 .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--s0); } .v3 .seg button { background: transparent; border: 0; border-right: 1px solid var(--line); padding: 5px 11px; font-size: var(--t-sm); color: var(--ink-3); cursor: pointer; white-space: nowrap; } .v3 .seg button:last-child { border-right: 0; } .v3 .seg button.on { background: var(--s2); color: var(--ink); font-weight: 600; } .v3 .seg button[disabled] { opacity: 0.45; cursor: default; } .v3 select { font-size: var(--t-sm); padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--s0); color: var(--ink); } .v3 .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .v3 .hctl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 var(--sp-3); } .v3 .linklist { list-style: none; padding: 0; margin: 0; } .v3 .linklist li { padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: var(--t-sm); } .v3 .linklist li:last-child { border-bottom: 0; } .v3 .linklist li a { display: block; color: var(--ink); font-weight: 600; text-decoration: none; } .v3 .linklist li a:hover { text-decoration: underline; } .v3 .linklist li span { color: var(--ink-3); } .v3 .linklist li a .ext { font-size: 11px; color: var(--ink-4); font-weight: 400; margin-left: 2px; } .v3 .linklist li.more a { color: var(--act); } /* ------------------------------------------------------------------------- Conditions card ------------------------------------------------------------------------- */ .v3 .cond { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-3); } .v3 .cond .hero { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-box); padding: var(--sp-4) var(--sp-5); } .v3 .cond .temp { font-size: var(--t-fig); font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -0.03em; } .v3 .cond .temp sup { font-size: 0.4em; font-weight: 500; color: var(--ink-3); vertical-align: top; top: 0.35em; position: relative; } .v3 .cond .feels { margin: 8px 0 6px; color: var(--ink-2); font-size: var(--t-sm); } .v3 .cond .sky { color: var(--ink-2); } .v3 .cond .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); } /* ------------------------------------------------------------------------- Tables: one look for every table on the site ------------------------------------------------------------------------- */ .v3 .tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-box); } .v3 table.t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); white-space: nowrap; font-variant-numeric: tabular-nums; } .v3 table.t th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--s1); } .v3 table.t td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); } .v3 table.t tr:last-child td { border-bottom: 0; } .v3 table.t td.mo, .v3 table.t td.name { font-weight: 600; color: var(--ink); } .v3 table.t td.name a { color: inherit; text-decoration: none; } .v3 table.t tr:hover td { background: var(--s1); } .v3 table.t td.r, .v3 table.t th.r { text-align: right; } .v3 table.t td.gl, .v3 table.t th.gl { border-left: 1px solid var(--line-2); } .v3 table.t td.diff { color: var(--ink-3); } .v3 table.t td.none { color: var(--ink-4); text-align: center; } .v3 .pos { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; color: var(--ink); background: var(--s2); border-radius: var(--r-ctl); padding: 1px 6px; font-variant-numeric: tabular-nums; } .v3 .pos.top { background: var(--act-wash); color: var(--act); } /* ------------------------------------------------------------------------- Charts: the SVG module draws marks; these give text and lines their tokens ------------------------------------------------------------------------- */ .v3 .chart { position: relative; } .v3 .chart svg { display: block; width: 100%; height: auto; overflow: visible; } .v3 .chart text { font-family: var(--font); font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; } .v3 .chart text.lab { fill: var(--ink-2); font-weight: 600; paint-order: stroke; stroke: var(--s0); stroke-width: 3px; stroke-linejoin: round; } .v3 .chart text.yr { fill: var(--ink-4); font-size: 10px; letter-spacing: 0.04em; } .v3 .chart text.wm { fill: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; } /* the group carries the 60% opacity (Hayden, 6 Sep) */ .v3 .chart .grid { stroke: var(--c-grid); stroke-width: 1; } .v3 .chart .axis { stroke: var(--c-axis); stroke-width: 1; } .v3 .chart .hit { fill: transparent; cursor: crosshair; } .v3 .chart .hl { fill: var(--ink); opacity: 0; } .v3 .chart .hl.on { opacity: 0.05; } .v3 .tip { position: absolute; pointer-events: none; background: var(--s0); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 6px 9px; font-size: var(--t-xs); color: var(--ink-2); box-shadow: var(--shadow-float); white-space: nowrap; z-index: 2; display: none; line-height: 1.5; } .v3 .tip b { color: var(--ink); } .v3 .tip .k { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }.v3 .chart-cap { font-size: var(--t-sm); color: var(--ink-3); margin: 8px 0 0; max-width: none; } /* "Found this data useful? Share · Download" (Hayden, 8 Sep 2026): text links in the caption, no row of their own, the words in the text's colour. A one-line caption (or none) gets the line at the right end of its line, as the rankings box has it (.one, set by assets/js/v3.js after measuring); a longer caption gets it right after its last sentence, running on with the text. */ .v3 .has-ask { display: flow-root; } .v3 .ask { white-space: nowrap; color: var(--ink-3); font-size: var(--t-sm); } .v3 .has-ask.one .ask { float: right; margin-left: 14px; } .v3 main .ask a { color: var(--ink-2); font-weight: 600; margin-left: 8px; cursor: pointer; text-decoration: none; } .v3 main .ask > a:first-child { margin-left: 0; } /* no question before it: the link follows the sentence's own space */ .v3 main .ask a:hover { text-decoration: underline; } .v3 .ask svg { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; } .v3 .climate-table-wrap + .chart-cap { margin: 8px 0 0; } /* Share between the table's box and the note's (Hayden, 8 Sep 2026) */ .v3 .chart-cap + .climate-note { margin-top: 8px; } @media (max-width: 640px) { /* phones: the links alone, so they fit on the line (Hayden, 8 Sep 2026) */ .v3 .ask .ask-q { display: none; } .v3 main .ask a:first-of-type { margin-left: 0; } } .v3 .legend { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); font-size: var(--t-xs); color: var(--ink-3); margin-left: auto; font-weight: 500; } .v3 .legend i { display: inline-block; vertical-align: middle; margin-right: 5px; } .v3 .legend .sw { width: 10px; height: 14px; border-radius: 3px; background: linear-gradient(var(--t-hot), var(--t-mid), var(--t-cool)); } .v3 .legend .ln { width: 18px; height: 0; border-top: 2px solid var(--c-feel); } .v3 .legend .ln.cmp { border-top: 2px dashed var(--c-cmp); } .v3 .sparks { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); } /* six tiles since feels-like joined (Hayden, 6 Sep) */ .v3 .spark { background: var(--s1); border-radius: var(--r-ctl); padding: 8px 10px; border: 1px solid transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; } .v3 .spark.on { border-color: var(--line); background: var(--s2); } .v3 .spark .h { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .v3 .spark .v { font-size: var(--t-md); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .v3 .spark svg { display: block; width: 100%; height: 28px; margin-top: 4px; } .v3 .glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin: 0 0 20px; } .v3 .strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: 6px 0 10px; } .v3 .strip .m { border-radius: 4px; padding: 6px 2px 5px; text-align: center; font-size: 11px; color: var(--ink-3); line-height: 1.25; } .v3 .strip .m b { display: block; color: var(--ink); font-size: var(--t-sm); font-weight: 600; } .v3 .strip .m s { display: block; text-decoration: none; font-size: 10px; color: var(--ink-4); white-space: nowrap; } .v3 .strip .m.best { outline: 2px solid var(--fresh); outline-offset: -2px; } /* ------------------------------------------------------------------------- Image block: satellite, radar and the storm picture sit on the page ------------------------------------------------------------------------- */ .v3 .imgblk { border-radius: var(--r-box); overflow: hidden; position: relative; background: var(--s2); margin-top: 20px; } .v3 .imgblk img { display: block; width: 100%; height: auto; } .v3 .imgblk .chip2 { position: absolute; top: 10px; right: 10px; background: rgba(10, 16, 26, 0.78); color: #fff; font-size: var(--t-xs); border-radius: var(--r-pill); padding: 3px 10px; display: inline-flex; align-items: center; gap: 6px; } .v3 .imgblk .chip2 .dot { margin: 0; } .v3 .imgcap { font-size: var(--t-sm); color: var(--ink-3); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); align-items: center; } .v3 .imgcap .pill { margin-left: auto; } /* ------------------------------------------------------------------------- Right column: page index, island switcher, presence, one reserved rectangle ------------------------------------------------------------------------- */ .v3 .col { position: sticky; top: 68px; margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 80px); overflow: auto; scrollbar-width: thin; } /* on staging the red banner pushes the bar down 28px; the sticky column follows it (Hayden, 5 Sep: the index tucked under the bar) */ body.v3:has(#staging-banner) .col { top: 96px; max-height: calc(100vh - 108px); } .v3 .col .box { border: 1px solid var(--line); border-radius: var(--r-box); padding: 9px 14px 10px; font-size: var(--t-sm); line-height: 1.4; } .v3 .col .box h4 { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; margin-bottom: 4px; } .v3 .col .toc a { display: block; color: var(--ink-3); text-decoration: none; padding: 2px 0 2px 9px; border-left: 2px solid transparent; margin-left: -10px; line-height: 1.45; } .v3 .col .toc a.on { color: var(--ink); border-left-color: var(--act); font-weight: 600; } /* Sub-items always open on a wide screen, spaced like the main items (Hayden, 5 Sep). */ .v3 .col .toc a.sub { display: block; padding: 2px 0 2px 20px; font-size: var(--t-xs); line-height: 1.45; } /* the island box's conditions block: today so far, or the reader's first pinned island */ .v3 .col .mine { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; } .v3 .col .mine-h { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; margin-bottom: 3px; } .v3 .col .mine-h a { color: var(--ink); text-transform: none; letter-spacing: 0; font-size: var(--t-sm); text-decoration: none; } .v3 .col .mine-h a:hover { text-decoration: underline; } .v3 .col .mine-row { margin-top: 2px; } .v3 .col .mine-h .ago { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-4); } .v3 .col .mine .stat .owm-icon { width: 20px; height: 20px; vertical-align: -5px; margin-left: 1px; } .v3 .col .mine .stat small { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 3px; } .v3 .col .mine-row b { color: var(--ink); font-weight: 600; } .v3 .col .mine-t { font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin-right: 4px; } /* the figures as a row of cells, the same piece as the presence cells */ .v3 .col .stats { display: grid; gap: 4px; margin-top: 2px; } .v3 .col .stats.c2 { grid-template-columns: repeat(2, 1fr); } .v3 .col .stats.c3 { grid-template-columns: repeat(3, 1fr); } .v3 .col .stats.c4 { grid-template-columns: repeat(4, 1fr); } /* five figures: three on the first row, two wider ones on the second, so nothing leaves the box */ .v3 .col .stats.c5 { grid-template-columns: repeat(6, 1fr); } .v3 .col .stats.c5 .stat { grid-column: span 2; } .v3 .col .stats.c5 .stat:nth-child(n+4) { grid-column: span 3; } .v3 .col .stat { background: var(--s0); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 5px 4px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .v3 .col .stat > span { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; } /* the value row is a flex row: number, slash and pill sit on one line with 3px between them, and the pill drops the shared stylesheet's minimum width, which pushed it past the cell's edge (Hayden, 5 Sep) */ .v3 .col .stat b { font-size: var(--t-sm); font-weight: 600; color: var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 3px; min-height: 18px; } .v3 .col .stat b.feels-pill { display: inline-flex; align-self: flex-start; font-size: 11px; padding: 0 6px; border-radius: var(--r-pill); margin-top: 1px; min-width: 0; } .v3 .col .stat .fc-ico { width: 22px; height: 22px; vertical-align: middle; margin: -3px 0 -3px -2px; } .v3 .col .stat .fc-pop { font-style: normal; color: var(--ink); font-weight: 600; } .v3 .col .stat .sl { font-style: normal; color: var(--ink-4); font-weight: 400; } .v3 .col .stat em.feels-pill { font-style: normal; display: inline-block; font-size: 11px; padding: 0 5px; border-radius: var(--r-pill); min-width: 0; } /* three cards: high with feels, low, tomorrow; the first is the widest */ .v3 .col .stats.c3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1.3fr); } /* footer, layout A (Hayden, 5 Sep): host mark beside the copyright; visits and timing in a strip beneath */ .v3 footer .foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .v3 footer .foot-r .site-hosted { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; text-decoration: none; } .v3 footer .foot-r .site-hosted-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); } .v3 footer .foot-r .hosted-logo { display: block; opacity: 0.9; } .v3 footer .foot-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: var(--t-xs); color: var(--ink-4); } .v3 footer .foot-strip .st-num { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .v3 footer .foot-row, .v3 footer .foot-strip { flex-direction: column; align-items: flex-start; } .v3 footer .foot-r .site-hosted { align-items: flex-start; } } .v3 .col .mine .feels-pill { font-size: var(--t-xs); padding: 1px 8px; border-radius: var(--r-pill); } /* every pinned island on one line each (Hayden's pick, 7 Sep 2026): name, temperature and sky, feels pill, wind */ /* every pinned island on its own white row (the version Hayden preferred, 7 Sep 2026), no flag. The list is the grid and each row a subgrid of it, so the temperature, icon, pill and wind sit in four shared columns whatever the digits; each row's own grid let "106°" push its neighbours out of line. */ .v3 .col .mine .rows { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; row-gap: 3px; margin-top: 2px; } .v3 .col .mine .r { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 8px; background: var(--s0); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; text-decoration: none; color: var(--ink); font-size: var(--t-sm); } /* the row is a link; say so quietly (Hayden, 7 Sep): a light blue ground (the rows are white on the box's grey, so the table's grey hover would vanish here) and the name underlined in its own colour; text and border unchanged */ .v3 .col .mine .r:hover { background: var(--act-wash); } .v3 .col .mine .r:hover .nm { text-decoration: underline; } .v3 .col .mine .r .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v3 .col .mine .r .t { font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; font-variant-numeric: tabular-nums; } .v3 .col .mine .r .t .owm-icon { width: 20px; height: 20px; } .v3 .col .mine .r em.feels-pill { font-style: normal; display: inline-block; min-width: 3.2em; text-align: center; font-size: 11px; padding: 1px 6px; font-variant-numeric: tabular-nums; justify-self: center; } .v3 .col .mine .r .w { color: var(--ink-3); font-size: var(--t-xs); white-space: nowrap; text-align: right; justify-self: end; font-variant-numeric: tabular-nums; } .v3 .col select { width: 100%; } /* ---- The favourites panel outside the bar (Hayden, 7 Sep 2026; shared.js renderIslandPins) ---- box-mode: the column's island box. The field looks like the select it replaces; the panel opens inside the box beneath it (the column scrolls, so a floating panel would be clipped). row-mode: the phone's line under the title, names then a chevron, the panel floating from the right edge. */ .v3 .isl-pins .nav-pin-dropdown { position: relative; } .v3 .isl-pins .nav-dropdown-panel, .v3 .hero-favs .hf-panel { background: var(--s0); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-float); padding: 0; z-index: 30; } .v3 .isl-pins .nav-dropdown-panel a, .v3 .hero-favs .hf-panel a { color: var(--ink-2); font-weight: 500; font-size: var(--t-sm); padding: 7px 12px; } .v3 .isl-pins .nav-dropdown-panel a:hover, .v3 .hero-favs .hf-panel a:hover { background: var(--s1); color: var(--ink); } .v3 .isl-pins .nav-faves-group-label, .v3 .hero-favs .hf-panel .nav-faves-group-label { color: var(--ink-4); padding: 7px 12px 2px; font-size: 10px; letter-spacing: 0.06em; } .v3 .isl-pins .nav-pin-divider, .v3 .hero-favs .hf-panel .nav-pin-divider { border-color: var(--line-2); } .v3 .isl-pins .fav-remove, .v3 .hero-favs .hf-panel .fav-remove { color: var(--ink-4); } /* the plus on an island row in the list: pins and opens (Hayden, 7 Sep 2026); the dashed circle is the site's pin mark */ .v3 .isl-pins .fav-add, .v3 .hero-favs .hf-panel .fav-add, .v3 .nav-isl .fav-add { flex: 0 0 auto; width: 18px; height: 18px; margin: 0 10px 0 6px; padding: 0 0 1px; border-radius: 50%; border: 1px dashed var(--ink-4); background: transparent; color: var(--ink-3); font: 700 13px/1 var(--font); display: inline-grid; place-items: center; cursor: pointer; } .v3 .isl-pins .fav-add:hover, .v3 .hero-favs .hf-panel .fav-add:hover, .v3 .nav-isl .fav-add:hover { border-style: solid; border-color: var(--act); color: var(--act); background: var(--act-wash); } .v3 .isl-pins .nav-fave-row:hover, .v3 .hero-favs .hf-panel .nav-fave-row:hover { background: var(--s1); } .v3 .isl-pins .nav-fave-row a:hover, .v3 .hero-favs .hf-panel .nav-fave-row a:hover { background: transparent; } .v3 .isl-pins .nav-clear-favs { border-top-color: var(--line-2) !important; color: var(--ink-4) !important; font-size: var(--t-xs) !important; } /* the list at the suggested flag on the satellite image, desktop (Hayden, 7 Sep 2026; hero-favs.js places it) */ .v3 .hero-favs .hf-panel { pointer-events: auto; position: absolute; left: 0; right: auto; transform: none; min-width: 250px; max-width: 280px; text-align: left; font: 500 var(--t-sm)/1.4 var(--font); } .v3 .hero-favs .hf-panel .nav-pin-scroll { max-height: 300px; overflow-y: auto; scrollbar-width: thin; } /* the hero pages size every img in the picture's box to fill it (.static-sat img, .hero-wrapper img); the list's flags are not the picture */ .v3 .hero-favs .hf-panel img.nav-pin-flag { width: 20px; height: 15px; object-fit: cover; display: inline-block; border-radius: 2px; flex: none; } /* the hero pages switch off pointer events on every link in the picture's box (.static-sat a); the list's rows are links and must take taps */ .v3 .static-sat .hero-favs .hf-panel a, .v3 .hero-wrapper .hero-favs .hf-panel a, .v3 .hero-favs .hf-panel a { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 8px; } /* the hero's own a { display: block } had squeezed the flag against the name */ .v3 .isl-pins .nav-fave-add-icon { width: 16px; height: 16px; border-radius: 50%; border: 1px dashed var(--ink-4); display: inline-grid; place-items: center; font-size: 13px; line-height: 1; color: var(--ink-3) !important; } .v3 .isl-pins.box-mode .isl-field { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--s0); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; cursor: pointer; text-align: left; } .v3 .isl-pins.box-mode .isl-field:hover { border-color: var(--ink-4); } .v3 .isl-pins.box-mode .isl-field[aria-expanded="true"] { border-color: var(--act); } .v3 .isl-pins.box-mode .isl-field span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .v3 .isl-pins.box-mode .nav-pin-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; transform: none; width: auto; min-width: 0; max-width: none; border-radius: 6px; overflow: hidden; } /* floats over the boxes beneath (Hayden, 7 Sep): inline, it pushed the column into scrolling */ .v3 .isl-pins.box-mode .nav-pin-scroll { max-height: 300px; overflow-y: auto; scrollbar-width: thin; } /* the heading as the call to action while nothing is pinned: the bar's dashed plus, the words in the darker ink */ .v3 .col .box h4.cta { display: flex; align-items: center; gap: 7px; color: var(--ink-2); } .v3 .col .box h4.cta .nav-fave-add-icon { width: 16px; height: 16px; border-radius: 50%; border: 1px dashed var(--ink-3); display: inline-grid; place-items: center; font-size: 13px; line-height: 1; color: var(--ink-3) !important; flex: none; } /* nothing pinned: the island leads (Hayden's pick 2, 7 Sep 2026): flag and name in the box's biggest type, one filled button that says what it does, the pill's "Not my island" beside it */ .v3 .isl-lead { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; } .v3 .isl-lead-flag { width: 34px; height: 26px; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); flex: none; } .v3 .isl-lead b { display: block; font-size: var(--t-md); font-weight: 700; color: var(--ink); line-height: 1.15; } .v3 .isl-lead small { display: block; color: var(--ink-3); font-size: var(--t-xs); margin-top: 1px; } .v3 .isl-acts { display: flex; align-items: center; gap: 12px; } .v3 .isl-pin { font: inherit; font-size: var(--t-sm); font-weight: 700; padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--act); background: var(--act); color: var(--act-ink); cursor: pointer; white-space: nowrap; } .v3 .isl-pin:hover { filter: brightness(1.08); } .v3 .isl-link { font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--act); background: transparent; border: 0; padding: 4px 0; cursor: pointer; white-space: nowrap; } .v3 .isl-link:hover { text-decoration: underline; } .v3 .isl-pins.box-mode .isl-acts, .v3 .isl-pins.box-mode .isl-pin { position: relative; } .v3 .col .mine.lead { margin-top: 2px; margin-bottom: 8px; } /* the island page's pin line under Today so far (Hayden's pick A, 7 Sep 2026): the title's star, in a second place */ .v3 .isl-star { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 0; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--act); background: transparent; border: 0; cursor: pointer; } .v3 .isl-star .st { font-size: 15px; line-height: 1; color: var(--ink-4); } .v3 .isl-star.on .st { color: var(--tier-1); } /* the title's pinned star uses the same colour */ .v3 .isl-star .un { color: var(--ink-3); font-weight: 500; margin-left: 2px; } .v3 .isl-star:hover .tx, .v3 .isl-star:hover .un { text-decoration: underline; } /* pinned: the rows lead the box, the field follows (Hayden's pick B, 7 Sep 2026) */ .v3 .isl-pins.row-mode { display: none; } .v3 .isl-pins.row-mode .nav-pin-dropdown { display: inline-flex; align-items: center; gap: 2px; } .v3 .isl-pins.row-mode .isl-nm { font-weight: 600; color: var(--ink); text-decoration: none; padding: 2px 5px; border-radius: 4px; white-space: nowrap; } .v3 .isl-pins.row-mode .isl-nm + .isl-nm::before { content: "·"; color: var(--ink-4); margin-right: 7px; font-weight: 400; } .v3 .isl-pins.row-mode .isl-add { font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); background: transparent; border: 0; border-radius: 4px; padding: 3px 6px 3px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .v3 .isl-pins.row-mode .isl-add:hover { color: var(--ink); } /* the chevron in a tinted circle, so the dropdown cannot be missed (Hayden, 7 Sep) */ .v3 .isl-pins.row-mode .isl-chev { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--act-wash); color: var(--act); display: inline-grid; place-items: center; cursor: pointer; margin-left: 4px; padding: 0; } .v3 .isl-pins.row-mode .isl-chev svg { width: 11px; height: 7px; } .v3 .isl-pins.row-mode .isl-chev[aria-expanded="true"] { background: var(--act); color: var(--act-ink, #fff); } .v3 .isl-pins.row-mode .nav-pin-panel { position: absolute; top: calc(100% + 4px); left: 0; right: auto; transform: none; min-width: 240px; max-width: calc(100vw - 32px); } .v3 .isl-pins.row-mode .nav-pin-scroll { max-height: 320px; overflow-y: auto; scrollbar-width: thin; } .v3 .presence .pres-n { color: var(--ink-2); margin-bottom: 2px; } .v3 .presence .pres-n b { color: var(--ink); font-size: var(--t-base); font-weight: 700; } .v3 .presence .pres-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; color: var(--ink-3); margin-top: 2px; font-size: var(--t-xs); } .v3 .presence .pres-item, .v3 .pres-line .pres-item { white-space: nowrap; } /* one group per page as five cells: flag over share, on the page surface (Hayden, 5 Sep) */ .v3 .presence .pres-lab { font-size: var(--t-xs); color: var(--ink-3); margin-top: 8px; } .v3 .presence .pres-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; } .v3 .presence .pres-cell { background: var(--s0); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 2px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--t-xs); color: var(--ink-2); text-decoration: none; } .v3 .presence .pres-cell:hover { border-color: var(--line); } .v3 .presence .pres-cell .flag { width: 22px; height: 16px; border-radius: 2px; } .v3 .presence .pres-cell b { font-weight: 600; color: var(--ink); } .v3 .presence .pres-cells + .pres-row { margin-top: 8px; } .v3 .presence .later { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--ink-4); font-size: 11px; } /* The reserved rectangle: the signup on its faint green with an X, or the share box once dismissed (Hayden, 5 Sep). */ .v3 .col .slot { position: relative; border: 1px solid var(--line); border-radius: var(--r-box); min-height: 190px; display: flex; flex-direction: column; justify-content: center; padding: 14px; gap: 6px; background: var(--s1); } .v3 .col .slot.signup, .v3 .subblk.signup { background: var(--sign-bg); border-color: var(--sign-line); } .v3 .col .slot[hidden], .v3 .subblk[hidden] { display: none; } .v3 .slot-t { color: var(--ink); font-size: var(--t-sm); font-weight: 600; padding-right: 22px; display: flex; align-items: center; gap: 6px; } .v3 .slot-t svg { width: 15px; height: 15px; color: var(--ink-3); flex: 0 0 auto; } .v3 .slot-d { color: var(--ink-3); } .v3 .slot-x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink-4); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .v3 .slot-x:hover { background: var(--s2); color: var(--ink); } .v3 .share-btns { display: flex; gap: 6px; margin-top: 2px; } .v3 .share-btns .ctl { flex: 1 1 0; justify-content: center; } .v3 .col .slot input, .v3 .subblk input { font-size: var(--t-sm); padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--s0); color: var(--ink); } .v3 .subblk { position: relative; display: none; border: 1px solid var(--line); border-radius: var(--r-box); padding: 14px 16px; margin-top: var(--sp-5); background: var(--s1); } .v3 .subblk .slot-d { display: block; margin-top: 2px; } .v3 .subblk input { width: 100%; margin: 8px 0; } /* ------------------------------------------------------------------------- Phone contents sheet ------------------------------------------------------------------------- */ .v3 .fab { display: none; position: fixed; right: 14px; bottom: 14px; z-index: 1150; background: var(--fab-bg); color: var(--fab-ink); border: 0; border-radius: var(--r-pill); padding: 9px 16px; font-size: var(--t-sm); font-weight: 600; box-shadow: var(--shadow-float); cursor: pointer; } /* The sheet stands apart from the page (Hayden, 7 Sep 2026): the boxes' tint for its ground, a line in the site's blue along its top, and the page dimmed behind it. Layout unchanged. */ .v3 .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1151; background: var(--s1); border-top: 4px solid var(--act); border-radius: 14px 14px 0 0; box-shadow: var(--shadow-float); padding: 10px 18px 18px; transform: translateY(105%); visibility: hidden; transition: transform 0.2s ease, visibility 0s 0.2s; max-height: 70vh; overflow: auto; } .v3 .sheet-scrim { position: fixed; inset: 0; z-index: 1149; background: transparent; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s 0.2s; } /* no dim on the page (Hayden, 8 Sep 2026); the layer only catches the tap that closes the sheet */ .v3 .sheet-scrim.open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; } .v3 .sheet.open { transform: none; visibility: visible; transition: transform 0.2s ease; } .v3 .sheet h4 { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; margin-bottom: 6px; } .v3 .sheet a { display: block; color: var(--ink-2); text-decoration: none; padding: 6px 0; font-size: var(--t-base); } .v3 .sheet a.on { color: var(--ink); font-weight: 600; } .v3 .sheet .row { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .v3 .sheet .row select { font: inherit; font-size: var(--t-sm); padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--s0); color: var(--ink); max-width: 60%; } .v3 .sheet .row a { padding: 6px 0; white-space: nowrap; } .v3 .sheet .sheet-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--s2); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; } .v3 .sheet .sheet-x:hover { background: var(--line); } @media (prefers-reduced-motion: reduce) { .v3 .sheet { transition: none; } html { scroll-behavior: auto; } } /* ------------------------------------------------------------------------- Footer colophon ------------------------------------------------------------------------- */ .v3 .foot { max-width: 1280px; margin: var(--sp-6) auto 0; padding: var(--sp-5) var(--sp-5) 40px; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-3); } .v3 .foot .cred { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 24px; margin-bottom: var(--sp-4); } .v3 .foot .cred b { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; margin-bottom: 2px; } .v3 .foot .fine { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-4); font-size: var(--t-xs); } /* ------------------------------------------------------------------------- Responsive: three breakpoints, 1100 / 900 / 600 ------------------------------------------------------------------------- */ @media (max-width: 1100px) { .v3 .shell { grid-template-columns: minmax(0, 1fr); } .v3 .col { display: none; } .v3 .fab { display: inline-flex; } .v3 .subblk { display: block; } } @media (max-width: 900px) { .v3 .two { grid-template-columns: 1fr; } .v3 .cond .tiles { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .v3 .bar .in { height: 52px; padding: 0 14px; } .v3 .bar .links, .v3 .bar .fav, .v3 .bar .units { display: none; } .v3 .bar .menu { display: inline-flex; } .v3 .wrap { padding: 0 14px var(--sp-7); } .v3 .page-h h1 { font-size: 22px; } /* the islands line is a strip that stays under the bar as the page scrolls (Hayden, 7 Sep 2026): its own row after the title block, full width, a hairline beneath (the title block gives up its own); a shadow once it is stuck */ .v3 .pres-line { display: flex; position: sticky; top: 52px; z-index: 4; margin: 0 -14px; padding: 7px 14px 8px; background: var(--s0); border-bottom: 1px solid var(--line); transition: box-shadow 0.18s ease; } .v3 .pres-line.stuck { box-shadow: 0 6px 14px -8px rgba(21, 27, 35, 0.22); } body.v3:has(#staging-banner) .pres-line { top: 80px; } .v3 .page-h { border-bottom: 0; padding-bottom: 6px; } .v3 section.blk { padding-top: var(--sp-6); } .v3 .cond { grid-template-columns: 1fr; } .v3 .cond .tiles { grid-template-columns: 1fr 1fr; } .v3 .glance { grid-template-columns: 1fr 1fr; } .v3 .strip { grid-template-columns: repeat(6, 1fr); } .v3 .sparks { grid-template-columns: repeat(3, 1fr); } .v3 .imgcap .pill { margin-left: 0; } .v3 table.t .hide-p, .v3 table.t .rain { display: none; } .v3 .foot .cred { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------------- Living with the shared stylesheet during migration. styles.css still loads first on a migrated page (the footer, nav and favourites depend on it); these rules undo what it does to the shell and restyle the shared nav into the bar. They go when the last page has moved. ------------------------------------------------------------------------- */ .v3 main { max-width: none; margin: 0; padding: 0; background: transparent; box-shadow: none; } .v3 main a:visited { color: var(--act); } /* v2.8's fade from the viewport edge toward the page, carried forward: the page column stays on the page ground with a hairline down each side, and the space outside it deepens toward the window edge. Only where there is space outside the column. */ @media (min-width: 1100px) { body.v3 { background-color: var(--edge); background-image: linear-gradient(90deg, var(--edge) 0%, var(--edge-soft) 18%, var(--edge-soft) 82%, var(--edge) 100%); } .v3 .wrap { background: var(--s0); box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line); } } @media (max-width: 1099px) { body.v3 { background-color: var(--s0); background-image: none; } } /* the shared footer as the 3.0 colophon: one ground with the page, credits in four quiet columns, the site nav row gone (the bar carries the same links) */ .v3 footer, .v3 .footer-nav, .v3 .theme-toggle { max-width: 1280px; box-shadow: none; background: var(--s0); } /* the footer nav stays (Hayden, 5 Sep: it is how people find Resources), in the 3.0 voice */ .v3 .footer-nav { display: flex; justify-content: flex-start; gap: 2px; padding: 20px var(--sp-5) 0; } .v3 .footer-nav a { color: var(--ink-2); font-weight: 600; font-size: var(--t-sm); padding: 6px 10px; border-radius: var(--r-ctl); } .v3 .footer-nav a:hover, .v3 .footer-nav a.active { color: var(--ink); background: var(--act-wash); } /* the way back up sits at the row's right end (Hayden, 5 Sep); the old 2.8 floating button is gone on 3.0 pages */ .v3 .footer-nav .fn-top { margin-left: auto; color: var(--ink-3); font-weight: 500; } .v3 .footer-nav .fn-top:hover { color: var(--ink); } /* the page column's side hairlines run on down the footer to the end of the page (Hayden, 5 Sep) */ @media (min-width: 1100px) { .v3 footer, .v3 .footer-nav { box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line); } } .v3 footer { border-top: 0; padding: var(--sp-4) var(--sp-5) 40px; text-align: left; font-size: var(--t-sm); color: var(--ink-3); } /* the fading rule inside the credits is the only line (Hayden, 5 Sep) */ .v3 footer .credits { font-size: var(--t-sm); line-height: 1.5; } /* four columns as wide as their words, the first flush left, the last flush right, equal gaps between (Hayden, 5 Sep) */ .v3 footer .credits-cols { max-width: none; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px 24px; margin: 0 0 var(--sp-4); } .v3 footer .credits-col-head { color: var(--ink-4); font-size: 11px; letter-spacing: 0.06em; margin-bottom: 4px; } .v3 footer .credits .credits-cols a, .v3 footer .credits .credits-cols a:visited { color: var(--ink-2); font-weight: 400; padding: 1px 0; white-space: normal; } .v3 footer .credits .credits-cols a:hover { color: var(--act); } .v3 footer .credits-disclaimer, .v3 footer .credits-copyright { text-align: left; color: var(--ink-4); font-size: var(--t-xs); font-style: normal; margin-top: 6px; } .v3 footer .credits-copyright a, .v3 footer .credits-copyright a:visited { color: var(--ink-3); } .v3 footer .site-counter, .v3 footer .site-perf, .v3 footer .site-hosted-label { text-align: left; color: var(--ink-4); font-size: var(--t-xs); margin: 0; } /* the right-hand pair mirrors the left-hand pair: their words align to the right edge (Hayden, 5 Sep) */ .v3 footer .credits-cols > div:nth-child(3), .v3 footer .credits-cols > div:nth-child(4) { text-align: right; } @media (max-width: 600px) { .v3 footer .credits-cols { grid-template-columns: 1fr 1fr; text-align: left; justify-content: start; } .v3 footer .credits-cols > div:nth-child(3) { text-align: left; } .v3 footer .credits-cols > div:nth-child(2) { text-align: right; } .v3 footer .credits-cols .aw-logo { margin: 0.3rem 0; } } .v3 footer .credits .credits-copyright a, .v3 footer .credits .credits-copyright a:visited { color: var(--ink-3); } /* the production feels-like pills follow the 3.0 tokens on a migrated page */ .v3 .feels-cool { background: var(--feel-cool-bg); color: var(--feel-cool); } .v3 .feels-warm { background: var(--feel-warm-bg); color: var(--feel-warm); } .v3 .feels-hot { background: var(--feel-hot-bg); color: var(--feel-hot); } .v3 .feels-extreme { background: var(--feel-ext-bg); color: var(--feel-ext); } .v3 .feels-danger { background: var(--feel-dng-bg); color: var(--feel-dng); } /* homepage: the island table, the quiet card, the hero and the storm cards */ /* The shared stylesheet still styles .islands .island as a card (flex row, border, radius, lift on hover). On the 3.0 table those are rows again. */ .v3 table.isl .island-grid { display: table-row-group; gap: 0; } .v3 table.isl .island { display: table-row; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; transition: none; } @media (hover: hover) { .v3 table.isl .island:hover { transform: none; box-shadow: none; border-color: transparent; } } .v3 table.isl .fav-toggle { color: var(--ink-4); font-size: 1rem; margin-right: 2px; cursor: pointer; } .v3 table.isl .fav-toggle.pinned { color: var(--tier-1); } .v3 table.isl .isl-link { color: var(--ink); font-weight: 600; text-decoration: none; } .v3 table.isl .isl-link:hover { text-decoration: underline; } /* underlines take the text's own colour, site-wide (Hayden, 7 Sep) */ .v3 table.isl .name-abbr { display: none; } .v3 table.isl .sky { color: var(--ink-3); } .v3 table.isl .owm-icon { width: 22px; height: 22px; vertical-align: middle; margin-right: 2px; } .v3 table.isl .feels-pill { display: inline-block; min-width: 0; font-size: var(--t-sm); padding: 2px 9px; border-radius: var(--r-pill); } .v3 table.isl .wind-chip { margin: 0; min-width: 0; background: transparent; border-color: var(--line); color: var(--ink-2); } .v3 table.isl.gust-mode .wind-chip { min-width: 9.5rem; text-align: center; } .v3 table.isl td { white-space: nowrap; } /* Desktop: the island table's type back to 2.8's size (names at 16px, cells at ~14px there; 3.0 had set both to 13px). The table has the room; phones keep 13px so nothing wraps (Hayden, 7 Sep 2026). */ @media (min-width: 1101px) { .v3 table.isl { font-size: 14px; } .v3 table.isl .isl-link { font-size: var(--t-base); } .v3 table.isl td { padding: 8px 10px; } .v3 table.isl .feels-pill { font-size: 14px; } } /* the climate table's own note (includes/climate_measured.php) takes the same note style */ .v3 .climate-note { background: var(--s1); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r-ctl); padding: 10px 16px; font-size: var(--t-sm); color: var(--ink-2); box-shadow: none; line-height: 1.55; } .v3 .climate-note-title { color: var(--ink); font-weight: 600; font-size: var(--t-sm); margin: 0 0 4px; } .v3 .static-sat .sat-caption { color: var(--ink-3); font-size: var(--t-sm); } /* Storm cards stay boxless, as 2.8 had them since Aug 2026 and as the island page's systems section is: heading, tiles and rows sit on the page. (An earlier rule here boxed them again with no padding; found in the storm-state audit before launch, 5 Sep.) */ .v3 .storms-grid > article.storm, .v3 .storms-grid > article.storm:hover { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .v3 .about p, .v3 .about li { color: var(--ink-2); } .v3 table.isl th .wu { display: none; font-weight: 500; text-transform: none; letter-spacing: 0; } /* the wind unit in the header: phones only (rule below) */ @media (max-width: 600px) { /* the phone row: short name, tighter cells, a plainer wind pill, one line at 390px */ .v3 table.isl .name-full { display: none; } .v3 table.isl .name-abbr { display: inline; } .v3 table.isl th, .v3 table.isl td { padding: 7px 6px; } .v3 table.isl .wind-chip { font-size: var(--t-sm); padding: 0; border: 0; background: transparent; } .v3 table.isl.gust-mode .wind-chip { min-width: 0; } /* the Sky column stays, icon only, as a named column; the wind unit sits in the header (Hayden's pick, 6 Sep) */ .v3 table.isl th.sky, .v3 table.isl td.sky { padding-left: 2px; padding-right: 2px; text-align: center; width: 26px; } .v3 table.isl .sky-words { display: none; } .v3 table.isl .owm-icon { width: 24px; height: 24px; margin: 0; } .v3 table.isl th .wu { display: inline; } .v3 table.isl .wu-in { display: none; } } /* the island page's rankings table: category, the leader, this island's place */ .v3 #hlContent { display: block; } /* the old four-column grid shrank the table to its content */ .v3 table.rank td.cat { font-weight: 600; color: var(--ink); white-space: nowrap; } .v3 table.rank .pos { display: inline-block; min-width: 34px; text-align: center; font-weight: 600; color: var(--ink); background: var(--s2); border-radius: var(--r-ctl); padding: 1px 7px; font-variant-numeric: tabular-nums; } .v3 table.rank .pos.top { background: var(--act-wash); color: var(--act); } .v3 table.rank .rk-date { color: var(--ink-3); white-space: nowrap; } .v3 table.rank .feels-pill { display: inline-block; min-width: 0; font-size: var(--t-sm); padding: 2px 9px; border-radius: var(--r-pill); } .v3 .hl-description { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 12px; } .v3 .hl-footer { display: flow-root; font-size: var(--t-sm); color: var(--ink-3); margin: 8px 0 0; } /* the note, then the .ask float at its right */ /* the old rainfall accuracy box takes the note style */ .v3 .rain-accuracy { background: var(--s1); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r-ctl); padding: 10px 16px; font-size: var(--t-sm); color: var(--ink-2); box-shadow: none; margin: var(--sp-3) 0 0; line-height: 1.55; } .v3 .rain-accuracy-title { color: var(--ink); font-weight: 600; font-size: var(--t-sm); margin: 0 0 4px; } .v3 .rain-accuracy p { max-width: none; } /* outlook: sections declassed as cards, the twin-view tabs as a segmented control */ .v3 .outlook-section { margin-top: 0; } .v3 .outlook-card, .v3 .map-info { background: transparent; border: 0; border-radius: 0; padding: 0; margin-top: 0; box-shadow: none; } .v3 .hero-section { margin: 0; } .v3 .gtwo-tap { color: var(--ink-4); font-size: var(--t-xs); margin: 0 0 8px; } /* Twin-view tabs (Hayden, 5 Sep): full width, the selected view in the action blue, the other on the wash, as v2.8 had them, so the toggle is impossible to miss. */ .v3 .pair-tabs { display: flex; gap: 8px; margin: 0 0 12px; } .v3 .pair-tab { flex: 1 1 0; text-align: center; background: var(--act-wash); color: var(--act); border: 1px solid transparent; border-radius: var(--r-ctl); padding: 8px 12px; font-weight: 600; font-size: var(--t-sm); line-height: 1.3; } .v3 .pair-tab:not(.active):hover, .v3 .pair-tab:not(.active):focus-visible { border-color: var(--act); transform: none; } .v3 .pair-tab.active { background: var(--act); color: var(--act-ink); } .v3 .pair-tab small { color: var(--ink-3); font-size: 11px; font-weight: 400; } .v3 .pair-tab.active small { color: var(--act-ink); opacity: 0.85; } /* the twin views' picture fills the column; the box holds the taller member's height so a switch never moves the page */ .v3 .pair-media img { width: 100%; height: auto; } .v3 .pair-media-tall > a, .v3 .pair-media-tall > .anim-wrapper { width: 100%; height: auto; } /* two sections that come from somewhere else, or come and go, sit in a panel */ .v3 main > section.boxed { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-box); padding: 16px 20px 18px; margin-top: 32px; } .v3 main > #satellite + section.boxed { margin-top: 20px; padding-top: 16px; } .v3 main > section.boxed + section { padding-top: 32px; } .v3 section.boxed .aside, .v3 section.boxed .quiet { background: var(--s0); } .v3 .anim-group-title { font-size: var(--t-md); font-weight: 600; color: var(--ink); } .v3 .anim-wrapper img { background-color: var(--s2); } /* the wind, rain and dust lists as the island table; status sentences as notes */ .v3 .wind-readings, .v3 .rain-readings, .v3 .dust-readings { margin: 0 0 24px; } .v3 .wind-status, .v3 .rain-status, .v3 .dust-status { margin: 0 0 12px; font-size: var(--t-sm); line-height: 1.5; padding: 8px 16px; } .v3 .dust-status + .dust-status { margin-top: -6px; } .v3 .wind-scale-note, .v3 .rain-scale-note, .v3 .dust-scale-note { font-size: var(--t-xs); color: var(--ink-4); margin: 8px 0 0; } .v3 .wind-key .wind-dot { width: 7px; height: 7px; } .v3 .readings-toggle { display: none; } /* the island lists as two half-tables side by side where the column is wide */ .v3 .tsplit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; align-items: start; } @media (max-width: 900px) { .v3 .tsplit { grid-template-columns: 1fr; gap: 8px 0; } } @media (max-width: 600px) { .v3 .tsplit.readings-collapse:not(.rt-open) .tbl:nth-child(n+2) { display: none; } .v3 .tsplit.readings-collapse:not(.rt-open) .tbl:first-child tbody tr:nth-child(n+4) { display: none; } .v3 .tbl.readings-collapse:not(.rt-open) tbody tr:nth-child(n+4) { display: none; } .v3 .readings-toggle { display: block; width: 100%; margin: 8px 0 0; padding: 7px 10px; background: var(--s1); color: var(--act); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: var(--t-sm); font-weight: 600; text-align: center; cursor: pointer; } } .v3 .inline-caption, .v3 .image-details .image-desc { color: var(--ink-3); font-size: var(--t-sm); } .v3 .inline-caption, .v3 .gtwo-pair figcaption, .v3 .hero-caption, .v3 .rk-hero-caption { text-align: center; margin: 6px 0 0; } /* map: the map at the content column's width, the detail panel and prose declassed */ .v3 .map-section { margin: 0; } .v3 #map { border-radius: var(--r-box); } /* The map box matches the home and Outlook heroes exactly: 400px tall and 16px under the page header's hairline, at every width, so the three pages line up when a reader flips between them (Hayden, 5 Sep; the 2.8 rule carried forward). */ .v3 .map-section #map { height: 400px; margin-top: 0; } .v3 .legend-wrapper { margin-top: 10px; } .v3 .legend-note { color: var(--ink-4); font-size: var(--t-xs); } .v3 .island-list-section { margin-top: 0; color: var(--ink-2); } .v3 .companion-intro { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 8px; } .v3 #islandSelect { font: inherit; font-size: var(--t-sm); padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--s0); color: var(--ink); } .v3 .map-info { color: var(--ink-2); } .v3 .map-info h3 { font-size: var(--t-base); font-weight: 600; color: var(--ink); margin: 16px 0 4px; } .v3 .map-info p { max-width: none; } /* rankings: controls declassed, a bar per island, the accuracy box as a note */ .v3 .rk-lead { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 12px; max-width: none; } .v3 .rk-controls { background: transparent; border: 0; padding: 0; margin: 0 0 16px; box-shadow: none; gap: 8px 16px; } .v3 .rk-controls label { color: var(--ink-3); font-size: var(--t-sm); font-weight: 500; } .v3 .rk-controls select { font: inherit; font-size: var(--t-sm); padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--s0); color: var(--ink); } .v3 .rk-heading { font-size: var(--t-lg); font-weight: 600; margin: 0; } .v3 .rk-heading .rk-hicon { display: none; } .v3 .rk-heading .rk-sub { font-size: var(--t-sm); color: var(--ink-3); font-weight: 500; } .v3 .rk-taphint { color: var(--ink-3); font-size: var(--t-sm); } .v3 .rk-dates { color: var(--ink); } .v3 .rk-empty { color: var(--ink-3); } .v3 .rk-row { border-radius: 0; padding: 8px 6px; border-bottom: 1px solid var(--line-2); gap: 10px; } .v3 .rk-row:nth-child(odd) { background: transparent; } .v3 .rk-row:hover { background: var(--s1); } .v3 .rk-rank { flex: 0 0 1.6rem; font-weight: 600; font-size: var(--t-sm); color: var(--ink-4); } .v3 .rk-row.is-top .rk-rank { color: var(--ink); } .v3 .rk-flag img { width: 22px; height: 16px; border-radius: 2px; } .v3 .rk-name, .v3 .rk-name:visited { color: var(--ink); flex: 0 1 auto; min-width: 11rem; font-size: var(--t-sm); } .v3 .rk-bar { flex: 1 1 80px; height: 8px; background: var(--s2); border-radius: 4px; overflow: hidden; } .v3 .rk-bar i { display: block; height: 100%; background: var(--c-cmp); border-radius: 4px; } .v3 .rk-bar-hot i { background: var(--t-hot); } /* hottest: the temperature scale's red */ .v3 .rk-bar-feel i { background: var(--t-hot); } /* feels-like hottest: the same red as hottest (Hayden, 5 Sep) */ /* the column's Compare with box (island pages): one select that drives Weather history, the climate charts and the compare table */ .v3 .col .cmp-box .cmp-note { color: var(--ink-4); font-size: var(--t-xs); margin-top: 6px; line-height: 1.4; } .v3 .rk-bar-cool i { background: var(--t-cool); } /* coolest: the scale's blue */ .v3 .rk-bar-rain i { background: var(--c-rain); } .v3 .rk-val { font-weight: 600; font-size: var(--t-sm); min-width: 4.5rem; text-align: right; } .v3 .rk-chev { color: var(--ink-4); font-size: 1.1rem; } .v3 .rk-na-row .rk-name { color: var(--ink-3); } .v3 .rk-share { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 24px 0 0; } .v3 .rk-share span { color: var(--ink-3); font-size: var(--t-sm); } .v3 .rk-share-btn { border: 1px solid var(--line); background: var(--s0); color: var(--ink-2); border-radius: var(--r-ctl); padding: 0 10px; height: 30px; font-size: var(--t-sm); } .v3 .rk-share-btn:hover { background: var(--s1); } .v3 .rk-accuracy { margin: 0; padding: 10px 16px; background: var(--s1); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: var(--r-ctl); box-shadow: none; line-height: 1.55; } .v3 .rk-accuracy-title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin: 0 0 4px; } .v3 .rk-accuracy p:not(.rk-accuracy-title) { font-size: var(--t-sm); color: var(--ink-2); max-width: none; } .v3 .rk-accuracy a { font-weight: 600; } .v3 .rk-hero { border-radius: var(--r-box); } .v3 .rk-hero-li { padding: 14px 0 8px; border: 0; background: transparent; } .v3 .rk-hero-li:hover { background: transparent; } /* anything that follows the page header sits a step below its hairline, whatever the element (blog categories, archive years) */ .v3 .page-h + :not(section):not(.blk):not(.pres-line), .v3 .page-h + .pres-line + :not(section):not(.blk) { margin-top: var(--sp-4); } /* the islands line sits between the title block and the content now (7 Sep) */ .v3 .rk-hero-caption { color: var(--ink-3); font-size: var(--t-sm); } /* phones: the short island name in a fixed-width column, so every bar starts on the same line (Hayden, 6 Sep) */ .v3 .rk-name .rk-ns { display: none; } @media (max-width: 600px) { .v3 .rk-name { flex: 0 0 7.2rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v3 .rk-name .rk-nf { display: none; } .v3 .rk-name .rk-ns { display: inline; } .v3 .rk-bar { flex-basis: 40px; } .v3 .rk-val { min-width: 3.5rem; } } /* supporting pages: blog list rows, archive intro, subscribe cards, the weather list's home boxes */ .v3 .blog-card { background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; box-shadow: none; padding: 16px 0; margin: 0; } .v3 .blog-card:hover { transform: none; box-shadow: none; border-color: var(--line-2); } .v3 .blog-card .card-thumb { border-radius: var(--r-box); } /* the card lost its rounded frame on 3.0; the picture keeps its own corners */ /* category pills: one look on the main page and the category pages, the current one solid (Hayden, 5 Sep) */ .v3 .blog-cats a, .v3 .blog-cats a:visited { background: var(--act-wash); color: var(--act); font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); margin: 0 3px; } .v3 .blog-cats a:hover { background: var(--act-wash); color: var(--ink); } .v3 .blog-cats a.active, [data-theme="light"] .v3 .blog-cats a.active { background: var(--act); color: var(--act-ink); font-weight: 600; padding: 6px 12px; } /* the column index in its two-line form (the blog's popular posts): title held to two lines, a kind-and-date line under it */ .v3 .col .toc a.two { display: block; padding: 6px 0; border-top: 1px solid var(--line-2); border-left: 0; margin-left: 0; } .v3 .col .toc a.two:first-of-type { border-top: 0; } .v3 .col .toc a.two .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); } .v3 .col .toc a.two:hover .t { color: var(--ink); } .v3 .col .toc a.two .m { display: block; color: var(--ink-4); font-size: 11px; line-height: 1.2; margin-top: 3px; } .v3 .blog-card h2 { font-size: var(--t-md); font-weight: 600; } .v3 .blog-card h2 a { color: var(--ink); } .v3 .blog-card .post-meta, .v3 .blog-card .post-excerpt { color: var(--ink-3); font-size: var(--t-sm); } .v3 .blog-page .intro, .v3 .blog-empty { color: var(--ink-3); } .v3 .history-intro { max-width: none; } .v3 .home-link-box { display: none; } .v3 .sub-card, .v3 .unsub-wrap, .v3 .confirm-wrap { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-box); box-shadow: none; } .v3 .nf-page p { color: var(--ink-2); } /* the old floating back-to-top button (shared.js) retires on 3.0 pages: the Contents sheet and the index carry the way up */ .v3 .back-to-top { display: none !important; } /* column boxes on the panel tint, as v2.8's cards were */ .v3 .col .box { background: var(--s1); } .v3 .col .box select, .v3 .col .box input { background: var(--s0); } /* the shared nav becomes the bar's link row: no bar of its own */ .v3 .bar .secondary-nav { position: static; flex: 1; justify-content: flex-start; background: transparent; border: 0; box-shadow: none; padding: 0; gap: 2px; text-align: left; } .v3 .bar .secondary-nav a.nav-desktop { color: var(--ink-2); font-weight: 600; font-size: var(--t-base); padding: 7px 12px; border-radius: var(--r-ctl); } .v3 .bar .secondary-nav a.nav-desktop:hover { background: var(--act-wash); color: var(--ink); } .v3 .bar .secondary-nav a.nav-desktop.active { background: var(--act-wash); color: var(--ink); font-weight: 600; } /* Islands, after Outlook (Hayden, 8 Sep 2026): a button in the row's own style that opens the island list beneath it, the same list as the column's box (shared.js renderNavIslands). Shows and hides with the other desktop links. */ .v3 .bar .secondary-nav .nav-isl { position: relative; vertical-align: middle; } .v3 .bar .secondary-nav .nav-isl-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; font-size: var(--t-base); font-family: inherit; line-height: 1.2; padding: 7px 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; } .v3 .bar .secondary-nav .nav-isl-btn:hover, .v3 .bar .secondary-nav .nav-isl-btn.active, .v3 .bar .secondary-nav .nav-isl-btn[aria-expanded="true"] { background: var(--act-wash); color: var(--ink); } .v3 .bar .secondary-nav .nav-isl-btn .nav-dropdown-chevron { color: var(--ink-4); } .v3 .bar .nav-isl .nav-pin-panel { left: 0; right: auto; transform: none; top: calc(100% + 6px); min-width: 260px; max-width: 320px; text-align: left; } .v3 .nav-isl .nav-dropdown-panel a { color: var(--ink-2); font-weight: 500; font-size: var(--t-sm); padding: 7px 12px; } .v3 .nav-isl .nav-dropdown-panel a:hover { background: var(--s1); color: var(--ink); } .v3 .nav-isl .nav-dropdown-panel a.active { background: var(--act-wash); color: var(--ink); font-weight: 600; } .v3 .nav-isl .nav-pin-divider { border-color: var(--line-2); } .v3 .nav-isl .nav-fave-row:hover { background: var(--s1); } .v3 .nav-isl .nav-fave-row a:hover { background: transparent; } .v3 .nav-isl .nav-clear-favs { border-top-color: var(--line-2) !important; color: var(--ink-4) !important; font-size: var(--t-xs) !important; } /* Your islands in the menu row (Hayden's pick, nav option B, 5 Sep): after Rankings a hairline, then each pinned island as a link with its flag and short name, then the chevron that opens the island list. With no pins the slot reads "+ Pin your island". Names hide below 1,200px so the row never wraps. */ .v3 .bar .nav-faves { margin-left: 0; gap: 2px; } .v3 .bar .nav-faves-label { color: var(--ink-3); font-weight: 500; font-size: var(--t-sm); } .v3 .bar .nav-faves-sep { display: inline-block; width: 1px; height: 22px; background: var(--line); margin: 0 8px 0 10px; } .v3 .bar .nav-units-sep { display: none; } .v3 .bar .secondary-nav .nav-fave-flag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; min-height: 0; border-radius: var(--r-ctl); color: var(--ink-2); font-weight: 600; font-size: var(--t-base); text-decoration: none; } .v3 .bar .secondary-nav .nav-fave-flag:hover, .v3 .bar .secondary-nav .nav-fave-flag.active { background: var(--act-wash); color: var(--ink); } .v3 .bar .nav-isl-nm { white-space: nowrap; } .v3 .bar .nav-dropdown-btn.nav-pin-btn { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-weight: 600; font-size: var(--t-base); height: auto; padding: 6px 10px; border-radius: var(--r-ctl); background: transparent; } .v3 .bar .nav-dropdown-btn.nav-pin-btn:hover { background: var(--act-wash); color: var(--ink); } .v3 .bar .nav-fave-add-icon { width: 20px; height: 20px; border-radius: 50%; border: 1px dashed var(--ink-4); display: inline-grid; place-items: center; font-size: 15px; line-height: 1; color: var(--ink-3) !important; } .v3 .bar .nav-pin-words .w-short { display: none; } .v3 .bar .nav-manage-btn { height: 30px; padding: 0 6px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink-3); display: inline-grid; place-items: center; cursor: pointer; } .v3 .bar .nav-manage-btn:hover { background: var(--act-wash); color: var(--ink); } .v3 .bar .nav-units { margin-left: auto; gap: 8px; } /* Units and theme as two-part switches on the bar's inset tone, the current half lifted (Hayden, 5 Sep): no white squares. A click anywhere on either flips it, as before. */ .v3 .bar .nav-unit-btn, .v3 .bar .nav-theme-btn { display: inline-flex; align-items: center; height: 28px; padding: 2px; gap: 0; border: 0; border-radius: var(--r-pill); background: var(--s2); color: var(--ink-3); font-weight: 600; font-size: 11.5px; } .v3 .bar .nav-unit-btn:hover, .v3 .bar .nav-theme-btn:hover { background: var(--line); } .v3 .bar .nav-unit-btn .seg-o { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); color: var(--ink-3); } .v3 .bar .nav-unit-btn .seg-o.on { background: var(--s0); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .v3 .bar .nav-theme-btn .tf-sun, .v3 .bar .nav-theme-btn .tf-moon { display: block; width: 30px; height: 24px; padding: 5px 8px; box-sizing: border-box; border-radius: var(--r-pill); color: var(--ink-3); } html[data-theme="light"] .v3 .bar .nav-theme-btn .tf-sun, html[data-theme="dark"] .v3 .bar .nav-theme-btn .tf-moon { background: var(--s0); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } @media (max-width: 1200px) { .v3 .bar .nav-isl-nm { display: none; } .v3 .bar .secondary-nav .nav-fave-flag { padding: 7px 6px; } } .v3 .bar .nav-dropdown-btn { background: var(--act-wash); color: var(--ink); font-weight: 600; font-size: var(--t-sm); height: 32px; border-radius: var(--r-ctl); } .v3 .bar .nav-dropdown-panel { background: var(--s0); border-color: var(--line); box-shadow: var(--shadow-float); } /* The island list scrolls inside .nav-pin-scroll (shared.js); the panel itself does not, so a fade painted on its bottom edge stays put on every browser (a sticky pseudo-element did not on iPhone, and a mask made the panel see-through). The fade is phone-only, below. (Hayden, 6 Sep 2026) */ .v3 .bar .nav-pin-panel { overflow: hidden; max-height: none; } .v3 .bar .nav-pin-scroll { max-height: 320px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .v3 .bar .nav-pin-scroll::-webkit-scrollbar { width: 5px; } .v3 .bar .nav-pin-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .v3 .bar .nav-dropdown-panel a { color: var(--ink-2); font-weight: 500; font-size: var(--t-sm); } .v3 .bar .nav-dropdown-panel a.active { background: var(--s1); color: var(--ink); } .v3 .bar .nav-badge { box-shadow: 0 0 0 2px var(--s0); } /* page header: the favourite star sits before the title, as it did in the old header */ .v3 .page-h .fav-toggle { font-size: 0.7em; vertical-align: 0.15em; margin-right: 4px; color: var(--ink-4); } .v3 .page-h .fav-toggle.pinned { color: var(--tier-1); } /* the column's signup form */ .v3 .v3-sub { display: flex; flex-direction: column; gap: 6px; } .v3 .v3-sub input { width: 100%; } /* the old in-page signup box is replaced by the column and the phone block */ .v3 #subscribeContainer { display: none !important; } .v3 .skip-link { background: var(--act); color: var(--act-ink); } /* ------------------------------------------------------------------------- 3.1 accounts: the bar icon, the sign-in sheet, votes on the best-time strip, notices and shout-outs in the column, the account and shout-out pages ------------------------------------------------------------------------- */ .v3 .bar .nav-acct { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; margin: 0; line-height: 0; box-sizing: border-box; border-radius: var(--r-pill); color: var(--ink-3); text-decoration: none; } .v3 .bar .nav-acct svg { display: block; } .v3 .bar .nav-acct:hover { background: var(--act-wash); color: var(--ink); text-decoration: none; } .v3 .bar .nav-acct .nav-acct-av { width: 26px; height: 26px; border-radius: 50%; background: var(--act); color: var(--act-ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; } /* The phone menu's account row and its two labelled switch rows (Hayden's pick, 6 Sep, "labelled rows"). */ .v3 .bar .nav-dropdown-panel a.nav-acct-row { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); } .v3 .bar .nav-acct-row .nav-acct-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--s2); color: var(--ink-3); display: inline-grid; place-items: center; flex: none; } .v3 .bar .nav-acct-row .nav-acct-ic svg { display: block; } .v3 .bar .nav-acct-row .nav-acct-ic.on { background: var(--act); color: var(--act-ink); font-size: 12px; font-weight: 700; } .v3 .bar .nav-acct-row .nav-acct-tx { line-height: 1.2; } .v3 .bar .nav-acct-row .nav-acct-tx small { display: block; font-weight: 400; color: var(--ink-4); font-size: 11px; } .v3 .bar .nav-acct-row .nav-acct-chev { margin-left: auto; color: var(--ink-4); font-weight: 400; } .v3 .bar .nav-set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; } .v3 .bar .nav-set-lab { font-size: var(--t-sm); color: var(--ink-3); font-weight: 500; } .v3 .bar .nav-seg { display: inline-flex; align-items: center; height: 28px; padding: 2px; border-radius: var(--r-pill); background: var(--s2); } .v3 .bar .nav-dropdown-panel .nav-seg a { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); color: var(--ink-3); font-weight: 600; font-size: 11.5px; background: transparent; line-height: 1; } .v3 .bar .nav-dropdown-panel .nav-seg a svg { display: block; } .v3 .bar .nav-dropdown-panel .nav-seg a.active { background: var(--s0); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .v3 .bar .nav-dropdown-panel .nav-seg a:hover { color: var(--ink); } .v3 .acct-sheet { position: fixed; inset: 0; z-index: 1200; background: rgba(21, 27, 35, 0.45); display: flex; align-items: flex-end; justify-content: center; padding: 12px; } .v3 .acct-sheet[hidden] { display: none; } .v3 .acct-sheet-in { position: relative; width: 100%; max-width: 380px; background: var(--s0); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float); padding: 16px 18px 14px; } .v3 .acct-sheet-in h4 { font-size: var(--t-base); color: var(--ink); margin: 0 22px 4px 0; font-weight: 600; } .v3 .acct-sheet-d, .v3 .acct-sheet-fine { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 10px; } .v3 .acct-sheet-fine { font-size: var(--t-xs); color: var(--ink-4); margin: 10px 0 0; } .v3 .acct-sheet-form { display: flex; flex-direction: column; gap: 6px; } .v3 .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot: bots only (7 Sep 2026) */ .v3 .so-how { border: 0; margin: 0; padding: 0; display: grid; gap: 3px; } .v3 .so-how legend { padding: 0; font-size: var(--t-xs); color: var(--ink-3); } .v3 .so-how label { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; line-height: 1.4; } .v3 .acct-sheet-form .so-how input[type="radio"] { width: auto; flex: none; margin: 2px 0 0; padding: 0; border: 0; background: none; } .v3 .acct-sheet-form input, .v3 .acct-sheet-form select, .v3 .acct-sheet-form textarea { font: inherit; font-size: var(--t-sm); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--s0); color: var(--ink); width: 100%; } .v3 .acct-sheet-form textarea { resize: vertical; min-height: 72px; } .v3 .acct-sheet-form label.t-sm { display: flex; flex-direction: column; gap: 4px; color: var(--ink-3); } .v3 .acct-sheet-form .ctl { justify-content: center; height: 34px; } .v3 .acct-sheet-form[hidden] { display: none; } /* the reply to "Send me a sign-in link" reads as a result, not a footnote (Hayden, 5 Sep) */ .v3 .acct-sheet-msg { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--s1); color: var(--ink); font-size: var(--t-sm); line-height: 1.5; } .v3 .acct-sheet-msg.ok { background: var(--sign-bg); border-color: var(--sign-line); border-left: 3px solid var(--fresh); font-weight: 600; } .v3 .acct-sheet-msg.ok a { display: inline-block; margin-top: 4px; font-weight: 500; } .v3 .acct-sheet-msg.bad { border-left: 3px solid var(--crit); color: var(--ink); } .v3 .acct-sheet-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); } .v3 .acct-sheet-list li::before { content: "✓"; color: var(--fresh); font-weight: 700; margin-right: 6px; } @media (min-width: 700px) { .v3 .acct-sheet { align-items: center; } } /* votes on the best-time strip: a heart under every month, the count once the island has enough votes, the readers' pick in pink, never green (a vote is readers, never measurement) */ .v3 .strip .m.pick { outline: 2px solid var(--c-feel); outline-offset: -2px; } .v3 .best-line .tag, .v3 .readers .tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; color: var(--c-feel); background: rgba(209, 34, 107, 0.10); border-radius: var(--r-pill); padding: 1px 8px; vertical-align: 1px; } .v3 .readers .tag.you { color: var(--act); background: var(--act-wash); } /* the readers' strip under the record (option 3, Hayden 5 Sep): a dashed rule, one heart per month as the vote button, bars and counts only once the island has 10 votes */ .v3 .readers { margin: 2px 0 12px; border-top: 1px dashed var(--line); padding-top: 10px; } .v3 .readers[hidden] { display: none; } .v3 .readers .lab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 6px; } .v3 .readers .lab b { color: var(--ink); font-size: var(--t-sm); } .v3 .readers .lab .dim { color: var(--ink-4); } .v3 .readers .lab .rb-vote { margin-left: auto; } @media (max-width: 640px) { .v3 .readers .lab .rb-vote { margin-left: 0; } } /* phones: the row wraps, so the button sits at the left under the words, not alone at the right edge (Hayden, 8 Sep 2026) */ .v3 .ctl.vote { color: var(--c-feel); border-color: color-mix(in srgb, var(--c-feel) 45%, var(--line)); background: var(--s0); height: 28px; font-size: var(--t-xs); } .v3 .ctl.vote:hover { background: rgba(209, 34, 107, 0.10); } .v3 .rbars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; align-items: end; } .v3 .rbars .rb { border: 0; background: transparent; padding: 4px 0 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; border-radius: 6px; min-height: 26px; font: inherit; } .v3 .rbars .rb:hover { background: rgba(209, 34, 107, 0.08); } .v3 .rbars .bar { width: 60%; background: rgba(209, 34, 107, 0.22); border-radius: 3px 3px 0 0; } .v3 .rbars .rb.on .bar { background: var(--c-feel); } .v3 .rbars .h { font-size: 13px; color: var(--c-feel); line-height: 1; white-space: nowrap; } .v3 .rbars .rb.on .h { font-size: 14px; } .v3 .rbars .h i { font-style: normal; font-size: 10px; margin-left: 1px; color: var(--ink-3); } .v3 .rbars .rm { display: none; } /* phones: the months above wrap into two rows of six, so the hearts do the same and each names its month (Hayden, 6 Sep) */ @media (max-width: 640px) { .v3 .rbars { grid-template-columns: repeat(6, 1fr); row-gap: 6px; } .v3 .rbars .rm { display: block; font-size: 10px; color: var(--ink-4); line-height: 1; margin-top: 2px; } .v3 .rbars .rb.on .rm { color: var(--ink-2); font-weight: 600; } } /* the guide link as the 3.0 panel the rankings section uses, with the island's flag */ .v3 .cm-guide { display: flex; align-items: center; gap: 12px; } .v3 .cm-guide .cta-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35); flex: 0 0 auto; } /* the presence box leads with the live count (Hayden, 5 Sep) */ .v3 .presence .pres-now { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); margin: 2px 0 6px; } .v3 .presence .pres-now b { color: var(--ink); font-size: var(--t-md); } /* the account column: the reader's pinned islands, one row each */ .v3 .pins-box .pin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--ink-2); font-size: var(--t-sm); align-items: center; } .v3 .pins-box .pin-row:first-of-type { border-top: 0; } .v3 .pins-box .pin-row:hover .pin-name { text-decoration: underline; } .v3 .pins-box .pin-name { color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 6px; } .v3 .pins-box .pin-name .flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35); width: 18px; height: 13px; } .v3 .pins-box .pin-sky { grid-column: 1; color: var(--ink-3); font-size: var(--t-xs); } .v3 .pins-box .pin-temp { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .v3 .pins-box .pin-temp b { color: var(--ink); font-size: var(--t-md); font-weight: 600; } .v3 .pins-box .pin-temp .feels-pill { font-style: normal; display: inline-block; font-size: 11px; padding: 0 6px; border-radius: var(--r-pill); min-width: 0; } /* the on/off switch on the account page */ .v3 .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .v3 .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .v3 .switch .sw { position: relative; width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--s2); border: 1px solid var(--line); transition: background 0.15s; } .v3 .switch .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--s0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; } .v3 .switch input:checked + .sw { background: var(--fresh); border-color: var(--fresh); } .v3 .switch input:checked + .sw::after { transform: translateX(18px); } .v3 .switch input:focus-visible + .sw { outline: 2px solid var(--act); outline-offset: 2px; } .v3 .switch .sw-l { font-weight: 600; color: var(--ink); font-size: var(--t-sm); min-width: 22px; } /* the sign-in overlay dims and blurs the page behind it so the one field is the focus (Hayden, 5 Sep) */ .v3 .acct-sheet { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } html[data-theme="dark"] .v3 .acct-sheet { background: rgba(21, 27, 35, 0.62); } /* notices and shout-outs in the column, and in the phone flow (.subblk.plain) */ .v3 .col .box.note, .v3 .subblk.note { border-left: 3px solid var(--tier-2); } .v3 .note .note-t { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: var(--t-sm); margin-bottom: 3px; } .v3 .note .chip { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tier-2); border: 1px solid color-mix(in srgb, var(--tier-2) 45%, var(--line)); border-radius: var(--r-pill); padding: 0 6px; font-weight: 600; } .v3 .note .note-b { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; } .v3 .note .note-f { color: var(--ink-4); font-size: 11px; margin-top: 6px; } .v3 .shout .who { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-3); margin-top: 6px; } .v3 .shout .who b { color: var(--ink); font-weight: 600; } .v3 .shout .who .flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.35); } .v3 .shout .msg { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; margin-top: 2px; } .v3 .shout .msg.dim { color: var(--ink-4); } .v3 .shout .more { display: inline-block; margin-top: 8px; font-size: var(--t-xs); color: var(--act); text-decoration: none; } .v3 .shout .feed { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line-2); } /* the messages under the invitation */ .v3 .shout .more[hidden], .v3 .shout .feed[hidden] { display: none; } /* "Show messages" steps aside once the feed is open */ .v3 .shout .more:hover { text-decoration: underline; } .v3 .subblk.plain { display: none; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-box); padding: 14px 16px; margin-top: var(--sp-5); } .v3 .subblk.plain h4 { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; margin-bottom: 4px; } @media (max-width: 1100px) { .v3 .subblk.plain { display: block; } } /* the account page and the shout-outs page */ .v3 .acct-page .acct-form { max-width: 560px; } .v3 .acct-page .acct-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .v3 .acct-page .acct-row input[type="email"], .v3 .acct-page .acct-row input[type="text"] { flex: 1 1 220px; } .v3 .acct-page input[type="email"], .v3 .acct-page input[type="text"], .v3 .acct-page select, .v3 .acct-page textarea { font: inherit; font-size: var(--t-sm); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--s0); color: var(--ink); } .v3 .acct-page textarea { width: 100%; max-width: 560px; margin: 8px 0; resize: vertical; } .v3 .acct-page label.t-sm { color: var(--ink-3); display: inline-block; margin-bottom: 4px; } .v3 .acct-perks { margin: 16px 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--t-sm); color: var(--ink-2); max-width: 560px; } .v3 .acct-perks li::before { content: "✓"; color: var(--fresh); font-weight: 700; margin-right: 8px; } .v3 .acct-flash { margin: 0 0 16px; } .v3 .acct-flash.ok { border-left-color: var(--fresh); } .v3 .acct-flash.bad { border-left-color: var(--crit); } .v3 .acct-list { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-box); padding: 4px 18px; } .v3 .acct-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: var(--t-sm); align-items: start; } .v3 .acct-item:first-child { border-top: 0; } .v3 .acct-item .k { color: var(--ink-3); padding-top: 6px; } .v3 .acct-item .v { color: var(--ink); } .v3 .acct-item .acct-note { grid-column: 2; margin-top: -2px; } .v3 .acct-item .dim, .v3 .dim { color: var(--ink-4); } .v3 .acct-item .acct-actions { gap: 10px; } .v3 .acct-item .acct-actions form { display: inline-flex; align-items: center; gap: 8px; margin: 0; } .v3 .acct-item .acct-delete { flex-basis: 100%; flex-wrap: wrap; } .v3 .ctl.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); } .v3 .acct-shouts { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 8px; } .v3 .shout-list { display: grid; gap: 14px; max-width: 720px; } .v3 .shout-list .shout { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-box); padding: 10px 14px 12px; } .v3 .shout-list .shout .who { margin-top: 0; font-size: var(--t-sm); } .v3 .shout-list .shout .msg { font-size: var(--t-base); margin-top: 4px; } @media (max-width: 600px) { .v3 .acct-item { grid-template-columns: 1fr; } .v3 .acct-item .acct-note { grid-column: 1; } .v3 .acct-item .k { padding-top: 0; } } /* phone: the pin control shows its star only; the label made the bar wrap */ @media (max-width: 600px) { .v3 .bar .nav-faves { min-width: 0 !important; } /* the favourites, pin and page-menu panels open flush with their button's right edge on a phone (Hayden, 5 Sep: half the names and the X were off-screen; 6 Sep: the page menu, centred under its button, ran off the right edge too) */ .v3 .bar .nav-faves .nav-dropdown-panel, .v3 .bar .nav-pin-panel, .v3 .bar .nav-dropdown .nav-dropdown-panel { left: auto; right: 0; transform: none; max-width: calc(100vw - 28px); } /* the island list is taller than its box, and phones hide the scrollbar until you scroll: the bottom 64px of the panel fade the rows into the panel's own white, only while there is more below (.has-more, shared.js) (Hayden, 6 Sep) */ .v3 .bar .nav-pin-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(to top, var(--s0), transparent); pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } .v3 .bar .nav-pin-panel.has-more::after { opacity: 1; } .v3 .bar .nav-faves { position: relative; } .v3 .bar .nav-pin-btn, .v3 .bar .nav-manage-btn { white-space: nowrap; font-size: var(--t-xs); padding: 4px 6px; } .v3 .bar .nav-faves-label { display: none; } /* the phone bar has no menu row, so no hairline before the pins, and the shorter pin words */ .v3 .bar .nav-faves-sep { display: none; } .v3 .bar .nav-pin-words .w-full { display: none; } .v3 .bar .nav-pin-words .w-short { display: inline; } .v3 .bar .nav-fave-add-icon { width: 16px; height: 16px; font-size: 12px; } /* Layout C (Hayden's pick, 5 Sep): brand left, then the pins and the section button gathered on the right, pins first. The button keeps naming the section you are on (Home, Outlook, Map…) and reserves the width of its longest word, so switching pages never nudges the flags. */ .v3 .bar .in { gap: 8px; } .v3 .bar .secondary-nav { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; gap: 6px; } .v3 .bar .nav-faves { order: 1; margin-left: 0; } .v3 .bar .nav-dropdown { order: 2; } .v3 .bar .nav-units { order: 3; } .v3 .bar .nav-dropdown-btn { min-width: 7rem; } .v3 .bar .nav-fave-flag { padding: 4px 3px; } } /* ------------------------------------------------------------------------- Island page sections during migration: the old markup inside the new shell. Sections are no longer cards; blocks get the 3.0 rhythm; the conditions tiles sit on the inset surface without borders. ------------------------------------------------------------------------- */ /* Section rhythm (Hayden, 5 Sep): the same space under the hairline as above it, less between sections than before, and less again after a hero picture, which ends in a credit line, not a paragraph. */ .v3 main > section, .v3 main > .blk { margin: 0; padding-top: 32px; } .v3 main > section:first-of-type, .v3 main > .page-h + section, .v3 main > .page-h + .blk, .v3 main > .page-h + .pres-line + section, .v3 main > .page-h + .pres-line + .blk { padding-top: var(--sp-4); } .v3 main > #satellite + section, .v3 main > #satellite + .blk { padding-top: 20px; } .v3 .met-office { background: transparent; border: 0; box-shadow: none; padding: 0; margin-top: 0; } .v3 .met-office h2 { margin-top: 0; } .v3 main h2 { font-size: var(--t-lg); font-weight: 600; color: var(--ink); margin: 0 0 var(--sp-3); } .v3 main h3 { font-size: var(--t-md); font-weight: 600; color: var(--ink); } .v3 .cw-card { background: transparent; border: 0; box-shadow: none; padding: 0; } .v3 .cw-hero { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-box); } .v3 .cw-tile { background: var(--s2); border: 0; box-shadow: none; border-radius: var(--r-ctl); } .v3 .cw-tile-head { color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; font-size: var(--t-xs); } .v3 .cw-tile-val { color: var(--ink); } .v3 .cw-tile-sub { color: var(--ink-3); } .v3 .cw-hero-temp { color: var(--ink); letter-spacing: -0.03em; } /* one-tap reader questions (Hayden, 6 Sep): a quiet line with Yes / No, or the thanks once answered */ .v3 .rq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-3); } .v3 .rq.thanks { color: var(--fresh); font-weight: 500; } .v3 .rq.busy { opacity: 0.6; } .v3 .rq-yn { display: inline-flex; gap: 4px; margin-left: auto; } .v3 .rq-b { font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); background: var(--s0); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 10px; cursor: pointer; } .v3 .rq-b:hover { border-color: var(--act); color: var(--act); } .v3 .rq.rq-tile { border-top-color: rgba(21, 27, 35, 0.08); font-size: var(--t-xs); margin-top: 6px; padding-top: 6px; } .v3 .rq.rq-tile .rq-b { padding: 1px 8px; font-size: 11px; } .v3 .rq.rq-post { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin: 18px 0; font-size: var(--t-base); color: var(--ink-2); } .v3 .rq.rq-post .rq-q { font-weight: 600; color: var(--ink); } .v3 .rq.rq-post .rq-yn { margin-left: 0; gap: 6px; } .v3 .rq.rq-post .rq-b { font-size: var(--t-sm); padding: 4px 14px; } .v3 .rq.rq-post .rq-n { color: var(--ink-4); font-size: var(--t-xs); margin-left: auto; } .v3 .hour-card { background: var(--s1); border: 0; box-shadow: none; border-radius: var(--r-ctl); } .v3 .forecast-summary { color: var(--ink-3); font-style: normal; } .v3 main .chart-controls, .v3 main .hl-box, .v3 .weather-history .chart-controls { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 12px; } .v3 main .chart-controls .control-group label, .v3 main .hl-box .control-group label { color: var(--ink-3); font-weight: 500; font-size: var(--t-sm); } /* the history controls as one row with the share button at its right end (Hayden, 5 Sep) */ .v3 .weather-history .chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .v3 .weather-history .chart-controls .chart-range-note { flex-basis: 100%; margin: 0; } .v3 main .chart-range-note { color: var(--ink-3); font-size: var(--t-sm); } .v3 .chart-description, .v3 .hl-description, .v3 .resources-desc { color: var(--ink-3); font-size: var(--t-sm); } .v3 .island-resources-row > section { background: transparent; border: 0; box-shadow: none; padding: 0; } .v3 .storm-map-link, .v3 .quiet-map img { border-radius: var(--r-box); }