Solar Landing Kit 1.1

Reglas para cada landing

  1. 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.
  2. 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.
  3. 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.
  4. Sin atributos style="" ni manejadores on…= en el HTML. En una maqueta, el CSS de la landing va en un archivo; en Elementor, en un <style> dentro del bloque.
  5. 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.
  6. Lo que el tema de cada WordPress agrega a la página va en sitios/<sitio>.css, no en la landing.
  7. 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.
  8. Formularios, logins y contenido variable no van en la landing: se enlazan.
  9. Contenido de terceros solo como enlace o como iframe que se carga al hacer clic. Enlaces con target="_blank" siempre con rel="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.

ArchivoQué esCuándo cambia
kit-1.1.jsLos 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.cssAislamiento 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.cssArchivo, Hanken Grotesk y Geist Mono, con sus .woff2 (opcional).Al sumar una tipografía
sitios/<sitio>.cssLo 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.

Uno
Dos
Tres
Clip
Clip

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

AtributoDóndePara qué
data-ccs-revealCualquier bloqueAparece subiendo al entrar en pantalla.
data-ccs-reveal="clip"Bloques con fondoSe descubre de abajo hacia arriba.
--ccs-radiusCSS del bloqueRadio de los bordes para la variante clip.
data-ccs-inviewCualquier elementoSolo 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

AtributoDóndePara qué
data-ccs-linesTitularAnima sus líneas al entrar en pantalla.
data-ccs-lines="load"Titular de portadaAnima sus líneas al cargar.
class="ccs-ln"Cada líneaContiene 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

AtributoDóndePara qué
data-ccs-wordfillPárrafo de texto planoDivide en palabras y las rellena con el scroll.
data-ccs-highlightMismo párrafoPalabras a destacar, separadas por coma.
data-ccs-highlight-classMismo párrafoClase 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

AtributoDóndePara qué
data-ccs-pin="180"La secciónAlto total en svh mientras está fija (180 = 1,8 pantallas).
data-ccs-pin-stageContenedor internoLo que queda fijo (100 svh).
data-ccs-wipe-originUna palabraCentro desde donde se abre el círculo.
data-ccs-wipeCapa internaLo que descubre el círculo. Si lleva data-ccs-wordfill, se rellena con el avance.
data-ccs-cueIndicador de scrollSe 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

