: el router AJAX lo trata como [data-page-content] y lo cuelga de (ver core/page-router.js), asi que ahi dentro var(--ev-accent) no resolvia y el enlace de compra salia en blanco en vez de en cian. */ .ev-main, .ev-modal { /* Acento de la pagina. Cian de marca sobre el azul profundo del sitio; el degradado de los titulares va de ese azul al cian, el mismo gesto que usa .text-gradient en Conocenos. */ --ev-accent: var(--brand-cyan); --ev-accent-deep: #0070d1; --ev-hairline: var(--glass-border); --ev-hairline-strong: color-mix(in srgb, var(--ev-accent) 42%, transparent); --ev-ink: var(--text-main); --ev-body: var(--soft-text); position: relative; isolation: isolate; display: block; } /* ========================================================= CAPITULOS Un viewport por idea, contenido centrado. Igual que .about-chapter en Conocenos. ========================================================= */ .ev-chapter { display: flex; align-items: center; min-height: 100vh; padding: var(--space-8) 5%; } /* El padding superior solo tiene que salvar la navbar (~81px): con el generoso de los demas capitulos, el bloque quedaba tan abajo que la linea de "lo proximo" caia bajo el pliegue, justo el dato mas util de la portada. */ .ev-chapter--cover { position: relative; padding-top: calc(var(--space-6) + 84px); padding-bottom: calc(var(--space-8) + 40px); } /* El reproductor flotante del sitio (components/sticky-player.css) se apoya en el borde inferior de la ventana en cuanto hay scroll, asi que un capitulo de 100vh exacto deja su ultima linea debajo de esa barra. Los capitulos con controles al pie reservan ese alto. */ .ev-chapter--stage { padding-bottom: calc(var(--space-8) + 72px); } .ev-chapter-inner { width: 100%; max-width: 1240px; margin-inline: auto; } /* ========================================================= TIPOGRAFIA EDITORIAL Peso 800, interlineado cerrado y tamanos que dominan su capitulo, en la misma escala que Conocenos (h1 hasta 6.5rem, titulos de seccion hasta 5.5rem). ========================================================= */ .ev-main h1, .ev-main h2, .ev-main h3 { font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; } .ev-cover-title { font-size: clamp(3rem, 8vw, 6.5rem); margin-bottom: var(--space-5); } .ev-section-title { font-size: clamp(2.5rem, 7vw, 5.5rem); margin-bottom: var(--space-6); } /* Relleno degradado del tramo acentuado del titular. */ .ev-gradient { background: linear-gradient(96deg, var(--ev-accent-deep), var(--ev-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ev-kicker { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ev-accent); } .ev-badge { display: inline-flex; align-items: center; margin-bottom: var(--space-5); padding: 8px var(--space-4); border: 1px solid var(--ev-hairline-strong); border-radius: var(--radius-full); background: color-mix(in srgb, var(--ev-accent-deep) 16%, transparent); color: var(--ev-ink); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .ev-note { padding-block: var(--space-7); font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ev-body); } .ev-note[hidden] { display: none; } /* ========================================================= ENLACES Sin pildoras ni botones rellenos en el cuerpo de la pagina: texto grande con una linea que se dibuja de izquierda a derecha. El unico relleno solido queda para el enlace "fuerte" de compra. ========================================================= */ .ev-link { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; font-family: var(--font-body); font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; color: var(--ev-ink); text-decoration: none; cursor: pointer; transition: color var(--duration-base) var(--ease-out); } .ev-link i, .ev-link svg { width: 1em; height: 1em; flex: none; stroke: currentColor; transition: transform var(--duration-base) var(--ease-out); } /* La linea vive en un ::after con transform-origin conmutado, para que entre por la izquierda y salga por la derecha en vez de encogerse hacia el mismo lado por el que entro. */ .ev-link::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--duration-slow) var(--ease-out); } @media (hover: hover) and (pointer: fine) { .ev-link:hover { color: var(--ev-accent); } .ev-link:hover::after { transform: scaleX(1); transform-origin: left center; } .ev-link:hover i, .ev-link:hover svg { transform: translate(3px, -3px); } } .ev-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .ev-link--strong { color: var(--ev-accent); } .ev-link--xl { font-size: clamp(1.25rem, 2.6vw, 1.85rem); } @media (prefers-reduced-motion: reduce) { .ev-link, .ev-link::after, .ev-link i, .ev-link svg { transition: none; } } /* ========================================================= APARICION POR SCROLL Mismo mecanismo que Conocenos: estado oculto en el elemento y .is-visible que lo revierte, con transition (no animation) para que el gesto sea REVERSIBLE cuando el bloque vuelve a salir del area de disparo al subir. El observador correspondiente (RadioDoliv.utils .observeReveal con once:false) esta en assets/js/pages/eventos.js. Se define aqui, con mas especificidad que el [data-reveal] global de base/animations.css, porque aquel entra desde 56px en 1s y no se revierte. El gesto por defecto sigue siendo LATERAL (el texto llega desde la izquierda, lo visual desde la derecha via [data-reveal-from="right"]), pero repetirlo en cada bloque de la pagina la aplana: todo entra igual y el ojo deja de notar la entrada. [data-reveal-type] permite variar el gesto elemento por elemento sin tocar el mecanismo (mismo .is-visible, misma reversibilidad): - "fade" → solo opacidad, sin desplazamiento. Para lo pequeno (kickers, badges, listas de confianza) donde un slide se siente exagerado. - "up" → fade-up vertical clasico, para parrafos de cuerpo. - "zoom" → escala desde 0.92, para el cartel del escenario y los enlaces fuertes: se siente como que el elemento se acerca. - "text" → barrido de izquierda a derecha con clip-path, pensado para titulares (h1/h2): el texto se "escribe" en vez de deslizar como un bloque. Sin data-reveal-type, el elemento usa el slide lateral de siempre. ========================================================= */ .ev-main [data-reveal] > *, .ev-main [data-reveal-item] { --reveal-shift: -56px; opacity: 0; transform: translate3d(var(--reveal-shift), 0, 0); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } /* Lo visual entra por el lado contrario, y desde algo mas lejos: es un bloque mucho mas grande que una linea de texto y con el mismo recorrido el gesto casi no se percibe. */ .ev-main [data-reveal-from="right"] { --reveal-shift: 76px; } .ev-main [data-reveal-type="fade"] { transform: none; } .ev-main [data-reveal-type="up"] { transform: translate3d(0, 48px, 0); } .ev-main [data-reveal-type="zoom"] { transform: scale(0.92); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } /* El barrido usa clip-path en un span INTERNO (.ev-reveal-sweep), nunca en el elemento que observa el IntersectionObserver. Ponerlo en el propio h1/h2 (como en el primer intento) deja su area visible en cero mientras esta oculto, y Chrome deja de reportarlo como intersectante: el titulo nunca dispara el cambio a .is-visible que lo revelaria, y se queda invisible para siempre. Por eso el elemento observado solo se desvanece (opacity) y quien barre es el span hijo. */ .ev-main [data-reveal-type="text"] { transform: none; } .ev-main [data-reveal-type="text"] .ev-reveal-sweep { display: block; clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-out); } .ev-main [data-reveal].is-visible > *, .ev-main [data-reveal-item].is-visible { opacity: 1; transform: none; transition-delay: calc(var(--row, 0) * 80ms); } .ev-main [data-reveal-item].is-visible .ev-reveal-sweep { clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .ev-main [data-reveal] > *, .ev-main [data-reveal-item] { opacity: 1; transform: none; transition: none; } .ev-main .ev-reveal-sweep { clip-path: none; transition: none; } } /* ========================================================= CAPA AMBIENTAL Canvas a pantalla completa DETRAS de todo (lo crea y lo destruye assets/js/pages/eventos.js, igual que Conocenos hace con su globo: sin HTML nuevo en el PHP). Pinta focos de luz difusos tenidos con los colores dominantes del cartel activo, y se mueve con el scroll. Aqui solo vive su posicionamiento y la vineta que protege el contraste del texto: los colores no pueden estar en CSS porque se muestrean del propio cartel en tiempo de ejecucion. ========================================================= */ #ev-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Tenue a proposito: es una insinuacion detras del texto, no una imagen de fondo. Mismo criterio que el globo de Conocenos, que vive a opacity 0.5. */ opacity: 0.55; transition: opacity 600ms var(--ease-out); } body.light-theme #ev-ambient { /* Sobre fondo claro los mismos focos tapan el texto mucho antes. */ opacity: 0.28; } #ev-ambient canvas { display: block; width: 100%; height: 100%; } /* Vineta: mantiene los titulares como lo mas luminoso de la pantalla por encima de las luces. Mismo recurso que usa Conocenos sobre el globo. */ html[data-page="eventos"] .ev-main::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 92% 72% at 50% 45%, transparent 34%, rgba(3, 7, 18, 0.78) 100%); } html[data-page="eventos"] body.light-theme .ev-main::after { background: radial-gradient(ellipse 100% 80% at 50% 45%, transparent 55%, rgba(15, 23, 42, 0.12) 100%); } /* ========================================================= Mobile ========================================================= */ @media (max-width: 900px) { .ev-chapter { min-height: auto; padding-block: var(--space-8); } .ev-chapter--cover { min-height: 100vh; padding-top: calc(var(--space-7) + 96px); } }