/* tinux.dev — nocturna, the nightly design build. Forked from assets/style.css. Content still comes from ../config.js, so the only thing that differs between the two sites is the shape. */ :root { --bg: #13131e; --ink: #cdcbe9; /* text ramp, lifted so all three tiers clear WCAG AA on --bg. The old --faint sat at ~2.3:1 and carried the footer, blurbs and small print; raising it alone would have collapsed it into --dim, so the whole ramp moved up: ~7.5:1 and ~4.6:1 respectively. */ --dim: #a3a1cc; --faint: #7d7ba6; --line: #2c2b4a; --amber: #ffb454; --amber-ink: #161020; --violet: #b4a0ff; --panel: rgba(11, 11, 20, 0.78); --accent: var(--amber); } * { box-sizing: border-box; } html { scrollbar-color: var(--faint) var(--bg); } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; line-height: 1.6; } ::selection { background: var(--amber); color: var(--amber-ink); } /* ----- first-visit audio intro ----- */ /* set pre-paint by the inline script; .ready arrives once the intro (or page boot) finishes, and everything below fades in from there */ html.first-visit:not(.ready) main { opacity: 0; } #intro { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: #000; /* the black backdrop leaves last, after the parts have gone */ transition: opacity 0.95s ease 1.05s; } #intro.out { opacity: 0; pointer-events: none; } /* parts leave one by one, the way they arrived */ #intro.out .intro-text { animation: intro-out 0.7s steps(5) forwards; } #intro.out .intro-icon { animation: intro-out 0.7s steps(5) 0.35s forwards; } #intro.out .intro-skip { animation: intro-out 0.4s steps(3) forwards; } .intro-icon { width: 88px; height: 88px; animation: intro-in 1.4s steps(7) 0.4s backwards; } .intro-text { margin: 0; font-family: "Silkscreen", monospace; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); animation: intro-in 1.2s steps(6) 1.2s backwards; } /* the way out has to be visible, or the intro is just a toll */ .intro-skip { margin: -12px 0 0; font-family: "Silkscreen", monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); animation: intro-in 0.8s steps(4) 2.1s backwards; } @keyframes intro-in { from { opacity: 0; transform: translateY(6px); } } @keyframes intro-out { to { opacity: 0; transform: translateY(-6px); } } /* ----- entrance fades ----- */ html.ready .masthead h1 { animation: rise 0.5s steps(4) backwards; } html.ready .tagline { animation: rise 0.5s steps(4) 0.15s backwards; } html.ready footer { animation: rise 0.5s steps(4) 0.45s backwards; } /* ----- corner chrome ----- */ #chrome { position: fixed; right: 18px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; } #snd { padding: 8px 12px; font-family: "Silkscreen", monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--dim); background: var(--panel); border: 1px solid var(--line); cursor: pointer; /* no transition: steps() on a colour invents an in-between shade, and sweeping on and off cycles through it. Hover lands in one jump. */ } #snd:hover, #snd:focus-visible { color: var(--amber); border-color: var(--amber); outline: none; } #snd[aria-pressed="false"] { color: var(--faint); } /* unmuted, but the browser is still holding every sound until a gesture */ #snd[data-waiting] { color: var(--faint); } #ver { font-family: "Silkscreen", monospace; font-size: 9px; letter-spacing: 0.08em; color: var(--faint); pointer-events: none; } /* ----- the way back to the stable site ----- */ #nocturna { position: fixed; left: 18px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-family: "Silkscreen", monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--dim); text-decoration: none; background: var(--panel); border: 1px solid var(--line); /* no transition: steps() on a colour invents an in-between shade, and sweeping on and off cycles through it. Hover lands in one jump. */ } #nocturna:hover, #nocturna:focus-visible { color: var(--violet); border-color: var(--violet); outline: none; } #nocturna .beacon { width: 3px; height: 3px; background: var(--violet); animation: beacon 1.7s steps(1, end) infinite; } @keyframes beacon { 0%, 12% { opacity: 1; } 13%, 100% { opacity: 0.15; } } /* ----- scene ----- */ /* These were briefly given their own compositing layers with will-change, to stop page repaints dragging them along. Measured: it made things worse. Promoting them put the footer on a layer boundary, so hovering the fixed corner buttons re-rasterized it and the bottom of the page flickered. Leave them in the root layer. */ #scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: pixelated; pointer-events: none; } /* foreground plane — near ridge, ground and train render above the text, so the page scrolls away behind the mountains */ #front { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; image-rendering: pixelated; pointer-events: none; } /* Readability veil. The sky behind it is quantized to four indigo bands and Bayer-dithered; a smooth gradient on top was the one soft edge in the whole design, so this steps in hard bands to match. There used to be a 4px repeating-conic-gradient over the top to break each seam. It cost far more than it was worth: a conic tiled 4px across a fixed full-viewport element is around 130k tiles at 1440p, and because everything translucent in the page composites against this layer, every hover that repainted a row or a tile re-rasterized the whole thing. The bands alone carry the stepped look, so it is no loss. */ .veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 18, 0.72) 0 14%, rgba(10, 10, 18, 0.60) 14% 28%, rgba(10, 10, 18, 0.48) 28% 42%, rgba(10, 10, 18, 0.36) 42% 56%, rgba(10, 10, 18, 0.26) 56% 70%, rgba(10, 10, 18, 0.17) 70% 84%, rgba(10, 10, 18, 0.09) 84% 94%, rgba(10, 10, 18, 0.04) 94% 100%); } /* page-transition fade — black-out before navigating to a sub-site */ #page-fade { position: fixed; inset: 0; z-index: 20; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.5s steps(10); } #page-fade.show { opacity: 1; pointer-events: auto; } /* ----- layout ----- */ main { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: clamp(56px, 10vh, 110px) 28px 200px; } /* Silkscreen is a bitmap face. Sized fluidly it lands on fractional multiples of its own raster at nearly every viewport width and the stems antialias to grey, so it steps between whole multiples of 8 instead. */ .masthead h1 { margin: 0; font-family: "Silkscreen", monospace; font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); /* a hard offset, matching .copy-btn — the old 28px blur was the only gaussian in a page that dithers its own sky */ text-shadow: 3px 3px 0 #08080f; } @media (min-width: 600px) { .masthead h1 { font-size: 56px; text-shadow: 4px 4px 0 #08080f; } } @media (min-width: 900px) { .masthead h1 { font-size: 72px; text-shadow: 5px 5px 0 #08080f; } } .tagline { margin: 14px 0 0; color: var(--dim); font-size: 14px; letter-spacing: 0.04em; } .tagline b { color: var(--amber); font-weight: 500; } /* how many of what, so the page states its own size on arrival */ .counts { margin: 8px 0 0; color: var(--faint); font-size: 12px; letter-spacing: 0.04em; } /* ----- sections ----- */ .block { margin-top: 76px; animation: rise 0.4s steps(4) backwards; } .block-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; } .block-num { font-family: "Silkscreen", monospace; font-size: 12px; color: var(--amber); } .block-label { margin: 0; font-family: "Silkscreen", monospace; font-weight: 400; font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } /* dithered rule — square dots, no anti-aliased lines here */ .block-rule { flex: 1; height: 2px; align-self: center; background-image: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 6px); } .block-blurb { color: var(--faint); font-size: 12px; letter-spacing: 0.03em; white-space: nowrap; } /* ----- link rows ----- */ .row { display: flex; /* the chip is a block, not text, so parts centre on it rather than sharing a baseline with it */ align-items: center; gap: 18px; padding: 15px 14px; color: var(--ink); text-decoration: none; /* One accent edge, transparent until hover, holding its own space so nothing shifts. The old `border: 1px solid transparent` plus a dashed bottom meant hover's `border-color` recoloured a box that was solid on three sides and dashed on the fourth. This is also the featured card's vocabulary, at a different permanence: the card's edge is always on, a row's arrives on hover. */ border: 0; border-left: 2px solid transparent; border-bottom: 1px dashed var(--line); transition: transform 0.18s steps(3), background-color 0.18s steps(3), border-color 0.18s steps(3); animation: rise 0.4s steps(4) backwards; } .row-name { display: flex; align-items: center; gap: 12px; font-family: "Silkscreen", monospace; font-size: 15px; white-space: nowrap; } .row-ver { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 400; color: var(--dim); letter-spacing: .4px; } /* Generated in chip.js from the project's name, painted in its accent. Six pixels by six, displayed at whole multiples only — 18px here, 24px in the featured card — so each pixel stays square. Kept small: it marks the row, it isn't the subject of it. */ .chip { width: 18px; height: 18px; flex: 0 0 auto; image-rendering: pixelated; /* no drop-shadow here: a filter can't be composited cheaply, and eleven of them inside rows that transition on hover made every hover an expensive re-raster. At 18px the glow was barely visible anyway. */ } .row-desc { color: var(--dim); font-size: 13px; flex: 1; } /* every item in config.js carries its own accent; it used to reach nothing but an 8px square, and now paints the chip, the arrow and the hover edge */ .row-go { font-family: "Silkscreen", monospace; font-size: 13px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity 0.18s steps(3), transform 0.18s steps(3); } .row:hover, .row:focus-visible { background: color-mix(in srgb, var(--accent) 11%, transparent); border-left-color: var(--accent); transform: translateX(6px); outline: none; } .row:hover .row-go, .row:focus-visible .row-go { opacity: 1; transform: translateX(0); } /* on touch there is no hover, so the arrow was the one signal a row leads somewhere and it never appeared */ @media (hover: none) { .row-go { opacity: 1; transform: none; } } /* ----- tiles ----- Sections marked layout: "grid" in config.js. A run of small experiments reads better as a set of things than as five more horizontal bars, and it gives the page a second movement between the releases and the concepts. */ .tiles { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 720px) { .tiles { grid-template-columns: 1fr 1fr; } } /* anything that isn't a tile (an expand, an install card) keeps full width rather than being squeezed into a column */ .tiles > :not(.tile) { grid-column: 1 / -1; } .tile { position: relative; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 18px; border-bottom: 0; background: rgba(11, 11, 20, 0.5); } .tile .row-desc { font-size: 12.5px; flex: 0 1 auto; } /* the arrow would push the tile's height around as it fades in and out, so it rides in the corner instead of in the flow */ .tile .row-go { position: absolute; top: 14px; right: 14px; transform: none; } .tile:hover .row-go, .tile:focus-visible .row-go { transform: none; } /* ----- expanding rows ----- */ .row-toggle { width: 100%; margin: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; } /* the +/− is the affordance — always visible, unlike link arrows */ .row-toggle .row-go { opacity: 1; transform: none; font-size: 15px; } /* the dashed separator lives on the wrapper, fixed in place, so the sliding panel never makes a line pop in and out; hovering the toggle slides the whole wrapper — underline included — like plain rows */ .expand { border-bottom: 1px dashed var(--line); transition: transform 0.18s steps(3); } .expand:has(> .row-toggle:hover), .expand:has(> .row-toggle:focus-visible) { transform: translateX(6px); } .expand .row-toggle:hover, .expand .row-toggle:focus-visible { transform: none; } .expand .row-toggle, .expand .row-toggle:hover, .expand .row-toggle:focus-visible { border-bottom-color: transparent; } .expand.open .row-toggle { background: color-mix(in srgb, var(--accent) 11%, transparent); border-left-color: var(--accent); border-bottom-color: transparent; } /* slides open and shut — height is measured and driven from JS, so the wrapper's dashed line rides the motion in every browser */ .expand-detail { overflow: hidden; transition: height 0.3s ease; } .expand-detail[hidden] { display: none; } .expand-inner { padding: 4px 14px 26px; } /* ----- featured row ----- The flagship used to look exactly like a one-off experiment, to the point that its own description had to say "click me". Three signals and no more: an accent edge, a panel behind it, and a modest size bump. An earlier pass stacked six (full border, corner marks, 21px name, 22px padding, 34px margin, on top of these) and the card stopped reading as the most important item in the list — it read as a different kind of object that had wandered into it. The name in particular outgrew .block-label at 17px, so an item outranked the section holding it. */ .expand.featured { margin-bottom: 20px; border-left: 2px solid var(--accent); border-bottom: 0; /* a card, not a list row: no dashed separator hanging off */ background: var(--panel); transition: transform 0.18s steps(3), background-color 0.18s steps(3); } /* The card owns every state, because .row-toggle also carries .row: without this, .row:hover and .expand.open .row-toggle each paint a 1px accent border on the button's top, left and right — a second edge sitting 2px inside the card's own left edge — and stack a second background tint under the wrapper's. That's what made the sides jump on hover and stay wrong once open. Neutralise the inherited box; the wrapper does all the painting. */ .expand.featured .row-toggle, .expand.featured .row-toggle:hover, .expand.featured .row-toggle:focus-visible, .expand.featured.open .row-toggle { background: none; /* border: 0, not just a transparent colour: .row's 2px left edge would otherwise inset this text 2px past .expand-inner's, so the header and the detail below it would not line up */ border: 0; } /* a card doesn't slide the way a row does; it lights up instead, and hover and open land on the same tint so the two states agree */ .expand.featured:has(> .row-toggle:hover), .expand.featured:has(> .row-toggle:focus-visible), .expand.featured.open { transform: none; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); } .expand.featured .row-toggle { padding: 18px; } /* level with .block-label, never above it */ .expand.featured .row-name { font-size: 17px; } /* 24px is 4x the 6px grid, one whole step up from a row's 18px */ .expand.featured .chip { width: 24px; height: 24px; } .expand.featured .row-desc { font-size: 14px; } .expand.featured .row-go { font-size: 17px; } .expand.featured .expand-inner { padding: 0 18px 26px; } .corner { position: absolute; width: 5px; height: 5px; background: var(--accent); } .corner.tl { top: -3px; left: -3px; } .corner.tr { top: -3px; right: -3px; } .corner.bl { bottom: -3px; left: -3px; } .corner.br { bottom: -3px; right: -3px; } .detail-label { margin: 22px 0 10px; font-family: "Silkscreen", monospace; font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .how-list { margin: 0; padding: 0; list-style: none; } .how-list li { position: relative; margin: 5px 0; padding-left: 18px; color: var(--dim); font-size: 13.5px; } .how-list li::before { content: "+"; position: absolute; left: 0; top: 1px; color: var(--accent); font-family: "Silkscreen", monospace; font-size: 11px; } .detail-links { margin-top: 18px; display: flex; gap: 14px; } /* ----- install panel ----- */ .panel { position: relative; margin-top: 6px; padding: 24px 26px; border: 1px solid var(--line); background: var(--panel); animation: rise 0.4s steps(4) backwards; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .panel-name { margin: 0; font-family: "Silkscreen", monospace; font-weight: 400; font-size: 19px; } .panel-links { display: flex; gap: 14px; } .plink { color: var(--dim); text-decoration: none; font-size: 13px; letter-spacing: 0.02em; /* instant, for the same reason as the corner buttons */ } .plink:hover, .plink:focus-visible { color: var(--accent); outline: none; } .panel-desc { margin: 10px 0 18px; color: var(--dim); font-size: 13.5px; max-width: 56ch; } .term { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); background: #0a0a13; } .term-lines { flex: 1; padding: 13px 16px; overflow-x: auto; white-space: nowrap; } .term-line { display: block; font-family: inherit; font-size: 13px; line-height: 2; color: var(--ink); } .term-line::before { content: "$ "; color: var(--accent); } .copy-btn { flex: 0 0 auto; align-self: center; margin: 0 12px; padding: 9px 14px; font-family: "Silkscreen", monospace; font-size: 11px; color: var(--amber-ink); background: var(--accent); border: 0; cursor: pointer; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); transition: transform 0.1s steps(2), box-shadow 0.1s steps(2); } .copy-btn:hover { filter: brightness(1.08); } .copy-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55); } .copy-btn.done { background: #7de8b8; } .copy-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .panel-note { margin: 14px 0 0; color: var(--faint); font-size: 12px; max-width: 64ch; } /* ----- footer ----- */ /* The page opens every section with a dotted rule and a label. It used to end on a single dim run-on line with a middot doing all the structural work, so it closes on the same rule instead: sign-off left, link right. */ /* No position/z-index here. main is already position:relative z-index:2, so everything inside it paints above the veil and this only ever duplicated that. What it did do was make the footer its own stacking context, which Chrome then promoted to its own compositing layer (reason: Overlap, against the #front canvas). Text on a separately composited layer with a transparent background loses subpixel antialiasing and is re-rasterized whenever the layer is re-composited, so the letters and the dotted rule shimmered while flat fills sat still. The rows never had it, and never shimmered. */ footer { /* 110px here plus the 200px of padding below left a chasm between the last section and the sign-off; a section-sized gap is enough to separate them */ margin-top: 64px; } /* .block-rule is reused verbatim from the section heads; as a block child its flex properties simply don't apply and the dotted pattern is all that's left */ .foot-main { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; } .foot-sign { margin: 0; font-family: "Silkscreen", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } footer a { color: var(--dim); text-decoration: none; font-size: 12px; letter-spacing: 0.02em; } footer a:hover, footer a:focus-visible { color: var(--amber); outline: none; } /* Revealed by app.js on the first keypress, never before: a mouse user has no use for it. Real elements now, drawn as keycaps with the same hard offset shadow the copy button uses. */ .foot-keys { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 20px 0 0; padding: 0; list-style: none; animation: rise 0.4s steps(4) backwards; } /* display:flex above would otherwise beat the [hidden] default and the legend would show before anyone touched a key */ .foot-keys[hidden] { display: none; } .foot-keys li { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.04em; color: var(--faint); } .foot-keys kbd { min-width: 20px; padding: 3px 5px; font-family: "Silkscreen", monospace; font-size: 10px; line-height: 1; text-align: center; color: var(--dim); background: #0a0a13; border: 1px solid var(--line); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); } .foot-keys kbd + kbd { margin-left: -3px; } /* ----- motion & small screens ----- */ @keyframes rise { from { opacity: 0; transform: translateY(10px); } } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 640px) { main { padding-bottom: 170px; } .row { flex-wrap: wrap; gap: 6px 18px; } .row-desc { flex-basis: 100%; order: 3; } .block-blurb { display: none; } .term { flex-direction: column; } .copy-btn { align-self: stretch; margin: 0; padding: 12px; } .expand.featured .row-toggle { padding: 16px 14px; } .expand.featured .row-name { font-size: 16px; } .expand.featured .expand-inner { padding: 0 14px 22px; } } @media (prefers-reduced-motion: reduce) { .block, .row, .panel { animation: none; } .intro-icon, .intro-text, .intro-skip, #intro.out .intro-icon, #intro.out .intro-text, #intro.out .intro-skip { animation: none; } #intro { transition-delay: 0s; } html.ready .masthead h1, html.ready .tagline, html.ready footer { animation: none; } .row, .row-go, .copy-btn, .plink, #snd, #nocturna, .expand-detail, .expand, .expand.featured { transition: none; } /* (0,2,0), to outrank the card's own */ #nocturna .beacon { animation: none; } #page-fade { transition: none; } }