/* =========================================================================== DW PERFUMERÍA — COMPONENTES · Fase 2 de «MOUILLETTE» Se carga DESPUÉS de tokens.css. Aquí no hay ni un hex ni un px de color: todo sale de los tokens. Si necesitas un valor que no está, se añade al fichero de tokens y se usa por su nombre — nunca se escribe aquí. Qué hace esta hoja, por orden de importancia para la venta: 1. LA MOUILLETTE — que el olor se vea 2. Objetivos táctiles de 44 px — 32 de 39 no llegaban en móvil 3. Un solo indicador de foco — había dos, en dos hojas, con dos valores 4. Jerarquía de botones — el latón NUNCA es un botón 5. Campos de formulario =========================================================================== */ /* =========================================================================== 1 · LA MOUILLETTE --------------------------------------------------------------------------- El problema real de vender perfume por internet: no se puede oler. Con 138 frascos en una cuadrícula, todos son un frasco sobre fondo claro y el ojo no tiene por dónde entrar. La familia olfativa es el dato por el que se elige un perfume —antes de la casa y antes del precio— y estaba en letra pequeña. Ahora cada producto lleva una tira teñida por su familia, en el mismo sitio, siempre. En tres pantallas el ojo aprende que el ámbar quemado es Oriental y deja de leer. Seis tiras, seis familias reales: Oriental 49 · Floral 33 · Aromática 17 · Amaderada 17 · Gourmand 12 · Acuática 10. =========================================================================== */ .fam--oriental { --fam: var(--fam-oriental); } .fam--floral { --fam: var(--fam-floral); } .fam--aromatica { --fam: var(--fam-aromatica); } .fam--amaderada { --fam: var(--fam-amaderada); } .fam--gourmand { --fam: var(--fam-gourmand); } .fam--acuatica { --fam: var(--fam-acuatica); } .fam--citrica { --fam: var(--fam-acuatica); } .fam--otra { --fam: var(--fam-otra); } .mouillette { position: absolute; top: 0; left: 0; z-index: 3; width: 3px; /* Se dibuja de arriba abajo con la transición: es una tira de papel mojada en perfume, y el líquido sube. Por eso el degradado va a menos opacidad abajo y no al revés. */ height: 100%; background: linear-gradient( to bottom, var(--fam, var(--laton-hondo)) 0%, var(--fam, var(--laton-hondo)) 55%, color-mix(in srgb, var(--fam, var(--laton-hondo)) 35%, transparent) 100% ); pointer-events: none; } /* La etiqueta de texto se alinea con la tira y hereda su color: los dos dicen lo mismo, y el texto es el que manda. */ .product-card__familia { left: calc(3px + var(--ritmo)) !important; color: var(--fam, var(--laton-hondo)) !important; border-color: color-mix(in srgb, var(--fam, var(--laton-hondo)) 30%, transparent) !important; } /* Al pasar por encima, la tira se ensancha. Es el único movimiento de la tarjeta que aporta información: dice «esto es un objeto, y es de esta familia». Solo `transform`, que no reflota la maqueta. */ .mouillette { transform-origin: left center; transition: transform var(--tiempo-2) var(--curva-salida); } .product-card:hover .mouillette, .product-card:focus-within .mouillette { transform: scaleX(2.334); /* 3px -> 7px */ } /* =========================================================================== 2 · OBJETIVOS TÁCTILES — 44 px --------------------------------------------------------------------------- Medido el 11-ago en la ficha de producto a 375 px: 32 de 39 objetivos interactivos por debajo de 44 px. Los puntos del carrusel median 24×24, los enlaces de cabecera 33 de alto, la caja de búsqueda 21. No se agranda el dibujo: se agranda el ÁREA. Un pseudo-elemento centrado estira la zona sensible sin mover ni un píxel de lo que se ve. =========================================================================== */ /* Se activa por ANCHO además de por puntero. Empecé gateando solo en `pointer: coarse` y estaba mal por dos motivos: un portátil táctil con ratón se queda sin el parche justo cuando lo toca con el dedo, y —más práctico— el ancho es lo único que se puede comprobar de verdad desde un panel de navegador. Lo que no se puede medir, no se puede dar por bueno. */ @media (max-width: 900px), (pointer: coarse) { .dw-carrusel__punto, .header__nav a, .header__cart, .header__topbar a, .dw-footer a, .breadcrumb a, .paginacion a, .paginacion button, .tienda-toolbar a, .sidebar__chip, .product-card__name a { position: relative; } .dw-carrusel__punto::after, .header__nav a::after, .header__cart::after, .header__topbar a::after, .dw-footer a::after, .breadcrumb a::after, .paginacion a::after, .paginacion button::after, .tienda-toolbar a::after, .sidebar__chip::after, .product-card__name a::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px; transform: translate(-50%, -50%); /* No pinta nada; solo recoge el dedo. */ background: transparent; } /* Los que sí pueden crecer de verdad, crecen. */ .btn--sm { min-height: 44px; } .form-input, .form-select, .form-textarea, .busqueda-form input, .tienda-toolbar select { min-height: 44px; } .carrito-qty__btn { min-width: 44px; min-height: 44px; } } /* En escritorio no hace falta el parche, pero los controles siguen sin poder ser diminutos. */ .btn { min-height: 44px; } .dw-carrusel__punto { min-width: 24px; min-height: 24px; } /* =========================================================================== 3 · EL FOCO, UNA SOLA VEZ --------------------------------------------------------------------------- Estaba declarado dos veces con dos valores: `premium.css` ponía 3 px de oro y `atelier.css` 2 px de oro hondo. Ganaba el último cargado y la otra regla era peso muerto que alguien iba a volver a leer creyendo que mandaba. Dos píxeles, latón hondo, con separación. Y un halo de papel por debajo para que también se vea cuando el elemento está sobre una foto oscura. =========================================================================== */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--laton-hondo); outline-offset: 3px; border-radius: var(--radio-1); box-shadow: 0 0 0 5px var(--papel); } /* Sobre tinta, el latón hondo se pierde: ahí manda el claro. */ .dw-on-ink :where(a, button, input, select, summary):focus-visible, .header :where(a, button):focus-visible, .dw-footer :where(a, button):focus-visible, .dw-carrusel :where(a, button):focus-visible { outline-color: var(--laton-claro); box-shadow: 0 0 0 5px var(--tinta); } /* =========================================================================== 4 · BOTONES — el latón NUNCA es un botón --------------------------------------------------------------------------- Un botón dorado sobre papel da 3:1. Se lee como adorno, no como «pulsa aquí», y en una tienda eso son ventas. El primario es TINTA sobre papel: 15:1 y ninguna duda. El latón se queda donde trabaja: el filete, el foco, el precio, la familia. =========================================================================== */ .btn { font-family: var(--tipo-texto); font-weight: var(--peso-fuerte); letter-spacing: 0.04em; border-radius: var(--radio-1); /* Estaba en `all .35s ease`: por encima del límite de 300 ms y animando todas las propiedades, incluidas las que reflotan la maqueta. */ transition: background-color var(--tiempo-2) var(--curva-suave), color var(--tiempo-2) var(--curva-suave), border-color var(--tiempo-2) var(--curva-suave), transform var(--tiempo-1) var(--curva-salida); } .btn:active { transform: translateY(1px); } /* El botón de compra rápida de la tarjeta: es el que más se pulsa de la tienda, así que es el que más claro tiene que estar. */ .product-card__quick { font-family: var(--tipo-texto); letter-spacing: var(--versalita-espacio); text-transform: uppercase; font-size: var(--paso-micro); font-weight: var(--peso-fuerte); } /* =========================================================================== 5 · CAMPOS --------------------------------------------------------------------------- El campo enfocado se marcaba con un halo verde —`rgba(0,230,118,.1)`, resto de la plantilla de DW Jeans— sobre una tienda dorada. Ahora es del color de la casa. =========================================================================== */ .form-input, .form-select, .form-textarea, .busqueda-form input { font-family: var(--tipo-texto); font-size: var(--paso-base); border-radius: var(--radio-1); background: var(--papel-alto); border: 1px solid var(--papel-borde); color: var(--grafito); transition: border-color var(--tiempo-1) var(--curva-suave), box-shadow var(--tiempo-1) var(--curva-suave); } .form-input:focus, .form-select:focus, .form-textarea:focus, .busqueda-form input:focus { border-color: var(--laton-hondo); box-shadow: 0 0 0 3px var(--laton-velo); } .form-input::placeholder, .form-textarea::placeholder, .busqueda-form input::placeholder { color: var(--grafito-3); } /* La etiqueta, en versalita: es el recurso tipográfico de la perfumería y además separa etiqueta de contenido sin necesidad de negrita. */ .form-label { font-family: var(--tipo-texto); font-size: var(--paso-micro); font-weight: var(--peso-fuerte); letter-spacing: var(--versalita-espacio); text-transform: uppercase; color: var(--grafito-2); } /* =========================================================================== 6 · ETIQUETAS Y PRECIO =========================================================================== */ .product-card__category strong { color: var(--laton-hondo) !important; } .product-card__price { font-family: var(--tipo-texto); font-weight: var(--peso-fuerte); font-size: var(--paso-medio); color: var(--grafito); letter-spacing: 0; } .product-card__price-original { color: var(--grafito-3); text-decoration: line-through; } /* =========================================================================== 7 · MOVIMIENTO — se apaga entero --------------------------------------------------------------------------- `style.css` tiene 75 KB y CERO bloques de `prefers-reduced-motion`: todo lo heredado de la plantilla de DW Jeans seguía moviéndose para quien pide que no. Esto lo apaga a nivel de sitio, no solo lo que añadieron las capas nuevas. =========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .product-card:hover .mouillette, .product-card:focus-within .mouillette { transform: none; } }