/* V3 · Afiche serigrafía, DORADO (decisión de Jose, 2026-09-20: "probemos en la versión final que sea dorado, pero en una versión clara y otra oscura"). The palette lives here and nowhere else: site/js/theme.js reads these custom properties back for the brain shader, the cables, the tracts and every 2D canvas, so no colour is written twice. LIGHT is the default sheet. The Binance yellow (#F0B90B, read off bnbchain.org) is 1.6:1 on cream, so on this sheet it prints only as an AREA (--hot-fill: the flat mark, stamps, the buy button, the LIVE tag) with ink on top (10.5:1); anything that is TYPE or a LINE goes in brass. El 2026-09-20 el laton bajo un escalon (Jose: poco contraste en la clara): --hot pasa de #a67c00 (3,4:1) a #896900 (4,6:1) y --hot-text de #7a5c00 (5,5:1) a #6b5100 (6,6:1). Con eso el caliente se queda de MARCA — rotulos, filetes, sellos y tipo de display — y los DATOS (precios, cantidades, rho) se imprimen en tinta, que es lo que se lee en una placa. Same print, two papers: DARK below flips the sheet and lets the yellow itself carry type. Lo mide test/contrast_audit.py sobre el DOM real, elemento por elemento. */ :root { --paper: #f4f1ea; /* the sheet */ --ink: #111111; /* the first screen: type, halftone, keylines */ /* el laton pasa 4,5:1 POR SI SOLO y no sujeto a que nunca lleve tipo chico: #8a6a00 medía 4,494 y reprobaba el gate por seis milesimas donde el display cae bajo 24 px (la flecha de la cinta a 22 px y los dos .pin a 18 px en telefono). #896900 es un caracter de diferencia, invisible a ojo, y mide 4,56. */ --hot: #896900; /* the second screen as type and line: brass, 4,56:1 on cream */ --hot-deep: #6b5100; /* the same, stepped down where a block inverts */ --hot-text: #6b5100; /* hot carrying type under 24 px: 6,6:1 */ --hot-fill: #f0b90b; /* the Binance yellow, as an area only */ --on-hot: #111111; /* what prints on top of a hot fill */ --grain: rgba(0,0,0,.045); /* riso grain: dark dots multiplied into the paper */ --grain-blend: multiply; --display: 'League Gothic', Impact, 'Arial Narrow', sans-serif; --type: 'Special Elite', 'Courier Prime', monospace; --mono: 'Courier Prime', ui-monospace, monospace; } /* DARK: the sheet turns black and the first screen becomes bone; the yellow (10.9:1 on black) carries display type and areas, and small type steps down to --hot-deep (7.4:1). `gold` stays as an alias so the old links still work. */ [data-ink="dark"], [data-ink="gold"] { --paper: #0b0b0b; --ink: #f4f1ea; --hot: #f0b90b; --hot-deep: #c99700; --hot-text: #c99700; --hot-fill: #f0b90b; --on-hot: #0b0b0b; --grain: rgba(244,241,234,.05); /* the grain inverts too: light dots screened over the black */ --grain-blend: screen; } /* UN BLOQUE INVERTIDO IMPRIME AL REVES, en las dos hojas. En la CLARA el papel del bloque es la tinta: el laton que lleva tipo cae a 2,5:1 sobre negro, y ahi el unico que puede llevar tipo es el amarillo (10,5:1 sobre tinta), que fuera del bloque solo es area — o sea, dentro del bloque rige la regla de la hoja oscura. Los FILETES siguen en --hot: son linea, no tipo. */ .strip, #card, .token, .zoo-rules tr.on td { --hot-deep: var(--hot-fill); --hot-text: var(--hot-fill); } /* an inverted block prints bone on the black page, so the loud gold has to step down inside it and its small type goes dark: gold on bone is 1.6:1, unreadable at any size */ [data-ink="dark"] .strip, [data-ink="dark"] #card, [data-ink="dark"] .token, [data-ink="dark"] .zoo-rules tr.on td, [data-ink="gold"] .strip, [data-ink="gold"] #card, [data-ink="gold"] .token, [data-ink="gold"] .zoo-rules tr.on td { --hot: var(--hot-deep); --hot-text: var(--paper); } /* ORANGE, the first poster (2026-09-19), kept for the record behind ?ink=orange. Not the product. */ [data-ink="orange"] { --paper: #f4f1ea; --ink: #111111; --hot: #ff4a1c; --hot-deep: #ff4a1c; --hot-text: #ff4a1c; --hot-fill: #ff4a1c; --on-hot: #111111; --grain: rgba(0,0,0,.045); --grain-blend: multiply; } /* the switch in the nav: mono, no box. It reprints the sheet (a reload), because every canvas read the palette once */ .nav .ink { background: none; border: 0; padding: 0; font: inherit; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); cursor: pointer; opacity: .75; } .nav .ink:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--hot); text-underline-offset: 3px; } /* La banda de la nav es opaca desde que se le puso papel, asi que un ancla que aterriza en 0 queda debajo de ella. El valor es el alto real de la banda medido en Chrome (56 px; 68 con la marca en su propio renglon bajo 480 px) mas 2 px de aire, que es el grueso de su filete. */ html { scroll-padding-top: 58px; } @media (max-width: 480px) { html { scroll-padding-top: 70px; } } html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(var(--grain) 1px, transparent 1.2px); background-size: 3px 3px; mix-blend-mode: var(--grain-blend); } /* El cabezal del afiche se imprime sobre su propio papel. Sin fondo la nav era transparente y lo de abajo se imprimia encima de ella: medido recorriendo la pagina de media en media pantalla, 24 de 29 paradas en movil tenian texto ajeno dentro de la caja de la nav (45 textos distintos) y 9 de 22 en escritorio, mas cinco canvas cruzandola. El grano se repite aqui porque la banda tapa la capa de grano de la pagina (z-index 5 contra 0) y el papel tiene que seguir siendo el mismo papel; la fase coincide porque las dos cajas arrancan en 0,0 con la misma celda de 3 px. La mezcla se va: multiply sobre el bloque negro del token borraria la banda entera. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; font-family: var(--type); font-size: 14px; letter-spacing: .04em; background-color: var(--paper); background-image: radial-gradient(var(--grain) 1px, transparent 1.2px); background-size: 3px 3px; border-bottom: 2px solid var(--ink); } .nav a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; } .nav a.on, .nav a:hover { border-color: var(--hot); } .nav .brand { font-family: var(--display); font-size: 22px; letter-spacing: .06em; } .hero { position: relative; z-index: 1; min-height: 100svh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; } .hero .stage { position: relative; min-height: 70svh; } .hero canvas#brain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; } #labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } #labels span { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-size: 21px; color: var(--hot-text); letter-spacing: .02em; text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper); } #labels span.hot { color: var(--paper); font-size: 22px; text-shadow: 0 0 3px var(--ink); } .hero .copy { position: relative; padding: 11svh 5vw 6svh 2vw; display: flex; flex-direction: column; justify-content: center; } .word { font-family: var(--display); font-weight: 400; font-size: clamp(88px, 15.5vw, 236px); line-height: .82; margin: 0 0 .06em -.02em; letter-spacing: -.005em; color: var(--ink); text-shadow: 3px 0 0 var(--hot); } .tag { font-family: var(--display); font-size: clamp(34px, 4.6vw, 66px); line-height: .92; color: var(--hot); margin: .1em 0 .35em; letter-spacing: .01em; } .sub { font-family: var(--type); font-size: clamp(14px, 1.15vw, 18px); max-width: 44ch; margin: 0 0 1.4em; } .strip { display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: clamp(26px, 3vw, 42px); padding: .18em .6em .1em; transform: rotate(-1.4deg); clip-path: polygon(0 6%, 3% 0, 98% 3%, 100% 94%, 96% 100%, 2% 97%); letter-spacing: .04em; align-self: flex-start; } .strip span { border-bottom: 3px solid var(--hot); } .live { font-family: var(--mono); font-size: 12px; margin-top: 2.2em; text-transform: uppercase; letter-spacing: .08em; } .live b { font-weight: 400; color: var(--hot-text); } .pulse { position: relative; z-index: 1; border-top: 4px solid var(--ink); padding: 5vh 4vw 8vh; } .phead h2 { font-family: var(--display); font-size: clamp(64px, 10vw, 150px); line-height: .85; margin: 0; letter-spacing: .005em; text-shadow: 3px 0 0 var(--hot); } .phead .sub { font-family: var(--type); font-size: clamp(15px, 1.2vw, 19px); max-width: 62ch; margin: .8em 0 2em; } .pgrid { display: grid; grid-template-columns: 300px 1fr 300px; gap: 3vw; align-items: start; } .ticket { border: 2px dashed var(--ink); padding: 14px 16px; background: var(--paper); font-family: var(--type); font-size: 13px; line-height: 1.5; position: relative; } .ticket::before, .ticket::after { content: ''; position: absolute; top: -1px; bottom: -1px; width: 10px; background: radial-gradient(circle, var(--paper) 45%, transparent 47%) 0 0/10px 10px; } .ticket::before { left: -6px; } .ticket::after { right: -6px; } .ticket ol { list-style: none; margin: 0; padding: 0; } .ticket li { padding: 8px 0; border-bottom: 1px dashed var(--ink); text-transform: uppercase; } .ticket li:last-child { border: 0; } .ticket li em { font-style: normal; color: var(--hot-text); } .ticket li small { display: block; opacity: .6; } /* LA PRIMERA COLUMNA DE BLOCK PULSE: el atlas chico golpeado por el bloque, y debajo el ticket. Se lee de arriba abajo bloque -> region encendida en el atlas -> la fila que se mueve en el raster. */ .pcol { display: grid; gap: 20px; align-content: start; } .pulse-atlas canvas { display: block; width: 100%; height: 230px; } .pulse-atlas b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); line-height: 1; letter-spacing: .02em; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 8px; } /* the block ticket: three rows of one height (2 lines of data + up to 2 of region name), reserved before the first block lands, so nothing below moves as blocks arrive. Six of them made the column twice as tall as the raster once the atlas went on top. */ #ticker { min-height: calc(3 * (6em + 16px) + 5px); } #ticker li { min-height: 6em; box-sizing: content-box; } .chart { position: relative; height: 420px; border: 2px solid var(--ink); background: var(--paper); } .chart canvas { width: 100%; height: 100%; display: block; } .chart .axis { position: absolute; left: 6px; top: 4px; bottom: 4px; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; font-family: var(--type); } .meters .stamp { border: 3px solid var(--hot); color: var(--hot-text); padding: 8px 12px 10px; margin-bottom: 12px; transform: rotate(-1deg); font-family: var(--type); } .meters .stamp small { display: block; font-size: 12px; letter-spacing: .1em; } /* los dos sellos rho son DATO, en la portada y en el tablero de /pulse: el numero va en TINTA y el caliente se queda en el borde del sello y en su rotulo. Era --hot a 40 px: pasaba el 3:1 de texto grande y se leia lavado igual. */ .meters .stamp b { font-family: var(--display); font-size: 40px; font-weight: 400; line-height: 1; color: var(--ink); } .meters .rule { font-family: var(--display); font-size: 22px; line-height: 1.05; margin-top: 18px; text-transform: uppercase; letter-spacing: .01em; } .meters .rule span { color: var(--hot-text); } #card { position: fixed; left: 22px; bottom: 22px; z-index: 6; background: var(--ink); color: var(--paper); font-family: var(--type); font-size: 13px; padding: 12px 14px; max-width: 320px; display: none; } #card b { font-family: var(--display); font-size: 26px; font-weight: 400; color: var(--hot-text); display: block; letter-spacing: .02em; } #boot { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--type); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } /* sections below the fold: wood-type headline, typewriter body */ .wood { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 9vw, 140px); line-height: .85; margin: 0 0 .3em; letter-spacing: .005em; text-shadow: 3px 0 0 var(--hot); } .what, .experiments { position: relative; z-index: 1; border-top: 4px solid var(--ink); padding: 6vh 4vw 8vh; } /* THE WIRES: plate on the left, cut-chart legend on the right */ .wires { position: relative; z-index: 1; border-top: 4px solid var(--ink); padding: 6vh 4vw 8vh; } .wires .sub { font-family: var(--type); font-size: clamp(15px, 1.2vw, 19px); max-width: 62ch; margin: .8em 0 2em; } .wgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3vw; align-items: start; } .wires .stage { position: relative; aspect-ratio: 1 / 1; border: 2px solid var(--ink); background: var(--paper); } .wires .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; } .wires .stage canvas:active { cursor: grabbing; } .wires .pin { position: absolute; left: 12px; bottom: 8px; margin: 0; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--hot); letter-spacing: .02em; text-transform: uppercase; pointer-events: none; min-height: 1em; } .legend { columns: 2; column-gap: 2vw; list-style: none; margin: 0; padding: 0; font-family: var(--type); font-size: 13px; line-height: 1.35; } .legend li { padding: 4px 0; border-bottom: 1px dashed var(--ink); cursor: pointer; break-inside: avoid; } .legend li.g { border: 0; cursor: default; padding: 0; break-after: avoid; } .legend li code { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; margin-right: 4px; opacity: .7; } .legend li:hover, .legend li.on { color: var(--hot-text); } .legend li.on { border-bottom-color: var(--hot); } .legend li.on code { opacity: 1; } .legend b { font-family: var(--display); font-weight: 400; font-size: 22px; display: block; margin-top: 10px; letter-spacing: .04em; } .legend li.g:first-child b { margin-top: 0; } /* THE SCANS: the film is pinned right after the hero and the scroll moves through the head, slice by slice. Back on 2026-09-20 at Jose's request, on its own (ONE BRAIN, TEN BRAINS, PRIMATES and the cut chart stay out) and full bleed: the plate runs the whole height of the viewport and off its right edge, the type sits on the paper beside it. The four dangling declarations 6616dd2 left here are gone; the first one was eating the .exp rule. */ .scans { position: relative; z-index: 1; border-top: 4px solid var(--ink); } .scrub { display: grid; grid-template-columns: minmax(24ch, 1fr) 1.45fr; grid-template-rows: 1fr auto; gap: 0 3vw; box-sizing: border-box; height: 100svh; padding: 0 0 0 4vw; overflow: hidden; } .shead { grid-column: 1; grid-row: 1; align-self: center; } .shead .wood { margin-bottom: .2em; } .shead .sub { font-family: var(--type); font-size: clamp(15px, 1.2vw, 19px); max-width: 40ch; margin: 0; } .film { position: relative; grid-column: 2; grid-row: 1 / span 2; height: 100svh; border-left: 2px solid var(--ink); background: var(--paper); box-sizing: border-box; } .film canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* the slice number rides under the headline, never over the plate: the section sits in the middle of the film and any label inside the box lands on top of it */ .film-label { grid-column: 1; grid-row: 2; align-self: end; margin: 0 0 6svh; font-family: var(--display); font-size: clamp(30px, 3.6vw, 58px); line-height: 1; color: var(--hot); letter-spacing: .02em; } .film input[type=range] { position: absolute; right: 20px; bottom: 20px; width: min(46%, 280px); margin: 0; appearance: none; -webkit-appearance: none; height: 3px; background: var(--ink); accent-color: var(--hot); outline-offset: 6px; } .film input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--hot); border: 2px solid var(--ink); border-radius: 0; cursor: pointer; } .film input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: var(--hot); border: 2px solid var(--ink); border-radius: 0; cursor: pointer; } .film input[type=range][hidden] { display: none; } .wood.small { font-size: clamp(34px, 5vw, 64px); } /* EXPERIMENTS es un LIBRO DE RESULTADOS: una fila por experimento, numero, nombre, la pregunta, el sello y el link. Eran seis tarjetas con un badge en la esquina, o sea la grilla de features de cualquier landing. */ .exp { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--ink); } .exp li { display: grid; grid-template-columns: 2.6em minmax(170px, 22%) 1fr auto 5em; gap: 2vw; align-items: baseline; padding: 14px 0 16px; border-bottom: 1px solid var(--ink); font-family: var(--type); font-size: 13px; line-height: 1.5; } .exp .n { font-family: var(--display); font-size: 22px; color: var(--hot-text); } .exp li h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: .9; margin: 0; letter-spacing: .02em; } .exp li p { margin: 0; max-width: 60ch; } .exp li a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--hot); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; justify-self: end; } .exp .stamp { justify-self: end; border: 3px solid var(--hot); color: var(--hot-text); font-family: var(--display); font-size: 20px; line-height: 1; padding: 2px 8px; transform: rotate(-2deg); background: var(--paper); letter-spacing: .04em; white-space: nowrap; } .exp .stamp.na { border-color: var(--ink); color: var(--ink); } .token { position: relative; z-index: 1; background: var(--ink); color: var(--paper); padding: 8vh 4vw; } .token .wood { text-shadow: 3px 0 0 var(--hot); } .ca { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin: 0 0 32px; } .ca code { font-family: var(--mono); font-size: clamp(16px, 2.2vw, 34px); letter-spacing: .01em; overflow-wrap: anywhere; } .ca button { font-family: var(--display); font-size: 22px; letter-spacing: .06em; background: transparent; color: var(--paper); border: 3px solid var(--paper); padding: 4px 14px; cursor: pointer; } .ca button:disabled { opacity: .35; cursor: default; } .buy { background: var(--hot-fill); color: var(--on-hot); font-family: var(--display); font-size: 28px; padding: 6px 18px; text-decoration: none; letter-spacing: .04em; } .buy[aria-disabled="true"] { opacity: .35; pointer-events: none; } .tk { border-collapse: collapse; font-family: var(--type); font-size: 14px; width: min(100%, 720px); } /* baseline, no top: el rotulo va a 12 px y el dato a 14 px de mono, asi que alineando las cajas por arriba la primera linea del dato caia 4 px mas abajo que la del rotulo en toda la tabla. */ .tk th, .tk td { text-align: left; padding: 8px 24px 8px 0; border-bottom: 1px dashed var(--paper); vertical-align: baseline; } .tk th { font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; opacity: .7; white-space: nowrap; } .tk td { font-family: var(--mono); } .tk a { color: var(--hot-text); border-bottom: 2px solid var(--hot); text-decoration: none; } .token .fine { font-family: var(--type); font-size: 13px; line-height: 1.5; opacity: .8; margin: 20px 0 0; max-width: 60ch; } footer { position: relative; z-index: 1; border-top: 4px solid var(--ink); padding: 4vh 4vw 8vh; font-family: var(--type); font-size: 13px; line-height: 1.6; } footer p { margin: 0 0 .8em; max-width: 110ch; } /* what is not real, in one line: the section is gone (Jose, 2026-09-19) and this is the whole of it that stays */ footer .fine { font-size: 12px; line-height: 1.5; opacity: .8; } footer a { color: var(--ink); border-bottom: 2px solid var(--hot); text-decoration: none; } /* motion (spec section 6): a reveal is invisible only while the page can animate it (html.js is set by main.js once GSAP is here and motion is not reduced); without JS, without GSAP, in a crawler or a screenshot everything is simply printed */ .reveal { opacity: 1; } html.js .reveal { opacity: 0; } /* A SECOND SENSE: BINANCE */ /* la cabeza del mono al lado del titular de la seccion. Es lo unico de la pagina que es un modelo y no un dato, y el pie de la figura lo dice. */ .aperow { display: grid; grid-template-columns: .95fr 1.05fr; gap: 3vw; align-items: center; margin-bottom: 2vh; } /* el animal entero pesa mas que la cabeza: media hoja */ .ape { margin: 0; } /* EL RECINTO, COMPACTO: una VENTANA con su filete de 3 px en tinta en los cuatro lados, de la misma familia que la placa de abajo (`.placard`, tambien 3 px). Tenia una sola linea de piso de 1 px y la plancha se fundia con el papel ("el cuadro donde esta el mono me gustaria mas con un borde o algo porque choca mucho con el background", Jose 2026-09-21). El piso del animal ahora es el lado de abajo del marco. `box-sizing: border-box` mantiene el cuadrado y el lienzo y la plancha viven adentro del filete (`inset: 0` cae en la caja de relleno). En la hoja oscura --ink ya es hueso: el marco cambia de tinta solo. */ .ape-stage { position: relative; aspect-ratio: 1 / 1; border: 3px solid var(--ink); background: var(--paper); box-sizing: border-box; cursor: grab; } .ape-stage .zoo-plate { position: absolute; inset: 0; } /* EL PIE DEL ANIMAL, CON JERARQUIA Y AIRE. Las cuatro piezas eran cuatro renglones apretados uno contra otro y el nombre de la region colgaba del final del parrafo ("esos mensajes de animacion parecen comprimidos cuando podria verse mejor", Jose 2026-09-21): el acto es el titular, la firma el rotulo chico que lo fecha, la region su propio renglon y el parrafo el texto fijo. Mismo idioma del afiche: sin cajas, sin sombras, solo espacio. */ .ape figcaption .zoo-act { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.2vw, 48px); line-height: .95; letter-spacing: .01em; margin: 14px 0 6px; } /* la firma partia en dos renglones a .1em y quedaba apretada contra el acto y contra el parrafo: baja a .08em, se le da interlinea de rotulo (1.7) y el aire va debajo, separandola del bloque de texto */ .ape figcaption .zoo-why { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; line-height: 1.7; text-transform: uppercase; margin: 0 0 12px; } .ape figcaption .zoo-why b { font-weight: 400; color: var(--hot-text); } /* el parrafo fijo: su propio bloque, para que el aire de abajo no dependa de la fila de sellos */ .ape figcaption p { margin: 0 0 14px; } .ape-stage:active { cursor: grabbing; } .ape-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; } .ape figcaption { font-family: var(--type); font-size: 12px; line-height: 1.55; margin-top: 8px; max-width: 52ch; } /* el unico link de la pagina que nunca tuvo regla y salia en el azul del navegador (viene asi de a65e4e7). Habla el idioma de los links de la casa, el del pie: tinta con el subrayado en caliente. Se arregla desde aca, sin tocar el markup del recinto. */ .ape figcaption a { color: var(--ink); border-bottom: 2px solid var(--hot); text-decoration: none; } .senses { position: relative; z-index: 1; border-top: 4px solid var(--ink); padding: 6vh 4vw 8vh; } .senses .sub { font-family: var(--type); font-size: clamp(15px, 1.2vw, 19px); max-width: 62ch; margin: .8em 0 1.6em; } /* la cinta corre por el borde de arriba de la placa, en una ventana entre los dos tornillos de arriba: a sangre, el precio de turno caia justo encima de una cabeza de tornillo y la tapaba */ .tape { overflow: hidden; padding: 8px 0; margin: 0 34px; } .tape-inner { display: flex; gap: 2.2em; white-space: nowrap; font-family: var(--display); font-size: clamp(22px, 2.6vw, 38px); line-height: 1; letter-spacing: .02em; animation: tape 28s linear infinite; will-change: transform; } .tape-inner:empty::before { content: 'waiting for the first BNB / USDT trade'; font-family: var(--type); font-size: 14px; opacity: .6; } /* EL DATO EN TINTA, EL CALIENTE SOLO MARCA: el precio y la cantidad se imprimen en tinta en los dos sentidos y lo unico que cambia de color es la flecha — ▲ en caliente, ▼ en tinta. Antes la mitad compradora de la cinta entera iba en laton a 3,4:1 y era la tira que mas se veia lavada del afiche. `.up` / `.dn` siguen en el span: son el dato del sentido, los lee senses.js y no solo el color. */ .tape-inner span { flex: none; color: var(--ink); } .tape-inner .mark { font-style: normal; color: var(--ink); } .tape-inner span.up .mark { color: var(--hot); } .tape-inner small { font-family: var(--type); font-size: .45em; letter-spacing: 0; opacity: .75; } /* La cinta viaja UNA copia exacta, no la mitad de la tira. Con 2n items (n repetidos dos veces) el ancho total es 2S + (2n-1)g, asi que el 50 % cae medio hueco antes del comienzo de la segunda copia: el periodo verdadero es 50 % + g/2. Antes la cinta imprimia 40 trades distintos y viajaba el 50 %, o sea que en el empalme la tira se reemplazaba entera. */ @keyframes tape { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 1.1em)); } } /* LA PLACA DEL RECINTO. Una sola chapa: filete grueso, cuatro cabezas de tornillo y la cinta de precios corriendo por su borde de arriba. Antes eran tres piezas de texto sueltas (la cinta, una fila de cuatro numeros que es la fila de KPI de cualquier plantilla, y dos tarjetas): el dato es el mismo, las piezas sueltas eran el molde. Los datos van en TINTA y el caliente solo rotula: en una placa de zoologico lo que se lee es el dato. */ .placard { position: relative; border: 3px solid var(--ink); background: var(--paper); margin: 0 0 3vh; padding: 0 0 34px; } /* las cuatro cabezas de tornillo: dos en la banda de la cinta (sobre ella, como una chapa atornillada encima del tablero) y dos en el borde de abajo. Son los unicos circulos del afiche junto a los de FOOTPRINT. */ .placard::before, .placard::after, .pnotes::before, .pnotes::after { content: ''; position: absolute; width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; } .placard::before { top: 13px; left: 13px; } .placard::after { top: 13px; right: 13px; } .pnotes::before { bottom: -22px; left: 13px; } .pnotes::after { bottom: -22px; right: 13px; } .plate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 40px 10px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); } .plate-head h3 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: .03em; margin: 0; } .plate-head span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hot-text); white-space: nowrap; } /* WP15b: el rotulo de los tres sentidos, bajo la cabecera de la chapa. Mismo cuerpo que los rotulos de las lineas (mono 11 px espaciado) pero en TINTA: es lo que nombra de donde sale cada renglon de abajo, no un dato. */ .plabel { margin: 0; padding: 8px 40px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } /* las lineas de la placa: rotulo a la izquierda en caliente, dato a la derecha en tinta, un filete por renglon */ .plines { margin: 0; } .plines > div { display: grid; grid-template-columns: minmax(150px, 24%) 1fr; gap: 2vw; align-items: baseline; padding: 9px 40px 10px; border-bottom: 1px solid var(--ink); } .plines dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hot-text); } .plines dd { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } .plines dd b { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 3.4vw, 50px); line-height: .9; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* LAST SENSE no es una cifra, es una frase de aparato (L.INS · 88 · amp 0.62): entra en display pero un cuerpo abajo */ .plines .last dd b { font-size: clamp(22px, 2.2vw, 32px); } .senses .live { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 0; padding: 10px 40px 0; } /* el estado del stream es tipo de 12 px: va en el caliente de tipo chico, no en el de display (--hot a 12 px medía 3,4:1) */ .senses .live b { font-weight: 400; color: var(--hot-text); } /* el texto chico de la placa: las dos notas, en dos columnas */ .pnotes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; padding: 14px 40px 0; } .pnotes h3 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: .02em; margin: 0 0 .4em; } .pnotes .note { margin: 0 0 .7em; font-family: var(--type); font-size: 13px; line-height: 1.5; } .pnotes a { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hot-text); text-decoration: none; border-bottom: 2px solid var(--hot); word-break: break-word; } /* WHAT IT IS: un colofon (cosa viva | termino | definicion | referencia) con filetes. Eran tres tarjetas en fila; despues fue texto bien tipografiado, que sigue siendo una plantilla. Cada fila tiene ahora SU objeto a la izquierda: el atlas girando, dos osciladores del motor escribiendo y el ultimo bloque impreso como ticket. El objeto esta en el DOM despues del
(un div dentro de un dl solo admite dt y dd) y la grilla lo manda a la primera columna. */ .colophon { margin: 0; border-top: 1px solid var(--ink); } .colophon > div { display: grid; grid-template-columns: 200px minmax(170px, 22%) 1fr minmax(150px, 20%); gap: 2vw; align-items: baseline; padding: 18px 0 20px; border-bottom: 1px solid var(--ink); } .colophon dt { grid-column: 2; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.2vw, 48px); line-height: .9; letter-spacing: .02em; } .colophon dd { margin: 0; font-family: var(--type); font-size: 14px; line-height: 1.5; max-width: 64ch; } .colophon .def { grid-column: 3; } .colophon .ref { grid-column: 4; font-family: var(--mono); font-size: 11px; text-align: right; } .colophon .ref a { color: var(--hot-text); text-decoration: none; border-bottom: 2px solid var(--hot); word-break: break-word; } .colophon .obj { grid-column: 1; grid-row: 1; align-self: start; max-width: none; } .colophon .obj canvas { display: block; width: 200px; } #what-atlas { height: 200px; } #what-trace { height: 120px; border-bottom: 1px solid var(--ink); } .obj-cap { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--hot-text); text-align: right; width: 200px; padding-top: 4px; } /* el ultimo bloque, impreso como el ticket de BLOCK PULSE y con la misma marca de llegada */ .obj-ticket { list-style: none; margin: 0; padding: 12px 12px 12px 10px; border: 2px dashed var(--ink); background: var(--paper); font-family: var(--type); font-size: 11px; line-height: 1.45; text-transform: uppercase; } .obj-ticket:empty::before { content: 'waiting for the next block'; opacity: .6; } .obj-ticket li { border-left: 3px solid transparent; padding-left: 8px; } .obj-ticket li em { font-style: normal; color: var(--hot-text); } .obj-ticket li small { display: block; opacity: .6; text-transform: none; } .obj-ticket li.new { border-left-color: var(--hot); animation: fresh .5s linear 2; } /* prendido / apagado duro, sin degradado entre medio: es un sello que llega, no un fundido */ @keyframes fresh { 0%, 49% { border-left-color: var(--hot); } 50%, 100% { border-left-color: transparent; } } @media (prefers-reduced-motion: reduce) { .tape-inner { animation: none; } .reveal { opacity: 1 !important; transform: none !important; } .ticket li.new, .nav a { transition: none; } .obj-ticket li.new { animation: none; } html:focus-within { scroll-behavior: auto; } } /* error states (spec section 8): the still stands where the live brain would be, with its note; the quiet-feed lines reuse .live */ .stage img.still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* main.js / pulse.js mark the stage `printed`: the still is contained, then scaled so the brain (62 % of the still's width) fills the stage the way the live fit does; the stage clips the transparent margins so nothing scrolls sideways.