/* Sistema de diseño del Escaparate de La Zarza. * * EL ESQUELETO ES EL DE LABARRA (D-12): papel, tinta, tecla, cifras y medidas, * copiados de `LaBarra/public/shared/tokens.css` (commit 971bfb0, 2026-09-03). * Cuando LaBarra cambie uno de ESOS valores, se cambia aquí el mismo. * * LOS COLORES SON LOS DEL ESCUDO DEL PUEBLO (D-25, 2026-09-04): el azul del * rótulo, el amarillo del sol y el verde de la loma de lazarza.net, en el * reparto «A · Institucional» que eligió el director. En esto LaBarra ya no * manda: su verde y su ámbar se fueron. Contrastes medidos sobre el papel de * aquí, no sobre blanco; ver `tests/estetica.test.js`. * * LAS CUATRO REGLAS QUE NO SE ROMPEN * * 1. EL AMARILLO ES EL RELOJ Y EL AVISO, Y NADA MÁS. Los días que quedan, la * caducidad y la etiqueta de «cartel de muestra». Nunca un botón, nunca * un título, nunca un nombre de comercio. Sobre papel no se lee como * texto (1,4:1): en texto se usa `--ambar-tinta`, el mismo color bajado * hasta poder leerse. * 2. EL COLOR DE LA CASA CONTESTA DOS PREGUNTAS, Y NADA MÁS: «¿dónde estoy?» * y «¿qué puedo pulsar?». DOS colores desde D-28: el azul del vecino, que * la pantalla del comercio comparte, y el ciruela del director. Lo llevan * la cabecera y TODO lo pulsable. UN SOLO COLOR PARA TODOS LOS COMERCIOS: * que uno destaque por color es el mismo agravio que destacar por orden. * 3. LO PULSABLE PARECE UNA TECLA. Canto inferior grueso y oscuro, y se * hunde al pulsarlo: un bulto que se hunde no hay que aprenderlo. * 4. LAS CIFRAS VAN EN MONOESPACIADA Y TABULAR. Los nombres, en la de siempre. * * Y LA LETRA (D-25, con la Fase 15 de Asociaciones de modelo): en el pueblo * hay mucha gente mayor y esto se lee de pie en la calle. Hay DOS tamaños, * `--letra-cuerpo` para lo que se lee y `--letra-control` para la maquinaria * (botones, campos, etiquetas). Subir el cuerpo no mueve ninguna fila. NO SE * TOCA `html { font-size }`: subirlo movería todos los rem, o sea la página. * * Sin tema oscuro, sin colores de categoría y sin color por comercio (D-12). */ :root { /* El papel. Cálido, no blanco de oficina: se mira a media luz y con el brillo del móvil bajo. Mismos valores que el jukebox. */ --fondo: #f1ede7; --papel: #fffefc; --linea: #e4ded6; /* El filete del margen de la libreta. Es la única línea que pesa. */ --margen: #cfc6ba; /* La tinta. Negro cálido con algo de ciruela. */ --tinta: #221b26; --tinta-suave: #6b6270; /* EL RELOJ Y EL AVISO: el sol del escudo. Regla 1. En texto, la tinta. */ --ambar: #F4DE25; --ambar-tinta: #5C4A00; --ambar-suave: #FDF4C2; /* Se está acabando, o algo ha ido mal. No está en el escudo; hace falta. */ --brasa: #A32F1E; --brasa-suave: #fbeae5; /* Cuadra. El verde de la loma, bajado hasta leerse (6,4:1). */ --valido: #2F6B14; --valido-suave: #EAF4E1; /* LA LETRA: lo que se lee, y la maquinaria. 20 px y 17 px sobre 16 de base. */ --letra-cuerpo: 1.25rem; --letra-control: 1.0625rem; --maquina: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; --gente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 36px; /* 44 es el mínimo de una aplicación normal. Aquí se pulsa con los guantes de moto puestos, y eso lo mide la spec, no el gusto. */ --tap: 56px; --relieve: 0 1px 2px rgba(34, 27, 38, .05), 0 1px 10px rgba(34, 27, 38, .04); --relieve-alto: 0 -2px 20px rgba(34, 27, 38, .10); color-scheme: light; /* ── EL COLOR DE LA CASA. Regla 2 ─────────────────────────────────────── Los de aquí son los del escaparate —el azul del rótulo del escudo, 8,2:1 sobre papel— y los sirve también la pantalla del comercio, que desde D-28 no declara los suyos. El director sí redefine el ciruela en su hoja. --casa la cabecera y el relleno de lo pulsable --casa-hondo el canto de la tecla, y el fondo al pulsarla --casa-tenue el borde de lo pulsable que NO es la acción principal --casa-suave el papel teñido: lo elegido, lo marcado, el foco Ninguno es amarillo, y ninguno se acerca a la brasa: si el color de la casa se confundiera con el reloj o con un aviso, habría dejado de contestar una pregunta. */ --casa: #244A9E; --casa-hondo: #1A3673; --casa-tenue: #A9BBE0; --casa-suave: #E9EFFA; } * { box-sizing: border-box; } /* `hidden` tiene que ganar a cualquier regla de componente que fije display. */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--gente); font-size: var(--letra-cuerpo); line-height: 1.45; color: var(--tinta); background: var(--fondo); -webkit-text-size-adjust: 100%; } h1, h2, h3 { margin: 0; font-weight: 700; } /* ── El rótulo de la casa ───────────────────────────────────────────────── Sin tipografía descargada, a propósito: esto se abre junto a una nevera, a veces compartiendo los datos de un móvil. El carácter lo pone el TRATAMIENTO —versales estrechas, muy espaciadas, como un rótulo pintado en la pared del garaje—, no un fichero de 40 KB que puede no llegar. La cabecera va en el COLOR DE LA CASA y no en tinta (regla 2): es la banda más grande y más estable de la pantalla, y es lo primero que se ve al abrirla. Que «Me sirvo» sea verde y «El local» ciruela contesta «¿dónde estoy?» desde el otro lado del local, sin leer una palabra — que es exactamente como lo mira quien no está acostumbrado a esto. */ .barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--casa); color: var(--papel); /* El canto oscuro es el mismo recurso que el de las teclas: separa la banda del papel sin una línea que parezca un borde. */ border-bottom: 3px solid var(--casa-hondo); } .barra-marca { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .barra-casa { font-size: .8rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 254, 252, .72); } .barra-donde { font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra nav { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; } /* Pastillas con borde, no texto: a un texto no se le nota que lleva a otro sitio. `.foro-globo` es «Foro» + globo en la barra de la portada (D-63.8): fuera de