/* * moztue.com — legibilidad de la tienda, con colores DEL MANUAL. * * POR QUÉ ESTE FICHERO Y NO UN PARCHE EN EL CSS DE WOODMART. Las páginas de * moztue ya no se regeneran (solo /nosotros/ y /contacto/ están en la lista del * regenerador), y el tema WoodMart que generó su CSS ya no existe: no hay * origen aguas arriba. Para estas páginas la instantánea ES el artefacto, así * que la corrección va en un fichero propio, versionado y legible, en vez de * dentro de un `base.min.css` de 46 KB minificado de un tema desaparecido —que * además está duplicado en disco con cinco niveles de prefijo de hash. * * LO MEDIDO en `/tienda/`, en la página que recibe el visitante: * * 2.46 nombre de categoría bajo cada ficha #a5a5a5 sobre blanco x24 * 2.48 símbolo e importe del precio #BEA163 sobre blanco x24 * 2.48 número del carrito blanco sobre #BEA163 * 3.93 botón AGOTADO #6b7280 sobre #e7e7ee * * El botón AGOTADO no se corrige aquí: su regla tiene origen propio en * `moztue-tienda.js`, que es fichero nuestro, y ahí se ha arreglado. Repetirlo * aquí sería tener el mismo color en dos sitios, que es como se desincronizan. * * El mínimo legible es 4.5. Ninguno es "texto grande" (18.66px en negrita o * 24px), así que a los cuatro les hace falta. * * LOS COLORES SALEN DEL MANUAL DE MOZTUE, que nombra cada uno: * #0B0B0B Negro titulares, el logotipo * #333333 Gris tinta "titulares sobre claro, DATOS" * #777777 Gris texto cuerpo y descripciones * #BEA163 Dorado "acento: enlaces, detalles, precio destacado" * * DOS DECISIONES QUE CONVIENE CONOCER: * * 1. El dorado SÍ es el color de la marca —18 apariciones en su manual— y su * uso previsto incluye el precio. Pero sobre blanco da 2.48: un precio que * no se lee no está destacado. Pasa a `#333333`, que el propio manual * reserva para "datos". El dorado se conserva donde funciona: el fondo de la * insignia del carrito, donde lo que cambia es el número que va encima. * 2. `#a5a5a5` NO está en el manual —viene de `--color-gray-400` de WoodMart—, * así que no se conserva nada al sustituirlo. * * Y UN DATO PARA EL DUEÑO, no una decisión mía: el "Gris texto #777777" que el * manual asigna al cuerpo da **4.48** sobre blanco, que es 0,02 por debajo del * mínimo. Por eso aquí no se usa. Es cosa del manual, no del sitio. */ /* Nombre de categoría bajo cada ficha de producto. */ .wd-product-cats a { color: #333333; } /* Precio de la ficha: importe y símbolo, que iban dorados sobre blanco. */ span.price, span.price .woocommerce-Price-amount, span.price .woocommerce-Price-currencySymbol { color: #333333; } /* Insignia del carrito: se conserva el dorado de marca de fondo; lo que cambia es el número, que en blanco sobre ese dorado no se leía. EL `!important` HACE FALTA, COMPROBADO QUITÁNDOLO. Intenté retirarlo razonando que no existía regla rival: al recorrer `document.styleSheets` y quedarme con las que casan con el elemento, la única que aparecía era ésta. Deduje que el blanco venía heredado y que cualquier regla directa lo ganaría. **Falso**: lo quité, se desplegó, y la insignia volvió a 2.48. El error de razonamiento es conocido y lo tenía anotado: ese recorrido descarta EN SILENCIO las reglas cuyo selector hace fallar a `el.matches()` —`:has()` y compañía—, así que «no aparece ninguna rival» no significa que no la haya. Significa que mi método no la ve. Se restaura y se deja escrito para que nadie lo intente una tercera vez. */ .wd-cart-number { color: #0B0B0B !important; } /* ── Portada ────────────────────────────────────────────────────────────── */ /* Subtítulo de los banners promocionales («Multi Brand»): iba en el mismo #a5a5a5 de WoodMart que no está en el manual. 2.46 -> 12.63. */ .promo-banner .banner-subtitle { color: #333333; } /* Botón «CATALOGO»: se conserva el dorado de marca de fondo y cambia el texto, que en blanco sobre ese dorado daba 2.48. Con el negro del manual, 7.94. */ .wd-button-wrapper a.btn .wd-btn-text { color: #0B0B0B; } /* Atributos de la ficha de producto (talla, color): iban en el `#777777` que el manual asigna al cuerpo, y sobre blanco da **4.48** — dos centésimas por debajo del mínimo. Son datos, así que van al «gris tinta» que el propio manual reserva para datos: 12.63. Es el mismo criterio que se aplicó al precio de la ficha. */ .woocommerce-product-attributes-item__value, .woocommerce-product-attributes-item__value .wd-term-name, .woocommerce-product-attributes-item__value .wd-term-sep { color: #333333; } /* Etiqueta de descuento sobre la foto («-37%»): iba en blanco sobre el dorado de marca, 2.48. Se conserva el dorado —es el acento de moztue y ahí funciona como fondo— y el número pasa al negro del manual: 7.94. */ .product-labels .onsale { color: #0B0B0B; } /* Metadatos de la ficha (referencia y categoría): el `#777777` del cuerpo, que sobre blanco da 4.48. Son datos → «gris tinta». */ .product_meta .sku, .product_meta .posted_in a { color: #333333; } /* Precio de la FICHA. La regla de más arriba cubría `span.price` (el listado); en la ficha el contenedor es `p.price`, y ahí seguía dorado sobre blanco a 2.48 con 22px. Mismo criterio: el precio es dato → «gris tinta». */ p.price, p.price .woocommerce-Price-amount, p.price .woocommerce-Price-currencySymbol { color: #333333; } /* Botón «AÑADIR AL CARRITO»: es el botón de comprar y estaba en blanco sobre el dorado, 2.48. Se conserva el dorado de marca de fondo y el texto pasa al negro del manual: 7.94. */ .single_add_to_cart_button { color: #0B0B0B; } /* Marca del producto («2ARES», el enlace al archivo de marca junto al título): blanco sobre blanco, contraste 1 — texto INVISIBLE, no un falso positivo del medidor. Comprobado con captura y con el DOM: no hay imagen ni fondo detrás, sólo un `` en `rgb(255,255,255)` sobre la página blanca dentro de una caja con borde que se ve vacía. Es un enlace navegable que nadie puede leer ni encontrar. Va al negro del manual, que es lo que usa el título contiguo. */ .wd-product-brands a { color: #0B0B0B; }