/* ============================================================ OCTUBRE ROSA — piel temporal del sitio Mes de concientizacion sobre el cancer de mama. NO TOCA NI UNA REGLA DEL TEMA. Lo unico que hace es redefinir las variables de color de main.css, asi que sacarlo devuelve el sitio exactamente a como estaba: no hay nada que "deshacer". Se quita comentando una linea en functions.php. Ver theme/OCTUBRE-ROSA.md LOS TRES COLORES LOS ELIGIO MAXI el 2026-10-19: #df1970 el rosa fuerte #f7d8e7 el rosa claro #662b49 el oscuro, para botones y fondos ============================================================ */ :root { /* El claro de fondo. Reemplaza al verde casi blanco. */ --verde-050: #F7D8E7; /* EL ACENTO. Va el rosa fuerte en los dos escalones -el del boton y el del detalle- porque es EL color de la campana y tiene que verse como uno solo. El estado hover del boton se resuelve mas abajo, con el oscuro, en vez de con un segundo rosa. */ --verde-400: #DF1970; --verde-500: #DF1970; /* El oscuro. En main.css --verde-700 es sobre todo texto sobre fondo claro -seis de sus nueve usos-, asi que necesita contraste alto. */ --verde-700: #662B49; /* EL FONDO DE LAS SECCIONES FUERTES: la barra de clientes, las tarjetas del portfolio, la lista del ecosistema, el cierre y el pie. VA EL ROSA FUERTE, decision de Maxi el 2026-10-19. El blanco encima da 4.66, que pasa, pero es un margen fino: todo lo que se apoye aca tiene que ser blanco puro. Un rosa claro encima da 3.5 y no sirve. */ --oliva: #DF1970; /* Los neutros, derivados del oscuro para que todo sea de la misma familia. De a uno no se notan; juntos son lo que evita que el sitio se vea como el de siempre con dos manchas rosas encima. */ --neutral-200: #EFE1E9; --neutral-300: #DBC5D2; --gris-cal: #A08C97; --neutral-600: #6E5A65; /* La tinta: negro con una gota de ciruela. */ --tinta: #1A1016; } /* ------------------------------------------------------------ BLANCO Y NEGRO DONDE EL ROSA SOLO NO ALCANZA. El verde de marca era claro y aguantaba texto oscuro encima. El rosa fuerte es mucho mas oscuro: con la tinta del tema queda por debajo del minimo de 4.5. Con blanco lo pasa. Por eso todo lo que se apoya sobre #df1970 va en blanco. ------------------------------------------------------------ */ .btn-primary { color: #FFFFFF; } /* El hover del boton: en el tema aclaraba de un verde al otro. Aca oscurece al ciruela. NO puede usar var(--oliva), que ahora es el mismo rosa fuerte del estado normal: el boton no cambiaria al pasarle el mouse. */ .btn-primary:hover, .btn-primary:focus-visible { background: var(--verde-700); color: #FFFFFF; } /* EL BOTON PRINCIPAL SOBRE UNA SECCION ROSA -el "Contactanos por WhatsApp" del cierre-. Su fondo es --verde-500, que ahora es el mismo rosa de la seccion: el boton se fundio con el fondo y quedo flotando un texto oscuro en 4.0, sin forma de boton. Va en blanco solido con el texto en rosa, que ademas lo separa del secundario de al lado, y al pasar el mouse se vacia. Las dos puntas dan 4.66. LA ESPECIFICIDAD IMPORTA: main.css trae `.surface-oliva .btn-primary`, que le gana a un `.btn-primary` suelto. Hay que repetir el mismo selector. */ .surface-oliva .btn-primary { background: #FFFFFF; color: var(--verde-400); border-color: #FFFFFF; } .surface-oliva .btn-primary:hover, .surface-oliva .btn-primary:focus-visible { background: transparent; color: #FFFFFF; border-color: #FFFFFF; } /* "Ver servicio", que es otro boton sobre el rosa fuerte y no lleva la clase .btn-primary. Con la tinta del tema queda en 4.0. */ .eco-panel__body a { color: #FFFFFF; } /* LA ETIQUETA DE CATEGORIA DEL PORTFOLIO, sobre el rosa fuerte. En blanco da 4.66; en rosa claro daria 3.5, y es texto chico, asi que necesita 4.5. */ .portfolio-item__tag { color: #FFFFFF; } /* ------------------------------------------------------------ Los tres lugares donde main.css escribe el color a mano, sin variable. Son todos derivados del verde claro. ------------------------------------------------------------ */ /* El velo del hero sobre la foto. Se corre un poco a la derecha respecto del original: el titular tiene que apoyarse sobre color plano. */ .hero::after { background: linear-gradient( 90deg, var(--verde-050) 0%, var(--verde-050) 38%, rgba(247, 216, 231, 0.82) 56%, rgba(247, 216, 231, 0) 80% ); } @media (max-width: 780px) { .hero::after { background: rgba(247, 216, 231, 0.82); } } /* LA LISTA DEL ECOSISTEMA, ahora sobre el rosa fuerte. Sobre este rosa el blanco puro da 4.66, que es el techo: cualquier atenuacion cae por debajo del minimo -al 78% ya da 3.26-. Asi que todos los items van en blanco entero y LA JERARQUIA LA HACE OTRA COSA: el peso de la tipografia y el borde, que para eso estan. */ .eco-item { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, 0.22); } .eco-item:not(.is-active) { font-weight: 400; } /* El borde del item activo era el acento sobre el fondo oscuro. Ahora el fondo ES el acento, asi que ese borde quedo invisible: va en blanco. */ .eco-item.is-active { border-left-color: #FFFFFF; font-weight: 700; } /* El pie: el gris ciruela claro sobre el rosa da 2.87. */ .site-footer__row, .site-footer__row * { color: #FFFFFF; } /* ------------------------------------------------------------ LAS DOS IMAGENES QUE LLEVAN EL VERDE DE MARCA. El CSS no las puede repintar, asi que se les rota el tono: del verde de marca (77 grados) al rosa del lazo (330), que son 253 de giro. A la marana del hero ademas se le baja la saturacion y se le sube la luz: el rosa es mas oscuro que el verde con la misma saturacion, y rotar el tono a secas la dejaba comiendose el titular. LAS FOTOS DE LOS TRABAJOS NO SE TOCAN. Son obra de los clientes y tenirlas seria cambiarle el color a la marca de otro. Para la version definitiva conviene exportar los dos archivos en rosa de verdad, en vez de rotarlos. ------------------------------------------------------------ */ .hero__bg { filter: hue-rotate(253deg) saturate(0.72) brightness(1.1); } img[src*="logo-estudio-lanzi"] { filter: hue-rotate(253deg) saturate(1.25); } /* ------------------------------------------------------------ EL LAZO AL LADO DEL LOGO. Es la imagen que eligio Maxi, recortada de su fondo rosa por saturacion: el lazo esta casi desaturado y el fondo no, asi que el corte sale limpio y conserva el volumen y la sombra. El archivo original quedo en Marcas/Octubre Rosa/. VA GRANDE Y SOBRESALIENDO, pisando la franja del header y metiendose en el hero, que es como lo pidio. Las medidas salen de medir su captura: el lazo mide unas 2.7 veces la altura de la barra y arranca por encima del borde de arriba. NO TAPA NADA CLICKEABLE: lleva pointer-events none, asi que el menu y el logo siguen respondiendo por debajo. ES DECORATIVO: va como fondo de un ::after y no como , asi que un lector de pantalla no lo anuncia. Lo que la campana tiene para decir va en el contenido, no en un adorno. ------------------------------------------------------------ */ .site-header { /* Sin esto el pedazo que sobresale queda cortado por la barra. */ overflow: visible; position: relative; z-index: 5; } .site-logo { position: relative; } .site-logo::after { content: ""; position: absolute; left: 100%; top: 50%; width: 9.3em; height: 10em; margin-left: -1.2em; /* SIN ROTAR: la imagen ya viene inclinada. Agregarle un rotate la tuerce de mas y deja de parecerse a la referencia. LA ALTURA ES LA QUE ES POR UNA RAZON: entra en el hero unos noventa pixeles -que es lo que se pidio- pero frena antes de la volanta "ESTUDIO DE DISENO Y DESARROLLO WEB". Invadir el fondo es una cosa; taparle el texto al hero es otra. En la referencia no pasaba porque ese hero tiene mas aire antes del primer renglon. */ transform: translateY(-20%); background: url("../img/lazo-octubre-rosa.png") no-repeat center / contain; pointer-events: none; } @media (max-width: 780px) { /* En el telefono lo que escasea es el ancho: se achica para no empujar al boton del menu. */ .site-logo::after { width: 6.6em; height: 7.1em; margin-left: -0.9em; } }