AtributoDóndePara qué
data-ccs-marqueeContenedorRecorta la cinta.
data-ccs-marquee-trackFila internaLos elementos que avanzan.
data-ccs-speedContenedor (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

1
2
3
4
5
6

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

AtributoDóndePara qué
data-ccs-hscrollLa secciónReserva el alto necesario para el recorrido.
data-ccs-hscroll-stageContenedor internoQueda fijo mientras la franja avanza.
data-ccs-hscroll-trackLa filaLas 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.

Sala 1
Sala 2
Sala 3

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

AtributoDóndePara qué
data-ccs-stackContenedorAgrupa las tarjetas.
data-ccs-stack-itemCada tarjetaQueda fija; el kit le asigna --ccs-i (0, 1, 2...).
--ccs-stack-topCSS (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

0 días
00 horas
00 minutos

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

AtributoDóndePara qué
data-ccs-countdownContenedorFecha y hora de inicio, con zona horaria (-03:00 o -04:00 en Chile).
data-ccs-countdown-endContenedor (opcional)Fecha de término: hasta ahí dice "Es hoy".
data-ccs-cd="days|hours|minutes"NúmerosSe actualizan cada 20 segundos.
data-ccs-cd-labelEtiquetasSingular y plural con data-one y data-many.
data-ccs-cd-statusTexto de estadoUsa data-many ({n} es el número), data-one, data-today y data-past.
data-ccs-cd-hide-afterRelojSe 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

AtributoDóndePara qué
data-ccs-youtubeEnlace al videoID del video (11 caracteres).
data-ccs-titleMismo enlaceTí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

AtributoDóndePara qué
data-ccs-videovideo (con id)Lo reproduce el kit; siempre sin sonido.
data-ccs-gapMismo video (opcional)Milisegundos de pausa antes de repetir; 0 = loop continuo.
data-ccs-video-toggleBotónPausa y reanuda; aria-controls apunta al id del video.
data-ccs-pausedMismo botónLo 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

AtributoDóndePara qué
data-ccs-magneticBotón o enlaceLo 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

AtributoDóndePara qué
data-ccs-wordsTitular de texto planoSepara las palabras y las anima al entrar en pantalla.
data-ccs-words="load"Titular de portadaLas 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

AtributoDóndePara qué
data-ccs-scrambleTexto corto, sin etiquetas dentroSe descifra al entrar en pantalla. Valor opcional: duración en ms (900 por defecto).
data-ccs-scramble-hoverMismo 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.

+1.200asistentes
32speakers
4,8nota promedio

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

AtributoDóndePara qué
data-ccs-countElemento con la cifra finalCuenta 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

AtributoDóndePara qué
data-ccs-cursor="Ver"Enlace o tarjetaMuestra el círculo con ese texto mientras el mouse está encima.
--ccs-cursor-bg, --ccs-cursor-fgCSS 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

AtributoDóndePara qué
data-ccs-pause="hover"Contenedor de la marquesinaDetiene la cinta con el mouse encima o con el foco del teclado.
class="ccs-sr"Texto del enlaceEl 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.

Sección oscura
Sección clara

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

AtributoDóndePara qué
data-ccs-theme="oscuro"Cada secciónNombre del tono de esa sección (cualquier palabra).
data-ccs-onHeader (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.

Mañana
Almuerzo
Tarde

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

AtributoDóndePara qué
data-ccs-spyNavegación con enlaces #Marca el enlace de la sección que está a 40 % de la pantalla.
data-ccs-stickyCualquier columnaQueda 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
Sala B
Sala C

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

AtributoDóndePara qué
data-ccs-swapContenedorAgrupa imágenes y textos.
data-ccs-swap-mediaColumna de imágenesCada hijo es una imagen; se superponen y cambian con un fundido. Fija desde 900 px.
data-ccs-swap-stepCada textoEl 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

AtributoDóndePara qué
data-ccs-tabsContenedorAgrupa pestañas y paneles.
data-ccs-tablistFila de pestañasEl kit le pone role="tablist". Se oculta si no hay JS.
data-ccs-tab + aria-controlsCada botónaria-controls apunta al id de su panel. Para abrir otra pestaña al inicio: aria-selected="true".
.ccs-activePestañ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

AtributoDóndePara qué
data-ccs-lightbox="youtube"Enlace a youtube.comAbre el video con youtube-nocookie.com.
data-ccs-lightbox="video"Enlace a un .mp4Abre el video de la biblioteca de medios con controles.
data-ccs-lightbox="image"Enlace a una imagenAbre la imagen grande.
data-ccs-titleMismo enlaceNombre accesible de la ventana (y alt de la imagen).
data-ccs-label-closeMismo 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

AtributoDóndePara qué
details[data-ccs-more]Elemento detailsAbre 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.

round-bottom
arc-bottom
notch-bottom

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

AtributoDóndePara qué
data-ccs-shapeSección con fondoround, round-top, round-bottom, arc-top, arc-bottom, notch-top, notch-bottom.
--ccs-shape-r, --ccs-shape-h, --ccs-notchCSS (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

AtributoDóndePara qué
data-ccs-edge="top|bottom"Div vacío con 3 spanFranja fija con tres capas de desenfoque.
--ccs-edge-hCSS (opcional)Alto de la franja (150 px; 96 px en celular).
--ccs-edge-bgCSS (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.

fade
rise
zoom-in
tilt
slide-left
slide-right
parallax
zoom-out

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

AtributoDóndePara qué
data-ccs-scrollCualquier bloquefade, 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

AtributoDóndePara qué
.ccs-jshtmlEl JS cargó.
.ccs-motionhtmlHay JS y la persona no pidió reducir movimiento. Toda animación propia debe ir bajo esta clase.
.ccs-calmhtmlLa persona pidió reducir movimiento: sin animaciones.
.ccs-widehtmlEfectos de pantalla grande activos (900 × 640 px o más, con movimiento).
.ccs-inElementos observadosEl elemento ya entró en pantalla.
--ccs-gp#ccs-landingAvance del scroll de 0 a 1, por ejemplo para mover un degradado.
--ccs-hdr#ccs-landingAlto del header (76 px por defecto).
--ccs-iTarjetas apiladas y palabrasPosición de la tarjeta en la pila o de la palabra en el titular.
.ccs-onCursor, imagen y texto activosLo que está activo en ese momento.
.ccs-activePestaña y enlace del menúLa pestaña elegida o la sección que se está leyendo.
data-ccs-onHeaderTono de la sección que está detrás (data-ccs-theme).