Diez detalles que no se ven a simple vista, ya puestos en las 10 páginas. Ninguno cambia el diseño: cambian la sensación.
Cuando arrastrás el mouse sobre un párrafo para copiarlo, el fondo azul que aparece es el del navegador. Ahora es el verde de la marca.
Arrastrá el mouse sobre esta línea y mirá de qué color queda.
Por qué importa: Es como forrar los cuadernos por dentro: nadie lo ve hasta que abre. Ahí se nota quién cuidó el detalle.
Quien navega con la tecla Tab necesita ver dónde está parado. Antes el navegador le ponía un borde azul feo. Ahora es un anillo del color de la marca, separado del borde, con un halo del color del papel.
Apretá la tecla Tab y mirá el anillo sobre este botón.
Por qué importa: Sin eso, la web es un laberinto a ciegas para mucha gente. Y una web que se puede usar con el teclado es una web que se puede comprar.
Todos los precios usan números de ancho fijo: el 1 ocupa lo mismo que el 8. Así las cifras quedan alineadas en columna, como en una planilla bien hecha.
Como estaba
$ 14.500
$ 11.111
$ 9.870
Como queda
$ 14.500
$ 11.111
$ 9.870
Por qué importa: Con números de ancho variable, la coma de $ 14.500 cae más a la derecha que la de $ 11.111 y la lista parece temblar. Es el detalle que separa una lista de precios de un catálogo.
Las casillas para escribir (nombre, teléfono, buscar) traen por defecto una letra distinta a la del sitio. Ahora heredan la misma letra.
Como estaba (letra del sistema)
Como queda (letra del sitio)
Por qué importa: Es como poner un cartel con otra tipografía en la puerta de tu local: no arruina la venta, pero se nota que no lo pensaste.
El subrayado quedó más fino y un poquito más abajo, y no corta las colas de la g, la p o la y.
Mirá este enlace de ejemplo con la letra g, p y y dentro del párrafo.
Por qué importa: El subrayado pegado y gordo tacha la letra. Con aire, el enlace se lee sin esfuerzo y el texto sigue pareciendo texto.
Los títulos se reparten parejo en dos líneas y los párrafos no dejan una palabra sola colgando al final.
Ese mismo título, sin la ayuda, suele quedar con una sola palabra en la segunda línea.
Por qué importa: Una palabra huérfana en un título grita descuido. El navegador lo resuelve solo si se le pide.
Cuando el menú te lleva a una sección, la sección no queda tapada por el encabezado fijo: se reserva un espacio arriba.
Se nota al tocar un enlace del menú que baja a una sección. El ajuste está puesto en las 10 páginas.
Por qué importa: Es como abrir una puerta y que la puerta tape justo el cartel: llegás y no ves el título. Sin el ajuste, pasa en casi todas las webs.
Se reserva el lugar de la barra de desplazamiento desde el principio.
Mirá el borde derecho de esta página mientras cambiás de solapa: no se mueve.
Por qué importa: Sin eso, al pasar de una página corta a una larga todo el contenido se corre dos centímetros a la izquierda. Ese salto se siente como un golpe.
Si alguien configuró su computadora para que no haya animaciones (por mareo o epilepsia), las 10 páginas se quedan quietas.
Es un seguro. No tiene demostración: o se tiene, o no se tiene.
Por qué importa: Una animación linda le hace mal a una parte de la gente. Esto se resuelve con cuatro líneas y no se ve nunca: solo funciona para quien lo necesita.
Se apaga el suavizado de Windows que engorda las letras, se prohíbe la negrita inventada y se pide dibujar la letra con más cuidado.
Texto normal, en negrita real y un enlace: todo del mismo dibujo.
Por qué importa: Cuando el navegador finge una negrita que la fuente no tiene, la engorda de costado y queda sucia. Con esto, cada peso de letra es el de verdad.
Entrá a cualquiera y probá: arrastrá el mouse sobre un texto, apretá Tab, mirá una lista de precios.
Es el bloque completo. Se pega antes de cerrar el encabezado de la página y se cambian los dos colores del principio por los de la marca.
/* 1. Selección de texto con el color de la marca */
::selection{background:rgba(20,80,60,.20);color:#14171B}
::-moz-selection{background:rgba(20,80,60,.20);color:#14171B}
/* 2. Foco de teclado: anillo de la marca, con un halo del color del papel
para que se vea sobre cualquier fondo claro u oscuro. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
[role="button"]:focus-visible{
outline:2px solid #14503C;outline-offset:3px;
box-shadow:0 0 0 5px #F6F4EE;border-radius:4px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
:root{caret-color:#14503C}
/* 3. Números de precio con ancho fijo: los dígitos quedan alineados en columna */
b,strong,time,table,
[class*="precio"],[class*="price"],[class*="importe"],[class*="total"],
[class*="monto"],[class*="cifra"],[class*="contador"],[class*="numero"]{
font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
/* 4. Los formularios heredan la letra del sitio (si no, usan la del sistema) */
input,select,textarea,button,optgroup{font-family:inherit}
::placeholder{opacity:1}
/* 5. Subrayado fino y separado: no corta las colas de las letras */
p a:not([class]),li a:not([class]),dd a:not([class]),td a:not([class]){
text-decoration-thickness:.07em;text-underline-offset:.18em;
text-decoration-skip-ink:auto}
a{transition:color .18s ease,opacity .18s ease}
/* 6. Cortes de línea prolijos */
h1,h2,h3,h4,figcaption{text-wrap:balance}
p,li,dd,blockquote{text-wrap:pretty}
/* 7. Las anclas no quedan tapadas por el encabezado fijo */
[id]{scroll-margin-top:5.5rem}
html{scroll-behavior:smooth}
/* 8. Reserva el lugar de la barra de scroll: el contenido no se corre */
html{scrollbar-gutter:stable}
body{-webkit-tap-highlight-color:transparent}
/* 9. Respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* 10. Letra pareja: sin negritas inventadas ni bordes duros */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
font-synthesis:none;text-rendering:optimizeLegibility}
button,summary,[role="button"],label[for]{cursor:pointer}
img{max-width:100%}