/* Frontend CSS for Aragon Popup Creator - All Display Types */
/* Variables */
:root {
--aragon-z-banners: 9999995;
--aragon-z-widgets: 9999997;
--aragon-z-popups: 9999999;
--aragon-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
--aragon-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--aragon-border-radius: 8px;
/* Desde donde cuelga el primer banner top. La admin bar de WP es fixed y
se pinta encima de cualquier cosa en top:0, asi que un banner anclado
ahi le queda debajo para todo el que este logueado */
--aragon-banner-top-anchor: 0px;
}
/* --aragon-banner-top-height y --aragon-banner-bottom-height las escribe
popup.js en con la altura medida de los banners sticky visibles.
A proposito NO se declaran aqui: sin declarar, el segundo argumento de
cada var() actua de valor de arranque hasta que el JS mide */
body.admin-bar {
--aragon-banner-top-anchor: 32px;
}
@media screen and (max-width: 782px) {
body.admin-bar {
--aragon-banner-top-anchor: 46px;
}
}
@media screen and (max-width: 600px) {
/* Debajo de 600 WP pasa la admin bar a position:absolute y se va con el
scroll, asi que ya no hay nada de lo que colgar el banner */
body.admin-bar {
--aragon-banner-top-anchor: 0px;
}
}
/* ===========================================
POPUP STYLES (Modal Overlays)
=========================================== */
/* Popup Overlays */
.aragon-popup-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: var(--aragon-z-popups);
backdrop-filter: blur(2px);
animation: aragon-fade-in 0.3s ease-out;
}
.aragon-popup-overlay.aragon-popup-center {
justify-content: center;
align-items: center;
}
.aragon-popup-overlay.aragon-popup-top-center {
justify-content: center;
align-items: flex-start;
padding-top: 10vh;
}
.aragon-popup-overlay.aragon-popup-bottom-center {
justify-content: center;
align-items: flex-end;
padding-bottom: 10vh;
}
/* Popup Container */
.aragon-popup {
position: relative;
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
background: transparent;
padding: 0;
border-radius: 0;
text-align: center;
animation: aragon-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Popup Images */
.aragon-popup img {
border: 5px solid #fff;
border-radius: var(--aragon-border-radius);
max-width: 100%;
height: auto;
box-shadow: var(--aragon-shadow);
transition: var(--aragon-transition);
}
.aragon-popup a:hover img {
transform: scale(1.02);
}
/* Popup Close Button */
.aragon-popup-close {
position: absolute;
padding: 5px 10px !important;
top: 5px;
right: 5px;
background: #ffffff !important;
border: 2px solid #ccc;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
color: #666 !important;
cursor: pointer;
z-index: 10000;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: var(--aragon-transition);
}
.aragon-popup-close:hover {
color: #ff0000;
background-color: #f8f8f8;
border-color: #ff0000;
transform: scale(1.1);
}
.aragon-popup-close:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
/* ===========================================
WIDGET STYLES (Fixed Corner Elements)
=========================================== */
/* Widget Base */
.aragon-widget {
/* Separacion del borde de la pantalla y salto entre widgets apilados. Las
media queries de abajo solo reescriben estas dos y todas las posiciones
se recalculan solas */
--aragon-widget-gutter: 20px;
--aragon-widget-step: 160px;
/* Al margen se le suma lo que ya ocupan la admin bar y los banners sticky:
un widget en top:20px nacia debajo del banner y otro en bottom:20px
debajo de la barra inferior */
--aragon-widget-top: calc(var(--aragon-widget-gutter) + var(--aragon-banner-top-anchor, 0px) + var(--aragon-banner-top-height, 0px));
--aragon-widget-bottom: calc(var(--aragon-widget-gutter) + var(--aragon-banner-bottom-height, 0px));
position: fixed;
width: 280px;
max-height: 150px;
z-index: var(--aragon-z-widgets);
border-radius: var(--aragon-border-radius);
box-shadow: var(--aragon-shadow);
overflow: hidden;
transition: var(--aragon-transition);
cursor: pointer;
background: white;
}
/* Remove pointer cursor for widgets without links */
.aragon-widget.aragon-widget-no-link {
cursor: default;
}
/* Reduce hover effects for widgets without links */
.aragon-widget.aragon-widget-no-link:hover {
transform: none;
box-shadow: var(--aragon-shadow);
}
.aragon-widget.aragon-widget-no-link:hover .aragon-widget-image {
transform: none;
}
.aragon-widget:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
/* Special hover effects for centered widgets to preserve centering */
.aragon-widget-right-center:hover,
.aragon-widget-left-center:hover {
transform: translateY(-50%) translateY(-2px) scale(1.02);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
/* Override for centered widgets without links */
.aragon-widget.aragon-widget-no-link.aragon-widget-right-center:hover,
.aragon-widget.aragon-widget-no-link.aragon-widget-left-center:hover {
transform: translateY(-50%);
box-shadow: var(--aragon-shadow);
}
/* Widget Positioning */
.aragon-widget-top-right {
top: var(--aragon-widget-top);
right: var(--aragon-widget-gutter);
}
.aragon-widget-top-left {
top: var(--aragon-widget-top);
left: var(--aragon-widget-gutter);
}
.aragon-widget-right-center {
top: 40%;
right: var(--aragon-widget-gutter);
transform: translateY(-50%);
}
.aragon-widget-left-center {
top: 40%;
left: var(--aragon-widget-gutter);
transform: translateY(-50%);
}
.aragon-widget-bottom-right {
bottom: var(--aragon-widget-bottom);
right: var(--aragon-widget-gutter);
}
.aragon-widget-bottom-left {
bottom: var(--aragon-widget-bottom);
left: var(--aragon-widget-gutter);
}
/* Widget Stacking - Multiple widgets in same corner/edge */
.aragon-widget-top-right:nth-of-type(n+2) {
top: calc(var(--aragon-widget-top) + (var(--aragon-widget-step) * var(--stack-index, 1)));
}
.aragon-widget-top-left:nth-of-type(n+2) {
top: calc(var(--aragon-widget-top) + (var(--aragon-widget-step) * var(--stack-index, 1)));
}
.aragon-widget-right-center:nth-of-type(n+2) {
top: calc(40% + (var(--aragon-widget-step) * var(--stack-index, 1)));
transform: translateY(-50%);
}
.aragon-widget-right-center:nth-of-type(n+2):hover {
transform: translateY(-50%) translateY(-2px) scale(1.02);
}
.aragon-widget-left-center:nth-of-type(n+2) {
top: calc(40% + (var(--aragon-widget-step) * var(--stack-index, 1)));
transform: translateY(-50%);
}
.aragon-widget-left-center:nth-of-type(n+2):hover {
transform: translateY(-50%) translateY(-2px) scale(1.02);
}
.aragon-widget-bottom-right:nth-of-type(n+2) {
bottom: calc(var(--aragon-widget-bottom) + (var(--aragon-widget-step) * var(--stack-index, 1)));
}
.aragon-widget-bottom-left:nth-of-type(n+2) {
bottom: calc(var(--aragon-widget-bottom) + (var(--aragon-widget-step) * var(--stack-index, 1)));
}
/* Widget Images */
.aragon-widget-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: var(--aragon-transition);
}
.aragon-widget:hover .aragon-widget-image {
transform: scale(1.05);
}
/* Widget Links */
.aragon-widget-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
/* Widget Close Button */
.aragon-widget-close {
position: absolute;
top: 8px;
right: 8px;
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 0px !important;
border-radius: 50% !important;
font-size: 14px;
font-weight: bold;
color: #666 !important;
cursor: pointer;
z-index: 10001;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-family: Arial, sans-serif;
transition: var(--aragon-transition);
backdrop-filter: blur(4px);
}
.aragon-widget-close:hover {
color: #ff0000;
background-color: rgba(255, 255, 255, 1);
border-color: #ff0000;
transform: scale(1.1);
}
/* ===========================================
BANNER STYLES (Top/Bottom Bars)
=========================================== */
/* Banner Base */
.aragon-banner {
position: relative;
width: 100%;
z-index: var(--aragon-z-banners);
/* Repite lo que el render escribe en el style inline: asi el centrado no
depende de un solo atributo y tambien cubre banners guardados antes */
display: flex;
align-items: center;
background: white;
/* Hairline como sombra y no como borde: un border-bottom se come 1px de la
caja de contenido, y el flex centra dentro de ESA caja, asi que dejaba
el texto medio pixel por encima del centro real de la barra. La sombra
se dibuja fuera y no entra en el calculo */
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: var(--aragon-transition);
animation: aragon-slide-down 0.5s ease-out;
}
.aragon-banner-top {
position: relative;
top: 0;
margin-bottom: 0;
}
.aragon-banner-bottom {
position: relative;
bottom: 0;
margin-top: 0;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
animation: aragon-slide-up 0.5s ease-out;
}
/* Sticky Banners */
/* --aragon-banner-offset lo escribe popup.js en cada banner con la suma de
las alturas de los que van antes que el: sin eso, dos banners sticky en el
mismo borde comparten top y solo se ve el ultimo */
.aragon-banner-sticky.aragon-banner-top {
position: fixed;
top: calc(var(--aragon-banner-top-anchor, 0px) + var(--aragon-banner-offset, 0px));
left: 0;
right: 0;
z-index: var(--aragon-z-banners);
}
.aragon-banner-sticky.aragon-banner-bottom {
position: fixed;
bottom: var(--aragon-banner-offset, 0px);
left: 0;
right: 0;
z-index: var(--aragon-z-banners);
}
/* Reserva del hueco SOLO mientras popup.js no ha corrido (o no corre nunca).
En cuanto corre marca y toma el control con la
altura real medida, sumada al padding propio del tema en vez de sustituirlo:
un tema con header fijo declara su body{padding-top:80px} y sin esa suma se
queda sin el y se tapa su propio contenido */
html:not(.aragon-js) body:has(.aragon-banner-sticky.aragon-banner-top) {
padding-top: 60px;
}
html:not(.aragon-js) body:has(.aragon-banner-sticky.aragon-banner-bottom) {
padding-bottom: 60px;
}
/* ===========================================
OVERLAY A PANTALLA COMPLETA ABIERTO
=========================================== */
/* popup.js marca mientras hay un
elemento fixed nuevo cubriendo casi toda la pantalla — el menu off-canvas
de un tema, tipicamente. Sin esto, el z-index de portada de los banners y
los widgets (9999995 / 9999997, puestos para que ningun tema los tape) deja
una franja encima de ese menu y el visitante no la puede usar.
z-index 0 y no `auto` a proposito: un numero, aunque sea 0, SIGUE creando
contexto de apilamiento, asi que la X de cerrar (z-index 10001) se queda
atrapada dentro del banner. Con `auto` el contexto desaparece y esa X se
escaparia a la capa raiz, o sea por encima del menu, que es justo lo que
estamos arreglando.
!important porque popup.js escribe el z-index de los widgets en el style
inline para escalonarlos entre si, y una clase no le gana a eso.
Es un estado pasajero: al cerrar el overlay se quita la clase y todo vuelve
a su capa. Durante el scroll normal no aplica nada, asi que el acople entre
el banner sticky y el header del tema queda intacto. */
html.aragon-overlay-abierto .aragon-banner,
html.aragon-overlay-abierto .aragon-widget {
z-index: 0 !important;
/* El z-index ES animable, y el banner lleva `transition: all .3s`: sin
esto la capa BAJA GRADUALMENTE y durante ~300ms el banner sigue por
encima del menu recien abierto (medido: 9999995 -> 343516 -> 0). Justo
la franja que se veia encima del menu al abrirlo.
Va aqui dentro y no en la regla base para no tocar las transiciones
normales del banner: al cerrarse el overlay esta regla desaparece y
recupera las suyas. Que al volver tarde 300ms en subir no se nota. */
transition: none !important;
}
/* Banner Images */
.aragon-banner-image {
width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
display: block;
transition: var(--aragon-transition);
}
.aragon-banner:hover .aragon-banner-image {
transform: scale(1.01);
}
/* Banner Links */
.aragon-banner-link {
/* Estirado a todo el alto para que la barra entera sea clicable, y flex
centrado dentro para no perder el centrado justo al estirarse */
display: flex;
align-items: center;
align-self: stretch;
width: 100%;
min-width: 0;
text-decoration: none;
}
/* Banner Close Button */
.aragon-banner-close {
position: absolute;
/* Centrada y no a 10px del borde: con la altura ya configurable, un banner
de 50px dejaba la X visiblemente arriba y uno de 300px la dejaba perdida
en la esquina */
top: 50%;
transform: translateY(-50%);
right: 10px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 0px !important;
border-radius: 50%;
font-size: 16px;
font-weight: bold;
color: #666;
cursor: pointer;
z-index: 10001;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-family: Arial, sans-serif;
transition: var(--aragon-transition);
backdrop-filter: blur(4px);
}
.aragon-banner-close:hover {
color: #ff0000;
background-color: rgba(255, 255, 255, 1);
border-color: #ff0000;
/* Repite el translateY o el hover la avienta hacia abajo */
transform: translateY(-50%) scale(1.1);
}
/* ===========================================
TEXTO DEL BANNER - CENTRADO VERTICAL GARANTIZADO
===========================================
El texto queda centrado en el alto del banner SIEMPRE: con cualquier alto,
con cualquier tamano de letra, y venga el HTML de donde venga (editor
clasico, Gutenberg, Avada Builder, Elementor...).
El flex del contenedor centra la CAJA del texto, no lo que se VE dentro de
ella. Dos cosas hinchan esa caja por un solo lado y son las que descentran:
1. Los margenes verticales que el tema le pone a ,
-, ...
Casi siempre el de abajo es mayor que el de arriba, asi que sobra caja
por abajo y el texto se ve POR ENCIMA del centro. Anular solo el primer
y el ultimo hijo DIRECTO no alcanza: los constructores envuelven el
contenido () y el margen vivo
queda un nivel mas adentro, fuera del alcance del combinador '>'.
2. El hueco de las descendentes que el marquee deja bajo la linea base al
ser inline-block, y el 1px del borde inferior, que con box-sizing
border-box sale de la caja de contenido donde el flex hace el centrado.
NO se usa text-box-trim: recortar hasta la altura de mayusculas centra
mejor a ojo, pero solo lo soportan Chrome 133+ y Safari 18.2+, asi que la
misma barra caeria distinta segun el navegador, y el desfase que introduce
CRECE con el tamano de letra (2.8px a 16px, 7.4px a 48px) que es justo lo
que se queria eliminar. Se centra por metricas.
*/
.aragon-banner-text {
/* 22px es el estandar acordado en la review 2026-08-24: un banner debe
jalar la vista. Aplica al texto plano; los headings que el editor
inserte conservan la tipografia del sitio. */
font-size: 22px;
line-height: 1.4;
color: #333;
font-family: inherit;
width: 100%;
min-width: 0;
}
/* A CUALQUIER profundidad, no solo en los hijos directos: es lo unico que
deja la caja del texto simetrica sin importar como envuelva el editor.
!important porque compite con la hoja del tema (Avada cuelga las suyas de
.fusion-body) que casi siempre se carga despues que esta. */
.aragon-banner-text,
.aragon-banner-text * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Devuelve aire ENTRE bloques hermanos y nunca en los bordes: separa parrafos
sin volver a descentrar, porque lo que descentra es el margen del primero o
el del ultimo, no el de en medio */
.aragon-banner-text * + * {
margin-top: 0.35em !important;
}
/* El marquee NO puede ser inline-block: al sentarse sobre la linea base deja
debajo el hueco de las descendentes, y esa franja entra en la caja que el
flex centra, asi que el texto sube. Como item de un flex en fila el
centrado es exacto, y el translate3d(-100%) del keyframe sigue midiendo el
ancho real del contenido, que es lo que mantiene el movimiento identico. */
.aragon-banner-text.aragon-banner-marquee {
display: flex;
align-items: center;
}
.aragon-banner-marquee .aragon-marquee-content {
/* flex-shrink 0 o el item se encogeria al ancho del banner y el -100%
del keyframe recorreria esa medida en vez de la del texto */
display: block;
flex: 0 0 auto;
/* La duracion la inyecta el render como variable en el style del banner.
El 15s es el que estaba fijo aqui antes y queda como respaldo para los
items guardados sin el campo. Es duracion, no velocidad: mas alto,
mas lento */
animation: aragon-marquee var(--aragon-marquee-duration, 15s) linear infinite;
padding-left: 100%;
white-space: nowrap;
}
/* Banner pegado con [vetc_banner]: fluye con el contenido de la pagina en vez
de anclarse arriba o abajo, y nunca es sticky (quedarse pegado al hacer
scroll es de un banner de borde, no de uno que vive dentro de una seccion) */
.aragon-banner-embed {
position: relative;
width: 100%;
margin: 0;
}
/* Patrones de fondo. Van sobre el background-color del banner, hechos con
gradientes para no obligar a subir una imagen. Cuando hay imagen de fondo,
el patron no aplica: la imagen ya ocupa la capa de background */
.aragon-pattern-stripes {
background-image: repeating-linear-gradient(
90deg,
var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 0 12px,
transparent 12px 24px
);
}
.aragon-pattern-diagonal {
background-image: repeating-linear-gradient(
45deg,
var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 0 10px,
transparent 10px 20px
);
}
.aragon-pattern-dots {
background-image: radial-gradient(var(--aragon-pattern-color, rgba(0, 0, 0, 0.12)) 1.5px, transparent 1.6px);
background-size: 14px 14px;
}
.aragon-pattern-grid {
background-image:
linear-gradient(var(--aragon-pattern-color, rgba(0, 0, 0, 0.07)) 1px, transparent 1px),
linear-gradient(90deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.07)) 1px, transparent 1px);
background-size: 18px 18px;
}
.aragon-pattern-checks {
background-image:
linear-gradient(45deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 25%, transparent 25% 75%, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 75%),
linear-gradient(45deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 25%, transparent 25% 75%, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
.aragon-pattern-chevron {
background-image:
linear-gradient(135deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 25%, transparent 25%),
linear-gradient(225deg, var(--aragon-pattern-color, rgba(0, 0, 0, 0.06)) 25%, transparent 25%);
background-size: 16px 16px;
}
@keyframes aragon-marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
/* ===========================================
RESPONSIVE DESIGN
=========================================== */
/* Tablet adjustments */
/* "Show on Mobile" apagado. La variable es lo que lee popup.js: preguntarle al
navegador si la regla aplica evita repetir el breakpoint en el JS, que es
como los dos se desincronizan.
!important porque jQuery escribe `display` inline al hacer fadeIn/fadeOut y
un estilo inline le gana a la hoja de estilos.
La unica regla que oculta vive DENTRO de este @media, asi que en escritorio
no hay nada que la active: la garantia es estructural, no algo que haya que
volver a probar en cada cambio. */
.aragon-hide-mobile {
--aragon-hidden: 0;
}
@media (max-width: 768px) {
.aragon-hide-mobile {
--aragon-hidden: 1;
display: none !important;
}
}
@media (max-width: 768px) {
.aragon-popup {
max-width: 95vw;
max-height: 95vh;
}
.aragon-widget {
width: 240px;
max-height: 120px;
--aragon-widget-gutter: 15px;
}
.aragon-banner-image {
max-height: 150px;
}
}
/* Mobile adjustments */
@media (max-width: 480px) {
.aragon-popup {
max-width: 98vw;
max-height: 98vh;
}
.aragon-popup img {
border-width: 3px;
}
.aragon-widget {
width: 200px;
max-height: 100px;
--aragon-widget-gutter: 10px;
--aragon-widget-step: 110px;
}
.aragon-widget-close {
width: 28px;
height: 28px;
font-size: 16px;
top: 5px;
right: 5px;
}
/* El apilado de movil ya no se reescribe: --aragon-widget-step de arriba
lo baja a 110px y las reglas base se recalculan solas */
.aragon-widget-right-center:nth-of-type(n+2):hover {
transform: translateY(-50%) translateY(-2px) scale(1.02);
}
.aragon-widget-left-center:nth-of-type(n+2):hover {
transform: translateY(-50%) translateY(-2px) scale(1.02);
}
.aragon-banner-close {
width: 24px;
height: 24px;
font-size: 14px;
right: 8px;
}
.aragon-banner-image {
max-height: 120px;
}
}
/* ===========================================
ANIMATIONS
=========================================== */
@keyframes aragon-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes aragon-scale-in {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes aragon-slide-down {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes aragon-slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes aragon-widget-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes aragon-widget-bounce-centered {
0%, 20%, 50%, 80%, 100% {
transform: translateY(-50%);
}
40% {
transform: translateY(-50%) translateY(-10px);
}
60% {
transform: translateY(-50%) translateY(-5px);
}
}
/* Widget entrance animation */
.aragon-widget {
animation: aragon-scale-in 0.5s ease-out, aragon-widget-bounce 1s ease-in-out 0.5s;
}
/* Centered widgets use different bounce animation */
.aragon-widget-right-center,
.aragon-widget-left-center {
animation: aragon-scale-in 0.5s ease-out, aragon-widget-bounce-centered 1s ease-in-out 0.5s;
}
/* ===========================================
ACCESSIBILITY
=========================================== */
/* Screen reader text */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
/* Focus indicators */
.aragon-popup-close:focus,
.aragon-widget-close:focus,
.aragon-banner-close:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.aragon-popup img {
border-color: #000;
}
.aragon-widget {
border-color: #000;
}
.aragon-banner {
box-shadow: 0 1px 0 #000;
}
.aragon-banner-bottom {
box-shadow: 0 -1px 0 #000;
}
.aragon-popup-close,
.aragon-widget-close,
.aragon-banner-close {
border-color: #000;
background: #fff;
color: #000;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.aragon-popup-overlay,
.aragon-popup,
.aragon-widget,
.aragon-banner,
.aragon-popup img,
.aragon-widget-image,
.aragon-banner-image {
animation: none;
transition: none;
}
.aragon-popup-close:hover,
.aragon-widget-close:hover {
transform: none;
}
/* No 'none': el translateY no es una animacion, es lo que la mantiene
centrada, y quitarlo la avienta media altura hacia abajo */
.aragon-banner-close:hover {
transform: translateY(-50%);
}
}
/* ===========================================
PRINT STYLES
=========================================== */
@media print {
.aragon-popup-overlay,
.aragon-widget,
.aragon-banner {
display: none !important;
}
}