/* =================================================================== PALETAS Cada paleta define los mismos seis colores. Se elige poniendo data-paleta="nombre" en el , o desde datos.js (SITIO.paleta). --marca color principal: encabezado, títulos, botones --marca-h el mismo, más oscuro, para el hover --marca-l versión clara, para fondos suaves y estados --acento color de contraste: destaca UNA cosa por pantalla --fondo el fondo de la página --papel las superficies que se apoyan sobre el fondo Para una paleta nueva, copiá un bloque y cambiá los seis valores. Regla: el acento nunca compite con la marca. Si pelean, bajale saturación al acento antes que cambiar la marca. =================================================================== */ /* --- Toldo: verde comercio de barrio. El que viene por defecto. --- */ [data-paleta="toldo"] { --marca: #1E5B49; --marca-h: #164438; --marca-l: #DCE8E2; --acento: #C9861B; --fondo: #F1F4F0; --papel: #FFFFFF; --negro: #161C18; --gris: #565F59; --gris-t: #89928B; --regla: #D4DAD2; } /* --- Azulejo: panadería, rotisería, fiambrería, heladería --------- */ [data-paleta="azulejo"] { --marca: #17527A; --marca-h: #0F3A58; --marca-l: #D9E7F0; --acento: #C33A2B; --fondo: #FBFAF7; --papel: #FFFFFF; --negro: #1C1A17; --gris: #56504A; --gris-t: #8B857E; --regla: #DEDAD2; } /* --- Consultorio: veterinaria, kinesiología, óptica, farmacia ----- */ [data-paleta="consultorio"] { --marca: #0F7B78; --marca-h: #0A5F5D; --marca-l: #E2F1F0; --acento: #E0603C; --fondo: #F8F6F2; --papel: #FFFFFF; --negro: #1A2423; --gris: #57635F; --gris-t: #8C9793; --regla: #DFE5E3; } /* --- Tinta: papelera, corralón, ferretería, distribuidora -------- */ [data-paleta="tinta"] { --marca: #16307A; --marca-h: #0E2159; --marca-l: #E4E9F5; --acento: #F5C518; --fondo: #F1F3F6; --papel: #FFFFFF; --negro: #14171F; --gris: #5A616E; --gris-t: #8C939E; --regla: #D9DDE4; } /* --- Bosque: vivero, dietética, granja, productos naturales ------ */ [data-paleta="bosque"] { --marca: #3A6B2E; --marca-h: #2A5021; --marca-l: #E3EEDE; --acento: #C2541F; --fondo: #F4F5F0; --papel: #FFFFFF; --negro: #1A1F16; --gris: #575F50; --gris-t: #8A9183; --regla: #D8DDD1; } /* --- Ladrillo: parrilla, pizzería, mueblería, tapicería ---------- */ [data-paleta="ladrillo"] { --marca: #8E3423; --marca-h: #6D2619; --marca-l: #F4E2DD; --acento: #1F5E63; --fondo: #F6F3F0; --papel: #FFFFFF; --negro: #1F1815; --gris: #5F534E; --gris-t: #94867F; --regla: #E0D7D1; } /* --- Dorado: sacada del logo de Fitness del Sol. El acento es el dorado exacto del logo (#B09860). Como con texto blanco no da contraste, la marca es el mismo tono más profundo: va en títulos, precios y botones. Sobre el dorado exacto el texto va oscuro (ver el bloque de estilos de index.html). ------------- */ [data-paleta="dorado"] { --marca: #6B5828; --marca-h: #52431E; --marca-l: #F4EEDD; --acento: #B09860; --fondo: #FBF9F4; --papel: #FFFFFF; --negro: #221D12; --gris: #5D5747; --gris-t: #948D7A; --regla: #E6DFCC; }