/* =========================================================================== ALVI · LOS COLORES DE LA WEB =========================================================================== TODOS los colores del sitio están en este archivo. En ningún otro sitio del proyecto hay un color escrito: ni en el resto del CSS, ni en las páginas. Si cambias algo aquí, cambia en toda la web de golpe. CÓMO CAMBIAR LA PALETA ---------------------- Más abajo, en el bloque que empieza por ":root", hay una lista de líneas con este aspecto: --c-brand-900: #2E3236; El nombre es la etiqueta del color y lo de después del ":" es el color, en el código de seis letras y números que usan los programas de diseño. Para cambiar la paleta solo hay que sustituir ese código. Con estos cinco basta para repintar el sitio entero: --c-brand-700 el gris de la cabecera. Es el gris de marca de ALVI. --c-brand-900 el gris más oscuro. Pie de página y placa del hero. --c-accent-600 el verde de los botones de acción. --c-surface el fondo crema de las páginas. --c-ink-900 el color del texto. Los demás son variantes que se usan en sitios concretos, y cada uno lleva escrito al lado dónde se usa y cuánto contrasta. ============================================================================ LA REGLA MÁS IMPORTANTE DE ESTE ARCHIVO ============================================================================ EL VERDE DE ALVI (#789904) NO PUEDE LLEVAR TEXTO BLANCO ENCIMA, Y NO PUEDE USARSE COMO COLOR DE TEXTO. Los dos números, medidos: blanco sobre el verde ................ 3,30:1 SUSPENDE (mínimo 4,5) tinta oscura sobre el verde .......... 5,38:1 correcto el verde como texto sobre crema ...... 3,11:1 SUSPENDE --c-accent-800 como texto sobre crema 6,28:1 correcto Es la trampa más fácil de pisar de toda la paleta, porque un botón verde con letras blancas es lo que hace todo el mundo. Aquí no se puede: ese verde es demasiado claro y las letras blancas se despintan. · Para escribir EN verde -> --c-accent-800 · Para verde CON BLANCO encima -> --c-accent-700 · Para el botón de acción -> --c-accent-600 con --c-ink-900 encima POR QUÉ EL GRIS MANDA Y EL VERDE ES ACENTO ------------------------------------------ Es al revés de lo que parece natural, y sale de los números: blanco sobre el gris de marca ........ 8,27:1 correcto el gris como texto sobre crema ....... 7,79:1 correcto El gris cumple en los dos papeles y el verde solo en uno. Así que: · El GRIS es la estructura y manda: cabecera, pie, placa del hero, franjas oscuras. Puede ocupar superficies grandes, con texto blanco. · El VERDE es acento y es escaso: acción principal, relleno de estado activo, poco más. Siempre con texto oscuro encima. · UN SOLO botón verde por pantalla. Si en una página hay dos compitiendo, uno de los dos está mal. Y UN TERCER COLOR QUE NO ES DE MARCA ------------------------------------ --c-error es un rojo, y está SOLO para los errores de validación de los formularios. No es acento, no es marca, y no se usa para llamar la atención sobre ninguna otra cosa. Está porque sin él un formulario en verde y gris no tiene forma de decir que algo ha fallado: el verde ya significa "acción" y el gris "estructura". SOBRE EL CONTRASTE ------------------ Al lado de cada color hay un número tipo "7,8:1". Es cuánto se distingue de su fondo. Cuanto más alto, mejor se lee. El mínimo legal para texto es 4,5:1, y para un borde de campo o un icono con significado, 3:1. El público de ALVI tiene entre 40 y 60 años y mucha lectura al sol, así que el texto normal va por encima de 7:1 siempre que se puede. Si cambias un color, compruébalo antes de darlo por bueno. Hay dos formas: /_estilos la tabla de contrastes, solo en dev python herramientas/contraste.py el sitio entero, 18 páginas =========================================================================== */ :root { /* ------------------------------------------------------------------------- GRISES · la estructura del sitio EL COLOR BASE ES #101820. Es un gris azulado muy oscuro —tono 210°, saturación 33 %, luminosidad 9,4 %— y es el papel estructural del sitio: cabecera, pie, placa del hero y franjas oscuras van todos en él. Antes había DOS oscuros: la cabecera en #4A4F54 y el pie en #2E3236. Ahora hay uno solo y un escalón más claro para las superficies oscuras secundarias. La consecuencia es que la cabecera y el pie son el mismo color, y ese es el encargo. Los tonos de la rampa NO se han elegido a ojo: se han buscado por luminosidad hasta que cada uno cumple contra el fondo sobre el que se usa de verdad. Los ratios de abajo están medidos. ---------------------------------------------------------------------- */ /* EL COLOR BASE. Cabecera, pie, placa del hero y franjas oscuras. Texto crema encima: 16,9:1 (antes 7,8 en la cabecera y 12,2 en el pie). */ --c-brand-900: #101820; /* Escalón más claro, para superficies oscuras secundarias: separar dos zonas oscuras contiguas sin meter una línea. Crema encima: 15,2:1 */ --c-brand-800: #17222D; /* Un paso más. Reservado para cajas dentro de zona oscura. Crema encima: 13,2:1 */ --c-brand-700: #1F2D3A; /* Azul-gris fuerte para TEXTO sobre fondo CLARO, y para el contorno de los botones secundarios. Sobre crema: 7,5:1 */ --c-brand-600: #39536D; /* Tono medio. Viñetas y separadores sobre fondo CLARO: 4,6:1 sobre crema. OJO: sobre el fondo oscuro nuevo NO vale ni como borde (1,3:1). Para bordes en zona oscura está --c-brand-300. */ --c-brand-500: #607385; /* Claro. Bordes y separadores dentro de las zonas oscuras: 6,9:1 sobre el color base, muy por encima del 3:1 que se le pide a un borde. Como TEXTO sobre el fondo oscuro ahora también cumpliría, pero se sigue usando --c-brand-100 para eso: un token, un trabajo. */ --c-brand-300: #98A2AC; /* Muy pálido. Fondo de bloques destacados sobre crema, y TEXTO secundario sobre fondo oscuro: 14,4:1 sobre el color base. */ --c-brand-100: #E3E7EA; /* ------------------------------------------------------------------------- VERDES · el acento. Se usa poco. Ver la regla del principio del archivo. ---------------------------------------------------------------------- */ /* EL VERDE DE MARCA. El botón de acción principal. TEXTO OSCURO ENCIMA: 5,4:1 con --c-ink-900. NUNCA BLANCO ENCIMA: 3,3:1, suspende. NUNCA COMO TEXTO: 3,1:1 sobre crema, suspende. */ --c-accent-600: #789904; /* El botón cuando se pasa el ratón o se pulsa. ACLARA en vez de oscurecer, y es deliberado: oscurecer bajaba el contraste con la tinta encima (a 3,6:1 con --c-accent-700) y habría obligado a cambiar el color de la letra a mitad de gesto. Aclarando, la tinta sube a 7,0:1 y el texto no se mueve. */ --c-accent-500: #8AAF05; /* Verde oscuro que SÍ admite blanco encima: 4,9:1. Para cuando haga falta una superficie verde con letra blanca. Con tinta oscura NO vale: 3,6:1. */ --c-accent-700: #5F7A03; /* Verde para ESCRIBIR sobre fondo claro. Sobre crema: 6,3:1. Es el único verde que puede ser texto. */ --c-accent-800: #4E6402; /* Verde muy pálido. Halo suave de un filtro activo o un estado. Tinta encima: 15,6:1 */ --c-accent-100: #EEF3D6; /* ------------------------------------------------------------------------- ERROR · no es marca, no es acento SOLO para errores de validación de formularios. No se usa para destacar nada más. Está porque sin él un formulario en verde y gris no tiene forma de decir que algo ha fallado. ---------------------------------------------------------------------- */ /* Rojo de error. Como texto sobre crema: 6,2:1. Como borde: 6,5:1 ------------------------------------------------------------------------ SOLO EN VALIDACIÓN DE FORMULARIOS. Ni un sitio más. Lo que NO es un error, y por tanto NO lleva este rojo: · un plazo de entrega largo ("va bajo pedido") -> tinta · el aviso de que algo es una maqueta -> tinta y recuadro · una advertencia de contexto -> tinta y recuadro Todos esos lo llevaban y estaba mal. Un punto rojo junto a "esta pieza va bajo pedido" dice "algo ha salido mal", y lo que pasa es que la pieza tarda. Y encima, sobre el verde claro de un recuadro, rojo sobre verde es la peor combinación de esta paleta. La señal de "esto es un aviso" la da el RECUADRO, no el color de la letra. ------------------------------------------------------------------------ */ --c-error: #B3261E; /* Fondo suave del campo con error. Tinta encima: 14,9:1 */ --c-error-100: #FBE9E7; /* ------------------------------------------------------------------------- NEUTROS ---------------------------------------------------------------------- */ /* Fondo de las páginas. Crema cálida, no blanco: cansa menos la vista. */ --c-surface: #FAF8F2; /* Fondo alterno, para distinguir una sección de la siguiente. */ --c-surface-alt: #EFEDE6; /* Blanco puro. Solo campos de formulario y ficha técnica. */ --c-paper: #FFFFFF; /* Color del texto. Sobre crema: 16,7:1 */ --c-ink-900: #17181A; /* Texto secundario: pies de foto, datos de menor peso, precio sin IVA. Sobre crema: 7,7:1 — sigue siendo cómodo de leer. */ --c-ink-600: #4A5054; /* Línea fina de separación. */ --c-line: #DAD7CE; /* Línea marcada: separadores de sección. */ --c-line-strong: #C0BDB2; /* ------------------------------------------------------------------------- UTILIDAD · sombras y transparencias Van aquí porque llevan color dentro. No hay color en ningún otro archivo. ---------------------------------------------------------------------- */ --c-shadow: rgba(23, 24, 26, 0.10); --c-shadow-strong: rgba(23, 24, 26, 0.20); /* Fondo oscurecido detrás del menú desplegable del móvil. */ --c-overlay: rgba(46, 50, 54, 0.60); /* La sombra de las copias fotográficas. Es --c-brand-900 al 12 %, y va DESPLAZADA Y DURA —sin desenfoque—, que es como cae la sombra de un papel apoyado en una mesa con luz de nave. Una sombra difusa grande es el recurso que usa todo el mundo y no dice nada. */ --c-foto-sombra: rgba(16, 24, 32, 0.12); /* LA BARRA TRANSLÚCIDA SOBRE EL HERO. Es el color base al 70 %. El 30 % que falta lo tapa el desenfoque de fondo, no el color: sin desenfoque, un texto blanco sobre la parte clara de una fotografía se pierde. Medido más abajo, en el comentario de .barra-principal. */ --c-barra-velo: rgba(16, 24, 32, 0.70); /* "Sin color". Se usa para reservar el hueco de un borde que aún no se ve, de modo que al aparecer no mueva nada de sitio. */ --c-transparent: rgba(0, 0, 0, 0); /* ========================================================================= CAPA SEMÁNTICA ========================================================================= Los componentes NO usan los colores de arriba directamente: usan estos nombres, que dicen para qué sirve cada uno. Así, cambiar el color de todos los botones es cambiar una línea, y no buscar el rojo por todo el CSS. ====================================================================== */ /* Fondos */ --bg-page: var(--c-surface); --bg-alt: var(--c-surface-alt); --bg-paper: var(--c-paper); --bg-inverse: var(--c-brand-900); /* EL MISMO COLOR QUE --bg-inverse, y es deliberado. Antes la cabecera era más clara que el pie: dos oscuros distintos. Con el color base nuevo hay UNO, y este token se queda apuntando a él para no tener que perseguir todos los sitios donde se usa. Si algún día vuelve a hacer falta un oscuro más suave, se cambia aquí y en ningún otro sitio. */ --bg-inverse-soft: var(--c-brand-900); --bg-inverse-step: var(--c-brand-800); --bg-tint: var(--c-brand-100); --bg-tint-accent: var(--c-accent-100); /* El bloque lima. Va SIEMPRE con --text-on-accent (tinta), jamás con blanco: el blanco sobre este verde da 3,30:1 y no llega ni a AA. Es la regla que está escrita arriba en la rampa y esta es la única superficie nueva que la puede romper. */ --bg-accent: var(--c-accent-600); /* LOS SURCOS. Una trama de líneas finas en diagonal suave, como un campo arado visto de lejos. Es del campo y es geométrica: ni espigas, ni tractores dibujados, ni hojas. Ahí es donde acaba toda web agrícola. Va solo en las franjas de color, nunca detrás de texto corrido, y la opacidad la pone el CSS —no el color— para que aquí no haya que declarar un gris con alfa por cada fondo. */ --surco-sobre-oscuro: var(--c-brand-100); --surco-sobre-lima: var(--c-brand-900); --bg-overlay: var(--c-overlay); /* Texto */ --text-body: var(--c-ink-900); --text-muted: var(--c-ink-600); --text-brand: var(--c-brand-600); /* Para escribir EN verde SIEMPRE --c-accent-800. El verde de marca como texto da 3,1:1 sobre crema y suspende. */ --text-accent: var(--c-accent-800); --text-on-inverse: var(--c-surface); /* Texto secundario sobre fondo oscuro. Antes apuntaba a --c-brand-300 y ahí estaba el fallo que se veía en la cabecera: verde claro sobre el verde de la barra daba 3,53:1 y suspendía. --c-brand-100 da 7,9:1 sobre la cabecera y 12,2:1 sobre el pie. */ --text-on-inverse-muted: var(--c-brand-100); /* Texto ENCIMA del verde de acción. Oscuro, nunca blanco: el blanco sobre ese verde da 3,30:1. Ver la regla del principio del archivo. */ --text-on-accent: var(--c-ink-900); /* Líneas */ --border-hairline: var(--c-line); --border-strong: var(--c-line-strong); /* Bordes dentro de zonas oscuras. Es --c-brand-300 y no --c-brand-500 porque el 500 sobre la cabecera da 2,4:1 y no llega ni al 3:1 que se le pide a un borde. */ --border-on-inverse: var(--c-brand-300); --border-none: var(--c-transparent); /* Acción principal: el botón verde, con LETRA OSCURA. El hover ACLARA en vez de oscurecer, para que la letra siga siendo la misma y siga cumpliendo. Ver --c-accent-500. */ --action-bg: var(--c-accent-600); --action-bg-hover: var(--c-accent-500); --action-text: var(--c-ink-900); /* Acción secundaria: contorno gris */ --action-ghost-text: var(--c-brand-600); --action-ghost-border: var(--c-brand-600); --action-ghost-bg-hover: var(--c-brand-100); /* Acción sobre fondo oscuro */ --action-on-inverse-text: var(--c-surface); --action-on-inverse-border: var(--c-brand-300); --action-on-inverse-bg-hover: var(--c-brand-600); /* Formularios */ --field-bg: var(--c-paper); /* El borde de un campo NO es decoración: es lo que dice dónde empieza y dónde acaba el sitio donde hay que escribir. La norma le pide 3:1 igual que a cualquier control (WCAG 1.4.11), y --c-line-strong sobre blanco solo daba 1,9:1. Se usa la misma tinta del texto secundario, que da 8,6:1 y además se ve bien al sol, que es donde va a estar el cliente. Lo detectó el verificador de /_estilos. */ --field-border: var(--c-ink-600); /* El campo enfocado se subraya en verde: es el único sitio donde el acento se usa como línea, y a 6,7:1 sobre blanco se ve bien. */ --field-border-active: var(--c-accent-800); --field-label: var(--c-ink-900); --field-hint: var(--c-ink-600); /* El error NO es el acento. Antes lo era, cuando el acento era rojo; ahora el acento es verde y "verde" significa acción, no fallo. */ --field-error: var(--c-error); --field-error-border: var(--c-error); --field-error-bg: var(--c-error-100); /* Estado deshabilitado */ --disabled-bg: var(--c-surface-alt); --disabled-text: var(--c-ink-600); --disabled-border: var(--c-line); /* ------------------------------------------------------------------------- TINTA DE IMPRESIÓN Lo que se imprime NO va en los colores de la marca. Sacar el verde de ALVI en la impresora de casa gasta tóner y sale peor que el negro. Estos cuatro son decisiones de tinta sobre papel, no de identidad. ---------------------------------------------------------------------- */ --print-paper: #FFFFFF; --print-ink: #000000; --print-ink-soft: #333333; --print-line: #999999; /* Avisos de las páginas: confirmación, error y "pendiente de revisión". */ --aviso-bien-bg: var(--c-brand-100); --aviso-bien-linea: var(--c-brand-600); /* Hueco de imagen pendiente de aportar. La trama diagonal es lo que hace que el hueco parezca un sitio reservado con intención y no una imagen que no ha cargado. */ --slot-bg: var(--c-surface-alt); --slot-text: var(--c-ink-600); --slot-border: var(--c-line-strong); --slot-trama: var(--c-line); /* ------------------------------------------------------------------------- TRATAMIENTO DE LAS FOTOGRAFÍAS Las fotos de un negocio real vienen con las temperaturas de color que tenían el día que se hicieron: una nave azul, una pared verde de fluorescente, una fachada con el techo rojo. Puestas juntas se pelean, y ninguna casa con el gris y el lima de la marca. El velo es un gris de casa al 9 % en multiply. Nada más: ni duotono, ni blanco y negro, ni viñeteado. Son fotos de un negocio real y tienen que seguir pareciéndolo; lo que se busca es que las tres parezcan del mismo sitio, no que parezcan de banco de imágenes. ---------------------------------------------------------------------- */ --foto-velo: var(--c-brand-700); /* El papel sobre el que va la copia: el mismo blanco de las fichas. */ --foto-papel: var(--c-paper); --foto-sombra: var(--c-foto-sombra); --bg-barra-velo: var(--c-barra-velo); /* Marca de las listas de "qué incluye": una raya, no un punto. Se ve mejor de lejos y a contraluz. */ /* La raya de las listas de "qué incluye". En verde, que es de los pocos sitios donde el acento aparece sin ser un botón. Sobre crema: 6,3:1 */ --bullet-marca: var(--c-accent-800); /* Sombras */ --shadow-raised: 0 1px 2px var(--c-shadow); --shadow-floating: 0 6px 20px var(--c-shadow-strong); /* ------------------------------------------------------------------------- BOTÓN DE WHATSAPP Va en verde de marca y no en gris oscuro: en oscuro parecía el widget de chat de soporte de cualquier web y no significaba nada para quien entra desde el campo. Junto al icono va la palabra "WhatsApp" escrita, que es lo que de verdad lo hace reconocible sin meter el logotipo de un tercero. Es el verde PROPIO de WhatsApp, que es lo que la gente reconoce sin leer. WhatsApp publica sus recursos de marca precisamente para botones de contacto como este. (La prohibición del proyecto es sobre los logotipos de Kramp y las marcas de fabricante que se nombren, que son material con derechos y los aporta él.) OJO CON EL TEXTO: este verde es tan claro que el blanco encima da 1,98:1 y no se lee. Con tinta oscura da 8,98:1. Por eso --wasap-text NO es el blanco que usan los demás botones. ---------------------------------------------------------------------- */ --wasap-bg: #25D366; --wasap-bg-hover: #1EBE5B; --wasap-text: var(--c-ink-900); /* ------------------------------------------------------------------------- AVISO DE MAQUETA Neutro a propósito. Estaba en rosa pálido y, justo encima de la cabecera verde, cantaba más que el propio contenido: es un aviso de servicio, no una alarma. Ahora es una línea discreta en crema con una regla debajo. ---------------------------------------------------------------------- */ --aviso-bg: var(--c-surface-alt); --aviso-text: var(--c-ink-900); --aviso-linea: var(--c-line-strong); /* ------------------------------------------------------------------------- FOCO DE TECLADO ------------------------------------------------------------------------- Quien navega con el tabulador necesita ver dónde está. El anillo es tinta oscura sobre fondo claro, y cambia a crema dentro de cualquier zona oscura (ver la regla .on-dark de abajo). Así se ve siempre, sin inventar un tercer color que no pega con la marca. ---------------------------------------------------------------------- */ --focus-ring: var(--c-ink-900); } /* Dentro de una zona oscura, todo se invierte de una vez. OJO con la línea "color": redefinir --text-body NO basta. El color del texto se calcula una sola vez en y los descendientes heredan ESE valor ya resuelto, no la variable. Sin la línea de abajo, un bloque .on-dark que no fije el color a mano se queda con tinta oscura sobre verde oscuro: pasó en la tarjeta del teléfono de la página de contacto. */ .on-dark { color: var(--c-surface); --text-body: var(--c-surface); /* MEDIDO: --c-brand-300 como TEXTO sobre el gris de la cabecera da 3,66:1 y suspende. Sirve de borde (el mínimo de un borde son 3:1) pero no de letra. --c-brand-100 da 7,1:1 sobre la cabecera y 11,1:1 sobre el pie. */ --text-muted: var(--c-brand-100); --text-brand: var(--c-brand-100); --border-hairline: var(--c-brand-700); /* Y aquí igual: --c-brand-500 sobre la cabecera da 1,68:1 y no llega ni a borde. El 300 da 3,66:1. */ --border-strong: var(--c-brand-300); --focus-ring: var(--c-surface); } /* --- .on-dark sobre el VERDE MEDIO ---------------------------------------- MEDIDO, y es un caso que se escapó: los tokens de arriba están calculados para el verde 900 del hero y del pie, donde el verde 300 da 6,91:1. Pero la banda de cierre va sobre el verde 700, y ahí el mismo verde 300 se queda en 4,47:1, por debajo del 4,5 que exige el nivel AA. Es exactamente el mismo 4,47:1 que ya apareció una vez con el texto sobre verde 700. La salida es la misma que entonces: subir al verde 100, que da 7,86:1 sobre este fondo. Va por clase y no a mano en el componente, para que cualquier bloque que se ponga sobre el verde medio herede la corrección sin que nadie se acuerde. */ .franja.cierre .on-dark, .on-brand-medio { --text-muted: var(--c-brand-100); --text-brand: var(--c-brand-100); } /* =========================================================================== PALETA ALTERNATIVA =========================================================================== Para probar otra paleta no hace falta tocar el CSS del sitio: basta con poner data-theme="marina" en la etiqueta de las páginas. (Antes la alternativa era un gris pizarra. Dejó de servir cuando el gris pasó a ser el color de casa: una alternativa que se parece a la principal no demuestra nada. Ahora es azul marino con ámbar, que es otra familia de color entera.) Y demuestra una cosa más interesante que el color: REPRODUCE LA MISMA REGLA. Sobre el ámbar, el blanco da 2,95:1 y suspende, y la tinta oscura da 6,02:1. Igual que con el verde de ALVI. No es casualidad: cualquier acento lo bastante luminoso para leerse como "acción" sobre fondo claro va a estar demasiado claro para llevar letra blanca. La capa semántica se lo traga sin que haya que tocar un solo componente. Aquí abajo solo se cambian los colores de base. Todo lo demás —botones, líneas, formularios, foco— se recalcula solo, porque todo el CSS pasa por la capa semántica. Es la prueba de que la paleta es un ajuste y no una reforma. La página /_estilos tiene un botón para encender y apagar esta paleta y verlo en directo. =========================================================================== */ [data-theme="marina"] { /* Azules · estructura. Crema encima: 12,1:1 en la cabecera, 16,1:1 en el pie */ --c-brand-900: #101C33; --c-brand-800: #17263F; --c-brand-700: #1F3350; --c-brand-600: #1B2C45; --c-brand-500: #5A7091; --c-brand-300: #A6B4C8; --c-brand-100: #E9EDF3; /* Ámbares · acento. MISMA REGLA que el verde: tinta oscura encima (6,0:1), nunca blanco (2,9:1), nunca como texto (para eso, el 800). */ --c-accent-600: #C98A06; --c-accent-500: #DEA01A; --c-accent-700: #8F6104; --c-accent-800: #7A5203; --c-accent-100: #FBF0D6; /* El error no cambia de familia: un error rojo lo es en cualquier paleta. */ --c-error: #B3261E; --c-error-100: #FBE9E7; --c-surface: #FAF9F6; --c-surface-alt: #EEECE6; --c-ink-900: #17181A; --c-ink-600: #4A5054; --c-line: #D9D5CD; --c-line-strong: #C0BAB0; }