/* Punch Cards — a Logical Art bit. * * Surfaces, ink, type scale and the footer come from logical-art.css, loaded * first. The accent arrives as --machine from the generated la-machines.css, * keyed off data-machine on . * * The one inversion on the page: a punch card is a pale object, so the card * itself is the only light surface in the family. That is not a theme change, * it is the artifact. Everything around it stays the instrument dark. */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--la-font-ui); background: var(--la-page); color: var(--la-ink); line-height: var(--la-leading-body); -webkit-font-smoothing: antialiased; } /* One column, one width, for every block on the page. It used to run 62rem for the page and the card frame, cap prose at --la-measure, and leave the FAQ and the source list with no cap at all: four different right edges, which reads as accident rather than design. The card wants width and prose wants a measure, and the honest resolution is to let the measure win. This page's whole argument is that eighty columns across a hand-held object is genuinely tiny, so a card that renders small is telling the truth. */ main.bit { max-width: var(--la-measure); margin: 0 auto; padding: 3rem 1.25rem 3rem; } /* Nothing inside sets its own width. Any block that wants to be narrower than the column has to justify it, and none of them can. */ main.bit p, main.bit ul, main.bit ol, main.bit dl, main.bit h1, main.bit h2 { max-width: none; } .pc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- The card ------------------------------------------------------------ */ .pc-stage { margin-top: var(--la-space-5); } /* The card and its row gutter. The gutter is this page's addition: a real card did not need one because it printed the digit at every position, and at this scale those are about four pixels. */ .pc-cardrow { display: flex; align-items: stretch; gap: 0.4rem; } .pc-gutter { list-style: none; display: grid; grid-template-rows: repeat(12, 1fr); padding: 4.6% 0 4.4%; font-family: var(--la-font-mono); font-size: 0.56rem; line-height: 1; text-align: right; color: var(--la-ink-faint); flex: 0 0 1.4rem; } .pc-gutter li { display: flex; align-items: center; justify-content: flex-end; } /* The three zone rows, named in the machine's own accent, because "12, 11, 0 are the zone rows" is the single fact the whole encoding rests on. */ .pc-gutter .is-zone { color: var(--machine); } .pc-card-frame { flex: 1 1 auto; min-width: 0; border: 1px solid var(--la-hairline); border-radius: var(--la-radius); background: var(--la-sunken); padding: var(--la-space-2); transition: transform var(--la-transition); } .pc-card { display: block; width: 100%; height: auto; border-radius: 2px; } .pc-card:focus-visible { outline: 2px solid var(--machine); outline-offset: 4px; } .pc-stock { fill: var(--machine); stroke: color-mix(in srgb, #000 25%, var(--machine)); stroke-width: 1; } /* Every hole position is a target. */ .pc-hole { fill: color-mix(in srgb, #000 12%, transparent); cursor: pointer; } /* A punched hole shows the surface the card is lying on. */ .pc-hole.is-punched { fill: #14100a; } .pc-hole.is-current { fill: color-mix(in srgb, #000 26%, transparent); } .pc-hole.is-punched.is-current { fill: #000; } /* A column punched past three. The one place this page needs to say "this breaks", and red is the only word for it. */ .pc-hole.is-over.is-punched { fill: #8c1d16; } /* The reader's sweep, one column at a time. */ .pc-hole.is-reading { fill: color-mix(in srgb, #000 34%, transparent); } .pc-hole.is-reading.is-punched { fill: #000; } /* The printed digit at every position: what actually gives a card its texture. At desktop width these read as digits, on a phone as the grain of the stock. */ .pc-grain-digit { font-family: var(--la-font-mono); font-size: 7px; fill: color-mix(in srgb, #000 24%, transparent); } .pc-colnum { font-family: var(--la-font-mono); font-size: 8px; fill: color-mix(in srgb, #000 55%, transparent); } .pc-char { font-family: var(--la-font-mono); font-size: 11px; fill: color-mix(in srgb, #000 72%, transparent); } .pc-char.is-current { fill: #000; font-weight: 700; } .pc-char.is-invalid { fill: #8c1d16; font-weight: 700; } .pc-fields { visibility: hidden; } .show-fields .pc-fields { visibility: visible; } .pc-field { fill: color-mix(in srgb, #000 7%, transparent); } .pc-field-1 { fill: color-mix(in srgb, #000 2%, transparent); } /* Lace: every position punched. The card is drawn tilted and desaturated because it has lost its structure. It does not animate a jam; the page says in words that nothing here jams. */ .is-laced .pc-card-frame { transform: rotate(-0.6deg); } .is-laced .pc-stock { fill: color-mix(in srgb, var(--la-ink-faint) 55%, var(--machine)); } /* ---- Controls ------------------------------------------------------------ */ .pc-controls { margin-top: var(--la-space-3); } .pc-label { display: block; font-family: var(--la-font-mono); font-size: var(--la-text-xs); color: var(--la-ink-faint); margin-bottom: var(--la-space-1); } #pc-input { width: 100%; font-family: var(--la-font-mono); font-size: var(--la-text-base); color: var(--la-ink); background: var(--la-raised); border: 1px solid var(--la-hairline-strong); border-radius: var(--la-radius-sm); padding: 0.6em 0.7em; } #pc-input:focus-visible { outline: 2px solid var(--machine); outline-offset: 2px; } .pc-note { margin-top: var(--la-space-2); font-size: var(--la-text-sm); color: var(--la-ink-dim); } .pc-switches { margin-top: var(--la-space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--la-space-2) var(--la-space-3); } .pc-switch { display: inline-flex; align-items: center; gap: var(--la-space-2); font-size: var(--la-text-sm); color: var(--la-ink-dim); cursor: pointer; } .pc-switch input { accent-color: var(--machine); width: 1rem; height: 1rem; } .pc-switch input:focus-visible { outline: 2px solid var(--machine); outline-offset: 3px; } .pc-button { font: inherit; font-size: var(--la-text-sm); color: var(--la-ink); background: var(--la-raised); border: 1px solid var(--la-hairline-strong); border-radius: var(--la-radius-sm); padding: 0.45em 0.9em; cursor: pointer; transition: border-color var(--la-transition), color var(--la-transition); } .pc-button:hover { border-color: var(--machine); color: var(--machine); } .pc-button:focus-visible { outline: 2px solid var(--machine); outline-offset: 3px; } .pc-button-go { border-color: color-mix(in srgb, var(--machine) 55%, transparent); color: var(--machine); } .pc-button:disabled { opacity: 0.5; cursor: default; } .pc-readback-label { margin-top: var(--la-space-3); font-family: var(--la-font-mono); font-size: var(--la-text-xs); color: var(--la-ink-faint); } /* What the reader decoded. Monospace and pre-wrap so the spaces a blank column produces stay visible as spaces, which is most of the point of reading it back at all. */ .pc-readback { margin-top: var(--la-space-1); font-family: var(--la-font-mono); font-size: var(--la-text-sm); color: var(--machine); background: var(--la-sunken); border: 1px solid var(--la-hairline); border-radius: var(--la-radius-sm); padding: 0.6em 0.7em; white-space: pre-wrap; word-break: break-all; min-height: 2.8em; } /* ---- The enlarged column, which is also the punch keyboard --------------- */ .pc-inspect { margin-top: var(--la-space-6); } main.bit section h2 { font-family: var(--la-font-display); font-size: var(--la-text-xl); line-height: var(--la-leading-tight); letter-spacing: -0.01em; } .pc-inspect p, .pc-why p { margin-top: var(--la-space-2); color: var(--la-ink-dim); } .pc-inspect-body { margin-top: var(--la-space-3); display: flex; flex-wrap: wrap; gap: var(--la-space-5); align-items: flex-start; } .pc-stack { list-style: none; display: grid; gap: 2px; background: var(--machine); border: 1px solid color-mix(in srgb, #000 25%, var(--machine)); border-radius: 2px; padding: 6px; } .pc-stack li { display: flex; align-items: center; gap: 0.5rem; } .pc-stack-row { font-family: var(--la-font-mono); font-size: 0.7rem; color: color-mix(in srgb, #000 70%, transparent); width: 1.4em; text-align: right; } /* Buttons, not decoration: this is where you punch by hand. */ .pc-stack-hole { display: block; width: 1.6rem; height: 0.72rem; padding: 0; border: 0; border-radius: 1px; cursor: pointer; background: color-mix(in srgb, #000 12%, transparent); transition: background var(--la-transition); } .pc-stack-hole:hover { background: color-mix(in srgb, #000 32%, transparent); } .pc-stack-hole.is-punched { background: #14100a; } .pc-stack-hole:focus-visible { outline: 2px solid var(--la-page); outline-offset: 2px; } .pc-readout { display: grid; gap: var(--la-space-2); flex: 1 1 15rem; min-width: 13rem; } .pc-readout div { display: flex; justify-content: space-between; gap: var(--la-space-3); border-bottom: 1px solid var(--la-hairline); padding-bottom: var(--la-space-1); } .pc-readout dt { color: var(--la-ink-faint); font-size: var(--la-text-sm); } .pc-readout dd { font-family: var(--la-font-mono); font-size: var(--la-text-sm); color: var(--la-ink); } .pc-readout dd.is-invalid { color: #ff6b5e; } /* ---- Prose --------------------------------------------------------------- */ .pc-why { margin-top: var(--la-space-6); } .pc-why strong { color: var(--la-ink); } /* The self-check line reports a measurement the page just took, so it is styled as an instrument reading rather than as body copy. */ .pc-check { margin-top: var(--la-space-3); font-family: var(--la-font-mono); font-size: var(--la-text-xs); color: var(--machine); border-left: 2px solid color-mix(in srgb, var(--machine) 45%, transparent); padding-left: var(--la-space-2); } .pc-check.is-bad { color: #ff4b3e; border-left-color: #ff4b3e; } main.bit .la-faq, main.bit section { margin-top: var(--la-space-6); } main.bit .la-faq details { margin-top: var(--la-space-3); } main.bit footer { margin-top: var(--la-space-6); } @media (max-width: 34rem) { main.bit { padding-top: 2rem; } .pc-card-frame { padding: 0.35rem; } .pc-gutter { font-size: 0.48rem; flex-basis: 1.1rem; } .pc-inspect-body { gap: var(--la-space-3); } } @media (prefers-reduced-motion: reduce) { .pc-card-frame { transition: none; } .is-laced .pc-card-frame { transform: none; } .pc-stack-hole { transition: none; } }