/** * CodigosDTC App Banner * * Equivalente en CSS de las clases de Tailwind del componente React * `AppDownloadBanner`. Los valores salen de `tailwind.config.ts`: * Colors-border-primary #ECECEE (se usa al 60%) * Colors-text-primary #18181B * Colors-text-secondary #71717A */ .cdtc-app-banner { /* Como los anuncios de anclaje de Google: ocupa sitio en el flujo, así que al desplegarse empuja el contenido hacia abajo en vez de taparlo, y además se queda pegado arriba al hacer scroll. Se anima `max-height` y no `height:auto` porque el alto es fijo (icono de 40px más el relleno) y así también anima en Safari iOS antiguo. */ position: -webkit-sticky; position: sticky; top: 0; overflow: hidden; max-height: 0; transform: translateY(-0.5rem); /* Sin z-index lo tapaban las cabeceras fijas y los overlays de los temas, y la barra de administración de WordPress, que va en 99999. */ z-index: 10000000; /* Ancho completo pase lo que pase: los temas suelen poner `max-width` y `margin: auto` a los hijos directos de para centrar el contenido, y eso dejaría el banner encogido en mitad de la pantalla. */ width: auto; max-width: none; min-width: 0; margin: 0; /* Barra de borde a borde: esquinas rectas, aunque el tema redondee cajas. */ border-radius: 0; /* `visibility` entra en la transición para sacar los controles del orden de tabulación mientras el banner no se ve. */ transition: max-height 0.5s ease-out, transform 0.5s ease-out, opacity 0.5s ease-out, visibility 0.5s ease-out; visibility: hidden; opacity: 0; box-sizing: border-box; } .cdtc-app-banner *, .cdtc-app-banner *::before, .cdtc-app-banner *::after { box-sizing: border-box; } .cdtc-app-banner[hidden] { display: none; } /* Solo móvil y tablet, igual que el `lg:hidden` de Tailwind. */ @media (min-width: 1024px) { .cdtc-app-banner { display: none !important; } } @media (prefers-reduced-motion: reduce) { .cdtc-app-banner { transition: none; } } .cdtc-app-banner.is-visible { visibility: visible; opacity: 1; max-height: 80px; transform: translateY(0); } /* ------------------------------------------------------------------ cuerpo */ .cdtc-app-banner__row { display: flex; width: 100%; max-width: none; border-radius: 0; align-items: center; gap: 0.75rem; /* La barra ocupa todo el ancho, pero en horizontal con muesca el contenido se apartaría de ella: el relleno lateral nunca baja de la zona segura. */ padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) 0.5rem max(0.75rem, env(safe-area-inset-left)); margin: 0; background-color: #fff; } /* Sombra además del borde: ahora el banner flota sobre el contenido en vez de empujarlo, y sin ella se confunde con lo que tiene debajo. */ .cdtc-app-banner__row { border-bottom: 1px solid rgba(236, 236, 238, 0.6); box-shadow: 0 2px 8px -2px rgba(10, 9, 11, 0.15); } .cdtc-app-banner__close { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; background: none; color: #71717a; cursor: pointer; /* Los temas suelen dar a los botones fondo, sombra y alto mínimo. */ box-shadow: none; min-height: 0; line-height: 0; -webkit-appearance: none; appearance: none; } .cdtc-app-banner__icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; /* Separa el icono del fondo blanco del banner, igual que en la app. */ border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(10, 9, 11, 0.05); /* Los temas suelen forzar `max-width` y `height:auto` en las imágenes. */ max-width: 2.5rem; object-fit: cover; } .cdtc-app-banner__text { flex: 1 1 0%; min-width: 0; } .cdtc-app-banner__title, .cdtc-app-banner__subtitle { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* `truncate` de Tailwind. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; } .cdtc-app-banner__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #18181b; } .cdtc-app-banner__subtitle { font-size: 0.75rem; line-height: 1rem; font-weight: 400; color: #71717a; } .cdtc-app-banner__cta { flex-shrink: 0; padding: 0.25rem 1rem; border-radius: 9999px; background-color: #0a52eb; color: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .cdtc-app-banner__cta:hover, .cdtc-app-banner__cta:focus { color: #fff; text-decoration: none; }