/* ========================================================================== TechSignal — style.css Direction: "instrument panel". Prose in a grotesque, every number in a monospace with tabular figures, because in this subject's world numbers are readouts. No web fonts, no external assets, no build step. ========================================================================== */ :root { /* Panel neutrals — cool anodised grey, deliberately not cream */ --paper: #e9edf1; --surface: #ffffff; --surface-2: #f3f6f9; --surface-3: #e7ecf2; --rule: #d6dee7; --rule-2: #bcc8d4; --ink: #101720; --ink-2: #4c5a6b; /* 5.44:1 on --surface, 4.58:1 on the darkest panel fill. The previous #8494a6 measured 3.10:1 on white and 2.61:1 on --surface-3, and it is the colour of nearly every 9.5-11.5px readout on the site, none of which qualify for the large-text exemption. */ --ink-3: #5b6b80; /* The boundary of an interactive control, as distinct from --rule-2, which is the decorative hairline. WCAG 1.4.11 asks for 3:1 on anything that identifies a control, and for a text input or an icon-only button the border IS the affordance. Kept as its own token so the ten decorative uses of --rule-2 (dashed empty states, section rules, separators) keep their light weight. */ --control-bd: #7a8899; /* Brand */ --signal: #0a6c8a; --signal-ink: #085570; --signal-bg: #e2f0f5; /* Channels — a four-pen set, spaced like traces on a chart recorder */ --ch-ai: #5a34d6; --ch-ai-bg: #eee9fd; /* #0b87a8 measured 3.61:1 as chip text on --ch-tech-bg. Darkened one step to 4.60:1; the hue is unchanged so the four-pen set still reads as a set. */ --ch-tech: #0a7590; --ch-tech-bg: #e0f2f7; --ch-mining: #b0521a; --ch-mining-bg: #fbeee3; --ch-eng: #2f6e4a; --ch-eng-bg: #e4f1ea; /* Proximity — a separate warm-to-cool urgency system. Each of these carries white text when its tier chip is pressed AND appears as text on its own -bg pair, so both readings have to clear 4.5:1. --t-month (was #b95d0b) failed the second at 4.01:1 and --t-past (was #78859a) failed both, at 3.74:1 and 3.30:1. */ --t-week: #c81e5a; --t-week-bg: #fce8ef; --t-month: #a24f07; --t-month-bg: #fcefe1; --t-later: #2c5aa8; --t-later-bg: #e7eefa; --t-past: #5d6b7e; --t-past-bg: #eef1f5; --focus: #1668c4; --shadow-1: 0 1px 1px rgba(16, 23, 32, .04); --shadow-2: 0 2px 4px rgba(16, 23, 32, .06), 0 8px 20px rgba(16, 23, 32, .06); --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Aliases consumed by app.js inline styles. Defined once here so the token names in this file stay semantic and dark mode still flows through. */ --cat-ai: var(--ch-ai); --cat-ai-bg: var(--ch-ai-bg); --cat-technology: var(--ch-tech); --cat-technology-bg: var(--ch-tech-bg); --cat-mining-technology: var(--ch-mining); --cat-mining-technology-bg: var(--ch-mining-bg); --cat-engineering: var(--ch-eng); --cat-engineering-bg: var(--ch-eng-bg); --tier-week: var(--t-week); --tier-week-bg: var(--t-week-bg); --tier-month: var(--t-month); --tier-month-bg: var(--t-month-bg); --tier-later: var(--t-later); --tier-later-bg: var(--t-later-bg); --tier-past: var(--t-past); --tier-past-bg: var(--t-past-bg); --accent: var(--signal); --r-sm: 3px; --r: 6px; --r-lg: 10px; --sidebar-w: 244px; --topbar-h: 60px; } /* Dark palette. Driven by the data-theme attribute on , which the inline boot script in each page's sets to "light" or "dark" before first paint — it resolves the system preference itself. Deliberately NOT a prefers-color-scheme block: a media query cannot be overridden by a toggle, and duplicating the palette into two selectors is how token sets drift apart. One palette, one selector. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --paper: #0b1118; --surface: #121a23; --surface-2: #18222d; --surface-3: #1e2937; --rule: #253243; --rule-2: #35455a; --ink: #e6edf4; --ink-2: #a0b0c2; /* Was #6d7f93 — 4.26:1 on --surface and 3.91:1 on --surface-2, both short. */ --ink-3: #8194a9; --control-bd: #687b94; --signal: #3fb6d4; --signal-ink: #7fd2e8; --signal-bg: #0d2c38; --ch-ai: #a78bfa; --ch-ai-bg: #241d3f; --ch-tech: #45c2dd; --ch-tech-bg: #0c2c36; --ch-mining: #e0925a; --ch-mining-bg: #331f10; --ch-eng: #6ec292; --ch-eng-bg: #122c1f; --t-week: #f7699b; --t-week-bg: #34131f; --t-month: #f0913f; --t-month-bg: #331f0e; --t-later: #7ba6f0; --t-later-bg: #16213a; --t-past: #8b9aad; --t-past-bg: #1a232e; --focus: #6aa9ff; --shadow-1: 0 1px 1px rgba(0, 0, 0, .3); --shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .35); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; /* The UA's blue-grey flash is replaced by the explicit :active states below, so that press feedback is the same colour system as hover rather than a system tint layered over it. */ -webkit-tap-highlight-color: transparent; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, p, ul, figure { margin: 0; } ul { list-style: none; padding: 0; } a { color: inherit; } input, button, select { font: inherit; } /* Removes the 300ms double-tap-zoom wait Safari applies to every tap target. Page zoom by pinch is untouched. */ a, button, label, summary, select, input, .tick { touch-action: manipulation; } /* Widows on a two-line heading are the common case at these measures. */ h1, h2, h3, .card-title, .empty strong, .why-label { text-wrap: balance; } p, .lede, .card-desc, .why-body, .faq-a { text-wrap: pretty; } /* Anything a deep link, a :target or a focus scroll can land on has to clear the sticky topbar and the sticky controls bar underneath it. */ .card, .month-head, .feed-split, .story-block, .faq details { scroll-margin-top: calc(var(--topbar-h) + 84px); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } /* First thing in the tab order on every page. The feed page puts roughly eighty stops — the facets, then one per trace tick — between the topbar and the first card, which is the whole reason this exists. */ .skip-link { position: absolute; left: 8px; top: 8px; z-index: 100; padding: 9px 14px; border-radius: var(--r-sm); background: var(--signal); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform .12s; } .skip-link:focus-visible { transform: none; } :root[data-theme="dark"] .skip-link { color: var(--paper); } /* The scroll targets the skip link and the trace point at. Neither should show a focus ring of its own — the ring belongs to the control that was activated. */ #feed:focus, #main:focus { outline: none; } /* Numbers are readouts, never prose. */ .num, .card-date .dnum, .facet-count, .tier-chip .n, .stat-value, .month-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Available to assistive tech and to crawlers, absent from the visual design. Used for the feed page's h1: the page announces itself through layout and the topbar, so a visible heading would be redundant furniture, but a document with no h1 at all is a hole for screen readers and for indexing alike. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- Top bar ----------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--rule); } .topbar-inner { max-width: 1360px; margin: 0 auto; min-height: var(--topbar-h); /* The bar is full-bleed and sticky, so in landscape on a notched phone its content would otherwise sit under the cutout. */ padding: 9px max(20px, env(safe-area-inset-right)) 9px max(20px, env(safe-area-inset-left)); /* Grid, not flex + space-between: under space-between the nav's x position was a function of its neighbours' widths, so it slid sideways whenever they changed — between pages (index.html carries .topbar-meta, the prose pages do not; the brand string differs too) and on index.html itself the moment app.js swapped "Loading..." for the real timestamp. A fixed auto centre column pins the nav to the bar's midpoint regardless of what flanks it. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } /* The 1fr tracks are equal, so a side wider than its share overflows into the centre column instead of pushing it. Clipping is the safe failure here: the nav never moves, and the brand loses its tail rather than sitting on top of a link. */ .topbar-inner > .brand { justify-self: start; min-width: 0; overflow: hidden; } .topbar-inner > .topbar-right { justify-self: end; min-width: 0; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; } .brand-mark { display: grid; place-items: center; width: 34px; height: 26px; flex: none; color: var(--signal); } .brand-text { display: flex; flex-direction: column; min-width: 0; } .brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; } .tagline { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); line-height: 1.4; } .tagline b { font-weight: 600; color: var(--ink-2); } /* Shrinkable, not `flex: none`. The right column is a 1fr grid track, and a flex child that refuses to shrink pushes its siblings straight off the page edge rather than out of the track — which is what put a horizontal scrollbar on every desktop width. The readout is the one thing here that can lose characters, so it is the one that gives. */ .topbar-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); text-align: right; flex: 0 1 auto; min-width: 0; overflow: hidden; } .meta-updated { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .meta-updated .dot { margin: 0 6px; opacity: .5; } .meta-updated strong { color: var(--ink); font-weight: 600; } /* One shard failed while its siblings loaded. Rare, but the feed looks complete when it happens, so it has to be said out loud rather than merely logged. */ .meta-warn { color: var(--t-week); font-weight: 600; cursor: help; } /* ---------- Region switcher --------------------------------------------- Not a filter. It picks which events/.json the page downloads, which is why it sits with the site controls rather than in the sidebar. Built entirely from existing tokens, so it inherits light and dark for free. ------------------------------------------------------------------------ */ .region { position: relative; flex: none; } .region-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; cursor: pointer; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--control-bd); border-radius: var(--r); padding: 6px 10px; white-space: nowrap; } .region-btn:hover { border-color: var(--signal); color: var(--signal); } .region-btn:active { background: var(--surface-3); } .region-btn[aria-expanded="true"] { border-color: var(--signal); } .region-btn .pin { color: var(--signal); flex: none; } .region-btn .caret { color: var(--ink-3); flex: none; transition: transform .15s ease; } .region-btn[aria-expanded="true"] .caret { transform: rotate(180deg); } /* `right: 0` is the PREFERRED alignment, not a guaranteed one. It is correct only while the trigger sits at the right end of a wide bar. Once .topbar-inner wraps, the region control becomes the leftmost thing on its row, and a 270px panel whose right edge is pinned to an 80px chip at x=14 starts at x=-176 — off the left of the screen. wireRegionSwitcher measures on open and slides the panel back inside the viewport; these rules are what it starts from, and what a no-JS render falls back to. Width is capped rather than floored (it was `min-width: 270px`, which wins over max-width in the cascade and so could not be reined in on a narrow phone). */ .region-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 60; width: min(270px, calc(100vw - 24px)); /* Landscape on a phone leaves ~390px of height for a ~400px list. Scroll it rather than let it run off the bottom; contain stops the page scrolling underneath once it hits the end. JS sets the exact figure from the trigger. */ max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 5px; } .region-menu[hidden] { display: none; } .region-group { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); padding: 9px 10px 5px; } /* An for a live region and a plain for one with no routine yet. It was a