/* caso-eurofarma.css — tokens y la unica pieza de layout que este caso agrega. Todo lo demas vive en caso-base.css, que es COMPARTIDA: no se toca aqui. Por que la rejilla de verticales 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 PNG originales: #ED005E magenta de la campana (banda del titular, numerales) #014186 azul Eurofarma (el logotipo) #753CBE morado Eterna (el logotipo de la otra version) El magenta de la pieza da 4,41:1 sobre blanco y NO pasa AA. Bajado a #D6005B queda en 5,24:1, que es el mismo objetivo de las otras paginas del portafolio (5,26 en Barkys y Bonfibra). El ojo no distingue el paso; el lector de contraste si. 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. Aqui no hay boton dentro del fragmento —el CTA lo pone la pagina—, pero el token queda calibrado por si alguna vez lo lleva. */ /* --- La unica tipografia cargada del sitio --------------------------------- Parisienne, de Brian J. Bonislawsky (Astigmatic), licencia SIL OFL 1.1. La licencia va al lado del archivo, en assets/fonts/OFL.txt, y tiene que viajar con el. Es el PRIMER @font-face del sitio: todo lo demas usa la pila del sistema. Se carga por UNA frase, la de cierre, y por eso: · va el subset `latin` y nada mas (22,1 KB) · va `font-display: swap`, asi que la frase se ve desde el primer pintado con la sans y cambia despues. Nunca hay texto invisible. · va `unicode-range` acotado: si algun dia el navegador no necesita ninguno de esos caracteres, no baja el archivo. El archivo va versionado 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: "Parisienne"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/parisienne-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .caso--eurofarma { --caso-acento: #D6005B; /* magenta de campana, bajado a AA */ --caso-acento-texto: #fff; /* 5,24:1 sobre el acento */ --caso-secundario: #014186; /* azul Eurofarma, 9,99:1 sobre blanco */ --caso-fondo-alt: #fff5f9; --caso-linea: #f0dde6; } @media (prefers-color-scheme: dark) { .caso--eurofarma:not([data-tema="claro"]) { --caso-acento: #ff8fb8; /* 8,8:1 sobre #101215 */ --caso-acento-texto: #2a0014; --caso-secundario: #8fb8f0; --caso-fondo-alt: #1b1418; --caso-linea: #34262d; } } /* Las dos secciones de Eurofarma van pegadas en la pagina. Sin esto, el padding inferior de la primera y el superior de la segunda suman el doble de aire en la costura. */ .caso--eurofarma + .caso--eurofarma { padding-top: 0; } /* --- Titular --------------------------------------------------------------- Un paso por debajo del de la base: `clamp(1.9rem, 3.4vw, 2.9rem)` deja el titular de la primera seccion en tres lineas dentro de una columna de 345 px, y tres lineas de titular contra un parrafo corto abren un hueco blanco debajo que no dice nada. Con esto entra en dos, que es la medida a la que el titular se lee de un golpe. */ .caso--eurofarma .caso__titular { font-size: clamp(1.6rem, 2.6vw, 2.25rem); } /* La ficha de cliente/rol/piezas se quito: eran cuatro rotulos para cuatro datos que caben en una frase, y dejaban un bloque de tabla en medio de una seccion que no tiene mas tablas. Ahora van dentro del texto, y por eso la entrada son dos parrafos. `.caso__entrada` trae `margin: 0`. */ .caso--eurofarma .caso__entrada + .caso__entrada { margin-top: .9rem; } /* --- Cierre: la frase de campana ------------------------------------------- Va en UNA linea y en dos voces. La primera mitad en la sans del sistema, en tinta: es el estudio hablando. La segunda es el nombre de la campana, y va en Parisienne 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. El tamano optico de una script no es el de una sans: a igual `font-size` la Parisienne se ve mucho mas pequena porque su altura de x es minima. El 1.6em la iguala. */ .caso--eurofarma .caso__cierre { max-width: none; text-wrap: wrap; /* apaga el `balance` de la base */ font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.5; } .eu-frio { white-space: nowrap; color: var(--caso-tinta); } .eu-script { white-space: nowrap; font-family: "Parisienne", ui-rounded, "Segoe Script", "Brush Script MT", cursive; font-style: normal; /* llega dentro de un */ font-size: 1.6em; line-height: 1; color: var(--caso-acento); } /* --- Pies del bento -------------------------------------------------------- Van DEBAJO de la pieza y no sobrepuestos con `.caso__etiqueta`, que existe y es mas vistosa. Dos razones: en estas piezas el logotipo esta abajo a la izquierda, o sea justo donde caeria la etiqueta, y la etiqueta taparia la unica prueba de lo que la seccion afirma; y la regla de la casa para portafolio es sin rotulos sobre las imagenes. */ .caso__bento figcaption { font-size: .78rem; line-height: 1.35; } /* --- Rejilla de verticales ------------------------------------------------- Tres piezas 9:16 en fila: dos historias y el video. 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 tres piezas son 1080x1920 exacto, asi que la casilla se define por proporcion y ninguna pierde un pixel. `align-items: start` porque el video trae controles nativos y crece unos pixeles mas que las imagenes; estirarlos a la misma altura recortaria las dos historias para acomodar al tercero. */ .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__verticales li { margin: 0; min-width: 0; } .caso__verticales figure { margin: 0; } /* En telefono las dos historias van en pareja —que es lo que son— y el video se lleva el ancho completo. Tres verticales apiladas a 338 px son 1.900 px de scroll para tres piezas; asi son 900. */ .caso__verticales .eu-video { grid-column: 1 / -1; } @media (min-width: 620px) { .caso__verticales { grid-template-columns: repeat(3, minmax(0, 1fr)); } .caso__verticales .eu-video { grid-column: auto; } } /* El poster del