/* Adición funcional #17 — el cartel de salida. * * Todo por clase y con tokens del sistema: cero hexadecimales sueltos, así el cartel sigue al * tema como cualquier otra superficie del sitio. El markup lo construye js/salida.js y cuelga * de , fuera de la raíz de la app — por eso acá no hay ni un selector de atributo del * export que pueda romperse con la hidratación. */ .upran-salida-velo { /* La tipografía se declara ACÁ y no se hereda, y es por dónde vive el cartel: cuelga de * para sobrevivir a la hidratación, y el sitio no pone la fuente en sino en el * contenedor de la app. Sin esta línea el cartel salía en la serif del navegador — se vio en * la primera captura. Misma pila que el resto del sitio, letra por letra. */ font-family: 'Inter', system-ui, sans-serif; position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; /* 0,72 y no 0,62: sobre el sitio CLARO el cartel es una card oscura sobre una página blanca, * y con un velo tibio la card se lee como «un bloque raro» en vez de como algo que está * ENCIMA. Con el velo bien cargado la jerarquía queda inequívoca en los dos temas, y de paso * el borde de la card contra el velo sigue siendo visible (medido en el juez). */ background: rgba(0, 0, 0, 0.72); overflow-y: auto; animation: upran-salida-entra 180ms ease-out both; } /* Sin animación de entrada con movimiento reducido, por DOS caminos y a propósito: la clase * .upran-salida-quieto (el JS ya preguntó, y así el estado queda visible en el DOM para el juez) * y la media query (que cubre el caso de que alguien cambie la preferencia con el cartel ya * abierto). La regla global de index.html reduce las duraciones a 0,01ms pero no las elimina; * acá se piden `none`, que es lo que el contrato dice. */ .upran-salida-quieto, .upran-salida-quieto .upran-salida-card { animation: none; } @media (prefers-reduced-motion: reduce) { .upran-salida-velo, .upran-salida-card { animation: none; } } @keyframes upran-salida-entra { from { opacity: 0; } to { opacity: 1; } } @keyframes upran-salida-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* El fondo no scrollea mientras el cartel está abierto. */ html.upran-salida-abierto, html.upran-salida-abierto body { overflow: hidden; } /* La card recibe el foco al abrir (tabindex -1 desde el JS) y NO lleva anillo: el anillo dice * «esto se activa con Enter», y la card no se activa con nada. Los botones de adentro conservan * el suyo, que es donde hace falta. */ .upran-salida-card:focus { outline: none; } .upran-salida-card { position: relative; width: 100%; max-width: 440px; box-sizing: border-box; padding: 30px 26px 22px; background: var(--s1); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--elev); text-align: center; animation: upran-salida-sube 220ms cubic-bezier(0.16, 1, 0.3, 1) both; } .upran-salida-quieto .upran-salida-card { animation: none; } .upran-salida-x { appearance: none; -webkit-appearance: none; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0; margin: 0; border: none; border-radius: 9999px; background: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; } .upran-salida-x:hover { color: var(--text-primary); } /* Con el dedo, 32px es chico: el auto-diagnóstico lo midió en las seis pantallas y era el único * control del cartel por debajo del blanco de 44px que se recomienda para punteros gruesos. * Se agranda SÓLO ahí — con mouse 32 ya es holgado y una X de 44 en la esquina pesa de más. * El ícono no cambia de tamaño: crece el área que recibe el toque, que es lo que fallaba. */ @media (pointer: coarse) { .upran-salida-x { width: 44px; height: 44px; top: 6px; right: 6px; } } /* El isologo del nav, mismo archivo. Se pone BLANCO solo: la regla global * `img[src*="Logo_black"] { filter: var(--logo-filter) }` de index.html lee la variable, y * dentro de la card —que lleva data-theme="dark"— --logo-filter vale invert(1). Cero filtros * escritos a mano y cero asset duplicado en blanco. */ .upran-salida-logo { width: 40px; height: 40px; object-fit: contain; display: block; margin: 0 auto 16px; } /* El título es una frase larga y ES el argumento; por eso baja un escalón de cuerpo respecto de * un titular corto y gana interlínea. text-wrap: balance reparte las líneas parejo en vez de * dejar una palabra sola abajo — el mismo recurso que el H1 del hero. */ .upran-salida-titulo { margin: 0 0 18px; text-wrap: balance; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text-primary); } .upran-salida-items { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; } .upran-salida-items li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text-body); } .upran-salida-cruz { flex-shrink: 0; color: var(--sem-red); font-size: 13px; line-height: 1.6; } .upran-salida-cierre { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); } .upran-salida-cta { display: block; width: 100%; box-sizing: border-box; padding: 14px 20px; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; } /* El CTA principal: BLANCO con el texto en el violeta de marca. Es el único elemento claro de la * card, y eso es lo que lo hace el más visible: dentro de un cuadro oscuro el blanco manda sin * necesidad de gritar con color. * * POR QUÉ ESTOS DOS VALORES SE NOMBRAN ACÁ y no salen de la cascada. El primer intento fue * ponerle data-theme="light" al para que heredara --s1 y --brand del tema claro. NO FUNCIONA, * y el juez lo cazó midiendo el contraste: el sitio declara la paleta clara en `:root` a secas * —sólo la oscura tiene selector de atributo propio—, así que dentro de la card (data-theme="dark") * no hay forma de «volver» al tema claro por cascada. El botón salía lila sobre el fondo de la * card: 6,15:1 de contraste, pero de dos colores que no eran los pedidos. * * Se nombran entonces una sola vez, con el origen escrito, que es lo que este repo hace en * top-creatives.css cuando un color viene de afuera del sistema: * --salida-cta-fondo = --s1 del tema CLARO * --salida-cta-texto = --brand del tema CLARO * y el juez mide el contraste real en cada corrida, así que si alguno se moviera y rompiera AA * sale rojo antes de llegar a producción. */ .upran-salida-velo { --salida-cta-fondo: #FFFFFF; --salida-cta-texto: #7A2E8E; } .upran-salida-cta { background: var(--salida-cta-fondo); color: var(--salida-cta-texto); } .upran-salida-cta:hover { background: var(--salida-cta-fondo); color: var(--salida-cta-texto); text-decoration: none; filter: brightness(0.94); } /* El rechazo, ROJO DE TINTE y no macizo, y no es una suavización: en oscuro --sem-red es un * salmón claro (#F2857A) y un macizo con texto blanco encima no pasa contraste; en claro el * macizo (#B3261E) grita más que el CTA principal, que es al revés de la jerarquía. Con * --err-surface de fondo y --sem-red en texto y borde se lee inequívocamente rojo en los dos * temas y el CTA sigue mandando. Es