/* Colores por seccion y botones del sitio (demark/sitio_colores.py). Cargado por todas las plantillas DESPUES de su css. Cada regla solo actua cuando el atributo style lleva la variable (--s-* en la raiz data-seccion de la seccion, --d-boton* en ): sin colores propios el sitio no cambia. Especificidad sin !important: ":not([data-sin-color])" suma una clase y deja ademas sacar un elemento a mano; "[class]" en los botones suma otra. Asi las reglas ganan a las de plantilla (hasta tres clases y un elemento). */ /* Fondo y texto redefinen la paleta dentro de la seccion: las plantillas pintan con --d-*, asi que tarjetas, bandas y textos grises de la seccion siguen al color nuevo (superficies y grises derivados) y lo que va sobre el acento (--d-acento-sobre) no cambia. Las fotos (img) siguen encima del fondo. */ [data-seccion][style*="--s-fondo:"]:not([data-sin-color]) { --d-fondo: var(--s-fondo); --d-superficie: color-mix(in srgb, var(--s-fondo) 93%, var(--d-tinta)); --d-calido: color-mix(in srgb, var(--s-fondo) 92%, var(--d-acento)); --d-acento-claro: color-mix(in srgb, var(--s-fondo) 85%, var(--d-acento)); background-color: var(--s-fondo); } [data-seccion][style*="--s-texto:"]:not([data-sin-color]) { --d-tinta: var(--s-texto); --d-gris: color-mix(in srgb, var(--s-texto) 80%, var(--d-fondo)); color: var(--s-texto); } /* Titulos. */ [data-seccion][style*="--s-titulo:"] :is(h1, h2, h3, h4, h5, h6):not([data-sin-color]) { color: var(--s-titulo); } /* Botones. Primarios: enlaces y botones con clase -boton, -cta, -accion o -reservar. Secundarios: los mismos con -borde, -linea, -inverso, -invertido, -claro, -sec, -sobre, -tinta o -tel (y los telefonos de cabecera y barra). Los del menu no son botones de accion. */ /* Primario de la seccion. Los secundarios (-suave) y los botones de texto (-boton-texto) de la tienda no se pintan. */ [data-seccion][style*="--s-boton:"] :is(a, button)[class]:is([class*="-boton"], [class*="-cta"], [class*="-accion"], [class*="-reservar"]):not([class*="menu"], [class*="-borde"], [class*="-linea"], [class*="-inverso"], [class*="-invertido"], [class*="-claro"], [class*="-sec"], [class*="-sobre"], [class*="-tinta"], [class*="-tel"], [class*="-suave"], [class*="-boton-texto"], [data-sin-color]) { background-color: var(--s-boton); border-color: var(--s-boton); } [data-seccion][style*="--s-boton-texto:"] :is(a, button)[class]:is([class*="-boton"], [class*="-cta"], [class*="-accion"], [class*="-reservar"]):not([class*="menu"], [class*="-borde"], [class*="-linea"], [class*="-inverso"], [class*="-invertido"], [class*="-claro"], [class*="-sec"], [class*="-sobre"], [class*="-tinta"], [class*="-tel"], [class*="-suave"], [class*="-boton-texto"], [data-sin-color]) { color: var(--s-boton-texto); } /* Primario de todo el sitio (la seccion, si tiene el suyo, manda). */ body[style*="--d-boton:"] :is(a, button)[class]:is([class*="-boton"], [class*="-cta"], [class*="-accion"], [class*="-reservar"]):not([class*="menu"], [class*="-borde"], [class*="-linea"], [class*="-inverso"], [class*="-invertido"], [class*="-claro"], [class*="-sec"], [class*="-sobre"], [class*="-tinta"], [class*="-tel"], [class*="-suave"], [class*="-boton-texto"], [data-sin-color]) { background-color: var(--s-boton, var(--d-boton)); border-color: var(--s-boton, var(--d-boton)); } body[style*="--d-boton-texto:"] :is(a, button)[class]:is([class*="-boton"], [class*="-cta"], [class*="-accion"], [class*="-reservar"]):not([class*="menu"], [class*="-borde"], [class*="-linea"], [class*="-inverso"], [class*="-invertido"], [class*="-claro"], [class*="-sec"], [class*="-sobre"], [class*="-tinta"], [class*="-tel"], [class*="-suave"], [class*="-boton-texto"], [data-sin-color]) { color: var(--s-boton-texto, var(--d-boton-texto)); } /* Secundario de todo el sitio. */ body[style*="--d-boton2:"] :is(a, button)[class]:is(:is([class*="-boton"], [class*="-cta"], [class*="-accion"], [class*="-reservar"]):is([class*="-borde"], [class*="-linea"], [class*="-inverso"], [class*="-invertido"], [class*="-claro"], [class*="-sec"], [class*="-sobre"], [class*="-tinta"], [class*="-tel"], [class*="-suave"]), [class*="cab-tel"], [class*="barra-tel"]):not([class*="menu"], [data-sin-color]) { background-color: var(--d-boton2); border-color: var(--d-boton2); } body[style*="--d-boton2-texto:"] :is(a, button)[class]:is(:is([class*="-boton"], [class*="-cta"], [class*="-accion"], [class*="-reservar"]):is([class*="-borde"], [class*="-linea"], [class*="-inverso"], [class*="-invertido"], [class*="-claro"], [class*="-sec"], [class*="-sobre"], [class*="-tinta"], [class*="-tel"], [class*="-suave"]), [class*="cab-tel"], [class*="barra-tel"]):not([class*="menu"], [data-sin-color]) { color: var(--d-boton2-texto); }