/* caso-queen-esther.css — tokens y lo poco de layout que este caso agrega. Todo lo demas vive en caso-base.css, que es COMPARTIDA: no se toca aqui. Por que lo propio vive en este archivo y no en la base: el generador del sitio copia caso-base.css de un solo caso (el primero de la lista) y la sirve una vez para todos. Una regla nueva alli se pierde en la siguiente corrida; una regla aqui viaja con el caso. Regla de la casa: lo compartido se sincroniza a mano, asi que se agrega lo menos posible. --------------------------------------------------------------------------- LA PALETA sale de las piezas, muestreada de los originales: #D4AF37 el oro de los arcos del logo y de las flores de la historia 02 #9C5A64 el rosa empolvado del fondo partido de la pieza 03 #F9F4EE el blanco calido del marmol de la pieza 04 El oro de marca da 1,62:1 sobre blanco: no pasa AA ni de lejos, y no puede pasar, porque en las piezas vive sobre fotografia oscura. Sobre una pagina blanca hay que oscurecerlo. Conservando tono y saturacion, #826718 queda en 5,38:1 — el mismo rango que las otras paginas del portafolio (5,24 en Figaro, 5,26 en Barkys y Bonfibra). Blanco sobre el acento: 5,38:1. Ese es el par que manda en un boton. El rosa #9C5A64 da 5,17:1 como texto y se usa solo ahi: es el secundario que firma las notas, y no entra en ningun par donde haga falta mas cuerpo. En oscuro si entra el oro de marca sin tocar: #D4AF37 da 8,92:1 sobre el fondo #101215 de la base. */ /* --- La tipografia del caso ------------------------------------------------- Playfair Display, de Claus Eggers Sorensen, licencia SIL OFL 1.1. La licencia va al lado de los archivos, en assets/fonts/OFL.txt, y tiene que viajar con ellos. POR QUE ESTA Y NO OTRA: se saco de AGRANDAR LAS LETRAS DE LOS TITULARES, no de mirar el logotipo. Es la leccion que dejo escrita Bonfibra, donde se eligio la fuente por el lockup del logo cuando las piezas usaban otra cosa. El logotipo de Queen Esther es una sans geometrizante; pero los titulares de las piezas («Shaping, sculpting and enhancing your curves!») son una serif de contraste alto, de moda editorial, con itálicas script en los acentos. Playfair Display es esa forma. Son DOS archivos porque hay DOS voces: la normal para los titulares y la itálica para el realce, que en las piezas siempre va en cursiva. Cada uno es el subset `latin` de la fuente variable (400-900 en un solo archivo, 38 KB), asi que declarar pesos intermedios no cuesta otra descarga. Va `font-display: swap`: el titular se ve desde el primer pintado con la pila del sistema y cambia despues. Nunca hay texto invisible. Versionada en el repo, no por CDN: el sitio se publica en Hostinger y no debe depender de un tercero para renderizar. */ @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; /* fuente variable, un solo archivo */ font-display: swap; src: url("fonts/playfair-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-italica-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .caso--queen-esther { --caso-acento: #826718; /* el oro, bajado a AA: 5,38:1 */ --caso-acento-texto: #fff; /* 5,38:1 sobre el acento */ --caso-secundario: #9c5a64; /* el rosa del fondo partido: 5,17:1 */ --caso-fondo-alt: #f9f4ee; /* el blanco calido del marmol de la 04 */ --caso-linea: #e9e0d3; --caso-tinta-suave: #665e52; /* gris calido: 6,4:1 sobre blanco */ --qe-serif: "Playfair Display", Georgia, "Times New Roman", serif; } /* Los tokens de oscuro quedan INERTES: la seccion va con data-tema="claro", como todas las de /proyectos-pequenos/. Se conservan calibrados por si algun dia la pagina entera cambia de criterio; hoy no los alcanza nadie. */ @media (prefers-color-scheme: dark) { .caso--queen-esther:not([data-tema="claro"]) { --caso-acento: #d4af37; /* el oro de marca tal cual: 8,92:1 */ --caso-acento-texto: #241a05; /* 8,15:1 sobre el acento */ --caso-secundario: #c98f97; /* 7,02:1 */ --caso-fondo-alt: #17130e; --caso-linea: #332b21; --caso-tinta-suave: #a89f92; } } /* --- Titular en serif de moda ------------------------------------------------ Solo los rotulos propios del caso: titular, titulos de nota y el lema del cierre. El texto corrido se queda en la pila del sistema y el sobretitulo en la mono de la base: el sobretitulo es la etiqueta del PORTAFOLIO («marca · fecha»), no la voz de la marca, y en mono se nota esa diferencia. A diferencia de Figaro (condensada de caja alta, que era lo que usaban sus piezas), aqui NO va mayusculas sostenidas: la serif de contraste alto pide cajas como vienen, y el peso se queda en 560 en vez de 700, que es donde Playfair tiene la elegancia sin volverse pesada. Al ser fuente variable, 560 no cuesta nada extra. */ .caso--queen-esther .caso__titular, .caso--queen-esther .caso__bloque-titulo { font-family: var(--qe-serif); font-weight: 560; letter-spacing: -.01em; line-height: 1.14; font-size: clamp(1.95rem, 3.5vw, 3rem); } .caso--queen-esther .caso__bloque-titulo { font-size: clamp(1.3rem, 2vw, 1.6rem); } /* El realce va en itálica, no en negrita: es exactamente el gesto de las piezas, donde el acento de los titulares siempre cae en cursiva. El color lo pone la base (.caso__realce). */ .caso--queen-esther .caso__realce { font-style: italic; } .caso--queen-esther .caso__nota-titulo { font-family: var(--qe-serif); font-weight: 600; } /* La entrada lleva dos parrafos (que hace el caso y que se hizo), como en Figaro: la ficha de rotulos no va. `.caso__entrada` trae `margin: 0`. */ .caso--queen-esther .caso__entrada + .caso__entrada { margin-top: .9rem; } /* --- El collage -------------------------------------------------------------- Las seis piezas del mes (cuatro cuadradas, dos videos verticales), junto a la entrada, en el espacio que antes quedaba vacio a la derecha del texto. Agregado el 21 ago 2026: antes eran dos secciones con titulo y parrafo propio (el feed en reja, las historias en pareja); Miguel pidio juntarlas en un solo collage escalonado y borrar el texto de por medio. NO es un mecanismo nuevo: es .caso__mosaico de la base (columnas + `align-items: start`, el "aire tipo masonry" que ya usa el cierre de este mismo caso para el mosaico del perfil), con dos columnas en vez de dos piezas. Se evito a proposito inventar un bento con esquinas mas redondeadas o lineas punteadas conectando piezas -que es lo que traia la referencia original-: el resto del portafolio no las tiene, y una seccion que se ve de otra familia no se lee como una decision de diseno, se lee como un descuido. Cuadradas y verticales conviven en las mismas dos columnas SIN recortarse: cada pieza conserva su alto natural (la imagen y el video siguen en `height: auto`) y es la columna la que se acomoda alrededor. Es la leccion de Eterna: forzar formas distintas a una celda comun le come hasta el 68% de la caja a la que no encaja. `.caso__collage-lleno` es lo unico propio: hace que una pieza ocupe las dos columnas. Abre y cierra el collage (moldeador arriba, floral abajo), con los dos pares del medio mezclando una cuadrada y una vertical -dos cuadradas seguidas se leen planas, y lo que sostiene el escalonado es que una fila quede mas alta que la otra. */ .caso--queen-esther .caso__collage { display: grid; grid-template-columns: 1fr; align-items: start; gap: clamp(.7rem, 1.8vw, 1.15rem); margin: 0; padding: 0; list-style: none; } @media (min-width: 480px) { .caso--queen-esther .caso__collage { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .caso--queen-esther .caso__collage li { margin: 0; min-width: 0; } .caso--queen-esther .caso__collage figure { margin: 0; } .caso--queen-esther .caso__collage-lleno { grid-column: 1 / -1; } .caso--queen-esther .caso__collage .caso__marco { border: 1px solid var(--caso-linea); } .caso--queen-esther .caso__collage .caso__marco:hover, .caso--queen-esther .caso__collage .caso__marco:focus-visible { border-color: var(--caso-acento); } /* La entrada va FIJA con `.caso__dupla--alto` de la base (sticky a 3rem): el collage es bastante mas alto que el texto, y sin esto la entrada se queda huerfana arriba mientras el lector sigue viendo piezas. Es el mismo mecanismo que usan las paginas grandes del portafolio para el texto junto a una galeria larga; aqui no hay que redefinir nada, `--alto` ya lo trae. */ /* --- El sistema, al cierre --------------------------------------------------- El mosaico del feed es la unica pieza panoramica del caso (3:2) y cierra la seccion a lo ancho, acotado a 1020 px: mas grande no le agrega detalle al ojo, solo le roba parecido con las piezas que estan arriba. */ .caso--queen-esther .caso__sistema { max-width: 1020px; margin-inline: auto; }