/* ============================================================================= * Barra de avisos superior — rtr_announcementbar * * Todos los colores y medidas salen de los tokens `--rtr-*` que define el tema * rtr_preview, con un valor de respaldo para que el modulo siga siendo legible * en cualquier otro tema. Como esos tokens se redefinen en * `[data-bs-theme="dark"]`, la barra acompana al modo oscuro sin una sola regla * extra. * * Contraste del texto blanco sobre el degradado, medido en los dos modos: * claro #991b1b -> #c2410c 7.4:1 .. 5.2:1 * oscuro #dc2626 -> #9a3412 4.8:1 .. 7.1:1 * * Tres disposiciones, que decide `announcement-bar.js` midiendo el ancho: * (por defecto) avisos apilados, uno debajo de otro. Es lo que se ve sin * JavaScript y lo que queda cuando no caben en una linea. * --inline caben todos: fila unica con separadores verticales. * --rotating no caben: se ve uno cada vez y van turnandose. * =========================================================================== */ .rtr-announcement-bar { /* Un solo tamano de referencia: del texto cuelgan la X y el boton de llamada a la accion, que se miden en `em`. */ --rtr-announcement-font-size: 1rem; --rtr-announcement-control-size: 2.25rem; background-color: var(--rtr-red-dark, #991b1b); background-image: var( --rtr-gradient-strong, linear-gradient(135deg, #991b1b 0%, #c2410c 100%) ); color: #fff; font-size: var(--rtr-announcement-font-size); position: relative; z-index: 1; } @media (min-width: 768px) { .rtr-announcement-bar { --rtr-announcement-font-size: 1.125rem; } } /* El script marca antes del primer pintado cuando el visitante ya habia cerrado la barra y el plazo no ha vencido, de modo que no llega a parpadear. */ .rtr-announcement-dismissed .rtr-announcement-bar { display: none; } .rtr-announcement-bar__inner { align-items: center; display: flex; gap: 0.25rem; justify-content: space-between; margin-inline: auto; max-inline-size: 75rem; padding-inline: 0.5rem; } /* --- Mensajes -------------------------------------------------------------- */ .rtr-announcement-bar__list { flex: 1 1 auto; list-style: none; margin: 0; min-inline-size: 0; padding: 0; } .rtr-announcement-bar__item { align-items: center; column-gap: 0.625rem; display: flex; flex-wrap: wrap; font-family: var(--rtr-font-display, "Barlow Condensed", "Inter", sans-serif); font-weight: 700; justify-content: center; letter-spacing: 0.02em; line-height: 1.2; padding-block: 0.4375rem; row-gap: 0.25rem; text-transform: uppercase; } /* Apilados —sin JavaScript, o cuando no caben y no se puede rotar— los separa una linea horizontal. La raya vertical se reserva para la fila unica: al envolverse dejaria un trazo suelto al principio de cada linea nueva. En rotacion no hace falta ninguna, porque solo hay un aviso a la vista; `+` mira el DOM, no lo que esta visible, asi que los dos modos quedan excluidos. */ .rtr-announcement-bar:not(.rtr-announcement-bar--inline):not(.rtr-announcement-bar--rotating) .rtr-announcement-bar__item + .rtr-announcement-bar__item { border-block-start: 0.0625rem solid rgba(255, 255, 255, 0.35); } /* --- Todos en fila, cuando caben ------------------------------------------- */ .rtr-announcement-bar--inline .rtr-announcement-bar__list { align-items: center; display: flex; flex-wrap: nowrap; justify-content: center; } .rtr-announcement-bar--inline .rtr-announcement-bar__item { flex-wrap: nowrap; white-space: nowrap; } /* Separador en punto, mas discreto que una raya. El pseudoelemento entra como un item mas del flex del aviso, asi que queda centrado con el texto sin ajustes verticales. El margen derecho es medio canal porque el otro medio lo pone el `column-gap`: asi el punto respira igual por los dos lados. */ .rtr-announcement-bar--inline .rtr-announcement-bar__item + .rtr-announcement-bar__item { margin-inline-start: 1.25rem; } .rtr-announcement-bar--inline .rtr-announcement-bar__item + .rtr-announcement-bar__item::before { color: rgba(255, 255, 255, 0.7); content: "\2022"; font-size: 0.7em; line-height: 1; margin-inline-end: 0.625rem; } /* --- Llamada a la accion --------------------------------------------------- */ /* Boton perfilado en blanco: destaca sobre el degradado sin competir con el mensaje. Al pasar por encima invierte a fondo blanco con rojo oscuro, que mantiene el contraste en los dos modos (>= 4.8:1 sobre blanco). */ .rtr-announcement-bar__cta { border: 0.125rem solid currentColor; color: inherit; display: inline-block; font-size: 0.8em; letter-spacing: 0.06em; line-height: 1.25; min-block-size: 1.5rem; padding: 0.1875rem 0.625rem; text-decoration: none; white-space: nowrap; } .rtr-announcement-bar__cta:hover, .rtr-announcement-bar__cta:focus { background-color: #fff; color: var(--rtr-red-dark, #991b1b); text-decoration: none; } .rtr-announcement-bar__cta:focus-visible { outline: 0.125rem solid #fff; outline-offset: 0.125rem; } /* --- Boton de cierre ------------------------------------------------------- */ .rtr-announcement-bar__control, .rtr-announcement-bar__spacer { flex: 0 0 auto; inline-size: var(--rtr-announcement-control-size); } .rtr-announcement-bar__control { align-items: center; background: none; border: 0.125rem solid transparent; border-radius: 0; color: inherit; cursor: pointer; display: inline-flex; justify-content: center; min-block-size: var(--rtr-announcement-control-size); padding: 0; } .rtr-announcement-bar__control:hover { border-color: rgba(255, 255, 255, 0.85); } /* La X crece con el texto, no con el contenedor. */ .rtr-announcement-bar__icon { block-size: 1.25em; display: block; inline-size: 1.25em; } /* Anillo de foco de contorno blanco, legible sobre cualquier punto del degradado, y su equivalente en modo de alto contraste. */ .rtr-announcement-bar__control:focus-visible { outline: 0.125rem solid #fff; outline-offset: -0.125rem; } @media (forced-colors: active) { .rtr-announcement-bar__control:focus-visible, .rtr-announcement-bar__cta:focus-visible { outline: 0.1875rem solid Highlight; } } /* --- Movil ----------------------------------------------------------------- */ @media (max-width: 767.98px) { .rtr-announcement-bar { /* Objetivo tactil de 44px (WCAG 2.5.5) en la mano, donde hace falta. */ --rtr-announcement-control-size: var(--rtr-tap-target, 2.75rem); } .rtr-announcement-bar__inner { padding-inline: 0.25rem; } } /* --- Movimiento ------------------------------------------------------------ */ /* Al quitarle el atributo `hidden` el aviso pasa de `display: none` a renderizarse, y eso basta para que la animacion arranque de nuevo: no hace falta que el script la reinicie a mano. */ @media (prefers-reduced-motion: no-preference) { .rtr-announcement-bar--rotating .rtr-announcement-bar__item { animation: rtr-announcement-in 0.4s ease-out; } /* Cierre: el script fija la altura de partida en linea y la lleva a cero, la clase solo aporta la transicion. Con `prefers-reduced-motion` no se anade y la barra desaparece de golpe. */ .rtr-announcement-bar--closing { transition: height 0.2s ease, opacity 0.2s ease; } @keyframes rtr-announcement-in { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: none; } } } /* --- Respaldos para temas sin Bootstrap ------------------------------------ */ /* El tema ya define las dos, pero el modulo no debe depender de ello. Los valores son los mismos que usa Bootstrap 5.3, asi que cuando conviven no hay conflicto. */ .rtr-announcement-bar .d-none { display: none; } .rtr-announcement-bar .visually-hidden { block-size: 1px; border: 0; clip-path: inset(50%); inline-size: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; }