/* * tokens.css — Sistema de diseño de Wesh * * Tres colores de marca, definidos por el cliente: * negro #111111 rosa #F7A7C4 blanco #FFFFFF * * Todo lo demás sale de ellos. Los grises no son grises cualquiera: son mezclas * exactas de #111111 sobre blanco. Un #ccc escrito a mano rompe la coherencia. * * Los contrastes anotados están CALCULADOS con la fórmula WCAG, no estimados, y * verificados dos veces de forma independiente. Si tocás un color, recalculá. * * LA REGLA QUE MÁS SE ROMPE — el rosa de marca es un color CLARO (luminancia * relativa 0.514). Texto blanco encima da 1.86:1 contra un mínimo de 4.5:1. * El rosa NO puede llevar texto blanco, NO puede ser texto sobre blanco, y NO * puede ser el fondo de un botón sólido sobre página blanca (su borde contra la * página da 1.86:1 y se exigen 3:1). El rosa es SUPERFICIE. La acción es negra. */ /* --------------------------------------------------------------------------- * Tipografías, autohospedadas * * Bodoni Moda es un Didone de alto contraste, la misma familia visual que el * logotipo. Su eje de optical size (6-96) es el motivo por el que se eligió: * con font-optical-sizing: auto el mismo archivo dibuja un trazo robusto a 28px * y el pelo finísimo del logotipo a 56px. Es el único mecanismo real para que un * Didone no se desarme en un teléfono, y el 90% del tráfico es móvil. * * Inter hace el trabajo contrario: cero personalidad, máxima fiabilidad a 14px, * y cifras tabulares que alinean "Gs. 163.000" en columna. * * Las dos son SIL OFL 1.1 sin Reserved Font Name. Las licencias están al lado. * ------------------------------------------------------------------------ */ @font-face { font-family: "Bodoni Moda"; src: url("../fonts/BodoniModa-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ----------------------------------------------------------------- * Marca — los tres únicos colores que el cliente definió * ----------------------------------------------------------------- */ --marca-negro: #111111; /* luminancia 0.0056 */ --marca-rosa: #F7A7C4; /* luminancia 0.5140 — es un color CLARO */ --marca-blanco: #FFFFFF; /* luminancia 1.0000 */ /* ----------------------------------------------------------------- * Escala neutra — mezclas de negro sobre blanco * ----------------------------------------------------------------- */ --neutro-04: #F5F5F5; --neutro-12: #E2E2E2; --neutro-30: #B8B8B8; --neutro-50: #888888; --neutro-60: #707070; --neutro-70: #585858; --neutro-85: #353535; /* Rosa oscurecido: el único rosa que puede ser TEXTO sobre claro */ --rosa-tinta: #BB2C60; --rosa-tinta-oscuro: #9B2751; --rosa-superficie: #FEF8FA; /* rosa casi blanco, para bloques */ --rosa-hover: #DB95AF; /* ----------------------------------------------------------------- * Fondos * ----------------------------------------------------------------- */ --color-fondo: var(--marca-blanco); --color-fondo-alt: var(--neutro-04); --color-fondo-rosa: var(--rosa-superficie); --color-fondo-inverso: var(--marca-negro); /* ----------------------------------------------------------------- * Texto * ----------------------------------------------------------------- */ --color-texto: var(--marca-negro); /* 18.88:1 sobre blanco */ --color-texto-secundario: var(--neutro-70); /* 7.11:1 sobre blanco */ --color-texto-tenue: var(--neutro-60); /* 4.95:1 sobre blanco · 4.54:1 sobre alt */ --color-texto-inverso: var(--marca-blanco); /* 18.88:1 sobre negro */ /* Los grises claros NO se reutilizan sobre negro: #585858 sobre #111111 da 2.65:1 y falla. Sobre superficies oscuras, este: */ --color-texto-secundario-inverso: var(--neutro-30); /* 9.52:1 sobre negro */ /* Único color de texto permitido encima del rosa de marca. Existe como token para que nadie tenga que acordarse de la regla. */ --color-texto-sobre-rosa: var(--marca-negro); /* 10.14:1 */ /* ----------------------------------------------------------------- * Bordes * ----------------------------------------------------------------- */ --color-borde-sutil: var(--neutro-12); /* decorativo: 1.30:1. NUNCA en controles */ --color-borde: var(--neutro-50); /* controles de formulario: cumple 1.4.11 */ --color-borde-fuerte: var(--marca-negro); --color-borde-inverso: var(--neutro-60); /* ----------------------------------------------------------------- * Acción — el botón principal es NEGRO * * No es una preferencia estética: con texto blanco el negro da 18.88:1, * el par más fuerte del sistema, y coincide con las cajas del packaging. * El rosa fue descartado por los dos números de arriba. * ----------------------------------------------------------------- */ --color-accion: var(--marca-negro); --color-accion-texto: var(--marca-blanco); /* 18.88:1 */ --color-accion-hover: var(--neutro-85); /* 12.27:1 */ --color-accion-desactivada: var(--neutro-12); --color-accion-desactivada-texto: var(--neutro-70); /* Sobre fondo negro se invierte: ahí el rosa SÍ funciona */ --color-accion-inversa: var(--marca-rosa); --color-accion-inversa-texto: var(--marca-negro); /* 10.14:1 */ --color-accion-inversa-hover: var(--rosa-hover); /* ----------------------------------------------------------------- * Acento y precios * ----------------------------------------------------------------- */ --color-acento: var(--marca-rosa); /* SUPERFICIE, nunca texto sobre claro */ --color-enlace: var(--rosa-tinta); /* 5.77:1 sobre blanco */ --color-enlace-hover: var(--rosa-tinta-oscuro); --color-precio: var(--marca-negro); --color-precio-tachado: var(--neutro-60); --color-precio-oferta: var(--rosa-tinta); /* El sello de oferta: rosa de marca con texto negro. Es el uso más rentable del rosa en toda la tienda. */ --color-sello-fondo: var(--marca-rosa); --color-sello-texto: var(--marca-negro); /* 10.14:1 */ /* ----------------------------------------------------------------- * Estados * ----------------------------------------------------------------- */ --color-error: #A81E10; --color-error-fondo: #F7EBE9; --color-exito: #17663F; --color-exito-fondo: #E8F0EC; /* El foco es negro sobre claro y rosa sobre oscuro. Nunca al revés: el rosa sobre blanco da 1.86:1 contra los 3:1 que exige 2.4.11. */ --color-foco: var(--marca-negro); --color-foco-inverso: var(--marca-rosa); /* ----------------------------------------------------------------- * Tipografía * ----------------------------------------------------------------- */ --fuente-display: "Bodoni Moda", "Times New Roman", serif; --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 600; /* Bodoni NUNCA por debajo de 28px: los trazos finos se desintegran en pantallas de baja densidad. Por eso el mínimo de --txt-xl es 1.75rem. */ /* El 2xs existe para los metadatos: la marca en la card y el detalle de los beneficios. Sin él compartían tamaño con la navegación y el ojo no podía separar "a dónde voy" de "qué es esto". */ --txt-2xs: 0.6875rem; /* 11 — metadatos */ --txt-xs: 0.75rem; /* 12 */ --txt-sm: 0.875rem; /* 14 */ --txt-base: 1rem; /* 16 */ --txt-md: 1.125rem; /* 18 — precio */ --txt-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18 → 22 */ /* El escalón que faltaba. La escala iba de 22 a 40 sin nada en el medio, y ese pozo es lo que hacía que un subtítulo tuviera que elegir entre verse como cuerpo o gritar como titular. 24 → 30 es Inter, no Bodoni: está por debajo del piso de 28px de la display. */ --txt-lg-plus: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); /* 24 → 30 */ --txt-xl: clamp(1.75rem, 1.35rem + 2vw, 2.5rem); /* 28 → 40 · Bodoni */ --txt-2xl: clamp(2rem, 1.25rem + 3.8vw, 3.5rem); /* 32 → 56 · Bodoni */ /* * El logotipo, que hasta ahora compartía escalón con los subtítulos. * * A 18px, con el tracking de 0.28em que le da su forma, las astas finas de la * Bodoni se afinaban tanto que WESH se leía como cuatro letras sueltas antes * que como una palabra. Es el problema que la regla de "Bodoni solo por * encima de 28px" describe, y el logotipo era su excepción histórica. * * En escritorio ahora llega justo a esos 28px. En teléfono se queda en 20: * el techo no es estético sino de espacio —a 360px el logo no puede pasar de * 91px de ancho sin salirse del centro entre el menú y el carrito— y a 20px * mide 87. */ --txt-marca: clamp(1.25rem, 0.95rem + 1.3vw, 1.75rem); /* 20 → 28 · Bodoni */ --alto-linea-ajustado: 1.1; --alto-linea-titulo: 1.15; --alto-linea-base: 1.6; /* El tracking amplio es la firma de la marca: viene del logotipo, donde WESH va muy separado y MADE TO STAND OUT todavía más. */ --track-marca: 0.28em; --track-etiqueta: 0.18em; /* versalitas: botones, títulos de sección */ /* Bodoni ya nace ancha y con mucho contraste: a partir de 40px el 0.02em que servía en tamaños medios empieza a desarmar la palabra. Se afloja acá y el titular grande lo compensa solo con su propio dibujo. */ --track-display: 0.01em; --track-normal: 0; /* ----------------------------------------------------------------- * Espaciado — escala de 4px * ----------------------------------------------------------------- */ --esp-3xs: 0.25rem; --esp-2xs: 0.5rem; --esp-xs: 0.75rem; --esp-sm: 1rem; --esp-md: 1.5rem; --esp-lg: 2rem; --esp-xl: 3rem; --esp-2xl: 4rem; --esp-3xl: 6rem; /* La separación entre secciones se define ACÁ y en ningún otro lado */ /* Fluido en vez de un escalón seco: entre 360 y 768px el aire crece con la pantalla en lugar de quedarse en 3rem hasta que salta a 4. */ --esp-seccion: clamp(3rem, 8vw, 4rem); /* ----------------------------------------------------------------- * Radios — la marca es angular * * Las cajas del packaging son rectas y el logotipo es geométrico. Los * bordes redondeados suavizan y abaratan. Lo único circular es el sello, * que sale del lacre. * ----------------------------------------------------------------- */ --radio-nulo: 0; --radio-sutil: 2px; --radio-full: 50%; /* ----------------------------------------------------------------- * Layout * ----------------------------------------------------------------- */ --ancho-max: 1440px; --ancho-contenido: 1360px; --ancho-texto: 62ch; --margen-lateral: var(--esp-sm); --boton-alto: 48px; /* más generoso que el mínimo táctil de 44 */ --boton-borde: 1px; --header-alto: 64px; --grilla-columnas: 2; /* ----------------------------------------------------------------- * Velos, sombras y capas * ----------------------------------------------------------------- */ --velo-oscuro: rgba(17, 17, 17, 0.34); --velo-claro: rgba(255, 255, 255, 0.88); --sombra-sm: 0 1px 2px rgba(17, 17, 17, 0.05); --sombra-md: 0 8px 32px rgba(17, 17, 17, 0.10); /* Vidrio esmerilado del botón flotante. Es el caso de manual del rosa como SUPERFICIE: encima va el ícono negro, que sobre este rosa da 10.14:1. El borde negro existe porque el rosa contra la página blanca da 1.86:1 y un control necesita 3:1 contra lo que tiene al lado. */ --vidrio-fondo: rgba(247, 167, 196, 0.72); --vidrio-desenfoque: 14px; --z-cabecera: 40; --z-flotante: 45; --z-barra-compra: 50; --z-menu: 60; /* ----------------------------------------------------------------- * Movimiento * * Cuatro velocidades para todo el sitio. Un componente no inventa su * propio tiempo: elige cuál de estas cuatro le toca. * * --transicion cambio de estado sobre algo que YA está en * pantalla: color de hover, borde del campo. * --transicion-panel algo que ENTRA: menú, buscador, barra de compra. * --transicion-salida lo mismo, yéndose. Siempre más corta que la * entrada: la atención de quien mira ya se fue a * otra parte, y una salida lenta se siente lenta. * --transicion-revelar secciones que aparecen al scrollear. La más * larga, porque mueve superficies grandes. * * La curva de entrada arranca disparada y frena largo, que es como se * mueve algo que tiene masa. El `ease` del navegador acelera y frena * parejo, y eso hace que todo parezca lento sin llegar a sentirse suave. * ----------------------------------------------------------------- */ --curva-entrada: cubic-bezier(0.22, 1, 0.36, 1); --curva-salida: cubic-bezier(0.4, 0, 1, 1); --transicion: 200ms var(--curva-entrada); --transicion-panel: 260ms var(--curva-entrada); --transicion-salida: 180ms var(--curva-salida); --transicion-revelar: 560ms var(--curva-entrada); /* Cuánto sube una sección al revelarse. Chico a propósito: es un asentarse, no un vuelo. Con 40px el ojo persigue el movimiento en vez de leer lo que acaba de llegar. */ --revelar-desplazamiento: 16px; } @media (min-width: 48em) { :root { --grilla-columnas: 3; --esp-seccion: var(--esp-2xl); --margen-lateral: var(--esp-md); } } @media (min-width: 64em) { :root { --grilla-columnas: 4; } } @media (min-width: 90em) { :root { --esp-seccion: var(--esp-3xl); --margen-lateral: var(--esp-lg); } } @media (prefers-reduced-motion: reduce) { :root { --transicion: 0ms; --transicion-panel: 0ms; --transicion-salida: 0ms; --transicion-revelar: 0ms; --revelar-desplazamiento: 0; } }