/* newz.audio-palette.com — dense terminal reader. Optimised for headlines-per-screen and fast scanning, not for lingering. */ :root { --bg: #0c0d10; --bg-alt: #131519; --line: #23262d; --fg: #dfe3ea; --fg-dim: #8b93a3; --fg-faint: #5b6272; --accent: #e8b34a; --accent-2: #5fd3a6; --link: #cfd6e3; --link-hover:#ffffff; --hot: #ff6b5e; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace; --row-gap: 2px; --pad: 14px; } @media (prefers-color-scheme: light) { :root { --bg: #f7f7f4; --bg-alt: #ffffff; --line: #dcdcd4; --fg: #1a1c20; --fg-dim: #5c6270; --fg-faint: #8b909c; --accent: #9a6a00; --accent-2: #10745a; --link: #1a1c20; --link-hover:#000000; --hot: #b3251a; /* Light-mode accent is dark enough that button labels need white. */ --btn-fg: #ffffff; } } /* The header toggle stamps data-theme on and must beat the media query. */ :root[data-theme="dark"] { --bg: #0c0d10; --bg-alt: #131519; --line: #23262d; --fg: #dfe3ea; --fg-dim: #8b93a3; --fg-faint: #5b6272; --accent: #e8b34a; --accent-2: #5fd3a6; --link: #cfd6e3; --link-hover: #ffffff; --hot: #ff6b5e; /* Must be reset explicitly: a light-mode OS with the dark toggle on would otherwise inherit white from the media query and wash out on amber. */ --btn-fg: #0c0d10; } :root[data-theme="light"] { --bg: #f7f7f4; --bg-alt: #ffffff; --line: #dcdcd4; --fg: #1a1c20; --fg-dim: #5c6270; --fg-faint: #8b909c; --accent: #9a6a00; --accent-2: #10745a; --link: #1a1c20; --link-hover: #000000; --hot: #b3251a; --btn-fg: #ffffff; } * { box-sizing: border-box; } /* Any class rule setting `display` outsmarts the UA stylesheet's [hidden] { display: none }, so state it once, loudly. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover, a:focus-visible { color: var(--link-hover); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- header ---------- */ .masthead { position: sticky; top: 0; z-index: 20; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 10px var(--pad); background: var(--bg); border-bottom: 1px solid var(--line); } .brand { font-weight: 700; letter-spacing: 0.14em; color: var(--accent); white-space: nowrap; } .brand span { color: var(--fg-faint); font-weight: 400; } .masthead .spacer { flex: 1 1 auto; } .meta { color: var(--fg-faint); font-size: 11px; white-space: nowrap; } .meta b { color: var(--fg-dim); font-weight: 400; } button, .btn { font: inherit; font-size: 11px; color: var(--fg-dim); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 3px; padding: 3px 9px; cursor: pointer; white-space: nowrap; } button:hover:not(:disabled) { color: var(--fg); border-color: var(--fg-faint); } button:disabled { opacity: 0.5; cursor: default; } button.primary { color: var(--btn-fg, var(--bg)); background: var(--accent); border-color: var(--accent); font-weight: 700; } button.primary:hover:not(:disabled) { color: var(--btn-fg, var(--bg)); filter: brightness(1.12); } #filter { font: inherit; font-size: 11px; color: var(--fg); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 3px; padding: 3px 8px; width: 150px; } #filter::placeholder { color: var(--fg-faint); } /* ---------- brief ---------- */ /* ---------- weather ---------- */ .weather { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 8px var(--pad); border-bottom: 1px solid var(--line); background: var(--bg); } .weather .spacer { flex: 1 1 auto; } .wx-now { display: flex; align-items: center; gap: 9px; } .wx-temp { font-size: 26px; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; } .wx-cond { color: var(--fg-dim); font-size: 12px; } .wx-sub { color: var(--fg-faint); font-size: 10px; } .wx-today { color: var(--fg-dim); font-size: 11px; max-width: 46ch; } .wx-today-label { color: var(--fg-faint); } /* The AQI chip is the one element allowed to shout — in an Idaho August it's the number most likely to change what someone does with their afternoon. */ .wx-aqi { display: flex; align-items: baseline; gap: 6px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 2px; color: var(--fg-dim); } .wx-aqi-value { font-size: 14px; font-variant-numeric: tabular-nums; } .wx-aqi-label { font-size: 10px; letter-spacing: 0.04em; } .wx-aqi.aqi-good { color: var(--accent-2); } .wx-aqi.aqi-moderate { color: var(--accent); } .wx-aqi.aqi-usg, .wx-aqi.aqi-unhealthy, .wx-aqi.aqi-very-unhealthy, .wx-aqi.aqi-hazardous { color: var(--hot); } /* Past "unhealthy" a coloured outline is too easy to skim past. */ .wx-aqi.aqi-unhealthy, .wx-aqi.aqi-very-unhealthy, .wx-aqi.aqi-hazardous { background: color-mix(in srgb, var(--hot) 14%, transparent); } .wx-days { display: flex; gap: 14px; } .wx-day { text-align: center; min-width: 34px; font-variant-numeric: tabular-nums; } .wx-day-name { color: var(--fg-faint); font-size: 10px; letter-spacing: 0.06em; } .wx-day-hi { color: var(--fg); font-size: 12px; } .wx-day-lo { color: var(--fg-faint); font-size: 10px; } .wx-day-precip { color: var(--accent-2); font-size: 9px; } /* Narrow screens: the narrative is the first thing to go — the numbers either side of it carry the same information in less room. */ @media (max-width: 700px) { .weather { gap: 12px; } .wx-today { display: none; } .wx-days { gap: 10px; } } .brief { margin: 0; padding: 12px var(--pad); border-bottom: 1px solid var(--line); background: var(--bg-alt); display: flex; gap: 12px; align-items: flex-start; } .brief-label { color: var(--accent-2); font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; padding-top: 2px; } .brief-text { margin: 0; max-width: 92ch; color: var(--fg); } .brief-note { color: var(--fg-faint); font-size: 10px; margin-top: 4px; } /* ---------- layout ---------- */ /* Grid, not CSS multi-column. Multi-column balances total height across columns, which buries the events panel below a long Treasure Valley section; grid keeps it reliably in the top-right cell. The cost is some whitespace under short sections, which is the better trade here. */ .columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 0; align-items: start; } .section { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px var(--pad) 16px; min-width: 0; } .section h2, .events h2 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.16em; color: var(--accent); font-weight: 700; display: flex; align-items: baseline; gap: 8px; /* Sticky under the masthead so you always know which section you're in while scrolling a long column. Works because .columns is a grid — it would not survive a multi-column flow. */ position: sticky; top: 41px; background: var(--bg); padding: 4px 0; z-index: 5; } .section h2 .count, .events h2 .count { color: var(--fg-faint); font-weight: 400; letter-spacing: 0; } /* ---------- story rows ---------- */ .story { display: grid; grid-template-columns: 44px 1fr; gap: 0 8px; padding: 3px 0; border-bottom: 1px solid transparent; } .story:hover { border-bottom-color: var(--line); } .story .age { color: var(--fg-faint); font-size: 11px; text-align: right; padding-top: 1px; font-variant-numeric: tabular-nums; } .story.fresh .age { color: var(--hot); } .story .headline { min-width: 0; } .story .headline a { display: inline; } .story .src { color: var(--fg-dim); font-size: 11px; } .story .also { color: var(--fg-faint); font-size: 10px; } .story .summary { grid-column: 2; color: var(--fg-dim); font-size: 11.5px; margin-top: 1px; display: none; } body.show-summaries .story .summary { display: block; } /* ---------- events ---------- */ /* Lives inside the .columns grid as a peer of the news sections, so it sits beside the headlines rather than pushing them below the fold. */ .events { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px var(--pad) 16px; min-width: 0; } .events h2 { color: var(--accent-2); } .day { margin-bottom: 10px; } .day-label { color: var(--fg-dim); font-size: 11px; letter-spacing: 0.08em; border-bottom: 1px solid var(--line); padding-bottom: 2px; margin-bottom: 3px; } .day-label.today { color: var(--hot); } .event { display: grid; grid-template-columns: 62px 1fr; gap: 0 8px; padding: 2px 0; } .event .time { color: var(--fg-faint); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; } .event .venue { color: var(--fg-dim); font-size: 11px; } .event .price { color: var(--accent-2); font-size: 11px; } .event .support { color: var(--fg-faint); font-size: 10.5px; } /* ---------- states ---------- */ .empty, .loading { color: var(--fg-faint); padding: 20px var(--pad); } .errbar { padding: 6px var(--pad); background: var(--bg-alt); border-bottom: 1px solid var(--line); color: var(--fg-faint); font-size: 11px; } .errbar b { color: var(--hot); font-weight: 400; } footer { padding: 14px var(--pad) 28px; color: var(--fg-faint); font-size: 11px; line-height: 1.7; } footer a { color: var(--fg-dim); } /* ---------- responsive ---------- */ @media (max-width: 760px) { :root { --pad: 11px; } body { font-size: 13.5px; } .masthead { gap: 8px; padding: 8px var(--pad); } .meta.wide { display: none; } #filter { width: 110px; } .section { border-right: none; } .section h2 { top: 39px; } .brief { flex-direction: column; gap: 4px; } .story { grid-template-columns: 40px 1fr; } } @media (prefers-reduced-motion: no-preference) { .refreshing { animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.45; } } }