/* Edmonton Daily Brief — the now dial * * IN THE PAPER'S OWN COLOURS AND TYPE (owner, 2026-10-21): brief.css's tokens, * so the dial follows the reader's stock, cream or dark. Source Sans 3 for the * instrument, Newsreader for its few headings and readouts. * * THE ALMANAC PALETTE (owner's choice, 2026-10-21, from four a design review * proposed): a farmer's-almanac plate tipped into the paper — a warmer stock, * sepia-black type, a brass rule. The widget's colours differ slightly from the * page's; its type does not (the house's Newsreader and Source Sans). * * ONE COLOUR, ONE MEANING, across the whole instrument: * --nd-now rubric red ("a red-letter day") the present moment, and nothing else * --nd-sun brass the sun * --nd-moon warm grey the moon * --nd-planet plum planets * --nd-temp iron-gall indigo temperature (measured solid, forecast dashed) * --nd-rain verdigris precipitation * Now and temperature sit on opposite sides of the blue-yellow axis, so they * stay apart for red-green colour-blind readers (CIEDE2000 37+ under * deuteranopia and protanopia in both stocks). Every data ink holds 5:1 or * better on its stock. * * A HUD, NOT A PAGE OF PROSE: values and short labels on screen; every * sentence is a tooltip (hover, tap or focus) or behind an (i). * * TEXT IS SET IN CSS PIXELS, NEVER INSIDE A SCALED DRAWING: the canvas draws * marks, the DOM sets every word. */ .nd { --nd-small: 12px; --nd-tiny: 11px; --nd-sky-ink: #F6EFDF; --nd-sky-halo: #1C1712; --nd-sky-day: #788C95; --nd-sky-civil: #6A6A7E; --nd-sky-nautical: #43445A; --nd-sky-astro: #2A2A3A; --nd-sky-night: #1A1A25; --nd-sky-sun: #E6B04A; --nd-sky-moon: #F2E8D2; --nd-sky-planet: #E09A9A; --nd-sky-ground: #1C1712; --nd-bg: #ECE3CF; --nd-panel: #E0D4BA; --nd-ink: #231C14; --nd-ink2: #4A3F31; --nd-mute: #64563F; --nd-rule: #BCA984; --nd-now: #A3221B; --nd-sun: #7A5411; --nd-moon: #5E5A55; --nd-planet: #6D3765; --nd-temp: #2C4876; --nd-rain: #1D6A62; /* No card (crit, 2026-10-23): the section's own rule above it frames it; the almanac tint stays, square to the column. */ position: relative; background: var(--nd-bg); color: var(--nd-ink); padding: 12px 14px 10px; font: 13px/1.4 var(--sans, system-ui, sans-serif); -webkit-user-select: none; user-select: none; margin: 8px 0 24px; isolation: isolate; } :root[data-theme="dark"] .nd { --nd-sky-ink: #F6EFDF; --nd-sky-halo: #1C1712; --nd-sky-day: #788C95; --nd-sky-civil: #6A6A7E; --nd-sky-nautical: #43445A; --nd-sky-astro: #2A2A3A; --nd-sky-night: #1A1A25; --nd-sky-sun: #E6B04A; --nd-sky-moon: #F2E8D2; --nd-sky-planet: #E09A9A; --nd-sky-ground: #1C1712; --nd-bg: #10222E; --nd-panel: #162C3A; --nd-ink: #EFE7D6; --nd-ink2: #C6BCA8; --nd-mute: #948D7C; --nd-rule: #2F4E63; --nd-now: #F17F80; --nd-sun: #D69B2B; --nd-moon: #C6BCA8; --nd-planet: #D79BCB; --nd-temp: #9DB6EE; --nd-rain: #5FC9B8; } .nd *, .nd *::before, .nd *::after { box-sizing: border-box; } .nd button { font: inherit; color: inherit; } .nd-noscript { color: var(--nd-ink2); } .nd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* readouts */ .nd-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--nd-rule); } .nd-fact { cursor: help; outline: none; border-radius: 4px; } .nd-fact:focus-visible { box-shadow: 0 0 0 2px var(--nd-now); } .nd-fact b { display: block; font-size: var(--nd-small); font-weight: 600; color: var(--nd-mute); letter-spacing: .06em; text-transform: uppercase; } .nd-fact span { display: block; font-family: var(--serif, Georgia, serif); font-size: 24px; font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; } .nd-fact--now span { color: var(--nd-now); } .nd-fact--temp span { color: var(--nd-temp); } .nd-fact--sun span { color: var(--nd-sun); } /* THE HEAD OF EACH PANEL, SET AS A DATELINE, NOT AS PILLS. The title in the paper's serif, then each value in the sans, spaced apart (a middot leading a wrapped line read as litter); a value that has words behind it is underlined with dots, as a gloss would be. */ .nd-hud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: 0 0 8px; } .nd-chip { display: inline-block; font-size: var(--nd-small); color: var(--nd-ink2); line-height: 20px; white-space: nowrap; } .nd-chip.nd-has-tip { text-decoration: underline dotted var(--nd-rule); text-decoration-thickness: 1px; text-underline-offset: 4px; } .nd-chip-strong { font-family: var(--serif, Georgia, serif); font-size: 17px; font-weight: 600; color: var(--nd-ink); margin-right: 4px; text-decoration: none !important; } .nd-chip-alt { font-style: italic; } .nd-hud .nd-i { align-self: center; } .nd-has-tip { cursor: help; } .nd-i { display: inline-flex; align-items: center; justify-content: center; width: 18px !important; height: 18px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0; box-sizing: border-box; border: 1px solid var(--nd-mute); border-radius: 50%; background: transparent; color: var(--nd-mute) !important; font: italic 600 var(--nd-tiny)/1 var(--serif, Georgia, serif) !important; cursor: help; flex: none; } .nd-i:hover, .nd-i:focus-visible { border-color: var(--nd-ink); color: var(--nd-ink) !important; outline: none; } /* the sky */ .nd-cosmos { border-top: 1px solid var(--nd-rule); padding-top: 10px; } .nd-skywrap { position: relative; touch-action: pan-y; } /* every surface that scrubs time says so under the pointer */ .nd-grip { cursor: grab; touch-action: pan-y; } .nd-grip.nd-grabbing { cursor: grabbing; } .nd-sky { display: block; width: 100%; border-radius: 4px; } .nd-skywrap .nd-lab-l { color: var(--nd-sky-ink); text-shadow: 0 0 2px var(--nd-sky-halo), 0 0 3px var(--nd-sky-halo), 1px 1px 0 var(--nd-sky-halo), -1px -1px 0 var(--nd-sky-halo), 1px -1px 0 var(--nd-sky-halo), -1px 1px 0 var(--nd-sky-halo); } .nd-skywrap .nd-lab-l.nd-sun { color: #f7c548; } .nd-skywrap .nd-lab-l.nd-moon { color: #dfe5f3; } .nd-skywrap .nd-lab-l.nd-planet { color: #c3a6ff; } .nd-skywrap .nd-lab-l.nd-fig { color: #b9c6ea; } .nd-skywrap .nd-lab-l.nd-t { color: #fff; } /* A word over a light ground (nowdial.js judges each word by the pixels under it: cloud over the sky's colour): the page's inks on a pale halo. Fixed values, not the stock's tokens: the sky is painted the same in either stock. The compass bar is always dark and is never judged. */ .nd-skywrap .nd-lab-l.nd-onlight { color: #231C14; text-shadow: 0 0 2px #EEE9DF, 0 0 3px #EEE9DF, 1px 1px 0 #EEE9DF, -1px -1px 0 #EEE9DF, 1px -1px 0 #EEE9DF, -1px 1px 0 #EEE9DF; } /* Each held to 4.75:1 against the DARKEST ground that earns .onlight (luminance 0.33, nowdial.js): the first values cleared the bright overcast they were drawn on and fell to 3.7-4.3:1 at the threshold. The moon's #3A3833 was read at 4.23 on a noon sky the evening before a full moon (25 Oct 2026). */ .nd-skywrap .nd-lab-l.nd-onlight.nd-sun { color: #422C07; } .nd-skywrap .nd-lab-l.nd-onlight.nd-moon { color: #32302C; } .nd-skywrap .nd-lab-l.nd-onlight.nd-planet { color: #472442; } .nd-skywrap .nd-lab-l.nd-onlight.nd-fig { color: #273043; } /* THE FOUR PILLARS, SET AS AN ALMANAC TABLE. Four columns under hairline rules, no cards. Each column: its name, the Day Master's mark where it applies, the seal printed into the paper, then the stem and the branch, each as pinyin over the character over its meaning. The cells share rows (subgrid), so every stem and every branch sits on one line across the four columns whatever a column carries above it. */ .nd-pl { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--nd-rule); } .nd-pl-band { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: start; } .nd-pl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 118px)); grid-template-rows: repeat(5, auto); flex: none; } .nd-cell { display: grid; grid-row: span 5; grid-template-rows: subgrid; justify-items: center; text-align: center; padding: 2px 12px 6px; min-width: 0; cursor: help; outline: none; border-left: 1px solid var(--nd-rule); transition: background-color .4s; } .nd-cell:first-child { border-left: 0; } .nd-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--nd-now); border-radius: 2px; } .nd-cell .nd-range { white-space: nowrap; } .nd-cell > i { grid-row: 1; font-style: normal; font-size: var(--nd-tiny); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nd-mute); white-space: nowrap; } .nd-cell .dm { grid-row: 2; font-size: var(--nd-tiny); letter-spacing: .08em; text-transform: uppercase; color: var(--nd-now); font-weight: 600; margin-top: 2px; } /* the seal: 128 px art at 64, one to one on a 2x screen. Its paper is transparent, so only the vermilion impression prints on the page; on the dark stock (theme.js sets data-theme; the house follows no media query) it is pressed onto a slip of paper, where red ink can be seen. */ .nd-art { grid-row: 3; width: 64px; height: 64px; margin: 8px 0 6px; cursor: help; box-sizing: content-box; } .nd-art[hidden] { display: block; visibility: hidden; } :root[data-theme="dark"] .nd-art { background: #F1EADB; padding: 3px; margin: 5px 0 3px; border-radius: 2px; } .nd-glyph { display: flex; flex-direction: column; align-items: center; } .nd-glyph:nth-of-type(1) { grid-row: 4; } .nd-glyph:nth-of-type(2) { grid-row: 5; margin-top: 10px; } .nd-cell .py { font-size: var(--nd-small); line-height: 16px; color: var(--nd-ink2); font-style: italic; } .nd-cell .ch { font-size: 30px; line-height: 1.12; color: var(--nd-ink); font-family: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "PingFang SC", serif; } .nd-cell .en { font-size: var(--nd-small); line-height: 16px; color: var(--nd-mute); white-space: nowrap; } .nd-cell.nd-flip { background-color: var(--nd-panel); } /* THE FIVE ELEMENTS, AS A LEDGER: character, name, then a dot for each of the chart's eight characters of that element (filled) and each stem hidden in its branches (open). The Day Master's element is marked "self". */ .nd-els { flex: 1 1 230px; max-width: 340px; display: grid; grid-template-columns: 26px 64px 1fr; row-gap: 4px; align-items: center; padding-top: 4px; } .nd-el { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; cursor: help; outline: none; border-radius: 2px; } .nd-el:focus-visible { box-shadow: 0 0 0 2px var(--nd-now); } .nd-el-ch { font: 18px/1.3 "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "PingFang SC", serif; color: var(--nd-ink); } .nd-el-name { font-size: var(--nd-small); color: var(--nd-ink2); white-space: nowrap; } .nd-el-sq { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 18px; } .nd-el-sq i { width: 9px; height: 9px; border: 1.25px solid var(--nd-ink2); border-radius: 50%; box-sizing: border-box; } .nd-el-sq i.on { background: var(--nd-ink); border-color: var(--nd-ink); } .nd-el-dm .nd-el-name { color: var(--nd-ink); font-weight: 600; } .nd-el-dm .nd-el-sq::after { content: 'day stem'; margin-left: 6px; font-size: var(--nd-tiny); letter-spacing: .08em; text-transform: uppercase; color: var(--nd-now); font-weight: 600; } /* the time strip */ .nd-ribbon { position: relative; margin-top: 14px; border-top: 1px solid var(--nd-rule); touch-action: pan-y; cursor: grab; outline: none; } .nd-ribbon:focus-visible { box-shadow: 0 0 0 2px var(--nd-now); border-radius: 4px; } .nd-ribbon.nd-grabbing { cursor: grabbing; } .nd-rib { display: block; width: 100%; } .nd-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .nd-lab-l { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; font-size: var(--nd-small); line-height: 16px; color: var(--nd-ink2); will-change: transform; text-shadow: 0 0 2px var(--nd-bg), 0 0 3px var(--nd-bg), 0 0 4px var(--nd-bg), 1px 1px 0 var(--nd-bg), -1px -1px 0 var(--nd-bg), 1px -1px 0 var(--nd-bg), -1px 1px 0 var(--nd-bg); } .nd-lab-l.nd-t { color: var(--nd-ink); font-weight: 600; } .nd-lab-l.nd-sun { color: var(--nd-sun); } .nd-lab-l.nd-moon { color: var(--nd-moon); } .nd-lab-l.nd-planet { color: var(--nd-planet); } .nd-lab-l.nd-temp { color: var(--nd-temp); } .nd-lab-l.nd-rain { color: var(--nd-rain); } .nd-lab-l.nd-hot { color: var(--nd-now); font-weight: 600; } .nd-lab-l.nd-ev { color: var(--nd-ink); } .nd-lab-l.nd-fig { color: var(--nd-ink2); } /* words on the sky band take the sky's own ink and halo, in either stock */ /* a word on a light phase of the sky band: dark and plain */ .nd-lab-l.nd-skyd { color: #1C1712; text-shadow: none; } .nd-lab-l.nd-sky { color: var(--nd-sky-ink); text-shadow: 0 0 2px var(--nd-sky-halo), 1px 1px 0 var(--nd-sky-halo), -1px -1px 0 var(--nd-sky-halo), 1px -1px 0 var(--nd-sky-halo), -1px 1px 0 var(--nd-sky-halo); } .nd-lab-l.nd-cjk { font-family: "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "PingFang SC", serif; color: var(--nd-ink); } .nd-nowpill { position: absolute; top: 4px; left: 0; height: 22px; padding: 0 10px; border: 0; border-radius: 11px; background: var(--nd-now); color: var(--nd-now-ink); font-weight: 700; font-size: var(--nd-small); cursor: grab; touch-action: none; white-space: nowrap; z-index: 3; } .nd-nowpill:active { cursor: grabbing; } /* The drawn size. The house's touch floor for buttons once swelled these into 60 px slabs over the strip, so they are pinned here; on a coarse pointer the block at the end of this file gives each a 44 px box with the pill painted inside it, which the floor asks for and the look keeps. */ .nd .nd-nowpill, .nd .nd-edge { height: 22px !important; min-height: 0 !important; min-width: 0 !important; padding: 0 10px !important; line-height: 22px !important; margin: 0 !important; } .nd .nd-controls button:not(.nd-i) { min-height: 26px !important; padding: 2px 10px !important; line-height: 20px; } .nd-viewpill { position: absolute; top: 4px; left: 0; height: 22px; padding: 0 10px; border: 1.5px solid var(--nd-ink); border-radius: 11px; background: var(--nd-bg); color: var(--nd-ink); font-size: var(--nd-small); line-height: 19px; white-space: nowrap; pointer-events: none; z-index: 2; } .nd-ghost { position: absolute; top: 30px; left: 0; padding: 2px 8px; border-radius: 4px; background: var(--nd-now); color: var(--nd-now-ink); font-size: var(--nd-small); font-weight: 700; white-space: nowrap; pointer-events: none; z-index: 4; } .nd-edge { position: absolute; top: 4px; height: 22px; padding: 0 10px; border: 0; border-radius: 11px; background: var(--nd-now); color: var(--nd-now-ink); font-size: var(--nd-small); font-weight: 700; cursor: pointer; z-index: 3; } .nd-hint { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); padding: 3px 10px; border-radius: 4px; background: var(--nd-ink); color: var(--nd-bg); font-size: var(--nd-small); pointer-events: none; white-space: nowrap; transition: opacity .4s; z-index: 4; } .nd-hint[hidden] { display: block; opacity: 0; } .nd-controls { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 8px; } .nd-controls button:not(.nd-i) { border: 1px solid var(--nd-rule); background: transparent; border-radius: 999px; padding: 2px 10px; font-size: var(--nd-small); color: var(--nd-ink2); cursor: pointer; min-height: 26px; } .nd-controls button[aria-pressed="true"] { background: var(--nd-ink); color: var(--nd-bg); border-color: var(--nd-ink); } .nd-controls .nd-back { color: var(--nd-now) !important; border-color: var(--nd-now) !important; margin-left: 6px; } .nd-controls .nd-i-key { margin-left: 6px; } .nd-tip { position: absolute; z-index: 10; max-width: 320px; padding: 8px 10px; border-radius: 4px; background: var(--nd-ink); color: var(--nd-bg); font-size: var(--nd-small); line-height: 1.45; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); user-select: text; } .nd-tip a { color: inherit; text-decoration: underline; } .nd-tip.pinned { pointer-events: auto; } .nd-go { margin-left: 6px; border: 1px solid currentColor; border-radius: 4px; background: transparent; font-size: var(--nd-small); padding: 0 6px; cursor: pointer; color: inherit !important; } .nd-credit { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--nd-tiny); color: var(--nd-mute); } /* the key's swatches (inside the key tip) */ .nd-sw { display: inline-block; vertical-align: -2px; width: 18px; height: 12px; border-radius: 2px; margin-right: 2px; } .nd-sw-sky { width: auto; } .nd-sw-sky i { display: inline-block; width: 10px; height: 12px; } .nd-sw-night, .nd-sw-sky i.nd-sw-night { background: #0d1430 radial-gradient(rgba(238,241,250,.5) 0.6px, transparent 0.8px) 0 0 / 4px 4px; } .nd-sw-hatch { background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 4px); opacity: .7; } .nd-sw-meas { height: 3px; vertical-align: 3px; background: var(--nd-temp); } .nd-sw-fc { height: 0; vertical-align: 4px; border-top: 2px dashed var(--nd-temp); border-radius: 0; } .nd-sw-open { border: 1px dashed currentColor; border-right: 0; border-left: 2px solid currentColor; border-radius: 6px 0 0 6px; } .nd-sw-now { width: 3px; height: 14px; background: var(--nd-now); border-radius: 0; } .nd-sw-view { width: 0; height: 14px; border-left: 2px dashed currentColor; border-radius: 0; } .nd-sw-ring { width: 10px; height: 10px; border: 2px solid var(--nd-temp); border-radius: 50%; vertical-align: 0; } .nd-sw-planet { width: 8px; height: 8px; background: var(--nd-planet); border-radius: 50%; vertical-align: 1px; } @media (max-width: 760px) { /* The house's phone floor is 13 px for any text (test_mobile, "the phone is not set in agate"). The label layer reads --nd-small to measure, so its collision boxes grow with the type. */ .nd { padding: 10px; --nd-small: 13px; --nd-tiny: 13px; } .nd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nd-fact span { font-size: 24px; } /* The row's width, not the grid's content: as `flex: none` it took its max-content (390 px) and pushed the front page sideways on a phone. */ .nd-pl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 100%; min-width: 0; } .nd-cell { padding: 2px 4px 6px; } .nd-cell > i { white-space: normal; } .nd-cell .ch { font-size: 26px; } .nd-cell .dm { letter-spacing: .04em; white-space: normal; line-height: 15px; } .nd-art { width: 48px; height: 48px; margin: 6px 0 4px; } .nd-els { max-width: none; } } /* THE HOUSE'S 44 px TOUCH FLOOR, on a coarse pointer. Each control's box is 44 px; what is drawn stays its size, painted inside it, so the strip does not grow slabs (the reason these were once pinned at 22 px, which broke the floor for every phone reader). Negative margins keep the layout where the drawn size put it. */ @media (pointer: coarse) { .nd .nd-nowpill, .nd .nd-edge { height: 44px !important; line-height: 44px !important; margin-top: -11px !important; background: transparent !important; isolation: isolate; } .nd .nd-nowpill { border-color: transparent !important; } .nd .nd-nowpill::before, .nd .nd-edge::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 22px; border-radius: 2px; background: var(--nd-bg); border: 1.5px solid var(--nd-now); z-index: -1; } .nd .nd-edge { color: var(--nd-now) !important; } .nd .nd-i { width: 44px !important; height: 44px !important; margin: -13px !important; border-color: transparent; position: relative; } .nd .nd-i::before { content: ''; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid var(--nd-mute); border-radius: 50%; } .nd .nd-i:hover::before, .nd .nd-i:focus-visible::before { border-color: var(--nd-ink); } .nd .nd-controls button:not(.nd-i) { min-height: 44px !important; } .nd .nd-back-glow { position: relative; min-height: 44px; border-color: transparent; box-shadow: none; background: transparent; } .nd .nd-back-glow::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 22px; z-index: -1; border: 1px solid var(--nd-now); border-radius: 999px; box-shadow: 0 0 10px rgba(163, 34, 27, .35); } .nd .nd-stick .nd-back-glow::before { border-color: #F4B4AE; } } @media (prefers-reduced-motion: reduce) { .nd-cell, .nd-hint { transition: none; } } /* ------------------------------------------------------------ the page of the dial (2026-10-23) */ /* The main column (sky, strip, controls) and the almanac runner beside it; one column under 900 px, the runner after the strip. */ .nd-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 0 24px; align-items: start; } .nd-main { min-width: 0; } .nd-runner { border-left: 1px solid var(--nd-rule); padding-left: 18px; min-width: 0; } .nd-runner-h { margin: 0 0 6px; font: 600 15px/1.2 var(--serif, Georgia, serif); letter-spacing: .02em; color: var(--nd-ink); } .nd-run-h { margin: 10px 0 4px; font-size: var(--nd-tiny); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nd-mute); } .nd-run-line { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 2px 0; font-size: var(--nd-small); color: var(--nd-ink2); } .nd-run-line .nd-has-tip, .nd-moon-txt .nd-has-tip, .nd-moon-next .nd-has-tip { text-decoration: underline dotted var(--nd-rule); text-underline-offset: 3px; } .nd-run-src { margin: 4px 0 0; font-size: var(--nd-tiny); color: var(--nd-mute); } .nd-run-src a { color: inherit; } /* the moon */ .nd-moon-row { display: flex; align-items: center; gap: 12px; } .nd-moon-disc { flex: none; } .nd-moon-txt { display: flex; flex-direction: column; gap: 1px; font-size: var(--nd-small); color: var(--nd-ink2); } .nd-moon-txt b { font: 500 20px/1.15 var(--serif, Georgia, serif); color: var(--nd-ink); } .nd-moon-next { display: flex; gap: 12px; margin-top: 4px; font-size: var(--nd-small); color: var(--nd-ink2); } .nd-moon-next i { font-style: normal; margin-right: 3px; color: var(--nd-ink); } /* the aurora: NOAA's Kp, the night's highest, and its 3-hour slots as bars */ .nd-aurora-kp { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; font-size: var(--nd-small); color: var(--nd-ink2); } .nd-aurora-kp b { font: 500 20px/1.15 var(--serif, Georgia, serif); color: var(--nd-ink); } .nd-aurora-bars { display: flex; align-items: flex-end; gap: 2px; height: 38px; margin-top: 4px; border-bottom: 1px solid var(--nd-rule); } .nd-kp { flex: 1 1 0; max-width: 9px; background: var(--nd-mute); opacity: .45; } .nd-kp-hi { opacity: .8; } .nd-kp-storm { opacity: 1; background: var(--nd-ink); } .nd-kp-fc { background: transparent; border: 1px solid var(--nd-ink2); border-bottom: 0; opacity: .7; } .nd-kp-night { box-shadow: 0 3px 0 -1px var(--nd-ink); } /* the pillars, compact in the runner */ .nd-runner .nd-pl { margin-top: 10px; padding-top: 8px; } .nd-runner .nd-pl-band { gap: 10px 0; } .nd-runner .nd-pl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 100%; min-width: 0; } .nd-runner .nd-cell { padding: 0 4px 4px; } .nd-runner .nd-art { width: 40px; height: 40px; margin: 4px 0; } .nd-runner .nd-cell .ch { font-size: 22px; } .nd-runner .nd-cell > i { letter-spacing: .06em; } .nd-runner .nd-els { flex: 1 1 100%; max-width: none; grid-template-columns: 22px 54px 1fr; } .nd-runner .nd-hud .nd-chip-strong { font-size: 15px; } /* NOW AS A FLAG, NOT A CAPSULE: the city's moment in red small capitals on the strip's top edge; the viewed moment a plain ink tag. */ .nd .nd-nowpill { background: var(--nd-bg); color: var(--nd-now); border: 1.5px solid var(--nd-now) !important; border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-size: var(--nd-tiny); line-height: 19px !important; } .nd .nd-viewpill { border-radius: 2px; border-width: 1px; } .nd .nd-edge { border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; font-size: var(--nd-tiny); } /* the viewed moment in the sky's head: ink, never red */ .nd-chip-strong.nd-away { font-family: var(--sans, system-ui, sans-serif); font-size: 14px; } /* THE WAY BACK GLOWS while away: two soft pulses on leaving now, then a steady glow; a still ring for a reader who asks for less motion. */ .nd-back-glow { margin-left: 10px; padding: 1px 10px; border: 1px solid var(--nd-now); border-radius: 999px; background: transparent; color: var(--nd-now) !important; font-size: var(--nd-small); font-weight: 600; cursor: pointer; line-height: 20px; box-shadow: 0 0 10px rgba(163, 34, 27, .35); } .nd-back-glow[hidden] { display: none; } .nd-back-glow.nd-pulse { animation: nd-pulse 1.1s ease-out 2; } @keyframes nd-pulse { 0% { box-shadow: 0 0 0 0 rgba(163, 34, 27, .55); } 100% { box-shadow: 0 0 0 12px rgba(163, 34, 27, 0); } } /* the controls, set as text: small capitals, the chosen width underlined */ .nd .nd-controls button:not(.nd-i) { border: 0 !important; background: transparent !important; border-radius: 0; padding: 2px 6px !important; font-size: var(--nd-tiny); letter-spacing: .08em; text-transform: uppercase; color: var(--nd-ink2); } .nd .nd-controls button[aria-pressed="true"] { color: var(--nd-ink); text-decoration: underline 2px; text-underline-offset: 5px; } .nd .nd-controls .nd-back { color: var(--nd-now) !important; margin-left: auto; } .nd .nd-controls .nd-back.nd-at-now { color: var(--nd-mute) !important; } .nd-lab-l.nd-more { color: var(--nd-ink2); text-decoration: underline dotted var(--nd-rule); text-underline-offset: 3px; } @media (max-width: 900px) { .nd-body { grid-template-columns: minmax(0, 1fr); } .nd-runner { border-left: 0; padding-left: 0; border-top: 1px solid var(--nd-rule); margin-top: 12px; padding-top: 6px; } } @media (prefers-reduced-motion: reduce) { .nd-back-glow.nd-pulse { animation: none; } } /* the phone's viewing bar: shown only under 900 px, above the tab bar */ .nd-stick { display: none; } @media (max-width: 900px) { .nd-stick:not([hidden]) { display: flex; position: fixed; left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 30; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; background: var(--nd-ink); color: var(--nd-bg); border-radius: 3px; font-size: var(--nd-small); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .nd-stick .nd-back-glow { margin: 0; color: #F4B4AE !important; border-color: #F4B4AE; } } /* label and value, two to a row */ .nd-kv { display: grid; grid-template-columns: auto auto auto auto; justify-content: start; gap: 2px 8px; margin: 6px 0 2px; font-size: var(--nd-small); } .nd-kv dt { color: var(--nd-mute); font-weight: 600; } .nd-kv dd { margin: 0 14px 0 0; color: var(--nd-ink); font-variant-numeric: tabular-nums; } /* one pair to a row: a holiday's name can be six words long */ .nd-kv1 { grid-template-columns: minmax(0, 1fr) auto; } .nd-kv1 dt { font-weight: 500; color: var(--nd-ink2); } .nd-kv1 dd { margin: 0; text-align: right; } .nd-kv1 dt.nd-obs-general { font-weight: 600; color: var(--nd-ink); }