` es un atributo del bloque, y WordPress lo emite como estilo EN LINEA. Un estilo en linea gana a cualquier selector de la hoja: la regla que habia aqui —`body.woocommerce-account main`— parecia razonable y no aplicaba nunca. Peor: la prueba del presupuesto vertical la estaba leyendo y daba por bueno un relleno de 24 px donde el navegador pintaba 64. El relleno de esta pagina vive en `templates/page-mi-cuenta.html`, que es una plantilla propia como ya las tienen el carrito y el checkout, y la prueba lo lee de alli. Es tambien la razon de que la prueba mire la plantilla y no la hoja: mide lo que el navegador aplica, no lo que a uno le gustaria. */ /* -------------------------------------------------------------------------- LA AURORA: ALGO QUE MEREZCA VERSE A TRAVES Esto va primero y no es adorno: sin esto, el cristal de mas abajo no existe. Un desenfoque es un promedio ponderado, y el promedio de un color constante es ESE MISMO COLOR. Detras del panel habia `neutral-100` plano sobre `neutral-050` plano —y el grano del sitio vive en `z-index: 0`, por debajo del contenido, asi que ni se transparenta—. Sobre eso, `backdrop-filter: blur()` no produce absolutamente ningun efecto. Ni con CSS ni con WebGL: es aritmetica, no una limitacion de la tecnica. El cristal de un sistema operativo se ve porque siempre hay una foto, un fondo de pantalla o contenido pasando por debajo. Aqui habia que ponerlo. Tres manchas grandes y muy suaves, sin un solo borde duro. Es el mismo idioma que ya usa el carrito vacio —`radial-gradient` con `color-mix`, «da profundidad sin introducir un solo borde duro»—, aqui a otra escala. Los porcentajes NO son libres: la prueba de contraste los lee, compone las tres capas sobre el fondo, le pone el cristal encima y comprueba que el texto que va arriba sigue pasando su umbral. Subirlos pone la prueba en rojo. `z-index: -1` con `isolation: isolate` en el padre: la aurora se pinta detras del contenido de la pagina pero no puede escaparse por encima de la cabecera pegada ni del cajon del carrito. -------------------------------------------------------------------------- */ .pep-main--cuenta { position: relative; isolation: isolate; } .pep-main--cuenta::before { content: ""; position: absolute; z-index: -1; inset-block-start: calc(-1 * var(--pep-cabecera)); inset-inline: -10vw; block-size: 140%; pointer-events: none; background-image: radial-gradient(60rem 40rem at 18% 2%, color-mix(in srgb, var(--wp--preset--color--brand) 34%, transparent) 0%, transparent 68%), radial-gradient(45rem 34rem at 88% 24%, color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent) 0%, transparent 62%), radial-gradient(52rem 40rem at 62% 98%, color-mix(in srgb, var(--wp--preset--color--senal-fondo) 55%, transparent) 0%, transparent 70%); } .pep-acceso { display: grid; /* `minmax(0, ...)` en las dos, y no `1fr 1fr`. `1fr` es en realidad `minmax(auto, 1fr)`: su MINIMO es el contenido. Y como los dos formularios se alternan con `display: none` —y lo oculto no aporta nada a la maquetacion—, ese minimo CAMBIABA al cambiar de pestana: la pagina entera se recolocaba al pulsar «Crear cuenta». Un salto de maquetacion disparado por un control que presume de funcionar sin JavaScript. El panel queda en 34rem, los mismos que ya usaba `--solo-entrar`, asi que mide igual en las tres vistas de esta pantalla: con alta, sin alta, y en una sola columna. Un numero que comprobar en vez de tres. */ grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: var(--wp--preset--spacing--60); align-items: start; margin-block-start: 0; } /* Cuando el alta esta apagada desde los ajustes de WooCommerce no hay pestanas ni segunda columna, y una rejilla de dos con una sola cosa dentro deja medio ancho vacio. La plantilla marca ese caso con su propia clase. */ .pep-acceso--solo-entrar { grid-template-columns: minmax(0, 34rem); justify-content: center; } @media (max-width: 64rem) { /* Una sola columna, y CON TOPE. Sin el, a 1023 px el panel se servia a casi mil pixeles y los campos a ochocientos y pico: una linea de escritura de noventa caracteres para meter un correo. El tope es el mismo `34rem` de la rejilla de arriba, asi que el panel NO cambia de ancho al cruzar el corte; lo que cambia es que la columna de razones se va debajo. Y de paso desarma una trampa: `.pep-acceso--solo-entrar` tiene la MISMA especificidad que `.pep-acceso`, esta escrita antes, y un `@media` no anade especificidad — asi que aqui dentro perdia su propio tope y el panel se estiraba igual. Ahora los dos valores coinciden y da lo mismo quien gane. */ .pep-acceso { grid-template-columns: minmax(0, 34rem); justify-content: center; gap: var(--wp--preset--spacing--50); } /* En telefono el formulario va primero: quien llega aqui viene a entrar, no a leer por que le conviene tener cuenta. El panel de razones no tiene enlaces, asi que moverlo no descoloca el recorrido con teclado. */ .pep-acceso__panel { order: -1; } } /* -------------------------------------------------------------------------- EL PANEL DE LA IZQUIERDA: POR QUE HACE FALTA UNA CUENTA -------------------------------------------------------------------------- */ /* El titulo arranca al ras del filo de arriba de la tarjeta, sin relleno. Habia aqui un `padding-block-start` de 16 px que era un intento de alinear este titulo con la ETIQUETA de la pestana activa, y se quedaba corto por unos quince. Esa alineacion no se puede escribir con un numero: depende del medio interlineado de un titulo de 26 px y del centrado optico de una etiqueta de 14 dentro de una caja de 44, y las dos cosas se mueven con la rampa fluida. Un numero asi caduca en cuanto alguien toca el theme.json, y ya habia caducado. La alineacion que SI se lee es de filo a filo: el borde de arriba del titulo contra el borde de arriba de la tarjeta, los dos en cero. neutral-900 sobre neutral-050: 16.78:1. */ .pep-acceso__titulo { margin-block: 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--xl); line-height: 1.15; } /* neutral-600 sobre neutral-050: 7.65:1. */ .pep-acceso__entrada { max-width: 44ch; margin-block: 0 var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--sm); line-height: 1.6; color: var(--wp--preset--color--neutral-600); } .pep-acceso__ventajas { display: grid; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; } /* Cada ventaja es una rejilla de dos columnas y dos renglones: el icono ocupa los dos renglones a la izquierda, y a su derecha el que y el detalle. Asi el detalle queda alineado con el titulo y no debajo del icono. */ .pep-ventaja { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--wp--preset--spacing--30); align-items: start; } /* El icono hereda el cian por `currentColor`, igual que los tres de la portada. accent sobre neutral-050: 10.82:1. */ .pep-ventaja__icono { grid-row: 1 / 3; display: block; inline-size: 1.75rem; block-size: 1.75rem; color: var(--wp--preset--color--accent); } /* neutral-900 sobre neutral-050: 16.78:1. */ .pep-ventaja__que { font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--neutral-900); } /* neutral-600 sobre neutral-050: 7.65:1. */ .pep-ventaja__detalle { font-size: var(--wp--preset--font-size--xs); line-height: 1.5; color: var(--wp--preset--color--neutral-600); } /* -------------------------------------------------------------------------- EL PANEL DEL FORMULARIO -------------------------------------------------------------------------- */ .pep-acceso__panel { /* Los radios del selector viven aqui dentro en posicion absoluta. */ position: relative; box-sizing: border-box; /* Relleno uniforme. Era 40/40/50 —mas abajo que arriba— para compensar el margen inferior que WooCommerce le ponia al formulario; desmontada esa caja, la asimetria ya no compensa nada y solo deja hueco. */ padding: var(--wp--preset--spacing--40); /* Este es el estado BASE, y es opaco a proposito. El cristal se anade despues, dentro de un `@supports`. Al reves —cristal de base y respaldo opaco para quien no lo soporte— el panel se serviria semitransparente sobre nada en cualquier navegador que no entienda `backdrop-filter`, y semitransparente sobre nada es simplemente mas claro: se pierde el filo entre la tarjeta y la pagina. Asi, lo que no entiende el efecto ve la tarjeta solida de siempre. */ border: 1px solid var(--wp--preset--color--neutral-200); border-radius: var(--wp--custom--radio--panel); background-color: var(--wp--preset--color--neutral-100); } /* -------------------------------------------------------------------------- EL CRISTAL Ahora que hay una aurora detras, el desenfoque tiene algo que promediar y el panel se convierte en material en vez de en un rectangulo mas claro. Tres capas, y las tres hacen falta: - `blur` recoge la aurora y la deja irreconocible pero presente, que es lo que distingue un cristal de un plastico; - `saturate` por encima del 100 % compensa que el desenfoque apaga el color al promediarlo: sin ese empujon el cristal sale gris; - el filo pasa a ser luz y no linea. `neutral-900` al 14 % sobre un fondo que ya varia se lee como un borde captando claridad, no como un trazo. La sombra es la del propio tema, `apoyada`, que sobre oscuro ya esta definida como un realce interior de una linea —no como una sombra proyectada, que sobre negro no existe—. Aqui por fin sirve para algo: le da grosor al canto. -------------------------------------------------------------------------- */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .pep-acceso__panel { border-color: color-mix(in srgb, var(--wp--preset--color--neutral-900) 14%, transparent); background-color: color-mix(in srgb, var(--wp--preset--color--neutral-100) 72%, transparent); box-shadow: var(--wp--custom--sombra--apoyada); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); } } /* Y quien pide menos transparencia se queda sin cristal, con la tarjeta solida. Es una preferencia del sistema operativo, y hasta hoy este tema no la miraba en ninguna parte. Un panel translucido sobre un fondo que se mueve es exactamente lo que esa preferencia existe para apagar. Va DESPUES del `@supports` porque las dos reglas tienen la misma especificidad y decide el orden. */ @media (prefers-reduced-transparency: reduce) { .pep-acceso__panel { border-color: var(--wp--preset--color--neutral-200); background-color: var(--wp--preset--color--neutral-100); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* -------------------------------------------------------------------------- EL SELECTOR DE FORMULARIO Dos radios y sus etiquetas. Los radios se esconden de la vista pero NO del teclado ni del lector de pantalla: `display: none` los sacaria del recorrido y del grupo, y entonces el selector solo funcionaria con raton. Un grupo de radios se recorre con las flechas y se anuncia como «opcion 1 de 2, seleccionada», que es exactamente lo que esto es. Y como el estado vive en el propio control, funciona con el JavaScript apagado. -------------------------------------------------------------------------- */ .pep-acceso__radio { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pep-acceso__pestanas { /* El indicador vive aqui dentro, en posicion absoluta. */ position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-block-end: var(--wp--preset--spacing--40); padding: 4px; border: 1px solid var(--wp--preset--color--neutral-200); border-radius: var(--wp--custom--radio--pastilla); background-color: var(--wp--preset--color--neutral-050); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .pep-acceso__pestanas { border-color: color-mix(in srgb, var(--wp--preset--color--neutral-900) 10%, transparent); background-color: color-mix(in srgb, var(--wp--preset--color--brand-dark) 55%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } @media (prefers-reduced-transparency: reduce) { .pep-acceso__pestanas { border-color: var(--wp--preset--color--neutral-200); background-color: var(--wp--preset--color--neutral-050); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* EL INDICADOR QUE SE DESLIZA Antes el fondo azul lo pintaba la propia etiqueta, asi que al cambiar de pestana el color saltaba de un lado a otro sin recorrer el camino. Ahora el relleno es una sola caja que se mueve, y el ojo la sigue: el cambio se explica solo, sin que nadie tenga que releer las dos etiquetas para ver cual quedo encendida. Las cuentas, para que nadie tenga que redescubrirlas. Una caja absoluta resuelve sus porcentajes contra la caja de RELLENO de su antepasado posicionado, que aqui mide el contenido mas los 8 px de relleno. Si el contenido mide C, cada mitad mide (C - 2 de hueco) / 2 = C/2 - 1, y `calc(50% - 5px)` da (C + 8)/2 - 5 = C/2 - 1: el mismo numero. El filo izquierdo de la segunda mitad cae en 4 + (C/2 - 1) + 2 = C/2 + 5, y `calc(50% + 1px)` da (C + 8)/2 + 1 = C/2 + 5. Tambien el mismo. No hay ningun ancho escrito a mano: el control funciona igual a cualquier medida. El filo `brand-light` no es adorno. Contra el carril el relleno `brand` solo da 1.85:1, y a un limite de control se le piden 3:1; `brand-light` sobre `neutral-050` da 3.45:1. Es lo que hace que la mitad activa se distinga tambien sin color. Quien pidio menos movimiento ya lo tiene apagado por el interruptor general del tema, que anula toda transicion. */ .pep-acceso__pestanas::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 4px; inline-size: calc(50% - 5px); border: 1px solid var(--wp--preset--color--brand-light); border-radius: var(--wp--custom--radio--pastilla); background-color: var(--wp--preset--color--brand); transition: inset-inline-start var(--wp--custom--movimiento--base) var(--wp--custom--curva--salida); } #pep-ver-alta:checked ~ .pep-acceso__pestanas::before { inset-inline-start: calc(50% + 1px); } /* neutral-600 sobre neutral-050: 7.65:1. El `margin: 0` no es decorativo: `woocommerce-blocktheme.css` trae `.woocommerce-page label { margin-bottom: .7em }` y alcanza a estas dos etiquetas, porque el body de esta pagina lleva esa clase. Eran 9.75 px metidos DENTRO de la rejilla, que inflaban la pista y empujaban el borde inferior del carril: tres pixeles de aire arriba y 12.75 abajo. Ese es el espacio muerto que se veia, y no habia forma de deducirlo mirando esta hoja. El alto sube a 44: el propio tema declara ese minimo para cualquier cosa que se pulsa —`--pep-campo-alto`, y el riel de familias lo sube ahi en tactil— y estas pestanas se habian quedado en 40. */ .pep-pestana { /* `position: relative` no es decoracion: sin el, las etiquetas son hijos EN FLUJO y el indicador es un descendiente POSICIONADO, o sea que se pinta encima y les tapa el texto. Posicionadas, se pintan en la misma capa y despues, por orden de arbol. Ningun `z-index` hace falta. */ position: relative; display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--pep-campo-alto); border-radius: var(--wp--custom--radio--pastilla); cursor: pointer; font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--wp--preset--color--neutral-600); transition: color var(--wp--custom--movimiento--rapido) var(--wp--custom--curva--suave); } /* Y el margen va en regla aparte, porque hay que ganar por ESPECIFICIDAD. La de WooCommerce es `.woocommerce-page label`: una clase y un elemento, (0,1,1). Un `margin: 0` escrito dentro de `.pep-pestana` es (0,1,0) y pierde —lo escribi asi primero y se quedo puesto sin hacer nada—. Con el carril delante son (0,2,0) y gana. Que alla diga `margin-bottom` y aqui `margin` es indiferente: las dos resuelven la misma propiedad y decide la cascada. Va aparte tambien por otra razon: `.pep-pestana` tiene que seguir SOLA en su renglon y sin sangrar, porque la prueba del presupuesto vertical la busca por texto exacto anclado a principio de linea. */ .pep-acceso__pestanas .pep-pestana { margin: 0; } .pep-pestana:hover { color: var(--wp--preset--color--neutral-900); } /* La pestana elegida. neutral-900 sobre brand: 9.07:1 — el mismo par que la pastilla activa del riel del catalogo y que la pagina activa del menu de la cuenta. El fondo ya no lo pone la etiqueta: lo pone el indicador. */ #pep-ver-entrar:checked ~ .pep-acceso__pestanas .pep-pestana[for="pep-ver-entrar"], #pep-ver-alta:checked ~ .pep-acceso__pestanas .pep-pestana[for="pep-ver-alta"] { color: var(--wp--preset--color--neutral-900); } /* El anillo de foco del sitio, trasladado del radio escondido a su etiqueta. Sin esto, quien navega con teclado no ve donde esta. */ #pep-ver-entrar:focus-visible ~ .pep-acceso__pestanas .pep-pestana[for="pep-ver-entrar"], #pep-ver-alta:focus-visible ~ .pep-acceso__pestanas .pep-pestana[for="pep-ver-alta"] { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* La caja que WooCommerce le dibuja a cada formulario, desactivada. `woocommerce.css` trae esto, y no es un detalle: .woocommerce form.login, .woocommerce form.register { border:1px solid #cfc8d8; padding:20px; margin:2em 0; border-radius:5px } Nadie lo apagaba. En una tarjeta oscura eso pinta un marco LILA CLARO —un color que no existe en `theme.json`— y, peor, mete veintiun pixeles de sangria por lado: la tira de pestanas es hija directa del panel y llega al borde, pero los campos empiezan veintiun pixeles mas adentro. El escalon se ve a simple vista y parece un error de maquetacion, que es exactamente lo que era. El `margin: 2em 0` ademas COLAPSABA con el `margin-block-end` de las pestanas: donde esta hoja dice veinticuatro, el navegador pintaba treinta y dos. Y por debajo del boton dejaba entre ochenta y ciento diez pixeles de tarjeta vacia, sumando su relleno, su borde, su margen y el del panel. Se anula entero. La separacion entre pestanas y formulario la pone el `margin-block-end` de las pestanas, que es un solo sitio. */ .woocommerce .pep-acceso__panel form.login, .woocommerce .pep-acceso__panel form.register { margin: 0; padding: 0; border: 0; border-radius: 0; } /* Y aqui el selector hace su trabajo: se ve uno de los dos, no los dos. */ #pep-ver-entrar:checked ~ #customer_login .u-column2, #pep-ver-alta:checked ~ #customer_login .u-column1 { display: none; } /* WooCommerce pone las dos columnas al 48 % y flotadas. Aqui van una sobre otra y solo se ve una, asi que hay que deshacer las dos cosas. */ .pep-acceso__panel #customer_login { display: block; } .pep-acceso__panel #customer_login .u-column1, .pep-acceso__panel #customer_login .u-column2 { float: none; inline-size: auto; width: auto; } /* -------------------------------------------------------------------------- LOS CAMPOS, A ESCALA DE FORMULARIO -------------------------------------------------------------------------- */ /* neutral-600 sobre neutral-100: 7.08:1. Va en `neutral-600` y no en `neutral-400`: sobre la superficie del panel, `neutral-400` daba 4.23:1, por debajo del 4.5:1 que pide un texto. */ .pep-acceso__nota { margin-block: 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--xs); line-height: 1.5; color: var(--wp--preset--color--neutral-600); } .pep-acceso__nota--activacion { margin-block-start: var(--wp--preset--spacing--30); padding-block-start: var(--wp--preset--spacing--30); border-block-start: var(--pep-borde); } /* El campo va sobre el fondo de la pagina y no sobre el del panel: los dos son `neutral-100` en la regla general de formularios de cuenta, y un campo del mismo color que su tarjeta desaparece. */ /* El orden del selector importa, y lo tuve mal. `.woocommerce` es el `

