Solar Landing KitCatálogo 1.1
Componentes para armar landings con animaciones, sin funcionalidades y sin código de terceros. Cada componente se activa con atributos en el HTML; la landing solo pone el contenido y su aspecto.
Reglas para cada landing
- Todo el contenido va dentro de
<div id="ccs-landing">, y todo el CSS de la landing empieza con#ccs-landing. Así funciona igual en una maqueta suelta o dentro de una página de WordPress con Elementor. - Las variables propias de la landing llevan el prefijo
--lp-. Las del kit usan--ccs-. Así no chocan con Elementor, que usa nombres como--display. - Ninguna landing trae JavaScript propio, librerías ni archivos desde CDN. Si un efecto no está en el kit, se agrega al kit en una versión nueva y se audita.
- Sin atributos
style=""ni manejadoreson…=en el HTML. En una maqueta, el CSS de la landing va en un archivo; en Elementor, en un<style>dentro del bloque. - Las animaciones propias en CSS van bajo
.ccs-motion(o dentro de@media (prefers-reduced-motion:no-preference)), para respetar a quienes piden reducir movimiento. - Lo que el tema de cada WordPress agrega a la página va en
sitios/<sitio>.css, no en la landing. - Tipografías: de preferencia las de la CCS que trae el kit (
fonts/fuentes-ccs.css), o desde Google Fonts, que está aprobado. Ningún otro CDN. - Formularios, logins y contenido variable no van en la landing: se enlazan.
- Contenido de terceros solo como enlace o como iframe que se carga al hacer clic. Enlaces con
target="_blank"siempre conrel="noopener".
Archivos del kit
El kit es igual para todos los sitios y es lo que audita Seguridad. Lo que cambia de un WordPress a otro va aparte, solo en CSS.
| Archivo | Qué es | Cuándo cambia |
|---|---|---|
kit-1.1.js | Los comportamientos: animaciones, cuenta regresiva, pestañas, ventana, etc. Sin dependencias ni conexiones de red. | En cada versión del kit (se audita) |
kit-1.1.css | Aislamiento de la landing, separación común de Elementor (contenedor, margen, sello de reCAPTCHA) y la mecánica de los efectos, incluidas las animaciones solo con CSS. | En cada versión del kit |
fonts/fuentes-ccs.css | Archivo, Hanken Grotesk y Geist Mono, con sus .woff2 (opcional). | Al sumar una tipografía |
sitios/<sitio>.css | Lo que agrega el tema de un WordPress en particular. Parte de sitios/plantilla.css. | Una vez por sitio |
plantilla/ | Una landing base lista para copiar y el bloque de prueba para revisar un sitio nuevo. | Con el kit |
kit-1.0.* | La versión anterior. Se mantiene para no romper las landings publicadas. | No cambia |
Estructura de cada landing
El kit se carga primero (CSS y JS), luego el CSS propio de la landing y después el contenido dentro de #ccs-landing. El script del kit va arriba, en el <head> o al comienzo del bloque, para que las animaciones no parpadeen al cargar. En una maqueta de utiliza.me el CSS de la landing va en un archivo de assets/css/; en una página de Elementor va en un <style> dentro del mismo bloque HTML.
Código
<!-- Maqueta en utiliza.me: public_html/<carpeta>/index.html -->
<head>
<link rel="preload" href="/solar/patrones/landings/kit/fonts/archivo-latin-wdth-normal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/solar/patrones/landings/kit/fonts/fuentes-ccs.css">
<link rel="stylesheet" href="/solar/patrones/landings/kit/kit-1.1.css">
<link rel="stylesheet" href="/solar/patrones/landings/kit/sitios/<sitio>.css"> <!-- solo si el sitio lo necesita -->
<link rel="stylesheet" href="assets/css/landing.css?v=20261029-1">
<script src="/solar/patrones/landings/kit/kit-1.1.js"></script>
</head>
<body>
<div id="ccs-landing">
... secciones de la landing ...
</div>
</body>
/* assets/css/landing.css: todo bajo #ccs-landing y con variables --lp-* */
#ccs-landing{--lp-ink:#0E1116;--lp-fondo:#fff;background:var(--lp-fondo);color:var(--lp-ink);font-family:system-ui,sans-serif}
#ccs-landing .titulo{font-family:'Archivo',sans-serif;font-size:clamp(2.4rem,8vw,7rem)}Aparición al hacer scroll
El bloque sube y aparece cuando entra en pantalla. Los bloques hermanos aparecen en cascada. La variante clip lo descubre de abajo hacia arriba; si tiene bordes redondeados, se indica el radio con --ccs-radius.
Código
<div class="g3">
<div class="box" data-ccs-reveal>Uno</div>
<div class="box" data-ccs-reveal>Dos</div>
<div class="box" data-ccs-reveal>Tres</div>
</div>
<div class="g2 mt">
<div class="box negro r28" data-ccs-reveal="clip">Clip</div>
<div class="box negro r28" data-ccs-reveal="clip">Clip</div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-reveal | Cualquier bloque | Aparece subiendo al entrar en pantalla. |
data-ccs-reveal="clip" | Bloques con fondo | Se descubre de abajo hacia arriba. |
--ccs-radius | CSS del bloque | Radio de los bordes para la variante clip. |
data-ccs-inview | Cualquier elemento | Solo agrega la clase .ccs-in al entrar en pantalla, para animaciones propias de la landing. |
Titulares línea a línea
Cada línea del titular sube desde abajo, con un pequeño desfase entre líneas. Cada línea va en su propio span.ccs-ln. Con data-ccs-lines="load" la animación corre al cargar la página, para el titular de la portada.
El próximo cliente no hace clic
Código
<h2 class="tt" data-ccs-lines>
<span class="ccs-ln"><span>El próximo cliente</span></span>
<span class="ccs-ln"><span>no hace clic</span></span>
</h2>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-lines | Titular | Anima sus líneas al entrar en pantalla. |
data-ccs-lines="load" | Titular de portada | Anima sus líneas al cargar. |
class="ccs-ln" | Cada línea | Contiene un span interno con el texto. |
Texto que se rellena palabra por palabra
Las palabras pasan de tenues a sólidas a medida que el párrafo avanza por la pantalla. Se pueden destacar palabras con una clase de la landing (por ejemplo, un degradado).
Un día con quienes ya operan el comercio agéntico, el live shopping y el retail media en Chile.
Código
<p class="frase" data-ccs-wordfill data-ccs-highlight="agéntico,shopping" data-ccs-highlight-class="destacada">
Un día con quienes ya operan el comercio agéntico, el live shopping y el retail media en Chile.
</p>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-wordfill | Párrafo de texto plano | Divide en palabras y las rellena con el scroll. |
data-ccs-highlight | Mismo párrafo | Palabras a destacar, separadas por coma. |
data-ccs-highlight-class | Mismo párrafo | Clase que reciben esas palabras (por defecto ccs-hl). |
Portada fija con apertura circular
La portada queda fija mientras la página baja, y un círculo se abre desde una palabra hasta cubrir la pantalla con un segundo mensaje. Solo en pantallas de 900 × 640 px o más; en celular la portada se ve normal.
La portada queda fija y se abre desde el punto.
Baja ↓Código
<section class="pin" data-ccs-pin="180">
<div class="pin-stage" data-ccs-pin-stage>
<p class="tt">La portada queda fija y se abre desde el <em data-ccs-wipe-origin>punto</em>.</p>
<a class="cue" href="#marquesina" data-ccs-cue>Baja ↓</a>
<div class="pin-wipe" data-ccs-wipe aria-hidden="true">
<p class="frase" data-ccs-wordfill>Este segundo mensaje se lee mientras el círculo cubre la pantalla.</p>
</div>
</div>
</section>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-pin="180" | La sección | Alto total en svh mientras está fija (180 = 1,8 pantallas). |
data-ccs-pin-stage | Contenedor interno | Lo que queda fijo (100 svh). |
data-ccs-wipe-origin | Una palabra | Centro desde donde se abre el círculo. |
data-ccs-wipe | Capa interna | Lo que descubre el círculo. Si lleva data-ccs-wordfill, se rellena con el avance. |
data-ccs-cue | Indicador de scroll | Se oculta al empezar a bajar. |
Marquesina
Una cinta de texto que avanza sola y acelera con la velocidad del scroll. El kit duplica los elementos para que la cinta no se corte; no hace falta repetirlos.
Código
<div class="marq" data-ccs-marquee aria-hidden="true">
<div data-ccs-marquee-track>
<span>Ecommerce Innovation Summit XI /</span>
<span>15 de octubre /</span>
<span>Centro Parque /</span>
</div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-marquee | Contenedor | Recorta la cinta. |
data-ccs-marquee-track | Fila interna | Los elementos que avanzan. |
data-ccs-speed | Contenedor (opcional) | Velocidad base; por defecto 1.1. |
Franja horizontal
Una fila de tarjetas que se desplaza hacia el lado mientras la página baja. En celular se convierte en un carrusel que se desliza con el dedo.
Además, en paralelo
Código
<section data-ccs-hscroll>
<div data-ccs-hscroll-stage>
<h2 class="tt sm">Además, en paralelo</h2>
<div class="track" data-ccs-hscroll-track tabindex="0" role="region" aria-label="Actividades">
<article class="box">1</article><article class="box">2</article><article class="box">3</article>
<article class="box">4</article><article class="box">5</article><article class="box">6</article>
</div>
</div>
</section>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-hscroll | La sección | Reserva el alto necesario para el recorrido. |
data-ccs-hscroll-stage | Contenedor interno | Queda fijo mientras la franja avanza. |
data-ccs-hscroll-track | La fila | Las tarjetas que se desplazan. |
Tarjetas apiladas
Cada tarjeta queda fija bajo el header y la siguiente se le monta encima; la de atrás se achica levemente. Solo en pantalla grande.
Código
<div data-ccs-stack>
<article class="box negro r28 alta" data-ccs-stack-item>Sala 1</article>
<article class="box gris r28 alta" data-ccs-stack-item>Sala 2</article>
<article class="box negro r28 alta" data-ccs-stack-item>Sala 3</article>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-stack | Contenedor | Agrupa las tarjetas. |
data-ccs-stack-item | Cada tarjeta | Queda fija; el kit le asigna --ccs-i (0, 1, 2...). |
--ccs-stack-top | CSS (opcional) | Distancia desde arriba; por defecto el alto del header más 8 px. |
Cuenta regresiva
Muestra días, horas y minutos hasta una fecha. Cuando la fecha llega, oculta el reloj y cambia el texto de estado. Los textos van en el HTML, así que se pueden escribir en cualquier tono.
Faltan
Código
<div data-ccs-countdown="2027-01-15T09:00:00-03:00" data-ccs-countdown-end="2027-01-15T18:00:00-03:00">
<p class="mono" data-ccs-cd-status data-many="Quedan {n} días" data-one="Queda 1 día" data-today="Es hoy" data-past="Gracias por acompañarnos">Faltan</p>
<div class="reloj" data-ccs-cd-hide-after role="timer" aria-live="off">
<div><b data-ccs-cd="days">0</b> <span data-ccs-cd-label="days" data-one="día" data-many="días">días</span></div>
<div><b data-ccs-cd="hours">00</b> <span data-ccs-cd-label="hours" data-one="hora" data-many="horas">horas</span></div>
<div><b data-ccs-cd="minutes">00</b> <span data-ccs-cd-label="minutes" data-one="minuto" data-many="minutos">minutos</span></div>
</div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-countdown | Contenedor | Fecha y hora de inicio, con zona horaria (-03:00 o -04:00 en Chile). |
data-ccs-countdown-end | Contenedor (opcional) | Fecha de término: hasta ahí dice "Es hoy". |
data-ccs-cd="days|hours|minutes" | Números | Se actualizan cada 20 segundos. |
data-ccs-cd-label | Etiquetas | Singular y plural con data-one y data-many. |
data-ccs-cd-status | Texto de estado | Usa data-many ({n} es el número), data-one, data-today y data-past. |
data-ccs-cd-hide-after | Reloj | Se oculta cuando llega la fecha. |
Videos de YouTube al hacer clic
Se muestra la miniatura y YouTube no carga nada hasta que la persona hace clic. Al hacer clic se reemplaza por el reproductor de youtube-nocookie.com. El kit solo acepta IDs válidos de YouTube.
Código
<a class="yt" href="https://www.youtube.com/watch?v=dGf1n42C0q0" data-ccs-youtube="dGf1n42C0q0" data-ccs-title="Ecommerce Innovation Summit 2025" target="_blank" rel="noopener">
<img src="https://i.ytimg.com/vi/dGf1n42C0q0/hqdefault.jpg" alt="" width="480" height="360" loading="lazy">
<span class="play">▶</span>
</a>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-youtube | Enlace al video | ID del video (11 caracteres). |
data-ccs-title | Mismo enlace | Título accesible del reproductor. |
Video de fondo con pausa
Video sin sonido que corre una vez, se detiene suavemente en el último cuadro y espera antes de repetir. El botón permite pausarlo, como exige la accesibilidad para animaciones de más de 5 segundos. Con "reducir movimiento" no se reproduce.
Código
<div class="vbox">
<video id="demo-video" data-ccs-video data-ccs-gap="4000" muted playsinline preload="metadata" poster="assets/video/figura-poster.jpg">
<source src="assets/video/figura.webm" type="video/webm">
<source src="assets/video/figura.mp4" type="video/mp4">
</video>
<button class="pausa" type="button" data-ccs-video-toggle aria-controls="demo-video" data-ccs-label-pause="Pausar video" data-ccs-label-play="Reproducir video">❚❚</button>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-video | video (con id) | Lo reproduce el kit; siempre sin sonido. |
data-ccs-gap | Mismo video (opcional) | Milisegundos de pausa antes de repetir; 0 = loop continuo. |
data-ccs-video-toggle | Botón | Pausa y reanuda; aria-controls apunta al id del video. |
data-ccs-paused | Mismo botón | Lo pone el kit ("true" o "false") para cambiar el ícono con CSS. |
Botón magnético
El botón sigue levemente al cursor. Solo en computadores con mouse.
Código
<a class="btn" href="#estructura" data-ccs-magnetic>Compra tu entrada</a>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-magnetic | Botón o enlace | Lo desplaza hacia el cursor. |
Nuevo en 1.1
Titular palabra por palabra
Cada palabra del titular sube desde abajo, una tras otra. El kit separa las palabras: el titular se escribe como texto plano. Con data-ccs-words="load" corre al cargar, para la portada.
Comercio que se adelanta al cliente
Código
<h2 class="tt" data-ccs-words>Comercio que se adelanta al cliente</h2>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-words | Titular de texto plano | Separa las palabras y las anima al entrar en pantalla. |
data-ccs-words="load" | Titular de portada | Las anima al cargar. |
Nuevo en 1.1
Texto que se descifra
Las letras pasan por caracteres al azar hasta quedar en el texto real, como un letrero que se descifra. Sirve para antetítulos, fechas o cifras cortas. Los lectores de pantalla leen el texto real desde el principio.
15 de octubre · Centro Parque
Pasa el mouse para repetir
Código
<p class="mono grande" data-ccs-scramble>15 de octubre · Centro Parque</p>
<p class="mono grande mt" data-ccs-scramble="1400" data-ccs-scramble-hover>Pasa el mouse para repetir</p>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-scramble | Texto corto, sin etiquetas dentro | Se descifra al entrar en pantalla. Valor opcional: duración en ms (900 por defecto). |
data-ccs-scramble-hover | Mismo elemento (opcional) | Se repite al pasar el mouse. |
Nuevo en 1.1
Contador de cifras
La cifra cuenta desde cero cuando entra en pantalla. Se escribe el número final tal cual: el kit toma la primera cifra del texto y respeta lo que va antes y después ("$", "+", "%"). Formato de Chile: punto para miles y coma para decimales.
Código
<div class="g3 cifras">
<div><b data-ccs-count>+1.200</b><span>asistentes</span></div>
<div><b data-ccs-count>32</b><span>speakers</span></div>
<div><b data-ccs-count="2200">4,8</b><span>nota promedio</span></div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-count | Elemento con la cifra final | Cuenta desde 0. Valor opcional: duración en ms (1600 por defecto). |
Nuevo en 1.1
Cursor con etiqueta
Al pasar el mouse sobre una tarjeta, aparece un círculo que sigue al cursor con una palabra ("Ver", "Play"). Solo en computadores con mouse. Colores con --ccs-cursor-bg y --ccs-cursor-fg.
Código
<div class="g3">
<a class="box" href="#cursor" data-ccs-cursor="Ver">Speaker 1</a>
<a class="box" href="#cursor" data-ccs-cursor="Ver">Speaker 2</a>
<a class="box negro" href="#cursor" data-ccs-cursor="Play">Video</a>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-cursor="Ver" | Enlace o tarjeta | Muestra el círculo con ese texto mientras el mouse está encima. |
--ccs-cursor-bg, --ccs-cursor-fg | CSS de la landing (opcional) | Fondo y color del texto del círculo. |
Nuevo en 1.1
CTA gigante en marquesina
Un llamado a la acción enorme que avanza como cinta, para el cierre de la landing. Con data-ccs-pause="hover" la cinta se detiene al pasar el mouse o al llegar con el teclado, lo que sirve también en cualquier marquesina de logos.
Código
<a class="cta-big" href="#cta-gigante">
<span class="ccs-sr">Compra tu entrada</span>
<span data-ccs-marquee data-ccs-pause="hover" data-ccs-speed="1.6" aria-hidden="true">
<span data-ccs-marquee-track><span>Compra tu entrada →</span><span>15 de octubre →</span></span>
</span>
</a>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-pause="hover" | Contenedor de la marquesina | Detiene la cinta con el mouse encima o con el foco del teclado. |
class="ccs-sr" | Texto del enlace | El texto que leen los lectores de pantalla; la cinta va con aria-hidden. |
Nuevo en 1.1
Header que cambia según la sección
El header cambia de colores según la sección que tiene detrás: oscuro sobre fondos oscuros y claro sobre fondos claros. Cada sección declara su tono y el kit se lo pasa al header en data-ccs-on; los colores los define la landing. Este catálogo lo usa: baja hasta una sección negra y mira el header.
Código
<header class="hdr" data-ccs-header="reveal">...</header>
<section data-ccs-theme="oscuro">...</section>
<section data-ccs-theme="claro">...</section>
/* CSS de la landing */
#ccs-landing .hdr[data-ccs-on="oscuro"]{background:#0B0B0C;color:#fff;border-color:#0B0B0C}Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-theme="oscuro" | Cada sección | Nombre del tono de esa sección (cualquier palabra). |
data-ccs-on | Header (lo pone el kit) | Tono de la sección que está detrás del header. |
Nuevo en 1.1
Menú que marca la sección activa
Un índice lateral fijo marca la sección que se está leyendo. Sirve para programas por bloques o landings largas. El enlace activo recibe .ccs-active y aria-current. data-ccs-sticky deja fijo el índice desde 900 px.
Código
<div class="spy">
<nav data-ccs-sticky data-ccs-spy aria-label="Bloques del programa">
<a href="#bloque-1">Mañana</a><a href="#bloque-2">Almuerzo</a><a href="#bloque-3">Tarde</a>
</nav>
<div>
<article class="box alta" id="bloque-1">Mañana</article>
<article class="box alta" id="bloque-2">Almuerzo</article>
<article class="box alta" id="bloque-3">Tarde</article>
</div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-spy | Navegación con enlaces # | Marca el enlace de la sección que está a 40 % de la pantalla. |
data-ccs-sticky | Cualquier columna | Queda fija bajo el header desde 900 px (solo CSS). Distancia extra con --ccs-sticky-gap. |
Nuevo en 1.1
Imagen fija que cambia con el texto
La imagen queda fija mientras pasan los textos, y cambia cuando cada texto llega a la mitad de la pantalla. Los textos inactivos se ven tenues (--ccs-swap-dim). El orden de las imágenes corresponde al de los textos.
Sala A
Comercio agéntico y nuevos medios de pago.
Sala B
Live shopping y contenido que vende.
Sala C
Retail media y datos propios.
Código
<div class="swap" data-ccs-swap>
<div class="swap-media" data-ccs-swap-media>
<div class="box negro">Sala A</div><div class="box gris">Sala B</div><div class="box acento">Sala C</div>
</div>
<div>
<article class="paso" data-ccs-swap-step><h3>Sala A</h3><p>Comercio agéntico y nuevos medios de pago.</p></article>
<article class="paso" data-ccs-swap-step><h3>Sala B</h3><p>Live shopping y contenido que vende.</p></article>
<article class="paso" data-ccs-swap-step><h3>Sala C</h3><p>Retail media y datos propios.</p></article>
</div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-swap | Contenedor | Agrupa imágenes y textos. |
data-ccs-swap-media | Columna de imágenes | Cada hijo es una imagen; se superponen y cambian con un fundido. Fija desde 900 px. |
data-ccs-swap-step | Cada texto | El que pasa la mitad de la pantalla activa su imagen (recibe .ccs-on). |
Nuevo en 1.1
Pestañas
Para el programa por día o por sala, o planes de precio. Se manejan con el mouse y con las flechas del teclado. Sin JavaScript, las pestañas se ocultan y se ven todos los paneles, uno tras otro.
Día 1 · Estrategia
Apertura, plenario y tres salas paralelas.
Día 2 · Operación
Talleres prácticos y casos de éxito.
Día 3 · Futuro
Tendencias y cierre.
Código
<div data-ccs-tabs>
<div class="tabs" data-ccs-tablist aria-label="Programa">
<button data-ccs-tab aria-controls="dia-1">Día 1</button>
<button data-ccs-tab aria-controls="dia-2">Día 2</button>
<button data-ccs-tab aria-controls="dia-3">Día 3</button>
</div>
<div class="panel" id="dia-1"><h3>Día 1 · Estrategia</h3><p>Apertura, plenario y tres salas paralelas.</p></div>
<div class="panel" id="dia-2"><h3>Día 2 · Operación</h3><p>Talleres prácticos y casos de éxito.</p></div>
<div class="panel" id="dia-3"><h3>Día 3 · Futuro</h3><p>Tendencias y cierre.</p></div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-tabs | Contenedor | Agrupa pestañas y paneles. |
data-ccs-tablist | Fila de pestañas | El kit le pone role="tablist". Se oculta si no hay JS. |
data-ccs-tab + aria-controls | Cada botón | aria-controls apunta al id de su panel. Para abrir otra pestaña al inicio: aria-selected="true". |
.ccs-active | Pestaña activa (lo pone el kit) | Para darle estilo; también sirve [aria-selected="true"]. |
Nuevo en 1.1
Video o imagen en ventana
Abre un video, una imagen o un video de YouTube en una ventana sobre la página, sin salir de ella. Se cierra con la ✕, con Escape o haciendo clic fuera, y el foco vuelve al enlace. El enlace funciona igual sin JS. Solo acepta direcciones https o del mismo sitio.
Código
<div class="g3">
<a class="yt" href="https://www.youtube.com/watch?v=dGf1n42C0q0" data-ccs-lightbox="youtube" data-ccs-title="Ecommerce Innovation Summit 2025" data-ccs-cursor="Play" target="_blank" rel="noopener">
<img src="https://i.ytimg.com/vi/dGf1n42C0q0/hqdefault.jpg" alt="" width="480" height="360" loading="lazy"><span class="play">▶</span>
</a>
<a class="yt" href="https://i.ytimg.com/vi/dGf1n42C0q0/maxresdefault.jpg" data-ccs-lightbox="image" data-ccs-title="Foto del evento">
<img src="https://i.ytimg.com/vi/dGf1n42C0q0/hqdefault.jpg" alt="Foto del evento" width="480" height="360" loading="lazy">
</a>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-lightbox="youtube" | Enlace a youtube.com | Abre el video con youtube-nocookie.com. |
data-ccs-lightbox="video" | Enlace a un .mp4 | Abre el video de la biblioteca de medios con controles. |
data-ccs-lightbox="image" | Enlace a una imagen | Abre la imagen grande. |
data-ccs-title | Mismo enlace | Nombre accesible de la ventana (y alt de la imagen). |
data-ccs-label-close | Mismo enlace (opcional) | Texto del botón cerrar; por defecto "Cerrar". |
Nuevo en 1.1
"Ver más" y preguntas frecuentes
Con <details> de HTML, sin JavaScript. El kit le agrega una apertura suave en los navegadores que la permiten; en los demás se abre de golpe.
¿Hay estacionamiento?
Sí, en el subterráneo del centro de eventos, con tarifa preferente para asistentes.
Ver los 32 speakers
Aquí va el resto de la lista, que queda oculta hasta que la persona la pide.
Código
<details class="faq" data-ccs-more>
<summary>¿Hay estacionamiento?</summary>
<p>Sí, en el subterráneo del centro de eventos, con tarifa preferente para asistentes.</p>
</details>
<details class="faq" data-ccs-more>
<summary>Ver los 32 speakers</summary>
<p>Aquí va el resto de la lista, que queda oculta hasta que la persona la pide.</p>
</details>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
details[data-ccs-more] | Elemento details | Abre y cierra con una transición de alto (solo CSS). |
Nuevo en 1.1
Bordes de sección con forma
Esquinas grandes, un borde curvo o una muesca en el centro, para pasar de una sección a otra. Solo CSS.
Código
<div class="g3 formas">
<div class="box negro" data-ccs-shape="round-bottom">round-bottom</div>
<div class="box negro" data-ccs-shape="arc-bottom">arc-bottom</div>
<div class="box negro" data-ccs-shape="notch-bottom">notch-bottom</div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-shape | Sección con fondo | round, round-top, round-bottom, arc-top, arc-bottom, notch-top, notch-bottom. |
--ccs-shape-r, --ccs-shape-h, --ccs-notch | CSS (opcional) | Radio de las esquinas, alto del arco y tamaño de la muesca. |
Nuevo en 1.1
Desenfoque progresivo en el borde
Una franja fija arriba (o abajo) que desenfoca el contenido que pasa por detrás, cada vez más hacia el borde, para que el header se lea sobre cualquier imagen. Solo CSS. Este catálogo la usa arriba. En celulares usa una sola capa para no gastar batería.
Código
<div data-ccs-edge="top" aria-hidden="true"><span></span><span></span><span></span></div>
/* CSS de la landing, si el fondo no es blanco */
#ccs-landing [data-ccs-edge]{--ccs-edge-bg:#0B0B0C}Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-edge="top|bottom" | Div vacío con 3 span | Franja fija con tres capas de desenfoque. |
--ccs-edge-h | CSS (opcional) | Alto de la franja (150 px; 96 px en celular). |
--ccs-edge-bg | CSS (opcional) | Color de fondo de la landing, para el lavado que da contraste. |
Nuevo en 1.1
Animaciones de scroll solo con CSS
Efectos ligados al avance del scroll que no necesitan el JS: el navegador los calcula solo. Funcionan en Chrome, Edge y Safari recientes; en los demás el elemento se ve quieto, sin perder contenido. Para parallax y zoom, el contenedor de la imagen recorta con overflow:clip, no con overflow:hidden: hidden crea un contenedor de scroll y el efecto queda congelado.
Código
<div class="g4">
<div class="box" data-ccs-scroll="fade">fade</div>
<div class="box" data-ccs-scroll="rise">rise</div>
<div class="box" data-ccs-scroll="zoom-in">zoom-in</div>
<div class="box" data-ccs-scroll="tilt">tilt</div>
<div class="box" data-ccs-scroll="slide-left">slide-left</div>
<div class="box" data-ccs-scroll="slide-right">slide-right</div>
</div>
<div class="g2 mt">
<div class="foto"><div class="foto-in" data-ccs-scroll="parallax">parallax</div></div>
<div class="foto"><div class="foto-in" data-ccs-scroll="zoom-out">zoom-out</div></div>
</div>Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
data-ccs-scroll | Cualquier bloque | fade, rise, zoom-in, zoom-out, parallax, slide-left, slide-right, tilt. |
Clases y variables del kit
El kit pone clases en <html> para que el CSS de la landing sepa qué está activo, y variables que la landing puede usar.
Atributos
| Atributo | Dónde | Para qué |
|---|---|---|
.ccs-js | html | El JS cargó. |
.ccs-motion | html | Hay JS y la persona no pidió reducir movimiento. Toda animación propia debe ir bajo esta clase. |
.ccs-calm | html | La persona pidió reducir movimiento: sin animaciones. |
.ccs-wide | html | Efectos de pantalla grande activos (900 × 640 px o más, con movimiento). |
.ccs-in | Elementos observados | El elemento ya entró en pantalla. |
--ccs-gp | #ccs-landing | Avance del scroll de 0 a 1, por ejemplo para mover un degradado. |
--ccs-hdr | #ccs-landing | Alto del header (76 px por defecto). |
--ccs-i | Tarjetas apiladas y palabras | Posición de la tarjeta en la pila o de la palabra en el titular. |
.ccs-on | Cursor, imagen y texto activos | Lo que está activo en ese momento. |
.ccs-active | Pestaña y enlace del menú | La pestaña elegida o la sección que se está leyendo. |
data-ccs-on | Header | Tono de la sección que está detrás (data-ccs-theme). |