/** * Picasso Gallery Transition — Slideshow CSS * Picasso Digital · picassodigital-seo.com * Compatible: Drupal 10/11 · Todos los navegadores modernos * * ENCAPSULACIÓN TOTAL: * - Todos los selectores usan ".pgt-slider" como clase padre. * - Sin CSS globales que afecten otros elementos del proyecto. * - Sin !important innecesarios (el img tiene estilos inline desde el Twig). * - Las variables CSS viven dentro de .pgt-slider, no en :root global. * - El lightbox (.pgt-lb-*) usa prefijo propio y se adjunta al . */ /* ══════════════════════════════════════════════════════════════ CONTENEDOR PRINCIPAL — todas las variables vivien aquí ══════════════════════════════════════════════════════════════ */ .pgt-slider { /* Variables encapsuladas — no contaminan :root global */ --pgt-arrow-size: 44px; --pgt-arrow-bg: rgba(0, 0, 0, 0.45); --pgt-arrow-bg-hover: rgba(0, 0, 0, 0.75); --pgt-arrow-color: #ffffff; --pgt-dot-size: 10px; --pgt-dot-color: rgba(255, 255, 255, 0.5); --pgt-dot-active: #ffffff; --pgt-transition-speed: 700ms; --pgt-counter-bg: rgba(0, 0, 0, 0.4); --pgt-radius: 4px; position: relative; width: 100%; overflow: hidden; background: #ffffff; border-radius: var(--pgt-radius); } /* ── TRACK ───────────────────────────────────────────────────── */ .pgt-slider .pgt-track { position: relative; width: 100%; height: 100%; } /* ── SLIDE (modo clásico: 1 imagen a la vez) ─────────────────── */ .pgt-slider .pgt-slide { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; pointer-events: none; will-change: opacity, transform; } .pgt-slider .pgt-slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; } .pgt-slider .pgt-slide.is-leaving { z-index: 1; } /* * NOTA: El dentro del slide tiene sus estilos aplicados * directamente en el HTML desde el template Twig (inline style). * Esto garantiza la máxima prioridad sin necesitar !important aquí. * Ver: picasso-gallery-transition.html.twig */ /* ══════════════════════════════════════════════════════════════ MODO MULTI-IMAGEN (2 o 3 slides visibles simultáneos) ══════════════════════════════════════════════════════════════ */ .pgt-slider.pgt-mode--multi .pgt-track { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; height: 100%; transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .pgt-slider.pgt-mode--multi .pgt-slide { /* Resetear estilos del modo clásico */ position: relative; inset: auto; flex-shrink: 0; height: 100%; opacity: 1; pointer-events: auto; overflow: hidden; border-radius: 4px; } /* Neutralizar efectos clásicos en modo multi */ .pgt-slider.pgt-mode--multi .pgt-slide { opacity: 1; transform: none; transition: none; animation: none; } .pgt-slider.pgt-mode--multi .pgt-slide.is-active { z-index: auto; opacity: 1; } /* ══════════════════════════════════════════════════════════════ EFECTOS DE TRANSICIÓN (solo modo clásico) ══════════════════════════════════════════════════════════════ */ /* ── FADE ────────────────────────────────────────────────────── */ .pgt-slider.pgt-effect--fade .pgt-slide { transition: opacity var(--pgt-transition-speed) ease-in-out; } .pgt-slider.pgt-effect--fade .pgt-slide.is-active { opacity: 1; } .pgt-slider.pgt-effect--fade .pgt-slide.is-leaving { opacity: 0; } /* ── SLIDE ───────────────────────────────────────────────────── */ .pgt-slider.pgt-effect--slide .pgt-slide { transform: translateX(100%); transition: transform var(--pgt-transition-speed) cubic-bezier(0.4, 0, 0.2, 1), opacity 0ms; opacity: 1; } .pgt-slider.pgt-effect--slide .pgt-slide.is-active { transform: translateX(0); opacity: 1; } .pgt-slider.pgt-effect--slide .pgt-slide.is-leaving { transform: translateX(-100%); opacity: 1; } .pgt-slider.pgt-effect--slide .pgt-slide.direction-prev { transform: translateX(-100%); } .pgt-slider.pgt-effect--slide .pgt-slide.is-active.direction-prev { transform: translateX(0); } .pgt-slider.pgt-effect--slide .pgt-slide.is-leaving.direction-prev { transform: translateX(100%); } /* ── ZOOM ────────────────────────────────────────────────────── */ .pgt-slider.pgt-effect--zoom .pgt-slide { transition: opacity var(--pgt-transition-speed) ease-in-out, transform var(--pgt-transition-speed) ease-in-out; transform: scale(1.08); } .pgt-slider.pgt-effect--zoom .pgt-slide.is-active { opacity: 1; transform: scale(1); } .pgt-slider.pgt-effect--zoom .pgt-slide.is-leaving { opacity: 0; transform: scale(1.08); } /* ── FLIP ────────────────────────────────────────────────────── */ .pgt-slider.pgt-effect--flip { perspective: 1200px; } .pgt-slider.pgt-effect--flip .pgt-slide { transition: opacity var(--pgt-transition-speed) ease-in-out, transform var(--pgt-transition-speed) ease-in-out; transform: rotateY(-90deg); backface-visibility: hidden; } .pgt-slider.pgt-effect--flip .pgt-slide.is-active { opacity: 1; transform: rotateY(0deg); } .pgt-slider.pgt-effect--flip .pgt-slide.is-leaving { opacity: 0; transform: rotateY(90deg); } /* ══════════════════════════════════════════════════════════════ FLECHAS DE NAVEGACIÓN ══════════════════════════════════════════════════════════════ */ .pgt-slider .pgt-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: var(--pgt-arrow-bg); border: none; border-radius: 50%; width: var(--pgt-arrow-size); height: var(--pgt-arrow-size); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--pgt-arrow-color); transition: background 0.2s ease, transform 0.2s ease; padding: 0; outline: none; } .pgt-slider .pgt-arrow:hover { background: var(--pgt-arrow-bg-hover); } .pgt-slider .pgt-arrow--prev { left: 12px; } .pgt-slider .pgt-arrow--next { right: 12px; } .pgt-slider .pgt-arrow--prev:hover { transform: translateY(-50%) scale(1.1); } .pgt-slider .pgt-arrow--next:hover { transform: translateY(-50%) scale(1.1); } .pgt-slider .pgt-arrow svg { width: 20px; height: 20px; display: block; pointer-events: none; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════ PUNTOS DE NAVEGACIÓN (DOTS) ══════════════════════════════════════════════════════════════ */ .pgt-slider .pgt-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 6px; align-items: center; } .pgt-slider .pgt-dot { width: var(--pgt-dot-size); height: var(--pgt-dot-size); border-radius: 50%; background: var(--pgt-dot-color); border: none; padding: 0; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; outline: none; } .pgt-slider .pgt-dot.is-active { background: var(--pgt-dot-active); transform: scale(1.35); } .pgt-slider .pgt-dot:hover { background: rgba(255, 255, 255, 0.85); } /* ══════════════════════════════════════════════════════════════ CONTADOR (ej: "1 / 6") ══════════════════════════════════════════════════════════════ */ .pgt-slider .pgt-counter { position: absolute; top: 12px; right: 14px; z-index: 10; background: var(--pgt-counter-bg); color: #fff; font-size: 0.78rem; font-family: sans-serif; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.05em; pointer-events: none; user-select: none; } /* ══════════════════════════════════════════════════════════════ BARRA DE PROGRESO ══════════════════════════════════════════════════════════════ */ .pgt-slider .pgt-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 0%; z-index: 20; background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.9)); transition: width 0ms linear; pointer-events: none; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE — FLECHAS MÁS PEQUEÑAS EN MOBILE ══════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .pgt-slider .pgt-arrow { width: 36px; height: 36px; } .pgt-slider .pgt-arrow svg { width: 16px; height: 16px; } .pgt-slider .pgt-arrow--prev { left: 6px; } .pgt-slider .pgt-arrow--next { right: 6px; } } /* ══════════════════════════════════════════════════════════════ LIGHTBOX — se monta en , usa prefijo .pgt-lb- propio No puede tener .pgt-slider como padre porque vive fuera del slider. Los selectores .pgt-lb-* son suficientemente específicos para no afectar otros elementos del proyecto. ══════════════════════════════════════════════════════════════ */ /* Bloquear scroll del body cuando el lightbox está abierto */ body.pgt-lb-open { overflow: hidden; } /* Overlay principal */ .pgt-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.28s ease; pointer-events: none; } .pgt-lightbox.is-open { opacity: 1; pointer-events: auto; } /* Fondo oscuro */ .pgt-lightbox .pgt-lb-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); cursor: zoom-out; } /* Escenario de la imagen */ .pgt-lightbox .pgt-lb-stage { position: relative; z-index: 1; max-width: 92vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; } /* Imagen en el lightbox — se muestra completa sin recorte */ .pgt-lightbox .pgt-lb-img { display: block; max-width: 90vw; max-height: 87vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.25s ease; } .pgt-lightbox .pgt-lb-img.is-loaded { opacity: 1; } /* Botón cerrar */ .pgt-lightbox .pgt-lb-close { position: absolute; top: 14px; right: 14px; z-index: 10; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.2s ease; padding: 0; outline: none; } .pgt-lightbox .pgt-lb-close:hover { background: rgba(255, 255, 255, 0.3); } .pgt-lightbox .pgt-lb-close svg { width: 20px; height: 20px; display: block; pointer-events: none; } /* Flechas del lightbox */ .pgt-lightbox .pgt-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.2s ease; padding: 0; outline: none; } .pgt-lightbox .pgt-lb-arrow:hover { background: rgba(255, 255, 255, 0.28); } .pgt-lightbox .pgt-lb-prev { left: 14px; } .pgt-lightbox .pgt-lb-next { right: 14px; } .pgt-lightbox .pgt-lb-arrow svg { width: 24px; height: 24px; display: block; pointer-events: none; } /* Contador del lightbox */ .pgt-lightbox .pgt-lb-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; font-family: sans-serif; pointer-events: none; } /* ── RESPONSIVE LIGHTBOX ─────────────────────────────────────── */ @media (max-width: 600px) { .pgt-lightbox .pgt-lb-arrow { width: 40px; height: 40px; } .pgt-lightbox .pgt-lb-arrow svg { width: 20px; height: 20px; } .pgt-lightbox .pgt-lb-prev { left: 4px; } .pgt-lightbox .pgt-lb-next { right: 4px; } }