/* =========================================================================== DW PERFUMERÍA — PANTALLAS · Fase 3 de «MOUILLETTE» Se carga la última. Todo sale de tokens: ni un hex ni un px de color. Aquí solo lo que es de una pantalla concreta y no de un componente. =========================================================================== */ /* =========================================================================== 1 · LA FICHA DE PRODUCTO --------------------------------------------------------------------------- Es donde se decide la compra y era la pantalla peor tratada: 63 estilos en línea, quince tamaños de letra —nueve de ellos entre 11 y 16 px— y la familia olfativa reducida a una línea gris sin nombre. =========================================================================== */ /* La familia, con etiqueta y con su color. */ .ficha-familia { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ritmo); margin: 0 0 calc(var(--ritmo) * 1.5); padding-left: calc(var(--ritmo) * 1.5); border-left: 3px solid var(--fam, var(--laton-hondo)); } .ficha-familia__etiqueta { 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-3); } .ficha-familia__valor { font-family: var(--tipo-display); font-size: var(--paso-medio); font-weight: var(--peso-medio); color: var(--fam, var(--laton-hondo)); } /* La tira, también en la galería: mismo sitio, mismo color que en la cuadrícula. Es lo que hace que el ojo lo reconozca de una pantalla a otra. */ #imagen-principal-container .mouillette { height: 100%; } /* =========================================================================== 2 · ESTADO DE CARGA EN CARRITO Y CHECKOUT --------------------------------------------------------------------------- El hueco que quedaba. Entre pulsar «Confirmar pedido» y la respuesta del servidor no había nada: el botón cambiaba a «Procesando…» y ya. En un checkout sin pasarela, donde el servidor además crea el pedido y redirige, ese silencio son varios segundos en los que el cliente vuelve a pulsar. `aria-busy` en el formulario apaga los controles y pinta la barra. Lo pone el JS que ya existía; aquí solo se le da forma. =========================================================================== */ [aria-busy="true"] { position: relative; cursor: progress; } /* Los controles dejan de aceptar el dedo mientras el servidor responde: es lo que evita el pedido duplicado, y se ve que están apagados. */ [aria-busy="true"] :is(input, select, textarea, button, a) { pointer-events: none; opacity: 0.55; transition: opacity var(--tiempo-2) var(--curva-suave); } /* Una barra de latón que recorre la parte de arriba. Solo `transform`. */ [aria-busy="true"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--laton-hondo); transform-origin: left center; animation: barra-carga 1.1s var(--curva-suave) infinite; z-index: 10; } @keyframes barra-carga { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } /* El botón que se pulsó dice qué está pasando, no solo que está ocupado. */ button[data-cargando]::after { content: attr(data-cargando); } /* =========================================================================== 3 · REMATE DE LA ESCALA --------------------------------------------------------------------------- Los 122 `font-size` sueltos del markup ya apuntan a los ocho pasos. Lo que queda son reglas de `style.css` heredadas de la plantilla de DW Jeans, que siguen pintando tamaños intermedios. Se reconducen las que de verdad se ven. =========================================================================== */ .breadcrumb, .breadcrumb a, .breadcrumb__current { font-size: var(--paso-menor); } .badge { font-size: var(--paso-micro); letter-spacing: var(--versalita-espacio); } .tienda-toolbar__results, .sidebar__chip, .paginacion a, .paginacion span { font-size: var(--paso-menor); } .product-card__summary { font-size: var(--paso-menor); } .dw-marquee, .dw-marquee span { font-size: var(--paso-micro); letter-spacing: var(--versalita-espacio); } .dw-hero__eyebrow { font-size: var(--paso-micro); letter-spacing: var(--versalita-espacio); } .dw-hero__sub { font-size: var(--paso-medio); } .dw-hero__title { font-size: var(--paso-display); } .section__title { font-size: var(--paso-titulo); } .section__subtitle { font-size: var(--paso-base); } .dw-footer, .dw-footer a, .dw-footer p { font-size: var(--paso-menor); } .dw-footer__bar, .dw-footer__bar span { font-size: var(--paso-micro); } /* Los ocho que quedaban fuera de la escala en la ficha, identificados uno a uno midiendo el DOM en producción. Ninguno venía de un estilo en línea: los ocho salían de reglas heredadas de la plantilla de DW Jeans. 11.52 · 12.16 · 12.8 · 13.44 · 13.76 · 14.4 · 15.2 · 16 */ .dw-footer h4 { font-size: var(--paso-micro); } /* 11.52 */ .cookie-consent .btn { font-size: var(--paso-micro); } /* 12.16 */ .header__nav a { font-size: var(--paso-menor); } /* 12.80 */ .cookie-consent p { font-size: var(--paso-menor); } /* 13.44 */ .dw-float__label, .dw-float span { font-size: var(--paso-menor); } /* 13.76 */ .carrito-qty__btn { font-size: var(--paso-medio); } /* 14.40 */ .dw-lightbox__counter { font-size: var(--paso-menor); } /* 15.20 */ .product-description, .producto-detail-grid p { font-size: var(--paso-base); } /* 16.00 */ /* Y los doce de la portada, localizados igual: midiendo el DOM, no leyendo. 9.92 · 10.56 · 11.52 · 12.16 · 12.8 · 13.76 14.72 · 16 · 16.8 · 17.92 · 18.4 · 18.88 */ .dw-card__flag { font-size: var(--paso-micro); } /* 9.92 */ .dw-card__cat { font-size: var(--paso-micro); } /* 10.56 */ .dw-eyebrow, .product-card__quick span { font-size: var(--paso-micro); } /* 11.52 */ .btn { font-size: var(--paso-menor); } /* 12.16 */ .header nav a, .header__topbar a { font-size: var(--paso-menor); } /* 12.80 */ .dw-value p, .dw-promesa p { font-size: var(--paso-base); } /* 14.72 */ .dw-card__price { font-size: var(--paso-medio); } /* 16.00 */ .section__lead, .dw-seccion__sub { font-size: var(--paso-medio); } /* 16.80 */ .dw-card__name, .dw-card__name a { font-size: var(--paso-medio); } /* 17.92 */ .dw-carrusel__nombre { font-size: var(--paso-medio); } /* 18.40 */ .dw-value h3, .dw-promesa h3 { font-size: var(--paso-mayor); } /* 18.88 */ /* Tercera pasada. Las anteriores fallaron porque escribí los selectores «a ojo» a partir del texto, y varios no existían: `.dw-card__name` en vez de `.dw-card__quick span`, `.dw-float span` en vez de `.asesora-float span`. Estos salen del camino de clases COMPLETO leído del DOM, que es la única forma de acertar sin ver la página. */ .dw-card__quick, .dw-card__quick span { font-size: var(--paso-micro); } /* 11.52 */ .btn--sm, .cookie-consent__actions .btn, .dw-editorial .btn { font-size: var(--paso-menor); } /* 12.16 */ .btn--lg { font-size: var(--paso-base) !important; } /* 12.80 — premium.css lo fija con !important */ .asesora-float span { font-size: var(--paso-menor); } /* 13.76 */ .dw-editorial__text p, .cookie-consent strong { font-size: var(--paso-base); } /* 16.00 */ .dw-cta p { font-size: var(--paso-medio); } /* 16.80 */ /* =========================================================================== 4 · EL ESTADO VACÍO --------------------------------------------------------------------------- Ya estaba bien resuelto —icono, explicación y salida—. Solo se le pone la tipografía de la casa y se le quita el gris de plantilla. =========================================================================== */ .store-empty h3 { font-family: var(--tipo-display); font-size: var(--paso-mayor); color: var(--grafito); } .store-empty p { font-size: var(--paso-base); color: var(--grafito-2); } .store-empty i { color: var(--laton-hondo); } /* =========================================================================== 5 · LOS ESQUELETOS, CON EL COLOR DE LA CASA =========================================================================== */ .esqueleto__foto, .esqueleto__linea { background: var(--papel-bajo); }