/* caso-figaro.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 JPG originales: #FFC949 el dorado del marco y de los titulares. Es la marca #003159 el azul de la historia ilustrada de la cerveza #9A2925 el rojo de la historia ilustrada del facial El dorado de las piezas da 1,53: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 el tono (39 grados) y la saturacion, #946200 queda en 5,24:1 — el mismo objetivo que las otras paginas del portafolio (5,26 en Barkys y Bonfibra, 5,24 en Eurofarma). Blanco sobre el acento: 5,24:1. Ese es el par que manda en un boton, y es el que se le olvido comprobar a las tres paginas de caso de MKT Group y las dejo en 3,5:1 durante meses. Aqui no hay boton dentro del fragmento —el CTA lo pone la pagina—, pero el token queda calibrado por si alguna vez lo lleva. En oscuro si entra el dorado de marca sin tocar: #FFC949 da 12,24:1 sobre el fondo #101215 de la base. */ /* --- La tipografia del caso ------------------------------------------------- Oswald, del Oswald Project (Vernon Adams, Kalapi Gajjar, Cyreal), licencia SIL OFL 1.1. La licencia va al lado del archivo, en assets/fonts/OFL.txt, y tiene que viajar con el. POR QUE ESTA Y NO OTRA: se saco de AMPLIAR LAS LETRAS DE LOS TITULARES, no de mirar el logotipo. Es la leccion que dejo escrita Bonfibra, donde se eligio Nunito por el lockup del logo cuando las piezas usaban otra cosa. El logotipo de Figaro es un sello redondo con una serif de otra epoca; los titulares de las piezas («TENEMOS NUEVA SEDE», «20% OFF») son una grotesca CONDENSADA de caja alta y terminales planas. Oswald es esa forma. El archivo es el subset `latin` de la fuente variable (200-700 en un solo archivo, 21 KB), asi que declarar dos pesos no cuesta una descarga mas. 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: "Oswald"; font-style: normal; font-weight: 200 700; /* fuente variable, un solo archivo */ font-display: swap; src: url("fonts/oswald-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--figaro { --caso-acento: #946200; /* el dorado, bajado a AA: 5,24:1 */ --caso-acento-texto: #fff; /* 5,24:1 sobre el acento */ --caso-secundario: #003159; /* azul de la historia ilustrada, 13,3:1 */ --caso-fondo-alt: #faf6ee; --caso-linea: #e8ddc8; --figaro-condensada: "Oswald", "Arial Narrow", ui-sans-serif, system-ui, sans-serif; } /* La segunda parte sigue al mosaico con una separación breve: las historias pertenecen al mismo caso y no necesitan el respiro amplio de otro acto. */ .caso--figaro .caso__acto { margin-block: clamp(1.25rem, 3vw, 2.25rem); } .caso--figaro .caso__acto:first-child { margin-top: 0; } .caso--figaro .caso__acto:last-child { margin-bottom: 0; } @media (prefers-color-scheme: dark) { .caso--figaro:not([data-tema="claro"]) { --caso-acento: #ffc949; /* el dorado de marca tal cual: 12,2:1 */ --caso-acento-texto: #231800; /* 10,6:1 sobre el acento */ --caso-secundario: #8ab8e8; --caso-fondo-alt: #17140e; --caso-linea: #332c20; } } /* --- Titular y sobretitulo en condensada ----------------------------------- Solo los rotulos y el titular. El texto corrido se queda en la pila del sistema: Oswald es una condensada de titulos, y un parrafo entero en condensada se lee peor, no mas de marca. La condensada ocupa menos ancho a igual cuerpo, asi que el titular sube un paso respecto de la base y aun asi entra en dos lineas en la columna del reparto. `letter-spacing` a 0: Oswald ya viene apretada y sumarle ajuste la vuelve un rotulo. */ .caso--figaro .caso__titular, .caso--figaro .caso__bloque-titulo { font-family: var(--figaro-condensada); font-weight: 700; letter-spacing: 0; line-height: 1.06; text-transform: uppercase; font-size: clamp(1.9rem, 3.1vw, 2.7rem); } .caso--figaro .caso__bloque-titulo { font-size: clamp(1.35rem, 2.1vw, 1.7rem); } .caso--figaro .caso__sobretitulo, .caso--figaro .caso__nota-titulo { font-family: var(--figaro-condensada); font-weight: 500; } /* La ficha de cliente/rol/piezas no va, por lo mismo que en Eurofarma: cuatro rotulos para cuatro datos que caben en una frase. Van dentro del texto, y por eso la entrada son dos parrafos. `.caso__entrada` trae `margin: 0`. */ .caso--figaro .caso__entrada + .caso__entrada { margin-top: .9rem; } /* --- Rejilla de verticales ------------------------------------------------- Cuatro piezas 9:16, en dos pares. Es una rejilla propia y no `.caso__bento` por la razon que dejo escrita el caso Eterna: meter formas distintas en una misma casilla le come a la pieza hasta el 68 % de su caja. Aqui las cuatro son 1080x1920 exacto, asi que la casilla se define por proporcion y ninguna pierde un pixel. DOS COLUMNAS EN TELEFONO Y CUATRO DESDE 760 px, y las dos medidas son la misma decision: el par —misma promocion, dos versiones— tiene que quedar junto y visible de un golpe. A dos columnas cada par ocupa una fila; a cuatro, los dos pares caben en una. Lo que no puede pasar es una sola columna, que separa el par por un scroll y deshace lo que la seccion afirma. */ .caso--figaro .caso__verticales { display: grid; /* Explicito y no `auto-fit`, por lo mismo que .caso__mosaico: auto-fit arma una pista de mas y su gap deja pixeles muertos contra el borde. */ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(.7rem, 1.8vw, 1.25rem); margin: 0; padding: 0; list-style: none; } .caso--figaro .caso__verticales li { margin: 0; min-width: 0; } .caso--figaro .caso__verticales figure { margin: 0; } @media (min-width: 760px) { .caso--figaro .caso__verticales { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .caso--figaro .caso__verticales figcaption { margin-top: .55rem; font-size: .82rem; line-height: 1.4; color: var(--caso-tinta-suave); } /* --- Cierre ---------------------------------------------------------------- Una linea y dos voces. La primera mitad en la pila del sistema, en tinta: es el estudio hablando. La segunda es lo que dice el tablero de la puerta del local, y va en la condensada del caso porque es una cita, no una afirmacion nuestra. `nowrap` va en cada mitad y no en el parrafo: en telefono la frase no cabe entera, y lo que tiene que pasar entonces es que parta ENTRE las dos voces, nunca dentro de una. Por eso tambien se apaga `text-wrap: balance`, que reparte por ancho y romperia justo eso. */ .caso--figaro .caso__cierre { max-width: none; text-wrap: wrap; /* apaga el `balance` de la base */ font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.5; } .fg-frio { white-space: nowrap; color: var(--caso-tinta); } .fg-rotulo { white-space: nowrap; font-family: var(--figaro-condensada); font-style: normal; /* llega dentro de un */ font-weight: 700; font-size: 1.35em; text-transform: uppercase; letter-spacing: .01em; color: var(--caso-acento); }