/* getxfree — interface styles. * * The world is an early-80s rhythm machine panel. The direction contract rides in * every page's markup as the first child of ; tokens.css carries the palette. * * Three laws, and breaking any one of them turns the world into a costume of itself: * * 1. NO GRADIENTS. Anywhere. A screen-printed panel has flat ink on a flat * surface. Depth comes from hairlines and inset shadow. The one texture on the * page is fine grain, and it is noise, not a ramp. * 2. LIGHT MEANS LIVE. The only things that glow are LEDs and readout digits. * Because nothing else glows, a glow is legible as state without a label. * 3. EVERY STATE CHANGES TWO CHANNELS. Never colour alone — a lit key also gains * an LED and a printed word. That is an accessibility requirement and it is * also what the world does: a machine tells you the same thing three ways. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--ground); /* Fine grain, the panel's own surface. Noise, never a ramp — see law 1. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); color: var(--ink); font-family: var(--face-text); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ---- browser surfaces --------------------------------------------------------- * The parts nobody draws still belong to the design. A default blue selection on a * charcoal panel is the tell that a page was assembled rather than built. */ ::selection { background: var(--led-amber); color: var(--on-key); } :root { scrollbar-color: var(--panel-lift) var(--ground); scrollbar-width: thin; accent-color: var(--led-red); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--void); } ::-webkit-scrollbar-thumb { background: var(--panel-lift); border: 2px solid var(--void); border-radius: var(--radius); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } :focus-visible { outline: 2px solid var(--led-amber); outline-offset: 2px; border-radius: var(--radius); } a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: color var(--beat) var(--ease), text-decoration-color var(--beat) var(--ease); } a:hover { color: var(--led-amber); text-decoration-color: var(--led-amber); } .skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 20; padding: var(--s-3) var(--s-4); background: var(--led-amber); color: var(--on-key); font-family: var(--face-display); text-transform: uppercase; letter-spacing: var(--legend-track); text-decoration: none; } .skip:focus { inset-inline-start: 0; } .shell { width: min(100% - 2 * var(--s-4), var(--shell)); margin-inline: auto; } /* ---- silkscreen legend -------------------------------------------------------- * One class, one definition. A legend that drifts between panels is the thing that * makes screen-printed type read as typed-out type. */ .stub__office, .intake__label, .classes caption, .classes th, .colophon__row > *:first-child { font-family: var(--face-display); font-weight: 600; font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; color: var(--ink-2); } /* ---- masthead ------------------------------------------------------------------ */ .masthead { background: var(--panel); border-bottom: 1px solid var(--void); box-shadow: var(--lift); } .masthead__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; padding-block: var(--s-3); } .wordmark { font-family: var(--face-display); font-weight: 700; font-size: var(--t-lg); letter-spacing: 0.02em; text-transform: lowercase; color: var(--ink); text-decoration: none; } .wordmark b { font-weight: 700; color: var(--led-red); } .wordmark:hover { color: var(--ink); } .nav { display: flex; gap: var(--s-2); flex-wrap: wrap; } .nav__link { position: relative; padding: var(--s-2) var(--s-3) calc(var(--s-2) + 3px); font-family: var(--face-display); font-weight: 600; font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; color: var(--ink-2); text-decoration: none; transition: color var(--beat) var(--ease); } /* The active tab takes a lit rule under it, exactly as a selected bank does on the * machine. Colour plus a bar: two channels, per law 3. */ .nav__link::after { content: ''; position: absolute; inset-inline: var(--s-3); bottom: 0; height: 2px; background: transparent; transition: background var(--beat) var(--ease); } .nav__link:hover { color: var(--ink); } .nav__link:hover::after { background: var(--rule-strong); } .nav__link[aria-current='page'] { color: var(--ink); } .nav__link[aria-current='page']::after { background: var(--led-red); box-shadow: 0 0 6px rgba(255, 59, 48, 0.55); } /* ---- the intake panel ---------------------------------------------------------- */ .counter { padding-block: var(--s-7) var(--s-4); } .counter__title { margin: 0 0 var(--s-3); font-family: var(--face-display); font-weight: 700; font-size: clamp(2rem, 7vw, var(--t-3xl)); line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; } .counter__lede { margin: 0 0 var(--s-5); max-width: 54ch; color: var(--ink-2); font-size: var(--t-md); } .intake { background: var(--panel); border: 1px solid var(--void); border-radius: var(--radius); box-shadow: var(--lift); padding: var(--s-4); } .intake__label { display: block; margin-bottom: var(--s-2); } .intake__field { display: flex; gap: var(--s-3); flex-wrap: wrap; } /* The field is a window cut into the panel, not a pill floating on it. */ .intake__input { flex: 1 1 18rem; min-width: 0; padding: var(--s-3) var(--s-4); background: var(--recess); border: 1px solid var(--void); border-radius: var(--radius); box-shadow: var(--well); color: var(--ink); caret-color: var(--led-red); font-family: var(--face-figure); font-size: var(--t-sm); transition: box-shadow var(--beat) var(--ease); } .intake__input::placeholder { /* Measured: --ink-3 gave 3.73:1 here, under the 4.5:1 floor placeholder text has to clear. --ink-2 measures 7.4:1 on the recess. */ color: var(--ink-2); } .intake__input:hover { box-shadow: var(--well), inset 0 0 0 1px var(--rule); } .intake__input:focus { outline: none; box-shadow: var(--well), inset 0 0 0 1px var(--led-red); } .intake__submit { flex: 0 0 auto; padding: var(--s-3) var(--s-6); background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); font-family: var(--face-display); font-weight: 700; font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; cursor: pointer; transition: background var(--beat) var(--ease), color var(--beat) var(--ease), border-color var(--beat) var(--ease); } .intake__submit:hover { border-color: var(--led-red); color: var(--led-red); } .intake__submit:active { background: var(--led-red); border-color: var(--led-red); color: var(--on-key); } .intake__submit[disabled] { cursor: not-allowed; color: var(--ink-2); border-color: var(--rule); } .intake__error { margin: var(--s-3) 0 0; padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--led-red); color: var(--ink); font-size: var(--t-sm); } /* The panel seam: two screws and a hairline, the join between the intake and the * readout bank. It replaces the perforation the scaffold carried. */ .perf { position: relative; height: var(--s-3); border-bottom: 1px solid var(--rule); margin-block: var(--s-4); } .perf::before, .perf::after { content: ''; position: absolute; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--recess); box-shadow: inset 0 1px 0 rgba(233, 229, 219, 0.14); } .perf::before { left: 0; } .perf::after { right: 0; } /* ---- the readout bank ---------------------------------------------------------- */ .stub { background: var(--panel); border: 1px solid var(--void); border-radius: var(--radius); box-shadow: var(--lift); padding: var(--s-4); } .stub__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); } /* Serial, running time and size are measurements, so they are set in the measurement * face and lit like a readout. Nothing that was not measured is set this way. */ .stub__serial, .stub__meta b { font-family: var(--face-figure); font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--readout); text-shadow: 0 0 7px rgba(255, 65, 54, 0.4); } .stub__feature { margin: var(--s-4) 0 0; font-family: var(--face-display); font-weight: 600; font-size: var(--t-lg); line-height: 1.2; text-wrap: balance; } .stub__meta { display: flex; gap: var(--s-5); flex-wrap: wrap; margin: var(--s-3) 0 var(--s-4); padding: 0; list-style: none; font-family: var(--face-display); font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; color: var(--ink-2); } .stub__meta b { margin-inline-start: var(--s-2); letter-spacing: 0; } .stub__note { margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--t-sm); max-width: var(--measure); } /* At rest the whole bank reads as a machine with nothing loaded: readouts dark, keys * unlit. This is the state a visitor meets first, so it is designed, not defaulted — * it must read as an instrument waiting, never as a table that failed to load. */ .stub--blank .stub__serial, .stub--blank .stub__meta b { color: var(--readout-off); text-shadow: none; } .stub--blank .stub__feature { /* The at-rest label is read, so it clears the text floor like any other copy; --ink-3 measured 3.24:1 on the panel. Its "off" reading comes from the unlit LED and dark readouts beside it, not from dimming the words below legibility. */ color: var(--ink-2); } /* ---- the key table -------------------------------------------------------------- */ .table-scroll { overflow-x: auto; } .classes { width: 100%; border-collapse: collapse; } .classes caption { text-align: start; padding-bottom: var(--s-2); } .classes th { text-align: start; font-weight: 600; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); } .classes td { padding: var(--s-3); border-bottom: 1px solid var(--rule); vertical-align: middle; } .classes tr:last-child td { border-bottom: 0; } /* Each quality is a key. The ladder red > orange > yellow > white encodes weight and * nothing else, so the colour is information rather than decoration. */ .class__figure { display: inline-flex; align-items: center; justify-content: center; min-width: 3.25rem; padding: var(--s-2) var(--s-3); border-radius: var(--radius-key); border: 1px solid var(--key-edge); background: var(--key-dark); color: var(--ink-3); font-family: var(--face-display); font-weight: 700; font-size: var(--t-sm); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(233, 229, 219, 0.09); } /* The ladder, applied. Hotter key = heavier file, which is the only thing this * colour ever means. With two qualities the source publishes, HD takes the red end * and SD the yellow; a source that later exposes more sits between them. */ tr[data-kind] .class__figure { background: var(--key-white); color: var(--on-key); } tr[data-quality='HD'] .class__figure { background: var(--key-red); } tr[data-quality='SD'] .class__figure { background: var(--key-yellow); } tr[data-quality='Best'] .class__figure { background: var(--key-orange); } tr[data-kind] td:first-child { position: relative; padding-inline-start: var(--s-5); } /* The LED above the key. Amber when the bytes come straight from the source, red * when they cross this server — the site's central fact, lit. */ tr[data-kind] td:first-child::before { content: ''; position: absolute; inset-inline-start: var(--s-2); top: 50%; translate: 0 -50%; width: 7px; height: 7px; border-radius: 50%; background: var(--led-off); } tr[data-kind='direct'] td:first-child::before { background: var(--led-amber); box-shadow: 0 0 7px rgba(255, 165, 0, 0.65); } tr[data-kind='relay'] td:first-child::before { background: var(--led-red); box-shadow: 0 0 7px rgba(255, 59, 48, 0.6); } /* The printed word beside the key. Law 3: the route is never colour alone. */ .class__kind { display: block; margin-top: var(--s-1); font-family: var(--face-display); font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; color: var(--ink-2); } .class__weight { font-family: var(--face-figure); font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; } .class__get { padding: var(--s-2) var(--s-5); background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); font-family: var(--face-display); font-weight: 700; font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; font-variant-numeric: tabular-nums; cursor: pointer; min-width: 5.5rem; transition: background var(--beat) var(--ease), color var(--beat) var(--ease), border-color var(--beat) var(--ease); } .class__get:hover { border-color: var(--led-red); color: var(--led-red); } .class__get:active { background: var(--led-red); border-color: var(--led-red); color: var(--on-key); } .class__get[disabled] { cursor: progress; color: var(--led-amber); border-color: var(--led-amber); } .issued { font-family: var(--face-display); font-weight: 700; font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; color: var(--led-amber); } tr[data-state='failed'] .class__get { color: var(--led-red); border-color: var(--led-red); } /* The one authored moment: while a relay download runs, a light chases across the * row — the machine's chase light, and the only honest way to show progress on a * transfer whose total size is not known until it arrives. It runs on the panel's * one clock and stops dead under reduced motion, because --beat becomes 0ms. */ tr[data-kind='relay'] .class__get[disabled] { position: relative; overflow: hidden; } tr[data-kind='relay'] .class__get[disabled]::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 22%; height: 2px; background: var(--led-amber); animation: chase 1100ms linear infinite; } @keyframes chase { from { transform: translateX(-110%); } to { transform: translateX(560%); } } @media (prefers-reduced-motion: reduce) { tr[data-kind='relay'] .class__get[disabled]::after { animation: none; width: 100%; opacity: 0.5; } } /* ---- prose --------------------------------------------------------------------- */ .prose { padding-block: var(--s-6) var(--s-8); } .prose h1, .prose h2, .prose h3 { font-family: var(--face-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.14; text-wrap: balance; } .prose h1 { margin: 0 0 var(--s-4); font-size: clamp(var(--t-xl), 5.5vw, var(--t-2xl)); } /* More space above a heading than below it: the heading belongs to what follows. */ .prose h2 { margin: var(--s-7) 0 var(--s-3); font-size: var(--t-lg); padding-top: var(--s-3); border-top: 1px solid var(--rule); } .prose h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-md); } .prose p, .prose li { max-width: var(--measure); } .prose p { margin: 0 0 var(--s-4); } .prose strong { color: var(--ink); font-weight: 600; } .prose code { padding: 0.1em 0.4em; background: var(--recess); border-radius: var(--radius); font-family: var(--face-figure); font-size: 0.85em; color: var(--led-amber); } .lede { max-width: 56ch; color: var(--ink-2); font-size: var(--t-md); } .prose ol, .prose ul { padding-inline-start: var(--s-5); } .prose li { margin-bottom: var(--s-2); } .prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-5); font-size: var(--t-sm); } .prose th, .prose td { text-align: start; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); } .prose th { font-family: var(--face-display); font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; color: var(--ink-2); } .crumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-5); font-family: var(--face-display); font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; color: var(--ink-2); } .crumbs [aria-current='page'] { color: var(--ink-2); } /* ---- question list ------------------------------------------------------------- */ .qa { border-top: 1px solid var(--rule); padding-top: var(--s-4); margin-bottom: var(--s-4); } .qa h3 { margin: 0 0 var(--s-2); } .qa p:last-child { margin-bottom: 0; } /* ---- the route diagram ---------------------------------------------------------- */ .route { margin: var(--s-5) 0 var(--s-6); } .route svg { width: 100%; height: auto; color: var(--ink-2); } .route figcaption, .prose figcaption { margin-top: var(--s-3); max-width: var(--measure); color: var(--ink-2); font-size: var(--t-sm); } /* ---- internal links ------------------------------------------------------------- */ .tools { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--rule); } .tools h2 { margin: 0 0 var(--s-3); font-family: var(--face-display); font-size: var(--legend-size); letter-spacing: var(--legend-track); text-transform: uppercase; color: var(--ink-2); border: 0; padding: 0; } .tools ul { margin: 0; padding: 0; list-style: none; } .tools li { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: var(--t-sm); max-width: var(--measure); } .tools a { font-family: var(--face-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; } /* ---- colophon -------------------------------------------------------------------- */ .colophon { margin-top: var(--s-8); padding-block: var(--s-5) var(--s-7); background: var(--panel); border-top: 1px solid var(--void); box-shadow: var(--lift); font-size: var(--t-sm); color: var(--ink-2); } .colophon__row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: baseline; margin-bottom: var(--s-4); } .colophon__age, .colophon__note { max-width: var(--measure); margin: 0 0 var(--s-3); } .colophon a { color: var(--ink-2); } /* ---- narrow ---------------------------------------------------------------------- */ @media (max-width: 40rem) { .masthead__row { gap: var(--s-3); } .nav { gap: 0 var(--s-1); } .counter { padding-block: var(--s-5) var(--s-4); } .intake__submit, .class__get { width: 100%; } .classes td, .classes th { padding: var(--s-2); } .stub__head { flex-direction: column; gap: var(--s-1); } } /* Screen-reader-only. The key table keeps its caption for assistive tech while the * panel's own legend carries it visually — printing both put the same words on the * panel twice. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The machine at rest: an unlit LED beside an unlit key. Without the lamp the blank * key read as a stray box rather than as a control that has not been given anything * to do yet. */ tr[data-blank] td:first-child { position: relative; padding-inline-start: var(--s-5); } tr[data-blank] td:first-child::before { content: ''; position: absolute; inset-inline-start: var(--s-2); top: 50%; translate: 0 -50%; width: 7px; height: 7px; border-radius: 50%; background: var(--led-off); }