/* ========================================================================== PACIFISTA — CYBER BRUTALISTA V2 · TOKENS Capa única de verdad. Cambiar aquí = cambiar todo el sistema. Reskin del 30-ago-2026. Se CONSERVA la API `--pf-*` que ya consumen base/materiales/muro/menu/nota/marcador: aquí solo cambian los valores. El look anterior ("El panfleto vivo") queda en backups-tema/*.zip. Doctrina V2 (feedback del cliente, ref. The Intercept): · base negra con fotografía a color, sin tratar · UN SOLO acento (cian de marca; se aleatoriza por visita en JS) · lienzo CLARO para la lectura larga · sin itálicas de display, sin tramas/scanlines, sin neón de noche ========================================================================== */ :root{ /* --- BASE: monocromo profundo --------------------------------------- */ --pf-negro: #0A0A0A; --pf-carbon: #121212; --pf-humo: #1C1C1E; --pf-linea: rgba(255,255,255,.14); --pf-linea-f: rgba(255,255,255,.30); --pf-hueso: #F2F2F2; --pf-gris: #8A8A8F; --pf-gris-o: #5C5C61; /* --- El muro (fondo dominante) -------------------------------------- Antes era cemento bogotano; ahora el muro es la noche. */ --pf-muro: var(--pf-negro); --pf-muro-osc: #060607; --pf-muro-cl: var(--pf-carbon); /* --- Papeles → superficies ------------------------------------------- El "papel" del panfleto se vuelve panel de terminal, salvo la lectura, que sigue siendo clara: un texto largo sobre víctimas no se lee en negro. */ --pf-blanco: var(--pf-carbon); /* hoja / cartel → panel */ --pf-prensa: var(--pf-humo); /* recorte → bloque de sistema */ --pf-lectura: #FAFAFA; /* fondo de la nota: LIENZO CLARO */ --pf-claro-2: #F2F2F2; /* --- Cromo: superficies que NO son ni muro ni panel ------------------- La cabecera translúcida, el overlay del menú y la barra del contador llevaban su color escrito a mano en `menu.css` y `portada.css`, así que no había nada que girar para el tema claro. Ahora son roles. */ --pf-cabecera: rgba(10,10,10,.92); --pf-cabecera-f: rgba(10,10,10,.97); /* la versión compacta, más opaca */ --pf-overlay: #050506; /* el índice del archivo a pantalla completa */ --pf-barra-bg: #000; /* canal del contador de recuperación */ --pf-barra-a: #1A1A1D; /* rayas de "lo que no se recuperó" */ --pf-barra-b: #0E0E10; --pf-linea-suave: rgba(255,255,255,.07); /* separador interno, más tenue que --pf-linea */ --pf-sombra-panel: -8px 0 34px rgba(0,0,0,.55); /* el panel de la voz, que flota sobre el muro */ /* --- Tinta ----------------------------------------------------------- Sobre negro la tinta es hueso; para el lienzo claro van los --pf-tinta-cl*. */ --pf-tinta: var(--pf-hueso); --pf-tinta-2: var(--pf-gris); /* 🔴 EL TERCER NIVEL NO ES `--pf-gris-o`, Y ES A PROPOSITO. Medido sobre el muro (#0A0A0A) en las 138 piezas de texto de la portada: `--pf-gris-o` (#5C5C61) daba 2,82-2,98:1 en 25 elementos — fechas de pieza, paginacion, cifras del pie y aviso de lote—, por debajo del minimo AA. No es cromo decorativo: son datos que hay que poder leer. El valor se eligio contra el PEOR fondo oscuro donde vive este token, que NO es el muro sino el bloque de sistema (`--pf-prensa`, #1C1C1E): un primer intento con #78787D pasaba sobre el muro (4,51) y seguia fallando sobre panel (4,27) y sobre prensa (3,87). Con #838388 los tres pasan: muro 5,25 · panel 4,97 · prensa 4,51. `--pf-gris-o` se conserva en la paleta para lo que de verdad es adorno. */ --pf-tinta-3: #838388; --pf-tinta-cl: #111111; /* tinta sobre lienzo claro */ --pf-tinta-cl-2: #26262A; --pf-tinta-cl-3: #4A4A4E; /* --- EL ACENTO. UNO SOLO. ------------------------------------------- Cian de marca Pacifista. En runtime, `pf-acento.js` lo reemplaza por uno de los 6 colores del logo (aleatorio por visita) y recalcula las variantes con contraste WCAG real. */ --pf-k: #00D6C8; --pf-k-cl: #3BEFE2; /* sobre negro: texto fino y enlaces */ --pf-k-os: #00A99E; /* sobre lienzo claro: bordes y texto (AA) */ --pf-sobre-k: #000; /* texto legible ENCIMA del acento */ /* --- Paleta del logo (de donde sale el acento) ----------------------- */ --pf-logo-cian: #12EECB; --pf-logo-verde: #22F98A; --pf-logo-coral: #FF6275; --pf-logo-azul: #1E86EA; --pf-logo-lavanda: #A7A6EC; --pf-logo-magenta: #C44FD9; /* --- Colores de shock (compatibilidad) ------------------------------- El sistema anterior tenía 6 colores de shock y `semilla.php` asignaba uno por sección (color semántico). El cliente pidió UN SOLO color, así que todos resuelven ahora al acento activo. NO se toca semilla.php: sigue emitiendo data-shock, y si mañana se decide "tintes" o "2º acento para conflicto", basta con reescribir el mapa de abajo. */ --pf-rojo: var(--pf-k); --pf-magenta: var(--pf-k); --pf-acido: var(--pf-k); --pf-azul: var(--pf-k); --pf-coral: var(--pf-k); --pf-amarillo: var(--pf-k); --pf-shock: var(--pf-k); /* --- Tipografía ------------------------------------------------------ Alojadas en el tema (assets/fonts + fuentes.css). Sin Google Fonts. */ --pf-display: "Archivo Black", "Helvetica Neue", Arial, sans-serif; --pf-cond: "Archivo", "Helvetica Neue", Arial, sans-serif; --pf-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --pf-mono: "IBM Plex Mono", ui-monospace, monospace; --pf-t-xs: 0.75rem; --pf-t-sm: 0.8125rem; --pf-t-base: 1rem; --pf-t-md: 1.125rem; --pf-t-lg: clamp(1.15rem, 1rem + .7vw, 1.5rem); --pf-t-xl: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem); --pf-t-2xl: clamp(2rem, 1.3rem + 3.4vw, 3.6rem); --pf-t-3xl: clamp(2.6rem, 1.4rem + 5.6vw, 6rem); --pf-lh-tight: 0.94; --pf-lh-snug: 1.16; --pf-lh-body: 1.62; /* --- Espaciado ------------------------------------------------------- */ --pf-s-1: .25rem; --pf-s-2: .5rem; --pf-s-3: .75rem; --pf-s-4: 1rem; --pf-s-5: 1.5rem; --pf-s-6: 2rem; --pf-s-7: 3rem; --pf-s-8: 4.5rem; --pf-s-9: 7rem; /* --- Layout ---------------------------------------------------------- */ --pf-maxw: 1320px; --pf-medida: 44rem; /* medida de lectura cómoda */ --pf-gutter: clamp(1rem, .6rem + 1.8vw, 2.6rem); /* --- Forma: brutalismo ----------------------------------------------- */ --pf-radio: 0px; /* --- Sombras --------------------------------------------------------- Se van las sombras de papel (offset duro). Ahora el borde respira: glow LEVE, nunca halo de neón. */ --pf-sombra-hoja: 0 0 0 1px color-mix(in srgb, var(--pf-k) 14%, transparent); --pf-sombra-media: 0 0 0 1px var(--pf-linea); --pf-sombra-dura: 0 0 0 1px var(--pf-linea-f); --pf-glow: 0 0 18px rgba(0,214,200,.055); --pf-glow-hover: 0 0 26px color-mix(in srgb, var(--pf-k) 26%, transparent); /* --- Motion ----------------------------------------------------------- */ --pf-dur-micro: 180ms; --pf-dur-enter: 520ms; --pf-ease: cubic-bezier(.22,1,.36,1); --pf-ease-punk: cubic-bezier(.68,-.35,.27,1.35); --pf-focus: 3px solid var(--pf-k); } /* ========================================================================== TEMA CLARO PARA TODO EL SITIO (P2) ========================================================================== El sistema nace oscuro y esa es su identidad. Esto no lo cambia: añade un segundo lienzo, opcional y recordado, para quien lee mejor en claro. 🔴 POR QUÉ VA SOBRE `body` Y NO SOBRE `html`. `pf-acento.js` escribe `--pf-k`, `--pf-k-cl` y `--pf-k-os` en el **estilo en línea** de ``, y un estilo en línea gana a cualquier selector: si esta capa se declarase en `html[data-tema="claro"]`, el remapeo del acento sencillamente no se aplicaría y el tema claro saldría con el acento de pantalla oscura, fuera de contraste. Declarándola en `body` —descendiente— la variable se redefine para todo el subárbol y gana. Es el mismo mecanismo que ya usaba `.pf-claro` aquí abajo. 🔴 NO SE TOCA UN SOLO NOMBRE, SÓLO VALORES (invariante 7 del tema). Las 94 reglas que antes llamaban al color literal (`--pf-hueso`, `--pf-carbon`…) se reapuntaron a su ROL (`--pf-tinta`, `--pf-blanco`…) — en oscuro computan EXACTAMENTE igual, medido par por par. Aquí sólo giran los roles. 🔴 EL COLOR SEMÁNTICO SOBREVIVE INTACTO. `semilla.php` sigue emitiendo `data-shock` y el mapa de abajo sigue resolviéndolo a `var(--pf-k)`: como aquí `--pf-k` pasa a ser la variante AA sobre claro, la relación «tema editorial → acento» se mantiene y sólo cambia el tono. No hay que tocar `semilla.php` ni el mapa. LO QUE **NO** GIRA, Y ES A PROPÓSITO: · Los velos de las FOTOGRAFÍAS (hero, tapa de nota, portada del i-doc). Son oscuros literales que existen para que se lea un titular BLANCO encima. Si giraran, el titular quedaría blanco sobre claro: invisible. Una foto a sangre con su degradado oscuro es lo normal en un diario en claro. · El CARTEL de las piezas sin foto: su fondo son los colores fijos del logotipo y su tinta es `#0A0A0A`, medido a 9,9:1. No depende del tema. ========================================================================== */ html[data-tema="claro"] body{ /* --- Superficies. El muro deja de ser la noche y pasa a ser papel. No blanco puro: un hueso cálido cansa menos en lectura larga y deja que el panel BLANCO de las fichas se despegue del fondo. */ --pf-muro: #F4F3EF; --pf-muro-osc: #E9E7E1; --pf-muro-cl: #FFFFFF; --pf-blanco: #FFFFFF; /* panel / hoja */ --pf-prensa: #ECEBE6; /* bloque de sistema, recuadros */ --pf-lectura: #FFFFFF; /* la nota: blanco puro sobre el papel */ --pf-claro-2: #F4F3EF; /* --- Tinta. Se invierte la escala entera. 🔴 No vale con oscurecer el primer nivel: `--pf-tinta-3` viste etiquetas de metadato, que son INFORMACIÓN. Los tres niveles se eligieron para que el más flojo siga pasando AA sobre el panel (ver la medición del portal, donde el gris de la portada daba 2,82:1 y hubo que subirlo). */ --pf-tinta: #111111; --pf-tinta-2: #45454A; --pf-tinta-3: #63636A; /* --- Líneas: las mismas alfas, pero en negro. */ --pf-linea: rgba(0,0,0,.14); --pf-linea-f: rgba(0,0,0,.30); /* --- El acento: la variante calculada para lienzo claro. `pf-acento.js` ya deriva `--pf-k-os` bajando el tono hasta 4,5:1 real sobre claro; aquí sólo se elige esa. `--pf-k-cl` (pensada para texto fino sobre negro) sería ilegible aquí, así que apunta a la misma. */ --pf-k: var(--pf-k-os); --pf-k-cl: var(--pf-k-os); --pf-sobre-k: #FFFFFF; /* texto ENCIMA del acento, ya oscurecido */ /* --- Cromo */ --pf-cabecera: rgba(244,243,239,.90); --pf-cabecera-f: rgba(244,243,239,.97); --pf-overlay: #FBFAF7; --pf-barra-bg: #E4E2DC; --pf-barra-a: #D6D4CE; --pf-barra-b: #E4E2DC; --pf-linea-suave: rgba(0,0,0,.07); --pf-sombra-panel: -8px 0 30px rgba(0,0,0,.10); /* --- Sombras. En claro el glow no existe: sobre papel un halo de color no dice nada. Se cambia por elevación real, mínima. */ --pf-sombra-hoja: 0 1px 2px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.06); --pf-glow: 0 1px 2px rgba(0,0,0,.05); --pf-glow-hover: 0 3px 14px rgba(0,0,0,.10); background-color: var(--pf-muro); color: var(--pf-tinta); } /* ========================================================================== SUPERFICIES CLARAS — la lectura El sistema es oscuro, así que `--pf-tinta*` vale hueso/gris (texto sobre negro). Dentro de una superficie CLARA hay que invertir esas mismas variables o el texto queda gris claro sobre claro: ilegible. Se remapean aquí, en la capa de tokens, para que valga en CUALQUIER superficie clara (nota, coda de especial, lienzo de lectura) sin tener que tocar cada hoja. ========================================================================== */ .pf-nota__hoja, .pf-lectura, .pf-claro{ --pf-tinta: var(--pf-tinta-cl); --pf-tinta-2: var(--pf-tinta-cl-2); --pf-tinta-3: var(--pf-tinta-cl-3); /* sobre fondo claro el acento debe ser la variante oscura (contraste AA) */ --pf-shock: var(--pf-k-os); --pf-k: var(--pf-k-os); color: var(--pf-tinta-cl); } /* Mapa de shock por sección — UN SOLO ACENTO (ver nota arriba). Decisión pendiente con el cliente: dejarlo así / tintes del mismo acento / 2º acento sólo para `conflicto`. */ [data-shock="rojo"], [data-shock="magenta"], [data-shock="acido"], [data-shock="azul"], [data-shock="coral"], [data-shock="amarillo"] { --pf-shock: var(--pf-k); } @media (prefers-reduced-motion: reduce){ :root{ --pf-dur-micro:0ms; --pf-dur-enter:0ms; } }