/* =========================================================================== DW PERFUMERÍA — TOKENS Dirección visual: «MOUILLETTE» (la tira de papel que se moja en perfume) ESTA ES LA ÚNICA FUENTE DE VERDAD DEL COLOR, LA TIPOGRAFÍA Y EL RITMO. --------------------------------------------------------------------------- POR QUÉ ESTE FICHERO SE CARGA EL ÚLTIMO Y NO EL PRIMERO --------------------------------------------------------------------------- Hasta el 11-ago se cargaba el primero y definía 20 variables de las que las hojas de estilo usaban CUATRO. Las otras dieciséis solo vivían en los `style="..."` del PHP. Resultado: el CSS hablaba `--dw-*` y el markup hablaba `--gold-*`. Dos paletas para el mismo dorado, mantenidas a mano en dos sitios, y un fichero que decía ser la fuente de verdad y mentía. Ahora se carga el ÚLTIMO. Las propiedades personalizadas de `:root` se resuelven por orden de declaración: la última gana. Así este fichero manda sobre `style.css`, `premium.css` y `atelier.css` sin tocar una sola de sus reglas — y sin romper ninguno de los 476 estilos en línea del markup, porque todos sus nombres siguen existiendo aquí abajo como alias. ⚠️ NO devuelvas este `` al principio del ``: si lo haces, las otras tres hojas vuelven a pisar la paleta y volvemos a tener dos sistemas. --------------------------------------------------------------------------- LA DIRECCIÓN, EN UNA FRASE --------------------------------------------------------------------------- Papel cálido, tinta para el mobiliario, latón para el detalle — y el color reservado a lo único que de verdad decide una compra de perfume: LA FAMILIA OLFATIVA. No puedes oler por la pantalla; lo que se puede hacer es que el olor se VEA de un vistazo en una cuadrícula de doce. =========================================================================== */ :root { /* ========================================================================= 1 · LOS CINCO COLORES ========================================================================= */ /* ---- 1. TINTA — el mobiliario: cabecera, pie, hero -------------------- */ /* Negro con una gota de azul. El negro puro (#000) sobre papel cálido hace un corte duro y barato; este se posa. */ --tinta: #0F1113; --tinta-2: #171A1E; --tinta-3: #21252A; /* ---- 2. PAPEL — la página -------------------------------------------- */ /* Blanco cálido, NO #FFF. El blanco puro junto a la tinta deslumbra y aplana. Y deja sitio para que las fichas suban a blanco puro y se despeguen del fondo: antes fondo y tarjeta eran los dos #FFFFFF y la cuadrícula no tenía relieve ninguno. */ --papel: #FBFAF7; --papel-alto: #FFFFFF; /* tarjetas y cajas: suben sobre el papel */ --papel-bajo: #F4F2ED; /* franjas alternas, campos de formulario */ --papel-borde: #E7E3DA; /* ---- 3. GRAFITO — el texto sobre papel -------------------------------- */ --grafito: #16181C; /* titulares y cuerpo */ --grafito-2: #3A3F46; /* secundario */ --grafito-3: #6A7078; /* metadatos, ayudas — AA sobre papel */ /* ---- 4. LATÓN — el filete, el foco, el detalle ------------------------ */ /* Dos tonos y no es capricho: el mismo dorado no puede tener contraste legible sobre papel Y brillar sobre tinta. El «hondo» es para texto y bordes sobre claro; el «vivo» solo sobre tinta. ⚠️ EL LATÓN NUNCA ES UN BOTÓN. Un botón dorado sobre papel tiene 3:1 y se lee como adorno. El botón primario es tinta sobre papel: 15:1, y no hay ninguna duda de dónde se pulsa. */ --laton-hondo: #7D5F1C; /* texto/borde sobre papel */ --laton: #C8A24A; /* sobre tinta */ --laton-claro: #E7CF92; /* texto sobre tinta */ --laton-velo: rgba(125, 95, 28, 0.10); --laton-filete: rgba(125, 95, 28, 0.28); /* ---- 5. LA FAMILIA OLFATIVA — el quinto color, y el que trabaja ------- */ /* Seis matices, uno por familia real de la tienda (Oriental 49, Floral 33, Aromática 17, Amaderada 17, Gourmand 12, Acuática 10). Separados por TONO *y* por claridad a propósito: los tres cálidos son hermanos y hay que poder distinguirlos de reojo en una cuadrícula. Son decorativos: la etiqueta de texto siempre va al lado, así que el color nunca es la única señal. */ --fam-oriental: #8A5220; /* resina, incienso, ámbar */ --fam-floral: #A2436A; /* rosa, jazmín */ --fam-aromatica: #4E7357; /* salvia, lavanda */ --fam-amaderada: #57493A; /* cedro, sándalo, oud */ /* Gourmand nació en #B4832F y daba 3.37 sobre la tarjeta blanca: la etiqueta de texto lleva este mismo color, así que no llegaba a AA. Bajado a miel oscura, que cumple (5.75) y además se separa mejor del ámbar de Oriental — este tira a amarillo, aquél a rojo. Medido, no estimado. */ --fam-gourmand: #7C6318; /* vainilla, caramelo */ --fam-acuatica: #2F6C86; /* agua, sal */ --fam-otra: var(--laton-hondo); /* Semáforo — solo para estado, nunca para decorar */ --ok: #2F6B41; --aviso: #8A5A12; --error: #A3302B; --whatsapp:#1F8F4E; /* verde de marca, oscurecido para AA sobre papel */ /* ========================================================================= 2 · TIPOGRAFÍA ------------------------------------------------------------------------- Fraunces + Jost. Fraunces es una serif con eje óptico: a tamaño de titular saca contraste y remates de cuña, y a tamaño pequeño se ablanda sola. Da el aire de etiqueta de botica que pide una perfumería, y viene en UN fichero variable. Jost es geométrica: sus versalitas son perfectas para las etiquetas cortas —CASA, ML, FAMILIA— que esta tienda usa por todas partes. ⚠️ Jost ya era la fuente declarada del cuerpo desde siempre… y NO SE CARGABA. La cabecera pedía a Google «Plus Jakarta Sans» en cinco pesos, que no usa ni una regla, y todo el texto corrido del sitio caía a una fuente de sistema. Comprobado en producción el 11-ago: document.fonts.check('16px "Plus Jakarta Sans"') -> false ========================================================================= */ --tipo-display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif; --tipo-texto: 'Jost', 'Inter', system-ui, -apple-system, sans-serif; /* Escala: ocho pasos y NINGUNO más. La ficha de producto pintaba nueve tamaños entre 11 y 16 px —11.2, 11.52, 12.16, 12.8, 13.12, 13.44, 13.6, 13.76, 14.08…—. Nadie distingue 13.44 de 13.6 a propósito: eso es lo que queda cuando tres plantillas se superponen. */ --paso-micro: 0.6875rem; /* 11 — etiquetas en versalita, contadores */ --paso-menor: 0.8125rem; /* 13 — metadatos, ayudas */ --paso-base: 0.9375rem; /* 15 — cuerpo */ --paso-medio: 1.0625rem; /* 17 — precio en tarjeta, destacados */ --paso-mayor: 1.375rem; /* 22 — nombre en ficha */ --paso-titulo: clamp(1.6rem, 3vw, 2.25rem); --paso-display: clamp(2.1rem, 5vw, 3.4rem); --peso-texto: 400; --peso-medio: 500; --peso-fuerte: 600; /* Versalita: el recurso tipográfico de la perfumería. Un solo sitio. */ --versalita-espacio: 0.14em; /* ========================================================================= 3 · RITMO, RADIO, SOMBRA ------------------------------------------------------------------------- */ --ritmo: 8px; /* Tres radios. Había dieciocho. La perfumería de gama alta no usa cajas redondeadas: el frasco es la única curva de la página. Por eso el radio base es 0 y solo se redondea lo que el dedo toca. */ --radio-0: 0; --radio-1: 3px; /* campos, botones */ --radio-pill: 999px; /* solo chips y avatares */ /* Tres sombras. Había veintinueve. Todas de la misma familia: luz cenital, difusa y sin color. Una sombra con tinte es una sombra que se nota. */ --sombra-1: 0 1px 2px rgba(16, 18, 22, 0.06); --sombra-2: 0 2px 4px rgba(16, 18, 22, 0.05), 0 8px 16px rgba(16, 18, 22, 0.05); --sombra-3: 0 4px 8px rgba(16, 18, 22, 0.06), 0 18px 36px rgba(16, 18, 22, 0.09); /* Curvas y tiempos. La de «salida» arranca rápido y se posa despacio: es lo que da sensación de peso caro. Nada por debajo de 150 ni por encima de 300. */ --curva-salida: cubic-bezier(0.16, 1, 0.3, 1); --curva-suave: cubic-bezier(0.4, 0, 0.2, 1); --tiempo-1: 150ms; --tiempo-2: 220ms; --tiempo-3: 300ms; /* ========================================================================= 4 · ESQUEMA DE COLOR ------------------------------------------------------------------------- La tienda es CLARA: papel blanco con el mobiliario en tinta. No se declaraba en ningún sitio, y por eso los desplegables nativos, el autocompletado del navegador y las barras de desplazamiento se pintaban a ciegas. Con esto el navegador sabe a qué atenerse. ========================================================================= */ color-scheme: light; /* ========================================================================= 5 · ALIAS — todo lo viejo apunta aquí ------------------------------------------------------------------------- Ni una regla de style.css, premium.css o atelier.css cambia, ni uno de los 476 `style="..."` del markup se rompe. Todos siguen pidiendo sus nombres de siempre; lo que cambia es de dónde sale el valor: de aquí, y solo de aquí. Esto es lo que permite rediseñar una tienda en producción sin tocar 476 sitios a mano. Se irán retirando por fases; mientras tanto, funcionan. ========================================================================= */ /* --- de premium.css --- */ --dw-ink: var(--tinta); --dw-ink-2: var(--tinta-2); --dw-ink-3: var(--tinta-3); --dw-paper: var(--papel-alto); --dw-paper-2: var(--papel); --dw-paper-3: var(--papel-bajo); --dw-gold: var(--laton); --dw-gold-deep: var(--laton-hondo); --dw-gold-light: var(--laton-claro); --dw-on-dark: #F4F1EA; --dw-on-dark-dim: #B7B2A6; --dw-on-light: var(--grafito); --dw-muted: var(--grafito-3); --dw-line: var(--papel-borde); --dw-line-dark: rgba(255, 255, 255, 0.14); --dw-serif: var(--tipo-display); --dw-sans: var(--tipo-texto); /* --- de style.css. El nombre «cyan» es herencia de la plantilla de DW Jeans: nunca fue cian, es el dorado de marca. Se conserva el nombre porque lo piden 37 reglas heredadas; el valor sale de aquí. --- */ --dw-cyan: var(--laton-hondo); --dw-cyan-dim: rgba(125, 95, 28, 0.70); --dw-cyan-glow: var(--laton-velo); --dw-cyan-strong: rgba(125, 95, 28, 0.16); --dw-cyan-border: var(--laton-filete); --dw-cyan-hover: #5F4714; /* 🔴 style.css:3028 la pedía y NO EXISTÍA en ninguna hoja: ese color se resolvía a nada */ --dw-bright: #5F4714; --surface: var(--papel); --surface-low: var(--papel-bajo); --surface-container:var(--papel-alto); --surface-high: var(--papel-borde); --surface-highest: #DDD8CD; --surface-glass: rgba(251, 250, 247, 0.92); --surface-variant: var(--papel-bajo); --on-surface: var(--grafito); --on-surface-variant: var(--grafito-2); --on-surface-dim: var(--grafito-3); --outline: var(--papel-borde); --outline-variant: #EFECE4; --whatsapp-glow: rgba(31, 143, 78, 0.14); --whatsapp-dark: #16713D; --success: var(--ok); --warning: var(--aviso); --danger: var(--error); --info: #2F6C86; --font-display: var(--tipo-display); --font-body: var(--tipo-texto); --radius-sm: var(--radio-1); --radius-md: var(--radio-1); --radius-lg: var(--radio-1); --radius-xl: var(--radio-1); --radius-full: var(--radio-pill); --shadow-sm: var(--sombra-1); --shadow-md: var(--sombra-2); --shadow-lg: var(--sombra-3); --shadow-cyan: var(--sombra-2); --shadow-cyan-strong: var(--sombra-3); --shadow-emerald-aura:var(--sombra-2); --transition: all var(--tiempo-2) var(--curva-suave); --transition-slow: all var(--tiempo-3) var(--curva-suave); /* --- los que solo vivían en los `style="..."` del PHP --- */ --bg-primary: var(--tinta); --bg-secondary: var(--tinta-2); --bg-tertiary: var(--tinta-3); --gold-primary: var(--laton-hondo); --gold-light: var(--laton-claro); --gold-dark: #5F4714; --text-primary: var(--grafito); --text-secondary: var(--grafito-2); --text-muted: var(--grafito-3); --accent-success: var(--ok); --accent-error: var(--error); --accent-warning: var(--aviso); --border-gold: var(--laton-filete); --border-subtle: var(--papel-borde); --font-heading: var(--tipo-display); --shadow-gold: var(--sombra-2); } /* =========================================================================== FRAUNCES: apagar los ejes de fantasía. La fuente trae `SOFT` (redondeo de los remates) y `WONK` (cursivas raras en la g y la a). Con los dos a cero es una serif de alto contraste, seria. Con ellos puestos parece una etiqueta de cerveza artesana, que es justo lo contrario de lo que vende esta tienda. =========================================================================== */ :root { --fraunces-ejes: 'SOFT' 0, 'WONK' 0; } h1, h2, h3, h4, .dw-serif, [class*="__title"], [class*="titulo"] { font-variation-settings: var(--fraunces-ejes); } /* =========================================================================== BASE — las dos únicas reglas que este fichero se permite escribir =========================================================================== */ /* El lienzo de la página es PAPEL, no blanco puro. `premium.css:47` pone `background: var(--dw-paper)`, y ese token significa «blanco» en las otras nueve reglas que lo usan —incluidas cuatro donde es color de TEXTO sobre tinta—, así que no se puede reapuntar sin romperlas. Se corrige aquí, que es donde manda: fondo papel cálido, y las tarjetas suben a blanco puro y por fin se despegan. Antes fondo y tarjeta eran los dos #FFFFFF y la cuadrícula no tenía relieve ninguno. */ body { background-color: var(--papel); } /* El separador de las migas era `color: var(--surface-highest)` — un token de SUPERFICIE usado como color de texto. Medido en producción: contraste 1.42 sobre el papel, cuando AA pide 4.5. Es una barra «/», pero es texto. */ .breadcrumb__sep { color: var(--grafito-3); }