@charset "utf-8"; /* ============================================================ modulos/fiesta.css — el momento en que la plataforma celebra Se carga después de base.css, panel.css y app.css. Viste lo que pinta `fiesta.js`: la toma de pantalla del momento, el aro de aciertos, el «+N» que sube y el lienzo del confeti. Lo usan la sesión de estudio, los juegos, Mirar y el concurso, así que aquí no hay nada de ninguna pantalla en concreto. CÓMO SE VE, Y POR QUÉ ASÍ. La versión anterior celebraba con efectos: un halo de color difuminado detrás de la caja, un icono que entraba girando con rebote, cifras que daban un salto al llegar e insignias con degradado. Cada cosa por separado era vistosa; juntas se leían como una tragaperras encima de un instituto. La plantilla del sitio celebra de otra manera: una tarjeta plana de filo grueso, el titular en serif, las cifras grandes y el color de lo conseguido. Es la misma alegría dicha en voz de academia. EL COLOR DEL MOMENTO VIAJA EN LAS FICHAS DE SECCIÓN. `tono-oro`, `tono-nivel`, `tono-racha` y `tono-liga` ponen las cinco fichas `--seccion-*` en la capa, y todo lo de dentro —el icono, el aro, las cifras, las insignias— las hereda como hereda cualquier pantalla. La capa cuelga del , fuera de la vista, así que no arrastra el color de la pantalla de debajo. Ninguna mecánica de castigo: el momento no tiene variante de mala noticia, y aquí tampoco hay estilo para ella. ============================================================ */ /* ============================================================ 1. El confeti ============================================================ */ /* Encima del momento: sale de las esquinas de abajo y cruza la caja. No recibe el ratón, que si no el botón «Seguir» dejaría de responder durante los dos segundos y medio que dura. */ .tk-confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; } /* ============================================================ 2. La capa y sus tonos ============================================================ */ .tk-momento { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--e-4); /* El velo es SIEMPRE oscuro: con `--tinta` se aclaraba en el tema oscuro, porque allí la tinta es casi blanca, y el momento salía sobre una niebla gris. Un velo no tiene tema: apaga lo de detrás. */ background: color-mix(in srgb, #000 55%, transparent); animation: tk-mom-velo .2s ease-out both; --seccion: var(--xp); --seccion-tinta: var(--xp-tinta); --seccion-lavado: var(--xp-lavado); --seccion-hondo: var(--xp-hondo); --sobre-seccion: var(--sobre-xp); } .tk-momento.tono-nivel { --seccion: var(--marca); --seccion-tinta: var(--marca-tinta); --seccion-lavado: var(--marca-lavado); --seccion-hondo: var(--marca-hondo); --sobre-seccion: var(--sobre-marca); } .tk-momento.tono-racha { --seccion: var(--racha); --seccion-tinta: var(--racha-tinta); --seccion-lavado: var(--racha-lavado); --seccion-hondo: var(--racha-hondo); --sobre-seccion: var(--sobre-racha); } .tk-momento.tono-liga { --seccion: var(--premium); --seccion-tinta: var(--premium-tinta); --seccion-lavado: var(--premium-lavado); --seccion-hondo: var(--premium-hondo); --sobre-seccion: var(--sobre-premium); } /* Con el momento abierto la página de debajo no se desplaza: la rueda del ratón movía el resumen por detrás del velo y parecía que la caja flotaba suelta. */ body.tk-mom-abierto { overflow: hidden; } /* ============================================================ 3. La caja ============================================================ */ /* Una tarjeta del sitio: papel, filo de 2 px, radio de 22. La sombra sí, porque es de lo poco que flota de verdad sobre la pantalla. */ .tk-mom-caja { width: min(28rem, 100%); max-height: calc(100dvh - 2 * var(--e-4)); overflow: hidden auto; /* `minmax(0, 1fr)` y no `auto`: con la columna medida por su contenido, un hijo al 100 % se mide contra una pista más ancha que la caja y la caja saca barra horizontal. */ display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--e-3); text-align: center; background: var(--papel); color: var(--tinta); border: 2px solid var(--linea); border-radius: var(--r-xl); padding: var(--e-6) var(--e-5) var(--e-5); box-shadow: var(--sombra-alta); animation: tk-mom-entra .26s ease-out both; } /* El folio de la caja: el mismo rótulo en versalitas con el que abre cada pantalla, y por eso es `.folio` de base.css y no una pieza de aquí. Lo único que cambia es el margen de abajo: allí `.folio` cuelga de una cabecera sin `gap` y trae `margin-bottom: var(--e-3)`, que aquí se SUMA al `gap` de la caja y deja el rótulo suelto, más lejos del icono de lo que se dibujó. */ .tk-mom-caja > .folio { margin-bottom: 0; } /* El icono en su disco lavado, como el nodo del sendero: el color dice qué se celebra antes de leer el titular. */ .tk-mom-icono { width: 4.5rem; height: 4.5rem; border-radius: var(--r-full); display: grid; place-items: center; background: var(--seccion-lavado); color: var(--seccion-tinta); } .tk-mom-icono svg, .tk-mom-icono i[data-ico] { width: 2.25rem; height: 2.25rem; } .tk-mom-anillo { margin-block: var(--e-1); } .tk-mom-titulo { font-size: var(--t-2xl); line-height: 1.12; overflow-wrap: anywhere; } /* 32ch x 0,573 em/ch = 18,3em, la medida corta de la plantilla. */ .tk-mom-texto { color: var(--tinta-2); font-size: var(--t-md); max-width: 18.3em; } /* ---------- las cifras ---------- Son `.cifras` de base.css, en fila y separadas por filetes de 1 px, como la franja de cifras de Enseñar. El mínimo baja a 4,75rem para que tres quepan en fila hasta en 320 px: «+124» en serif a 1,75rem mide menos. */ .tk-mom-cifras { width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.75rem), 1fr)); gap: var(--e-3); margin-block: var(--e-2) 0; padding-block: var(--e-4); border-block: 1px solid var(--linea); --tono: var(--seccion-tinta); } .tk-mom-cifra { text-align: center; min-width: 0; animation: tk-mom-sube .3s ease-out both; } .tk-mom-cifra dd { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); } .tk-mom-cifra dd b { font-weight: inherit; } .tk-mom-de { margin-left: .2em; font-family: var(--texto); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; color: var(--tinta-3); } /* ---------- las insignias ---------- Planas, con su filo fino y el icono en disco. Entran de una en una, cada una con su campana: aparecer todas a la vez convierte tres premios en una lista. */ .tk-mom-insignias { width: 100%; display: grid; gap: var(--e-2); } .tk-mom-insignia { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--e-3); align-items: center; text-align: left; padding: var(--e-3); border-radius: var(--r-md); background: var(--papel); border: 1px solid var(--linea); animation: tk-mom-sube .3s ease-out both; } .tk-mom-ins-ico { width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); display: grid; place-items: center; background: var(--xp-lavado); color: var(--xp-tinta); } .tk-mom-ins-ico svg, .tk-mom-ins-ico i[data-ico] { width: 1.25rem; height: 1.25rem; } .tk-mom-ins-txt { display: grid; gap: 1px; min-width: 0; } .tk-mom-ins-txt b { font-size: var(--t-base); font-weight: 700; } .tk-mom-ins-txt small { font-size: var(--t-sm); color: var(--tinta-2); line-height: 1.4; } /* ---------- los botones ---------- A lo ancho de la caja y uno debajo del otro: dos opciones del mismo peso visual en anchura, y el principal arriba, donde cae el pulgar primero. */ .tk-mom-botones { width: 100%; display: grid; gap: var(--e-3); margin-top: var(--e-2); } .tk-mom-botones .btn { width: 100%; } @media (max-width: 30rem) { .tk-momento { padding: var(--e-3); } .tk-mom-caja { padding: var(--e-5) var(--e-4) var(--e-4); max-height: calc(100dvh - 2 * var(--e-3)); } .tk-mom-titulo { font-size: var(--t-xl); } .tk-mom-icono { width: 3.75rem; height: 3.75rem; } .tk-mom-icono svg, .tk-mom-icono i[data-ico] { width: 1.875rem; height: 1.875rem; } } /* ============================================================ 4. El aro de aciertos ============================================================ */ /* Lo usan el momento, el resumen de la sesión y el final de Mirar. El trazo va en la variante tinta de la sección, no en la viva: el jade vivo sobre la pista daba 2,26:1, por debajo del 3:1 que pide un elemento gráfico, y no se distinguía cuánto llevaba lleno. Es el mismo arreglo que `.progreso`. */ .tk-anillo { position: relative; display: grid; place-items: center; max-width: 100%; } .tk-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); } .tk-anillo-fondo { fill: none; stroke: var(--papel-2); stroke-width: 8; } .tk-anillo-linea { fill: none; stroke: var(--seccion-tinta); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2, .8, .3, 1); } .tk-anillo-txt { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; } .tk-anillo-txt b { font-family: var(--display); font-size: 1.875rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .tk-anillo-txt b small { font-family: var(--texto); font-size: var(--t-sm); font-weight: 600; color: var(--tinta-3); letter-spacing: 0; margin-left: 1px; } .tk-anillo-txt span { margin-top: .3rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); } /* ============================================================ 5. Lo que sube: «+10 XP», «¡Hecha!», «5 seguidas» ============================================================ */ /* Una etiqueta pequeña en su lavado, no un número gigante con resplandor. Sube un palmo y se va. Es un eco de algo que ya está escrito en la pantalla, así que no tiene que competir con ello. */ .tk-flota { position: fixed; z-index: 88; pointer-events: none; transform: translate(-50%, -50%); padding: .1875rem .625rem; border-radius: var(--r-full); font-family: var(--texto); font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--xp-lavado); color: var(--xp-tinta); border: 1px solid color-mix(in srgb, var(--xp) 45%, transparent); animation: tk-flota 1.2s ease-out both; } .tk-flota.acierto { background: var(--acierto-lavado); color: var(--acierto-tinta); border-color: color-mix(in srgb, var(--acierto) 45%, transparent); } .tk-flota.racha { background: var(--racha-lavado); color: var(--racha-tinta); border-color: color-mix(in srgb, var(--racha) 45%, transparent); } /* Al lado del marcador de XP de la columna: nace pegado a la derecha de la cifra, no centrado encima de ella, que la taparía justo cuando sube. */ .tk-flota.tk-flota-lado { transform: translate(0, -50%); animation-name: tk-flota-lado; } /* ============================================================ 6. Movimiento ============================================================ */ @keyframes tk-mom-velo { from { opacity: 0; } to { opacity: 1; } } @keyframes tk-mom-entra { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } } @keyframes tk-mom-sube { from { opacity: 0; transform: translateY(.375rem); } to { opacity: 1; transform: none; } } @keyframes tk-flota { 0% { opacity: 0; transform: translate(-50%, -30%); } 18% { opacity: 1; transform: translate(-50%, -50%); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -180%); } } @keyframes tk-flota-lado { 0% { opacity: 0; transform: translate(0, -20%); } 18% { opacity: 1; transform: translate(0, -50%); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(0, -160%); } } /* Quien pide calma recibe el mismo momento, quieto. `fiesta.js` marca la capa con `.quieto` y además base.css deja las duraciones en nada; las dos cosas juntas porque la marca también llega a quien lo pide desde la aplicación y no desde el sistema. */ .tk-momento.quieto, .tk-momento.quieto * { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .tk-anillo-linea { transition: none; } /* La etiqueta que sube, sin subir: con la duración a cero la animación saltaba a su último fotograma, que es transparente, y el «+10 XP» no se llegaba a ver. Quieta, se lee durante el segundo y pico que vive. */ .tk-flota { animation: none !important; } } @media (forced-colors: active) { .tk-momento { background: Canvas; } .tk-mom-caja, .tk-mom-insignia, .tk-flota { border: 1px solid CanvasText; } .tk-anillo-linea { stroke: Highlight; } } /* La cifra que ya ha terminado de contar (`contarHasta`): se queda con sus cifras de ancho fijo, que es lo que evita que el número baile al llegar. */ .tk-contado { font-variant-numeric: tabular-nums; }