, y `.caviar-cuerpo p` empata en especificidad con el h1 pero va después en el fichero, así que gana: el titular salía a 15px y translúcido. Es la tercera vez hoy que la regla general se come a la excepción. La lección, escrita para no repetirla: cuando un contenedor recibe HTML de WordPress, hay que decirle qué pasa con los
de dentro — no basta con estilar el contenedor. */ .caviar-cuerpo h1 > p, .caviar-cuerpo h2 > p, .caviar-cuerpo h3 > p{font:inherit;color:inherit;margin:0;max-width:none;opacity:1} /* Y el color, explícito. Medido: los títulos salían en rgb(30,41,59) —el azul apagado de Astra— porque el tema padre pone color a h1/h2/h3 y la herencia no gana a una declaración. El texto de estas páginas lo decide la PÁGINA (--caviar-texto), no el tema de debajo. */ .caviar-cuerpo h1, .caviar-cuerpo h2, .caviar-cuerpo h3, .caviar-cuerpo li, .caviar-cuerpo p{color:inherit} .caviar-cuerpo h2{font-size:28px;font-weight:400;line-height:1.28;margin:0 0 34px;max-width:30ch;opacity:.94} .caviar-cuerpo h3{font-size:17px;font-weight:600;line-height:1.3;margin:0 0 8px} .caviar-cuerpo p{font-size:15px;line-height:1.7;margin:0 0 15px;max-width:60ch;opacity:.9} .caviar-cuerpo ul{margin:0 0 20px;padding:0;list-style:none} .caviar-cuerpo li{font-size:15px;line-height:1.6;padding:4px 0} /* El enlace es un párrafo en negrita con su flecha. Nada de botón: en una página que no vende, un botón promete una transacción. */ /* * 🩸 `:not(.sp-public *)` — y es la SEGUNDA vez hoy con la misma causa. * * Esta regla pintaba TODOS los enlaces del cuerpo. El plugin trae los * suyos ya pintados, y como `.caviar-cuerpo a` y `.sp-door a` tienen la * misma especificidad (0,1,1) y ésta va después, ganaba `inherit`: el * botón «Register to work with us» heredaba la tinta del plugin y salía * **negro sobre negro**. Samuel lo vio como un rectángulo negro al pie * de la obra, con su texto y su enlace dentro, invisibles. * * Es el mismo fallo que la flecha `›` de las tarjetas, con otra * propiedad: **una regla del tema reclamando lo que pinta otro.** Por * eso esta vez no la estrecho a `p > a`, que resolvería el caso de hoy * y no el de mañana — le pongo la frontera donde está de verdad: el * tema no viste lo que hay dentro de `.sp-public`. */ .caviar-cuerpo a:not(.sp-public a){color:inherit;text-decoration:none;font-weight:600} .caviar-cuerpo a:not(.sp-public a):hover{text-decoration:underline} /* * 🩸 La flecha de los enlaces, y por qué ahora pide un párrafo. * * Esta regla decía `.caviar-cuerpo a[href]:not([class])` — cualquier * enlace sin clase dentro del cuerpo. La intención era buena: adornar * los enlaces escritos DENTRO DE UN TEXTO. El fallo estaba en el * alcance: daba por hecho que este tema pinta todo lo que hay en el * cuerpo. * * En cuanto The Spine instaló sus páginas públicas, cada tarjeta de * obra apareció con un «Obra con importe sin decimales ›» que nadie * había pedido, porque sus enlaces también van sin clase. Code lo vio * y no lo peleó desde el plugin, y tenía razón: **es vocabulario del * tema, y lo arregla el tema.** * * Ahora pide estar dentro de un párrafo o de una lista, que es donde * viven los enlaces de prosa. Lo que pinte otro no lo decora nadie. */ .caviar-cuerpo p > a[href]:not([class])::after, .caviar-cuerpo li > a[href]:not([class])::after{content:"\00a0\203A";font-weight:400;opacity:.55} /* ========================================================================== LA ENTRADA — el texto aparece por piezas, como en Conscience ========================================================================== Samuel, 17 de agosto: «los bloques de texto aparecen como aparecían en Conscience, primero el H1, el H2 y los párrafos uno a uno, así le damos movimiento. El ampersand estar fijo». No es una animación de adorno: es el ORDEN DE LECTURA hecho visible. Todo a la vez obliga a decidir por dónde empezar; por piezas, la página te lleva. Y el ampersand no se mueve porque no es contenido: es el sitio donde ocurre el contenido. Se hace con `animation` y no con guion — una animación que necesita JavaScript no arranca si el guion tarda, y entonces el texto aparece de golpe justo en la carga lenta, que es cuando peor sienta. ⚠️ Y con `prefers-reduced-motion` NO se mueve nada. Quien ha pedido menos movimiento no ha pedido menos contenido: se ve todo, quieto. ========================================================================== */ @keyframes caviar-entra{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } /* 🩸 Y CORTO: la secuencia entera acababa a 1,5 s, y lo último en llegar eran los tres enlaces — o sea lo único en lo que se puede pulsar. Samuel los vio difuminados en una captura y tenía razón en el fondo aunque no en el diagnóstico: medidos a los 3 s están a opacidad 1, pero un botón que tarda segundo y medio en existir está roto igual que uno translúcido. Ahora la última pieza termina a 1,0 s. El movimiento sigue contándose, pero no hace esperar a nadie para actuar. */ .caviar-cuerpo > *{ animation:caviar-entra .5s cubic-bezier(.22,.7,.3,1) both; } .caviar-cuerpo > *:nth-child(1){animation-delay:.04s} .caviar-cuerpo > *:nth-child(2){animation-delay:.12s} .caviar-cuerpo > *:nth-child(3){animation-delay:.20s} .caviar-cuerpo > *:nth-child(4){animation-delay:.28s} .caviar-cuerpo > *:nth-child(5){animation-delay:.36s} .caviar-cuerpo > *:nth-child(n+6){animation-delay:.44s} /* Las tres columnas entran una a una, no las tres a la vez: son tres invitaciones distintas, no un bloque. */ .caviar-columnas > *{animation:caviar-entra .5s cubic-bezier(.22,.7,.3,1) both} .caviar-columnas > *:nth-child(1){animation-delay:.30s} .caviar-columnas > *:nth-child(2){animation-delay:.40s} .caviar-columnas > *:nth-child(3){animation-delay:.50s} @media (prefers-reduced-motion:reduce){ .caviar-cuerpo > *, .caviar-columnas > *{animation:none} } /* ========================================================================== COLUMNAS — porque estas páginas no scrollean ========================================================================== Samuel: «estas páginas están hechas para que no corran en scroll, con lo que aprovecharemos mejor el ancho y usaremos columnas si es necesario». ⚠️ Y la regla tiene una frontera, que conviene decir antes de que alguien la cruce: las páginas que ESCRIBE Samuel no scrollean; las que RELLENA The Spine —obras, artistas, journal— sí, porque son listas que crecen y no hay ancho que las contenga. No es una excepción: es que son de otra especie. ========================================================================== */ .caviar-columnas{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px;align-items:start;margin-top:8px; } .caviar-columnas h3{margin-bottom:10px} /* 🩸 Y aquí me corrige Samuel con razón: yo había puesto TODO en negrita —título, descripción y verbo— por el contraste sobre rojo, y el resultado es que «parece todo lo mismo». Cuando todo pesa igual, el peso deja de decir nada. Ahora hay tres pesos y tres trabajos: el título 600, es el sujeto la descripción 400, se lee y se suelta el verbo 600, es lo único en lo que se puede pulsar El contraste que perdía la descripción al bajar a 400 se recupera con tamaño —15,5— y con opacidad plena, no con grosor. */ .caviar-columnas p{font-size:15.5px;font-weight:400;max-width:none;opacity:1} .caviar-columnas p:has(a){font-weight:600} .caviar-columnas li{font-size:15px;font-weight:400;padding:3px 0} @media (max-width:1180px){ .caviar-columnas{gap:28px} } @media (max-width:900px){ .caviar-columnas{grid-template-columns:1fr;gap:22px} } /* ========================================================================== LAS PÁGINAS DE DATOS SÍ SCROLLEAN ========================================================================== */ body.caviar-lista .caviar-escenario{justify-content:flex-start;padding-top:7vh} body.caviar-lista .caviar-cuerpo{max-width:none} /* ========================================================================== EL AMPERSAND — grande, callado, y sin empujar nada ========================================================================== Va en el hueco de abajo a la derecha del escenario. Posicionado ABSOLUTO a propósito: si formara parte del flujo, una página con un párrafo más lo empujaría fuera de la pantalla, y en una web sin scroll eso es perderlo. No compromete el alto de nada. Y va detrás del texto (z-index 0 dentro del escenario): es una marca, no un contenido. Si tapase una palabra dejaría de ser un fondo para ser un estorbo. ========================================================================== */ .caviar-escenario{position:fixed} /* ya lo era; se repite para que se lea aquí */ /* Arriba a la derecha, y grande. Medido: abajo caía justo sobre la tercera columna —se leía «For Gall&ries»— y había que esconderlo al 14 % para que no molestara. Arriba el hueco está vacío de verdad, así que puede ocupar media pantalla de alto y respirar sin taparle nada a nadie. Una marca escondida no es discreción, es un estorbo mal resuelto. */ .caviar-amper{ /* Blanco entero. Al 50 % de opacidad era una mancha rosa: un blanco translúcido sobre rojo no es un blanco más suave, es OTRO COLOR, y una marca no puede salir en un color que no es el suyo. Colgado de la tercera columna: `left:0` es el borde de «For Galleries», y `bottom` lo separa de ella el mismo aire que el H2 deja debajo (34px), así que su base cae donde acaba el H2. Dos alineaciones y ningún número inventado. */ /* 🩸 Vuelve a colgar de la TERCERA COLUMNA, con su base en la base del H2. Lo probé colgado del H2 para alinearlo con la base del H1 —que es lo que Samuel pidió— y se salía por arriba: ahí no hay alto suficiente y la marca quedaba cortada. Entre alinear exacto y verse entera, se ve entera. Una marca cortada no se lee como una decisión, se lee como un fallo. */ position:absolute;left:0;bottom:calc(100% + 34px); z-index:0;pointer-events:none; width:min(17vh,165px);opacity:1; } .caviar-columnas > *{position:relative} .caviar-amper img,.caviar-amper svg{display:block;width:100%;height:auto} /* Mientras no esté el fichero de la marca, uno tipográfico para ver la composición. Se va solo en cuanto exista img/ampersand.svg. */ .caviar-amper--provisional{ font:400 min(26vh,240px)/1 Georgia,"Times New Roman",serif; color:currentColor;opacity:.28;width:auto; } .caviar-cuerpo{position:relative;z-index:1} /* La portada: la declaración, y nada que explique. 🩸 Con la clase del cuerpo delante, y no es adorno: `the_content()` envuelve el texto en
, y `.caviar-cuerpo p` (0,1,1) le ganaba a `.caviar-declaracion` (0,1,0). La declaración salía a 15px — el tamaño de un párrafo cualquiera. La regla general se comía a la excepción por un punto de especificidad. */ .caviar-cuerpo .caviar-declaracion{font-size:40px;line-height:1.2;font-weight:600;margin:0 0 34px;max-width:19ch} .caviar-cuerpo .caviar-declaracion p{font:inherit;margin:0;max-width:none;opacity:1} .caviar-cuerpo .caviar-segunda{font-size:28px;line-height:1.28;margin:0 0 8vh;max-width:16ch;opacity:.94} .caviar-cuerpo .caviar-puertas .nombre{font-size:17px;margin:0 0 6px;opacity:1} .caviar-cuerpo .caviar-puertas .que{font-size:12.5px;line-height:1.5;margin:0;opacity:.78} .caviar-puertas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;max-width:820px} .caviar-puertas a{text-decoration:none;color:inherit} .caviar-puertas .nombre{font-size:17px;line-height:1.3;margin:0 0 6px} .caviar-puertas .que{font-size:12.5px;line-height:1.5;margin:0;opacity:.78} /* --- PANTALLAS ESTRECHAS --- No es el diseño de móvil: es que un portátil pequeño no se rompa. El móvil es una pantalla que hay que dibujar aparte. */ @media (max-width:1180px){ :root{--caviar-panel:296px;--caviar-hueco:34px} .caviar-declaracion{font-size:31px} .caviar-segunda{font-size:22px} .caviar-cuerpo h1{font-size:31px} } /* ========================================================================== MÓVIL — otra pantalla, no ésta encogida ========================================================================== La franja lateral desaparece y se convierte en una barra de arriba con la marca y el icono. El menú baja al pulsarlo y ocupa lo que necesite. Decidido por Samuel el 17 de agosto, y es lo correcto: en 390px de ancho una columna de 300 se come el 77 % de la pantalla. El menú lateral es un margen de cuaderno cuando sobra ancho; cuando no sobra, es el cuaderno. ========================================================================== */ .caviar-barra{display:none} /* 🩸 `margin:0`, y no es de más. La marca del panel lleva un margen inferior grande para separarse del menú; heredado en la barra, ese margen empujaba el logo 15px por encima de su sitio y salía cortado por arriba. Medido: top 31 cuando la barra empieza en 46. Una clase que reutiliza otra hereda también sus razones, y la razón de aquel margen no existe aquí. */ .caviar-marca--barra{margin:0;flex:0 0 auto} .caviar-marca--barra img{width:118px} .caviar-boton{ display:none;width:34px;height:34px;cursor:pointer; flex-direction:column;justify-content:center;gap:5px; } .caviar-boton span{display:block;height:1.5px;background:var(--caviar-tinta);border-radius:2px} @media (max-width:900px){ .caviar-barra{ position:fixed;z-index:5;top:0;left:0;right:0;height:66px; display:flex;align-items:center;justify-content:space-between; padding:0 18px;background:#fff; } .caviar-boton{display:flex} /* El panel deja de ser columna y pasa a ser cajón: cae desde la barra, ocupa todo el ancho y sólo el alto que le hace falta. */ .caviar-panel{ top:66px;bottom:auto;left:0;width:100%; max-height:calc(100dvh - 66px);overflow:auto; padding:20px 18px 26px; transform:translateY(-102%);transition:transform .34s cubic-bezier(.4,0,.15,1); box-shadow:0 18px 40px rgba(0,0,0,.18); } .caviar-abrir:checked ~ .caviar-panel{transform:none} .caviar-panel > .caviar-marca{display:none} /* la marca ya está en la barra */ .caviar-nav a{width:auto;padding-bottom:12px;margin-bottom:14px} .caviar-nav a > *{width:auto} .caviar-nav .nombre{font-size:19px} .caviar-nav .que,.caviar-nav .atajos{font-size:13px} .caviar-pie{padding-top:18px;font-size:13px} /* El escenario recupera la pantalla entera, con sitio para la barra. */ .caviar-escenario{left:0;top:66px;padding:5vh 6vw} .caviar-declaracion{font-size:24px;margin-bottom:20px} .caviar-segunda{font-size:17px;margin-bottom:5vh} .caviar-puertas{grid-template-columns:1fr;gap:16px} /* Fuera el ampersand: en 390px de ancho una marca de agua de media pantalla no acompaña al texto, compite con él. */ .caviar-amper{display:none} } /* 🩸 La barra de administración de WordPress. MEDIDO: con sesión iniciada, la barra de Caviar se metía DEBAJO de la de WordPress y el logo salía cortado por arriba. Pasa porque `position:fixed; top:0` no sabe nada del margen que WordPress le pone al documento. Lo ve quien edita —o sea Samuel, todos los días— y no lo ve ningún visitante, que es la peor combinación: un fallo que sólo sufre quien lo puede arreglar. */ body.admin-bar .caviar-barra{top:32px} @media (max-width:900px){ body.admin-bar .caviar-barra{top:46px} body.admin-bar .caviar-panel{top:112px;max-height:calc(100dvh - 112px)} body.admin-bar .caviar-escenario{top:112px} } @media (max-width:782px){ body.admin-bar .caviar-barra{top:46px} } /* ========================================================================== LAS PÁGINAS QUE TRAE THE SPINE ========================================================================== Obras, artistas y sus fichas no las escribe Caviar: las instala el plugin y caen dentro de este marco. Y este marco está pensado para otra cosa — una columna de 900px centrada verticalmente sobre una foto — que es justo lo contrario de lo que necesita una rejilla de obras: todo el ancho, desde arriba, y sin nada detrás compitiendo. 🩸 Adapta el TEMA, no el plugin. El plugin está bien para un WordPress pelado, y si le quitáramos su fondo y su anchura para que encajase aquí, la siguiente galería que lo instale sin tema propio se lo encontraría desnudo. **Quien trae marco es quien cede.** Samuel, 18 de agosto: «el fondo no tiene que tener imagen, debe ser gris como el de la página que llega, y ocupar todo el espacio entre el menú y el final — teniendo en cuenta los espacios que ya dejas en las otras páginas, para que sea consistente». -------------------------------------------------------------------- */ /* 1 · Ninguna foto detrás. El gris que trae la página ES el fondo. Sin esto, `/artist/` heredaba la imagen del Journal, porque WordPress la sirve creyendo que es el índice de entradas. */ body:has(.sp-public) .caviar-fondo{ background-image:none !important; background-color:#f3f3f3 !important; } body:has(.sp-public) .caviar-velo{display:none} /* 🩸 GRIS ENTERO, incluida la franja de la izquierda. Lo dejé negro para que el panel siguiera flotando, y Samuel decidió lo contrario con una razón mejor que la mía: «para que parezca que es un lienzo entero». Y es que el panel flota SOBRE UNA FOTO — ahí la franja oscura es el mundo asomando por detrás del papel. Sin foto no hay nada detrás que asomar, y esa franja negra deja de ser profundidad para ser un borde que parte el lienzo en dos. */ /* 2 · El escenario deja de centrar y pasa a ser una hoja que scrollea desde arriba. Lo que aquí se lee es una lista, y una lista empieza por el principio. */ body:has(.sp-public) .caviar-escenario{ justify-content:flex-start; overflow-y:auto; padding:0; background:#f3f3f3; /* La barra fina de la casa, la misma del editor del CRM (`axial.css`: 8px, pulgar al 22 % de tinta, carril transparente). Aquí NO se esconde: en las otras páginas el texto cabe y la barra sobra; una rejilla de obras hay que saber que sigue hacia abajo. Y vive en el ESCENARIO, no en la rejilla — Samuel: «que sea relativo a la página donde va colocada la información, así queda en el lomo derecho de la página y no pegada al área donde van las obras». Pegada a la rejilla sería una barra por columna de contenido; en el lomo es el borde del papel. */ /* 🩸 SIN `scrollbar-width:thin`, y no es un olvido. Con la propiedad estándar puesta, Chrome en macOS usa la barra de SUPERPOSICIÓN: sólo aparece mientras arrastras y luego se esconde. Medido: 0px de grosor real. Samuel lo vio antes que yo — «sigue sin aparecer el scroll aunque hay obras que se cortan». Dejando sólo las reglas de `::-webkit-scrollbar` se pinta una barra clásica, que ocupa su sitio y **se queda ahí diciendo que hay más abajo**, que es justo para lo que la queremos. */ 🩸 Y fuera TAMBIÉN `scrollbar-color`. Quité `scrollbar-width` y seguía sin verse: basta con que UNA de las dos propiedades estándar esté puesta para que Chrome use su barra de superposición y descarte las reglas de `::-webkit-scrollbar`. Medido después de quitar sólo una: grosor real 0px, otra vez. */ } body:has(.sp-public) .caviar-escenario::-webkit-scrollbar{width:8px} body:has(.sp-public) .caviar-escenario::-webkit-scrollbar-track{background:transparent} body:has(.sp-public) .caviar-escenario::-webkit-scrollbar-thumb{ background:rgba(17,17,17,.22); border-radius:999px; } /* 3 · Y el cuerpo suelta la columna de lectura: aquí el ancho es el contenido, no un párrafo. El aire de la izquierda es el MISMO que en Advisory o Studio —`--caviar-panel / 2`— porque cambiar de sección no debe mover el punto donde empieza a leerse. Lo de arriba, el 6vh del escenario, que es el que ya tenían las demás. */ body:has(.sp-public) .caviar-cuerpo{ max-width:none; margin:0; padding:6vh 4vw 0 calc(var(--caviar-panel) / 2); overflow:visible; max-height:none; } /* 🪦 AQUÍ EL TEMA LE QUITABA AL PLUGIN SU PROPIA CAJA. Decía: «el plugin, dentro, ya no se centra ni se pone su propio suelo», y le imponía `margin: 0; padding: 0 0 90px` a los TRES envoltorios del plugin. Era la decisión contraria a la de hoy, y hoy pierde — porque el plugin tiene que verse igual **en cualquier web donde se instale**, y para eso su tablero se centra solo. Y era además la misma mezcla que Samuel prohibió, con los papeles cambiados: allí el plugin nombraba clases del tema; aquí el tema nombraba clases del plugin. Las dos direcciones ensucian. 📌 LEY · **Cada uno se viste a sí mismo.** El tema apaga lo suyo —velo, foto, su contenedor— y se aparta; el plugin se pinta su suelo y se centra. Ninguno mete la mano en el armario del otro. Costó encontrarla porque ganaba por especificidad: `body:has(.sp-…)` + clase son (0,2,1) y le ganaban a `html body .sp-archive-wrap` (0,1,2). **Dos clases pesan más que dos elementos.** */ @media (max-width:900px){ body:has(.sp-public) .sp-archive-wrap, body:has(.sp-public) .sp-artwork-wrapper, body:has(.sp-public) .sp-artist-wrapper{ padding-bottom:60px; } } @media (max-width:900px){ body:has(.sp-public) .caviar-cuerpo{padding:26px 22px 0} } /* ═══════════════════════════════════════════════════════════════════ EL DIARIO, HOSPEDADO EN CAVIAR — 2 de septiembre de 2026 · Fable 🩸 ESTO ES DE LA WEB, NO DEL PLUGIN. Samuel: > «Las cosas de la web de Caviar no van en el plugin, solo las páginas > que se instalan en una web nueva. Todo el tema de velos y fondos y > menús es de la web. No quiero que se mezclen y que luego la > instalación sea un desastre.» El plugin trae sus páginas y se pinta a sí mismo; lo que hay que apagar o neutralizar del TEMA para que quepan, se apaga aquí. Estas cinco reglas estuvieron un rato dentro de `public.css` —error mío— y este es su sitio. La clase `spine-journal-page` la pone quien sirve la página. ═══════════════════════════════════════════════════════════════════ */ /* 1 · El suelo, plano. La foto va EN LÍNEA en el atributo `style`, y a un estilo en línea sólo lo tumba un `!important`: no hay selector que valga. */ html body:has(.sp-archive-wrap, .sp-artwork-wrapper, .sp-artist-wrapper) .caviar-fondo, html body:has(.sp-archive-wrap, .sp-artwork-wrapper, .sp-artist-wrapper) .caviar-escenario { background-color: #f3f3f3 !important; background-image: none !important; } /* 2 · Y el velo, fuera. Es el `rgba(0,0,0,.3)` que atenúa la FOTO para que el texto blanco se lea; sin foto no vela nada y sólo ensucia el gris — 243 × 0.7 ≈ 170, la franja oscura a la izquierda del menú que cazó Samuel. ⚠️ Lleva `pointer-events: none`, así que `elementFromPoint` NO lo ve: la medida decía 243 y el ojo veía 170. **Un elemento que no se deja tocar es invisible para la medida y visible para el ojo.** */ html body:has(.sp-archive-wrap, .sp-artwork-wrapper, .sp-artist-wrapper) .caviar-velo { display: none; } /* 3 · Y la columna, entera y sin torcer. El tema le pone al cuerpo un `margin-left: 170` en la lista y un `width: 900 + margin-right: 624` en el artículo —una medida buena colocada mal, que dejaba el tablero pegado a un lado—. El plugin centra su tablero él solo; aquí sólo hay que dejar de empujarlo. */ /* 🩸 Y no sólo en el diario: las CUATRO páginas que trae el plugin. Se reconocen por su envoltorio —el marcado, no el nombre de la página—, así que el día que haya una quinta la hereda sola. */ html body:has(.sp-archive-wrap, .sp-artwork-wrapper, .sp-artist-wrapper) .caviar-cuerpo { background: transparent; width: auto; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }