/** * Complianz — el banner de cookies, con la identidad de la marca. * * Complianz construye todo su aspecto sobre custom properties `--cmplz_*` que * declara en `:root`, en una hoja que se genera desde el panel y se guarda en * uploads/complianz/css/. Aquí se reasignan a los tokens del tema, así que el * banner sigue la paleta del Customizer igual que el resto del sitio. * * CONSECUENCIA QUE HAY QUE CONOCER: los selectores de color de * Complianz → Banner de cookies → Apariencia **dejan de tener efecto**. Los * colores salen de tokens.css. Lo que sí se sigue gobernando desde el panel es * la disposición: ancho, posición y animación. Es una división a propósito —la * marca la manda el tema, la maquetación el plugin—, pero conviene saberlo * antes de perder media hora tocando un selector que no hace nada. * * ESPECIFICIDAD: las variables van en `:root:root` (0,2,0) y las reglas llevan * el prefijo `body`. No es por capricho: cuando hay varios tipos de * consentimiento o test A/B, Complianz no encola su hoja, la **inyecta por * JavaScript**, y entonces cae después de la nuestra en la cascada. Con una * especificidad mayor da igual quién llegue antes. * * @package SilviaGarcia */ /* Paleta y formas -------------------------------------------------------- */ :root:root { /* Caja */ --cmplz_banner_background_color: var(--sg-linen); --cmplz_banner_border_color: var(--sg-fir-10); /* * Barra pegada al fondo: esquinas rectas y filete solo arriba. Los otros * tres lados quedan fuera de pantalla, así que dibujarlos no aporta nada. */ --cmplz_banner_border_width: 1px 0 0 0; --cmplz_banner_border_radius: 0 0 0 0; /* Texto */ --cmplz_text_color: var(--sg-fir); --cmplz_hyperlink_color: var(--sg-clay); --cmplz_title_font_size: var(--sg-body-lg); --cmplz_text_font_size: var(--sg-body-sm); --cmplz_link_font_size: var(--sg-label); --cmplz_category_body_font_size: var(--sg-label); --cmplz_category_header_title_font_size: var(--sg-body-sm); --cmplz_category_header_active_font_size: var(--sg-label); --cmplz_category_header_always_active_color: var(--sg-sage); /* * Botones. «Aceptar» y «Rechazar» van los DOS en sólido y del mismo tamaño, * a propósito: si el de rechazar fuera un contorno tenue frente a un * aceptar lleno de color, sería exactamente el patrón oscuro que las guías * del EDPB y de la AEPD señalan. Cambian de color, no de peso visual. * * «Preferencias» sí puede ser más discreto: no es una de las dos opciones * enfrentadas, es una tercera vía. */ --cmplz_button_accept_background_color: var(--sg-clay); --cmplz_button_accept_border_color: var(--sg-clay); --cmplz_button_accept_text_color: var(--sg-linen); --cmplz_button_deny_background_color: var(--sg-fir); --cmplz_button_deny_border_color: var(--sg-fir); --cmplz_button_deny_text_color: var(--sg-linen); --cmplz_button_settings_background_color: transparent; --cmplz_button_settings_border_color: var(--sg-fir-10); --cmplz_button_settings_text_color: var(--sg-fir); --cmplz_button_border_radius: var(--sg-radius-button) var(--sg-radius-button) var(--sg-radius-button) var(--sg-radius-button); --cmplz_button_font_size: var(--sg-body-sm); /* Interruptores de categoría */ --cmplz_slider_active_color: var(--sg-sage); --cmplz_slider_inactive_color: var(--sg-fir-10); --cmplz_slider_bullet_color: var(--sg-white); } /* Tipografía ------------------------------------------------------------- */ /* Complianz no tiene variable de tipografía: hay que decirlo con una regla. */ body .cmplz-cookiebanner, body .cmplz-manage-consent-container { font-family: var(--sg-font-body); } /** * Titular a la izquierda. Complianz lo centra colocándolo en la columna * central de una rejilla de `100px 1fr 100px`, pensada para llevar el logotipo * a un lado y la equis de cerrar al otro. Aquí no hay logotipo, así que esa * primera columna son 100px de aire que empujan el titular al centro. * * Se deja la rejilla de tres columnas —la equis sigue esperando en la * tercera— pero las laterales pasan a `auto`: sin contenido miden cero y el * titular arranca pegado al borde, alineado con el texto de abajo. */ body .cmplz-cookiebanner .cmplz-header { grid-template-columns: auto 1fr auto; } body .cmplz-cookiebanner .cmplz-title { justify-self: start; font-family: var(--sg-font-heading); font-weight: 400; line-height: 1.3; } body .cmplz-cookiebanner .cmplz-message { line-height: 1.6; } /* * Párrafos sin margen inferior. Ojo: el mensaje se guarda en Complianz como * tres

, así que sin separación quedan pegados y se leen como un bloque * único. Si en algún momento se quiere volver a airearlos sin recuperar el * 1,25em de base.css, el punto medio es `margin-bottom: 0.5em` aquí mismo. */ body .cmplz-cookiebanner p { margin-bottom: 0; } /* Detalles con valores literales en la hoja del plugin -------------------- */ /* El gris de las categorías pasa a arena, que es el color de sección. */ body .cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: var(--sg-sand); border-radius: var(--sg-radius); } /** * Botones compactos. * * De fábrica salían enormes: en la barra inferior, `.cmplz-buttons` es una * celda de la rejilla y se estira a lo alto de la fila, y sus botones, al ser * hijos de un flex con `align-items: stretch`, se estiraban con ella. A lo * ancho, el plugin les pone `min-width: 250px; width: 100%`. * * Se corrige por los dos lados: `align-items: center` para que dejen de * estirarse, y ancho automático para que midan lo que mide su texto. */ body .cmplz-cookiebanner .cmplz-buttons { align-items: center; justify-content: flex-end; flex-wrap: wrap; } body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 0 0 auto; width: auto; min-width: 0; min-height: 0; height: auto; padding: var(--sg-button-padding-sm); font-family: var(--sg-font-body); font-weight: 500; line-height: 1.25; transition: background-color var(--sg-transition), color var(--sg-transition), border-color var(--sg-transition); } /* * Aceptar y rechazar comparten ancho mínimo: aunque las palabras no midan lo * mismo, los dos botones tienen que verse igual de importantes. */ body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept, body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { min-width: 9rem; } /* * Al pasar el ratón se oscurecen, sin cambiar de color. En el resto de la web * el botón sólido vira de arcilla a abeto, pero aquí no vale: el de rechazar * YA es abeto, así que ese vira se quedaba en nada, y hacer que el de aceptar * se volviera abeto lo disfrazaría del otro. Bajar el brillo funciona igual * para los dos y no toca la jerarquía. */ body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover, body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover { filter: brightness(0.92); } body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover, body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover { background-color: var(--sg-sand); border-color: var(--sg-fir-10); } /** * Escritorio. * * Complianz separa la barra del borde con un `margin: 10px` literal —no con * la variable --cmplz_banner_margin, que además está reutilizada como `gap` * de los botones, así que ponerla a cero los amontonaría—. Se anula el margen * y se devuelve el ancho completo para que la barra quede a ras del fondo. * * Y se separa el texto de los botones: `.cmplz-body` ocupa las dos primeras * columnas de la rejilla y los botones caen en una tercera implícita, pegados. */ @media (min-width: 1024px) { body .cmplz-cookiebanner { margin: 0; width: 100%; } body .cmplz-cookiebanner .cmplz-body { padding-right: calc(var(--sg-unit) * 5); } } /** * En pantallas pequeñas Complianz apila los botones en columna. Ahí el ancho * automático los dejaría encogidos y descentrados, así que vuelven a ocupar * toda la línea. Sin esta regla, arreglar el escritorio estropea el móvil. */ @media (max-width: 768px) { body .cmplz-cookiebanner .cmplz-buttons { align-items: stretch; justify-content: flex-start; } body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { width: 100%; } } /* * El anillo de foco del plugin es un azul literal (#245fcc). Se cambia por el * del tema para que quien navega con teclado vea siempre el mismo indicador. */ body .cmplz-cookiebanner .cmplz-consent-checkbox:focus + .cmplz-label::before { box-shadow: 0 0 0 2px var(--sg-clay); } body .cmplz-cookiebanner .cmplz-btn:focus-visible, body .cmplz-cookiebanner a:focus-visible { outline: 2px solid var(--sg-clay); outline-offset: 3px; } /* Enlaces a los documentos legales, al pie del banner. */ body .cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--sg-fir-70); text-decoration-color: var(--sg-fir-10); text-underline-offset: 0.2em; } body .cmplz-cookiebanner .cmplz-links .cmplz-link:hover, body .cmplz-cookiebanner .cmplz-links .cmplz-link:focus { color: var(--sg-clay); text-decoration-color: currentcolor; } /* Enlace «Preferencias de cookies» del menú del pie ----------------------- */ /** * Es un