` que WooCommerce pone ALREDEDOR del shortcode, o sea un ANTEPASADO del panel, no algo de dentro. Escrito como `.pep-acceso__panel .woocommerce` el selector no coincidia con nada, y como un selector que no coincide no da ningun error, las tres reglas de aqui abajo llevaban puestas sin aplicarse: - los campos se quedaban en `neutral-100`, el MISMO color del panel, que es justo lo que el comentario de arriba dice querer evitar; - la separacion entre filas la seguia poniendo WooCommerce con `1em`, que sobre un cuerpo de 19 px eran 19 px por fila; - y la fila del boton perdia por especificidad contra `.woocommerce form .form-row`, asi que arrastraba otro margen de mas. Con `.woocommerce` delante, el selector coincide y ademas gana en especificidad (0,3,2 contra 0,2,1). */ .woocommerce .pep-acceso__panel form .form-row input.input-text, .woocommerce .pep-acceso__panel form .form-row select, .woocommerce .pep-acceso__panel form .form-row textarea { border-radius: var(--wp--custom--radio--tarjeta); background-color: var(--wp--preset--color--neutral-050); border-color: var(--wp--preset--color--neutral-400); } /* Dentro del cristal, el campo tambien es cristal: un pozo mas oscuro que la tarjeta, no una caja opaca pegada encima. Se hunde en vez de posarse, que es lo que lo hace legible como sitio donde escribir. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .woocommerce .pep-acceso__panel form .form-row input.input-text, .woocommerce .pep-acceso__panel form .form-row select, .woocommerce .pep-acceso__panel form .form-row textarea { background-color: color-mix(in srgb, var(--wp--preset--color--brand-dark) 55%, transparent); border-color: color-mix(in srgb, var(--wp--preset--color--neutral-900) 16%, transparent); } } @media (prefers-reduced-transparency: reduce) { .woocommerce .pep-acceso__panel form .form-row input.input-text, .woocommerce .pep-acceso__panel form .form-row select, .woocommerce .pep-acceso__panel form .form-row textarea { background-color: var(--wp--preset--color--neutral-050); border-color: var(--wp--preset--color--neutral-400); } } .woocommerce .pep-acceso__panel form .form-row { margin-block-end: var(--wp--preset--spacing--30); padding: 0; } /* WooCommerce le pone `line-height: 2` a las etiquetas de formulario, que sobre una etiqueta de 13 px son 26 px de caja para una linea de texto. Multiplicado por cada campo, es medio formulario de aire. */ .woocommerce .pep-acceso__panel form .form-row label { line-height: 1.3; } /* La fila del «mantener la sesion» y el enlace de contrasena olvidada, en el mismo renglon: son las dos cosas secundarias del formulario y juntas ocupan una linea en vez de dos. */ .pep-acceso__fila-recordar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); } /* La especificidad, que aqui la perdia una regla nuestra contra otra nuestra. `.woocommerce form .form-row label` (0,2,2) le gana a `.woocommerce-form-login__rememberme` (0,1,0), asi que de esta regla no se aplicaba casi nada: mandaba el `display: block` de la otra y con el se caian `align-items` y `gap`, que solo existen en un contenedor flexible. La casilla volvia a apoyarse en la linea base —visiblemente mas baja que su texto— y la unica separacion entre las dos era el espacio literal del HTML. Ademas el texto salia en `tiny` mientras el enlace de al lado, en el mismo renglon, salia en `xs`: dos tamanos en la misma linea. Se le anade el nombre del elemento para subir a (0,3,2) y ganar. */ .woocommerce form .form-row label.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-end: 0; cursor: pointer; font-size: var(--wp--preset--font-size--xs); font-weight: 400; color: var(--wp--preset--color--neutral-600); } .woocommerce-form-login__rememberme input { inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: var(--wp--preset--color--accent); } /* accent sobre neutral-100: 10.02:1. */ .pep-acceso__olvide { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--accent); text-decoration: none; } .pep-acceso__olvide:hover, .pep-acceso__olvide:focus-visible { text-decoration: underline; } .woocommerce .pep-acceso__panel form .form-row.pep-acceso__fila-boton { margin-block-end: 0; } /* -------------------------------------------------------------------------- UN ICONO DENTRO DE CADA CAMPO Es la mayor diferencia visual que queda entre esta pantalla y la de la competencia a igualdad de contenido, y no es solo adorno: un sobre y un candado dicen de que va cada campo antes de leer la etiqueta, que es lo que hace que un formulario se «lea» de un vistazo en vez de renglon por renglon. Van con `mask-image` y no con `background-image` a proposito. Un SVG metido como fondo trae su color dentro del propio archivo, y eso seria un color literal escondido en un `url()` — la regla 3 con otro disfraz. Con mascara, el SVG aporta SOLO la forma y el color lo pone `background-color`, o sea un token del theme.json como cualquier otro: cambiar la marca tambien recolorea estos iconos. El `%23000` de dentro del SVG no es una decision de color. Una mascara mira la opacidad, no el tono: cualquier color opaco pinta la misma forma, y ese solo dice «aqui hay tinta». El trazo es 1.5, que es el de los otros siete iconos del proyecto. -------------------------------------------------------------------------- */ .woocommerce .pep-acceso__panel form .pep-campo { position: relative; } /* El icono se ancla al fondo de la fila y no al centro: la fila es etiqueta mas campo, asi que su centro cae en el hueco entre los dos. Anclado abajo y con el alto del campo, queda centrado dentro del campo pase lo que pase con la etiqueta. */ /* El icono lo ENCIENDE el modificador, no esta regla. `content` vive abajo, junto a cada mascara, y no aqui. Una mascara ausente no recorta nada: un `.pep-campo` al que se le olvide el modificador no se quedaria sin icono, pintaria una barra solida de 18x44 px en `neutral-400` encima del campo. Con `content` en el modificador, un campo sin modificador simplemente no pinta nada, que es lo que cualquiera espera. */ .woocommerce .pep-acceso__panel form .pep-campo::after { position: absolute; inset-block-end: 0; inset-inline-start: var(--wp--preset--spacing--30); inline-size: 1.125rem; block-size: var(--pep-campo-alto); background-color: var(--wp--preset--color--neutral-400); mask-position: center; mask-repeat: no-repeat; mask-size: 1.125rem 1.125rem; pointer-events: none; transition: background-color var(--wp--custom--movimiento--instante) var(--wp--custom--curva--suave); } /* Cuando el campo tiene el foco, el icono acompana. Sin esto se queda apagado justo en el momento en el que si esta diciendo algo: cual de los dos campos estas escribiendo. */ .woocommerce .pep-acceso__panel form .pep-campo:focus-within::after { background-color: var(--wp--preset--color--accent); } .pep-campo--correo::after { content: ""; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3.2 6.6 7.4 5.3a2.4 2.4 0 0 0 2.8 0l7.4-5.3'/%3E%3C/svg%3E"); } .pep-campo--clave::after { content: ""; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .pep-campo--persona::after { content: ""; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.6 20.4a7.4 7.4 0 0 1 14.8 0'/%3E%3C/svg%3E"); } .pep-campo--celular::after { content: ""; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); } /* Y el campo deja sitio al icono. */ .woocommerce .pep-acceso__panel form .pep-campo input.input-text { min-block-size: var(--pep-campo-alto); padding-inline-start: calc( var(--wp--preset--spacing--30) + 1.75rem ); } /* El boton de enviar, a ancho completo. `border-box` porque combina ancho y relleno, y en este tema NO hay `box-sizing` global: sin declararlo, el relleno se suma al cien por ciento y la caja desborda su contenedor. Ya paso en el boton del carrito. neutral-900 sobre brand: 9.07:1. */ .pep-acceso__fila-boton .button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: 3rem; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radio--pastilla); font-size: var(--wp--preset--font-size--sm); font-weight: 600; } /* El aviso de privacidad que WooCommerce engancha en su propio hook. */ .woocommerce-privacy-policy-text { margin-block: var(--wp--preset--spacing--30) 0; font-size: var(--wp--preset--font-size--micro); line-height: 1.5; color: var(--wp--preset--color--neutral-600); } .woocommerce-privacy-policy-text p { margin: 0; } /* -------------------------------------------------------------------------- EL OJO DE VER LA CONTRASENA No esta en el HTML: lo construye jQuery de WooCommerce envolviendo cada `input[type=password]` que lleve la clase `woocommerce-Input`. Por eso esa clase no se puede quitar de la plantilla. Y su icono es un SVG metido en un `background-image`, con el color QUEMADO dentro del propio SVG en negro casi puro. Sobre este fondo era invisible: un boton que existe, se puede pulsar y no se ve. Se invierte con un filtro en vez de escribir un color: `invert(1)` sobre un negro da un blanco, asi que el color sigue derivandose y no hay un hexadecimal nuevo en la hoja. Cambiar la imagen entera obligaria a escribir uno. -------------------------------------------------------------------------- */ .woocommerce .password-input { position: relative; display: block; } .woocommerce .show-password-input { display: flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: var(--pep-radio); background-color: transparent; cursor: pointer; } .woocommerce .show-password-input::before { filter: invert(1); opacity: 0.65; transition: opacity var(--wp--custom--movimiento--instante) var(--wp--custom--curva--suave); } .woocommerce .show-password-input:hover::before, .woocommerce .show-password-input:focus-visible::before, .woocommerce .show-password-input.display-password::before { opacity: 1; } /* -------------------------------------------------------------------------- Datos de pago y comprobante Estos bloques aparecen en la pantalla de gracias, en el correo y en el detalle del pedido. Son datos que la gente copia a mano hacia su app del banco, asi que la legibilidad de las cifras manda sobre lo demas. -------------------------------------------------------------------------- */ .pep-pago, .pep-comprobante { border: var(--pep-borde); border-radius: var(--pep-radio); background-color: var(--wp--preset--color--neutral-050); padding: var(--wp--preset--spacing--40); margin-block: var(--wp--preset--spacing--40); } .pep-pago__titulo, .pep-comprobante__titulo { font-size: var(--wp--preset--font-size--lg); margin-block: 0 var(--wp--preset--spacing--20); } .pep-pago__intro, .pep-comprobante__intro, .pep-comprobante__ayuda { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--neutral-600); margin-block: 0 var(--wp--preset--spacing--30); } .pep-pago__datos { width: 100%; border-collapse: collapse; margin-block: var(--wp--preset--spacing--30); } .pep-pago__datos th, .pep-pago__datos td { padding: var(--wp--preset--spacing--20) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wp--preset--color--neutral-200); } .pep-pago__datos tr:last-child th, .pep-pago__datos tr:last-child td { border-bottom: 0; } .pep-pago__datos th { width: 40%; font-weight: 500; color: var(--wp--preset--color--neutral-600); font-size: var(--wp--preset--font-size--sm); } /* La CLABE, la referencia y el importe se teclean en la app del banco. Monoespaciada y cifras de ancho fijo reducen los errores al copiarlas. */ .pep-pago__datos td { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wp--preset--color--neutral-900); overflow-wrap: anywhere; } .pep-pago__nota, .pep-comprobante__estado { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--neutral-600); margin-block: var(--wp--preset--spacing--20) 0; } .pep-comprobante__estado { color: var(--wp--preset--color--success); font-weight: 500; } .pep-comprobante__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); } .pep-comprobante__campo input[type="file"] { font-size: var(--wp--preset--font-size--sm); max-width: 100%; } .pep-comprobante__ayuda { flex-basis: 100%; margin-block: 0; } /* -------------------------------------------------------------------------- ENTREGA COORDINADA Aparece en la pantalla de gracias y en el detalle del pedido. Aqui no hay cifras que teclear: lo que importa es que se lea como una promesa clara de que alguien va a escribir. Por eso el bloque usa el color de marca y no el gris de los bloques de pago. -------------------------------------------------------------------------- */ .pep-entrega { border: var(--pep-borde); border-left: 3px solid var(--wp--preset--color--accent); border-radius: var(--pep-radio); background-color: var(--wp--preset--color--neutral-100); padding: var(--wp--preset--spacing--40); margin-block: var(--wp--preset--spacing--40); } .pep-entrega__titulo { font-size: var(--wp--preset--font-size--lg); margin-block: 0 var(--wp--preset--spacing--20); } .pep-entrega__intro { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--neutral-800); margin-block: 0; } /* Etiqueta y valor en dos columnas, pero solo cuando hay ancho para ello: en telefono se apilan, que es como se leen los datos cortos. */ .pep-entrega__datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); margin-block: var(--wp--preset--spacing--30) 0; font-size: var(--wp--preset--font-size--sm); } .pep-entrega__datos dt { font-weight: 500; color: var(--wp--preset--color--neutral-600); } .pep-entrega__datos dd { margin: 0; color: var(--wp--preset--color--neutral-900); font-weight: 500; overflow-wrap: anywhere; } .pep-entrega__accion { margin-block: var(--wp--preset--spacing--30) 0; } /* `neutral-050` es el mas OSCURO de esta paleta, no el mas claro. Los nombres van de 050 a 900 como en cualquier escala, pero la paleta es oscura: 050 es #0A0F1A, casi negro, y 900 es #E6F1FF, casi blanco. Aqui se uso como si fuera texto claro sobre el azul de marca y daba 1.85:1 —el mismo error, con el mismo nombre de color, en tres reglas—. Sobre un fondo de marca el texto va en el extremo claro. */ .pep-entrega__enlace { display: inline-block; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radio--pastilla); background-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--neutral-900); font-size: var(--wp--preset--font-size--sm); font-weight: 600; text-decoration: none; } .pep-entrega__enlace:hover, .pep-entrega__enlace:focus-visible { background-color: var(--wp--preset--color--brand-dark); color: var(--wp--preset--color--neutral-900); } @media (max-width: 30rem) { .pep-entrega__datos { grid-template-columns: 1fr; gap: 0; } .pep-entrega__datos dd { margin-block: 0 var(--wp--preset--spacing--20); } } /* -------------------------------------------------------------------------- COMPRAR DE NUEVO Vive en Mi cuenta. El HTML lo pinta peptidos-recompra —para que cambiar de tema no cueste funcionalidad— y aqui solo se viste con los tokens. La lectura que manda es "cuando suelo pedir esto", asi que el distintivo de tiempo pesa mas que el precio. -------------------------------------------------------------------------- */ .pep-recompra__intro { color: var(--wp--preset--color--neutral-600); margin-block: 0 var(--wp--preset--spacing--40); } .pep-recompra__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--30); } .pep-recompra__item { display: flex; gap: var(--wp--preset--spacing--40); align-items: flex-start; border: var(--pep-borde); border-radius: var(--pep-radio); background-color: var(--wp--preset--color--neutral-050); padding: var(--wp--preset--spacing--30); } .pep-recompra__imagen { flex: 0 0 auto; width: 5rem; line-height: 0; } .pep-recompra__imagen img { width: 100%; height: auto; border-radius: var(--pep-radio); } .pep-recompra__datos { flex: 1 1 auto; min-width: 0; } .pep-recompra__nombre { font-size: var(--wp--preset--font-size--base); margin-block: 0 var(--wp--preset--spacing--20); } .pep-recompra__nombre a { text-decoration: none; color: var(--wp--preset--color--neutral-900); } .pep-recompra__nombre a:hover, .pep-recompra__nombre a:focus-visible { color: var(--wp--preset--color--accent-dark); } .pep-recompra__cuando { margin-block: 0 var(--wp--preset--spacing--20); } .pep-recompra__distintivo { display: inline-block; padding: 0.15em 0.6em; border-radius: var(--wp--custom--radio--pastilla); font-size: var(--wp--preset--font-size--xs); font-weight: 600; background-color: var(--wp--preset--color--neutral-200); color: var(--wp--preset--color--neutral-800); } /* Lo que ya toca se distingue de un vistazo: es la unica linea de la pantalla que pide una decision. */ .pep-recompra__distintivo--toca { background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--neutral-050); } .pep-recompra__detalle { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--neutral-600); margin-block: 0 var(--wp--preset--spacing--30); } .pep-recompra__accion .button { font-size: var(--wp--preset--font-size--sm); } .pep-recompra__aviso { border-left: 3px solid var(--wp--preset--color--accent); background-color: var(--wp--preset--color--neutral-100); border-radius: var(--pep-radio); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); margin-block: var(--wp--preset--spacing--30); } @media (max-width: 30rem) { .pep-recompra__item { gap: var(--wp--preset--spacing--30); } .pep-recompra__imagen { width: 3.5rem; } } /* -------------------------------------------------------------------------- MOVIMIENTO El vocabulario de animacion del tema. Regla de la casa: nada se mueve mas de lo que tarda un parpadeo, y nada se mueve sin motivo. El movimiento sirve para dos cosas —senalar que algo llego, y confirmar que algo respondio—, no para decorar. Hay dos formas de pedirlo, y las dos hacen falta: - `data-revelar` en HTML escrito a mano (patrones y plantillas). - la clase `pep-revelar`, que SI se puede poner desde el editor de bloques. Sin ella, el dueno no podria animar nada de lo que arme el mismo. El estado oculto cuelga de `.pep-js`, que pone un guion en linea en el head. Sin JavaScript esta regla no aplica nunca y la pagina se ve entera: el movimiento es un extra encima, no un requisito para leer. -------------------------------------------------------------------------- */ .pep-js [data-revelar], .pep-js .pep-revelar, .pep-js .pep-escalonado > * { opacity: 0; transform: translateY(18px); transition: opacity var(--wp--custom--movimiento--lento) var(--wp--custom--curva--salida), transform var(--wp--custom--movimiento--lento) var(--wp--custom--curva--salida); transition-delay: var(--pep-retardo, 0ms); will-change: opacity, transform; } /* Solo aparece, sin desplazarse. Para lo que ya esta en su sitio: una cifra grande, una imagen que no debe moverse. */ .pep-js [data-revelar='aparecer'], .pep-js .pep-revelar--aparecer { transform: none; } /* Entra desde el margen. El movimiento lateral refuerza que el dato viene a senalar algo. */ .pep-js [data-revelar='lateral'], .pep-js .pep-revelar--lateral { transform: translateX(-24px); } .pep-js [data-revelar].pep-visible, .pep-js .pep-revelar.pep-visible, .pep-js .pep-escalonado.pep-visible > * { opacity: 1; transform: none; will-change: auto; } /* Escalonado. El hijo n entra 70 ms despues del anterior; a partir del sexto se deja de sumar, porque una rejilla de doce tarjetas tardaria casi un segundo en terminar de aparecer y eso ya no se lee como elegancia sino como lentitud. Se observa el CONTENEDOR, no cada hijo: asi funciona igual en una rejilla que pinta el servidor —las tarjetas del catalogo— donde no hay forma de ponerle un atributo a cada tarjeta. */ .pep-escalonado > *:nth-child(1) { --pep-retardo: 0ms; } .pep-escalonado > *:nth-child(2) { --pep-retardo: 70ms; } .pep-escalonado > *:nth-child(3) { --pep-retardo: 140ms; } .pep-escalonado > *:nth-child(4) { --pep-retardo: 210ms; } .pep-escalonado > *:nth-child(5) { --pep-retardo: 280ms; } .pep-escalonado > *:nth-child(n + 6) { --pep-retardo: 350ms; } /* -------------------------------------------------------------------------- FICHA DE PRODUCTO La tesis de la tienda, puesta en composicion: el producto es polvo blanco en un vial de vidrio y por COFEPRIS no puede haber foto de uso, asi que la fotografia nunca va a salvar esta pagina. El dato es el heroe. De ahi las tres decisiones de abajo: la columna de datos pesa mas que la de imagen, la pureza se lee antes que el precio, y la imagen vive en un marco que se ve intencional aunque lo que llegue a contener sea flojo. -------------------------------------------------------------------------- */ /* La lamina: el marco de la imagen. Esta pensado para recibir bien lo que sea. Mientras no lleguen las fotos del cliente hay un vial de ejemplo dibujado por codigo; cuando lleguen, el mismo marco las encuadra sin tocar nada. Un marco con aire y una linea fina hace que una imagen mediocre se lea como una lamina de catalogo, y que una buena se luzca. */ .pep-lamina { /* Defensivo, y hace falta: el carrusel de WooCommerce escribe el ancho de la imagen EN LINEA al cargar, y a veces lo calcula con una medida anterior a la definitiva. Cuando se pasa, desbordaba por encima de la columna del precio y cortaba el nombre del producto. Recortar no cambia ninguna medida, asi que no lo hace recalcular ni entra en el bucle que colgaba la pagina. */ min-width: 0; overflow: hidden; } .pep-lamina .woocommerce-product-gallery { /* LA PLACA VA MAS OSCURA QUE SU BANDA, Y ANTES IBA DEL MISMO COLOR. Aqui habia `neutral-100` con un filo de `neutral-200`, copiado de la tarjeta del catalogo sin mirar donde caia. En el catalogo funciona porque la relacion es pozo `neutral-100` sobre tarjeta `neutral-050`: el pozo se ve. En la ficha, la banda que contiene esto —`.pep-ficha-cabecera`— ya es `neutral-100`, asi que la placa quedaba del MISMO color que su fondo y lo unico que se veia era la linea del filo: un recuadro alrededor de nada. Medido en la pagina servida antes de tocarlo: banda rgb(17,24,39), placa rgb(17,24,39), filo rgb(43,58,87). Tres cifras que lo dicen todo y que no se podian ver leyendo el CSS, porque las dos reglas viven a cuatro mil lineas de distancia. Se invierte la relacion en vez de quitar la pieza: la placa baja a `neutral-050` —mas oscura que la banda, igual que en el catalogo es mas clara que la tarjeta— y el filo sobra, porque ahora el contraste lo hace el color. `composer test:vistas` compara las dos y falla si vuelven a coincidir. */ background-color: var(--wp--preset--color--neutral-050); border-radius: var(--wp--custom--radio--base); padding: var(--wp--preset--spacing--50); /* LA IMAGEN NO ESPERA A QUE CORRA UN JAVASCRIPT AJENO. WooCommerce sirve esta galeria con `style="opacity: 0; transition: opacity .25s"` escrito EN LINEA en su plantilla (`templates/single-product/product-image.php`), y lo unico que la vuelve a encender es `assets/js/frontend/single-product.js`, en tres lineas. No hay una sola regla de CSS que lo haga: ni en la hoja de WooCommerce ni en esta. O sea que el vial llega en el HTML desde el primer byte y se queda invisible hasta que bajan jQuery y ese guion, se analizan y se ejecutan. Si cualquiera de los tres falla —y en un alojamiento compartido fallan—, la ficha se queda con un pozo vacio para siempre, sin ningun error. Es la regla 30 otra vez: algo que al no estar mata lo que adorna no es un adorno, es una dependencia. `!important` porque pelea contra un estilo en linea, que es la unica situacion en que este proyecto lo admite — la misma razon por la que lo lleva el `object-fit` de la imagen, unas lineas mas abajo. */ opacity: 1 !important; } /* El marco es UNO. WooCommerce pinta ademas su propia caja alrededor de la imagen, y las dos juntas daban un doble borde que se veia como un error de maquetacion. Se apaga la de dentro y se conserva la de fuera, que es la que lleva el aire. */ .pep-lamina .woocommerce-product-gallery__wrapper, .pep-lamina .woocommerce-product-gallery__image { background: none; border: 0; box-shadow: none; margin: 0; padding: 0; } /* Aqui NO se le pone `max-width` ni `height` a la imagen de la galeria, y hay que decir por que para que nadie lo "arregle" luego: FlexSlider mide la imagen al cargar y le escribe un ancho en linea. Una regla que le cambie el tamano lo hace recalcular, y recalcular vuelve a disparar la regla. Ese bucle cuelga el navegador: la ficha dejaba de pintarse por completo. El desbordamiento que se queria evitar se resuelve apilando las columnas antes de llegar a ese ancho, mas abajo. */ .pep-lamina img { display: block; margin-inline: auto; /* Aqui iba `mix-blend-mode: multiply`, que servia cuando la lamina era clara: fundia el fondo blanco de una foto con el del marco. Sobre fondo OSCURO multiplicar deja la imagen en negro, y el vial se convirtio en una silueta. Fuera. Si algun dia llegan fotos con fondo blanco recortado, la solucion en un tema oscuro no es mezclar sino pedirlas con fondo transparente. */ } /* La familia, como cintillo sobre el nombre. Da contexto sin gastar una linea de titulo, y de paso el visitante entiende que el catalogo esta organizado. */ .pep-ficha-familia { text-transform: uppercase; letter-spacing: 0.16em; color: var(--wp--preset--color--neutral-600); margin-block: 0 var(--wp--preset--spacing--20); } .pep-ficha-familia a { color: inherit; text-decoration: none; } .pep-ficha-familia a:hover, .pep-ficha-familia a:focus-visible { color: var(--wp--preset--color--accent); text-decoration: underline; } /* LA PUREZA. Es el unico numero que distingue a un proveedor que analiza sus lotes de uno que dice que lo hace, asi que se lee antes que el precio. Es tambien el unico sitio de toda la ficha donde aparece el verde menta. Esa contencion es deliberada: un color que aparece una sola vez se lee como una senal; el mismo color repartido por la pagina se lee como decoracion. */ .pep-compra .pep-pureza { display: block; margin-block: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); background-color: var(--wp--preset--color--senal-fondo); border-inline-start: 3px solid var(--wp--preset--color--senal); border-radius: 0 var(--wp--custom--radio--base) var(--wp--custom--radio--base) 0; } .pep-compra .pep-pureza__cifra { display: block; /* Aqui NO va la monoespaciada, aunque sea la fuente de los datos. En una mono el punto ocupa el ancho completo de un digito, y a este tamano «99 . 2 %» se lee como un fallo de maquetacion en vez de como una cifra. La mono se queda en la tabla y en los distintivos, que es donde su razon de ser —que las columnas de numeros alineen— de verdad aplica. */ font-family: var(--wp--preset--font-family--sans); font-variant-numeric: lining-nums; font-size: var(--wp--preset--font-size--xxl); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--wp--preset--color--accent); } .pep-compra .pep-pureza__etiqueta { display: block; margin-block-start: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--micro); text-transform: uppercase; letter-spacing: 0.14em; color: var(--wp--preset--color--neutral-600); } /* El precio, en la misma familia que la pureza: los dos son cifras y se comparan entre productos. Que compartan tipografia dice que son del mismo tipo de dato. */ .pep-compra .wc-block-components-product-price, .pep-compra .price { display: block; font-family: var(--wp--preset--font-family--mono); font-weight: 500; color: var(--wp--preset--color--neutral-900); margin-block: 0 var(--wp--preset--spacing--30); } /* El aviso legal cierra la columna. Va DESPUES del boton a proposito: es el ultimo texto que alguien lee antes de agregar al carrito, y esa posicion es media razon de que exista. Ver docs/DECISION.md 7.2. */ .pep-compra .pep-aviso--ruo { margin-block-start: var(--wp--preset--spacing--40); } /* En telefono la lamina va primero y estrecha: la imagen orienta, pero no debe ocupar la primera pantalla entera y empujar el precio fuera de vista. */ @media (max-width: 46rem) { .pep-lamina .woocommerce-product-gallery, .pep-lamina .wp-block-woocommerce-product-image-gallery { padding: var(--wp--preset--spacing--40); } .pep-lamina img { max-width: 60%; } } /* -------------------------------------------------------------------------- CATALOGO Cabecera con aire, un riel para navegar por familia, una barra de servicio discreta y una rejilla de fichas. La tarjeta lleva clave, pureza y certificado porque sin esos tres datos una rejilla de peptidos son nueve fotos identicas de polvo blanco con nombres distintos, y entonces lo unico comparable entre productos acaba siendo el precio: justo la comparacion que esta tienda no quiere ganar. -------------------------------------------------------------------------- */ .pep-catalogo-cabecera .wp-block-woocommerce-breadcrumbs { color: var(--wp--preset--color--neutral-600); text-transform: uppercase; letter-spacing: 0.12em; } /* -------------------------------------------------------------------------- La tira de datos de la vista Va bajo el titulo y dice lo que esa pagina concreta tiene: nueve productos en la tienda, dos en Secretagogos. Antes ahi habia una frase fija que se repetia igual en las ocho paginas que comparten esta plantilla. Es el idioma de `.pep-cifra` en miniatura: dato en cian, separadores de un pixel. Mismo vocabulario, otro tamano, otro trabajo — aquella abre una seccion, esta es un renglon de referencia. -------------------------------------------------------------------------- */ .pep-datos-vista { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wp--preset--spacing--30); margin-block: var(--wp--preset--spacing--30) 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--neutral-600); font-variant-numeric: lining-nums; } /* El filo separa un dato del siguiente. Al primero se le quita: una linea antes del primer dato no separa nada. Cuando la tira envuelve, el filo de la que abre renglon queda suelto a la izquierda —es el precio de resolverlo con `flex-wrap` en vez de con una rejilla, y a este tamano no se nota. */ .pep-dato-vista + .pep-dato-vista { padding-inline-start: var(--wp--preset--spacing--30); border-inline-start: 1px solid var(--wp--preset--color--neutral-200); } /* -------------------------------------------------------------------------- EL RIEL DE FAMILIAS Era el hueco funcional mas grande de la tienda: desde el catalogo no habia forma de llegar a una familia. Va horizontal y no en barra lateral, y eso se decidio midiendo. Una columna de 16rem se lleva 256 px mas 32 de canal; quedan 928 para la rejilla y tres columnas de tarjeta necesitan 912. Entra por dieciseis pixeles, y cualquier ajuste posterior de relleno la parte en dos columnas. Aqui decia que el riel «cuesta 44 px de alto y no le quita un solo pixel a la rejilla». Lo segundo es cierto —va encima, no al lado— y lo primero era falso ya el dia que se escribio: con las siete pastillas de hoy son DOS filas, unos 88 px. Envuelve, no se desliza. Con veinticinco familias serian cinco filas y la primera fila de productos quedaria bajo el pliegue, asi que el bloque se recorta a la rama en la que estas cuando el catalogo pasa de diez familias. Ver `FamiliasRiel::las_que_caben()`. Ademas una barra lateral es el mueble de las FACETAS, y aqui no hay ninguna: no existen atributos de producto, no hay etiquetas y todo esta en existencia. Una barra lateral con una sola lista de seis enlaces anuncia un sistema de filtrado que no existe. -------------------------------------------------------------------------- */ .pep-riel { margin-block-start: var(--wp--preset--spacing--40); } .pep-riel__carril { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--20); } /* La etiqueta de grupo. Convierte seis pastillas sueltas en cuatro bajo «Peptidos» y dos bajo «Insumos», que se barre de un vistazo. Es un enlace porque la raiz TAMBIEN es una pagina con sus productos: un texto que parece titulo y no lleva a ningun sitio, teniendo adonde llevar, es una oportunidad tirada. */ .pep-riel__grupo { display: inline-flex; align-items: center; padding-inline: var(--wp--preset--spacing--20); margin-inline-start: var(--wp--preset--spacing--20); border-inline-start: 1px solid var(--wp--preset--color--neutral-200); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.1em; text-transform: uppercase; /* `neutral-600` y no `neutral-400`. La etiqueta de grupo se penso como un rotulo en voz baja, pero acabo siendo un ENLACE —la raiz tambien es una pagina con productos—, y en `neutral-400` daba 4.23:1 sobre la banda: por debajo del minimo para texto pequeno. Lo que la mantiene en segundo plano no es el contraste sino el tamano, la monoespaciada, las mayusculas y el tracking abierto, que ya la separan de las pastillas de sobra. */ color: var(--wp--preset--color--neutral-600); text-decoration: none; transition: color var(--wp--custom--movimiento--rapido) var(--wp--custom--curva--suave); } .pep-riel__grupo:first-child { margin-inline-start: 0; border-inline-start: 0; padding-inline-start: 0; } .pep-riel__grupo:hover, .pep-riel__grupo:focus-visible, .pep-riel__grupo.is-activa { color: var(--wp--preset--color--accent); } /* Sobre el filo de la pastilla en reposo, que da 1.56:1 contra la banda y va a saltar en cualquier revision automatica: la pastilla NO se identifica por su borde. Es un enlace con texto a 7.08:1, dentro de un `