/* ============================================================================= NEWSHUB SKIN — the paper/moon layer, brought up to the Newsy v2 standard ============================================================================= The News Hub is one 789 KB console with ~2000 inline utility classes and a palette that assumes a black ground, plus a derived paper edition. This sheet and its script add to that pair the five things Newsy v2 established, without restructuring one line of the layout: the edition paper and moon, switched in place rather than by file ten tones a grey ladder per edition, with the ink solved for it the orbs black and white, over the console's own canvas field four densities real readings, not a class that shrinks some padding motion one switch that stops everything moving WHAT THIS SHEET DOES NOT DO, on purpose: It does not touch the console's own rules, and it does not touch paper-console.css. That sheet is the tested paper reading of this document — 331 scoped rules — and it is already inert unless html[data-paper] is set. So the edition switch here is exactly that attribute, and the whole of the paper layer comes along with it. Nothing is duplicated and the dark edition cannot regress. THE TONE LADDER is written by newshub-skin.js as inline custom properties on , not declared here. On the paper side it overrides --p-paper and the three ink tokens, which paper-console.css already threads through all 331 of its rules — so ten tones cost nothing but ten sets of numbers. On the moon side the ground is not a token in the original at all (it is `background: #0a0a0a` on .lab-bg plus a handful of Tailwind ground classes), so those few surfaces are re-pointed at a token below. ========================================================================== */ /* ----------------------------------------------------------------------------- THE MOON GROUNDS Scoped to :not([data-paper]) throughout. Without that these would outrank paper-console.css — which is loaded before this file and remaps the same classes — and every tone would drag the dark ground onto the paper edition. -------------------------------------------------------------------------- */ /* background-COLOR rather than the `background` shorthand, so this cannot clear the background-image, -position and -repeat the console may set on the same element — a shorthand here would reset all of them to initial. A NOTE FOR THE NEXT PERSON WHO MEASURES THIS: getComputedStyle(document.body) .backgroundColor reads `rgba(0,0,0,0)` on this page whatever these rules say, and that is correct rather than broken. declares no background, so the body's is propagated to the canvas and the body itself is then painted as if it had none. Check the ground with a screenshot, not with a computed style — an hour went into that lesson. */ html[data-nh-tone]:not([data-paper]) body.lab-bg { background-color: var(--nh-ground); } html[data-nh-tone]:not([data-paper]) .bg-black, html[data-nh-tone]:not([data-paper]) .bg-\[\#0a0a0a\] { background-color: var(--nh-ground); } html[data-nh-tone]:not([data-paper]) .bg-slate-950 { background-color: var(--nh-tint); } html[data-nh-tone]:not([data-paper]) .bg-slate-950\/50 { background-color: color-mix(in srgb, var(--nh-tint) 60%, transparent); } html[data-nh-tone]:not([data-paper]) .bg-slate-900 { background-color: var(--nh-tint-2); } /* The sticky bar sits over the page and reads the ground through a blur, so it has to travel with the tone or it is a slab of the old grey. */ html[data-nh-tone]:not([data-paper]) nav.sticky, html[data-nh-tone]:not([data-paper]) header.sticky { background-color: color-mix(in srgb, var(--nh-ground) 88%, transparent); } /* ============================================================================= THE ORBS — black and white The console already owns a particle field on #bg-canvas, with intensity, five styles and four tempos in the CONTROL deck. None of that is replaced. What is added is the v2 idea: the field can be taken to the two colours the page is made of, instead of the accent of whichever of the 22 themes rolled. Done as a filter on the canvas rather than by rewriting the draw loop — the loop paints a dozen shapes in theme colour across five styles, and a filter answers all of them at once and cannot fall out of step with a style added later. ========================================================================== */ html[data-nh-orbs="mono"] #bg-canvas, html[data-nh-orbs="mono"] #bottom-floating-canvas { filter: grayscale(1) contrast(1.15); } /* White on the moon edition, ink on paper — the same field, polarised for the ground it is drifting over. On paper the canvas is inverted so the particles read as ink rather than as white-on-white, which is the same re-polarisation paper-console.css performs on every other white wash in the document. */ html[data-nh-orbs="mono"][data-paper] #bg-canvas, html[data-nh-orbs="mono"][data-paper] #bottom-floating-canvas { filter: grayscale(1) invert(1) contrast(1.1); } html[data-nh-orbs="off"] #bg-canvas, html[data-nh-orbs="off"] #bottom-floating-canvas { display: none; } /* ============================================================================= THE FOUR DENSITIES Four readings of the same document, each removing a whole layer — not a class that trims some padding. Every level is expressed by hiding whole blocks and re-declaring the two measures that carry the layout, so the levels compose rather than fight. 0 FULL everything 1 COMPACT the decoration goes: the 3D gallery, the hero flourishes 2 DENSE the furniture goes too, and the type steps down 3 WIRE nothing but the headlines and the feed ========================================================================== */ html[data-nh-imm="1"] section { padding-top: 2rem; padding-bottom: 2rem; } html[data-nh-imm="1"] #gallery { display: none; } html[data-nh-imm="2"] section { padding-top: 1.2rem; padding-bottom: 1.2rem; } html[data-nh-imm="2"] #gallery, html[data-nh-imm="2"] #contact, html[data-nh-imm="2"] [aria-label="Featured projects"] { display: none; } html[data-nh-imm="2"] h2 { font-size: 1.5rem !important; } html[data-nh-imm="2"] .max-w-screen-2xl { padding-left: 1.2rem !important; padding-right: 1.2rem !important; } html[data-nh-imm="3"] section:not([aria-label="Machine-ranked top headlines"]):not([aria-label="Shop"]), html[data-nh-imm="3"] #gallery, html[data-nh-imm="3"] #contact, html[data-nh-imm="3"] #x-pulse, html[data-nh-imm="3"] #snapshot { display: none; } html[data-nh-imm="3"] section { padding-top: .8rem !important; padding-bottom: .8rem !important; } html[data-nh-imm="3"] h2 { font-size: 1.35rem !important; } /* ============================================================================= MOTION One switch. The console animates a great deal — the glass sweep, the orb field, the rotating borders, the button pulse — and every one of them is a separate control today. This stops all of it, including anything added later, and it is what a reader who finds the page busy actually wants. ========================================================================== */ html[data-nh-motion="off"] *, html[data-nh-motion="off"] *::before, html[data-nh-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html[data-nh-motion="off"] #bg-canvas, html[data-nh-motion="off"] #bottom-floating-canvas { display: none; } /* ============================================================================= THE CONTROL DECK — the new groups Injected at the TOP of #panel-content by the script, above SAVE SETTINGS, because the edition and the tone decide what every control below them means. Styled to sit inside the console's existing deck rather than to look like a visitor: same 0.65rem labels, same #333 dividers, same accent for the live value. The deck's own surfaces are inline styles on unclassed divs, so these rules carry the weight they need to reach them. ========================================================================== */ #panel-content .nh-grp { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #333; } html[data-paper] #panel-content .nh-grp { border-bottom-color: rgba(30, 38, 43, .18); } #panel-content .nh-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #888; font-size: 0.65rem; margin-bottom: 5px; letter-spacing: .04em; } html[data-paper] #panel-content .nh-h { color: rgba(30, 38, 43, .64); } #panel-content .nh-h b { color: var(--primary-orange); font-weight: 700; } /* The segmented rows — edition, orbs, density, motion. One shape, four uses, and exactly one segment lit in each. */ #panel-content .nh-seg { display: flex; gap: 2px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 2px; } html[data-paper] #panel-content .nh-seg { background: rgba(30, 38, 43, .05); border-color: rgba(30, 38, 43, .16); } #panel-content .nh-seg button { flex: 1 1 0; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 0.58rem; font-weight: 700; letter-spacing: .06em; color: #9aa3ab; padding: 4px 2px; border-radius: 999px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .18s ease, color .18s ease; } html[data-paper] #panel-content .nh-seg button { color: rgba(30, 38, 43, .64); } #panel-content .nh-seg button:hover { color: #fff; } html[data-paper] #panel-content .nh-seg button:hover { color: #1E262B; } #panel-content .nh-seg button[aria-pressed="true"] { background: var(--primary-orange); color: #0a0a0a; } html[data-paper] #panel-content .nh-seg button[aria-pressed="true"] { color: #fff; } /* The ten tones. Ten swatches painted with the grounds they set, so the drawer IS the ladder rather than a description of it — and repainted when the edition changes, because the ten greys of one edition are not the ten greys of the other. */ #panel-content .nh-tones { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; } #panel-content .nh-tone { appearance: none; -webkit-appearance: none; padding: 0; cursor: pointer; aspect-ratio: 1; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .35); transition: transform .15s ease, box-shadow .15s ease; } html[data-paper] #panel-content .nh-tone { border-color: rgba(30, 38, 43, .3); } #panel-content .nh-tone:hover { transform: scale(1.15); } #panel-content .nh-tone[aria-pressed="true"] { box-shadow: 0 0 0 1px #111113, 0 0 0 2.5px var(--primary-orange); transform: scale(1.15); } /* The deck is 210px wide and now carries five more groups. It scrolls rather than growing past the top of the screen on a laptop — a panel taller than the viewport puts its last control somewhere unreachable. */ #modern-control-panel #panel-content { max-height: min(70vh, 620px); overflow-y: auto; }