/** * Zenth Toolkit — Proyectos Modal * * Modal/lightbox que se abre al hacer click en una card del grid de * proyectos. Muestra la galería de fotos navegable (si el proyecto tiene) * + el panel de detalles (tipo, título, autor·año, descripción). * * Lo crea e inyecta proyectos-modal.js una sola vez en . * * Standalone: usa var(--cr-*, fallback). * * ───────────────────────────────────────────────────────────────────────── * ÍNDICE * §1 Overlay → .cr-proyectos-modal (estado open/closed + reset box) * §2 Backdrop → .cr-proyectos-modal__backdrop * §3 Dialog → .cr-proyectos-modal__dialog (grid areas) * §4 Close → .cr-proyectos-modal__close * §5 Stage → imagen principal + nav (flechas, contador) * §6 Thumbs → strip de miniaturas * §7 Info panel → tag, título, atributos, descripción * §8 Estado single → sin galería (oculta nav/contador/thumbs) * §9 Responsive → @media de tamaño + accesibilidad * ───────────────────────────────────────────────────────────────────────── * BREAKPOINTS (mobile-first: la base es la vista apilada de 1 columna) * Desktop modal → min-width: 880px (dialog pasa a 2 columnas; aparece 3×) * * Además 1 media de accesibilidad (prefers-reduced-motion), en subsección * propia al final de §9. Los @media de tamaño se consolidan en §9. * ───────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════ §1 · OVERLAY — .cr-proyectos-modal (estado open/closed + reset box) ═══════════════════════════════════════════════════════════════════════ */ .cr-proyectos-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 48px); opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 0s linear 280ms; } .cr-proyectos-modal.is-open { opacity: 1; visibility: visible; transition: opacity 280ms ease; } .cr-proyectos-modal *, .cr-proyectos-modal *::before, .cr-proyectos-modal *::after { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════════ §2 · BACKDROP — .cr-proyectos-modal__backdrop ═══════════════════════════════════════════════════════════════════════ */ .cr-proyectos-modal__backdrop { position: absolute; inset: 0; background: var(--zenth-mm-overlay, rgba(0, 0, 0, 0.7)); backdrop-filter: blur(2px); cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════ §3 · DIALOG — .cr-proyectos-modal__dialog (grid areas) ═══════════════════════════════════════════════════════════════════════ */ .cr-proyectos-modal__dialog { position: relative; z-index: 1; width: min(1100px, 100%); max-height: min(90vh, 760px); background: var(--cr-color-darker, #0f0f0f); border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-areas: "stage" "thumbs" "info"; transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease; } .cr-proyectos-modal.is-open .cr-proyectos-modal__dialog { transform: translateY(0) scale(1); opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════ §4 · CLOSE — .cr-proyectos-modal__close ═══════════════════════════════════════════════════════════════════════ */ .cr-proyectos-modal__close { position: absolute; top: 12px; right: 12px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: var(--cr-color-white, #fff); font-size: 22px; line-height: 1; cursor: pointer; transition: background var(--cr-transition-base, 250ms ease); } .cr-proyectos-modal__close:hover, .cr-proyectos-modal__close:focus-visible { background: var(--cr-color-primary, #c00000); outline: none; } /* ═══════════════════════════════════════════════════════════════════════ §5 · STAGE — imagen principal + nav (flechas, contador) ═══════════════════════════════════════════════════════════════════════ */ .cr-proyectos-modal__stage { grid-area: stage; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; background: #000; overflow: hidden; } .cr-proyectos-modal__main-img { display: block; width: 100%; height: 100%; max-height: 58vh; object-fit: contain; } /* Flechas prev/next */ .cr-proyectos-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: var(--cr-color-white, #fff); font-size: 20px; line-height: 1; cursor: pointer; transition: background var(--cr-transition-base, 250ms ease); } .cr-proyectos-modal__nav:hover, .cr-proyectos-modal__nav:focus-visible { background: var(--cr-color-primary, #c00000); outline: none; } .cr-proyectos-modal__nav--prev { left: 12px; } .cr-proyectos-modal__nav--next { right: 12px; } /* Contador "1 / 4" */ .cr-proyectos-modal__counter { position: absolute; bottom: 12px; right: 50%; z-index: 3; padding: 4px 10px; background: rgba(0, 0, 0, 0.6); color: var(--cr-color-white, #fff); font-family: var(--cr-font-body, system-ui, sans-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; border-radius: 999px; } /* ═══════════════════════════════════════════════════════════════════════ §6 · THUMBS — strip de miniaturas ═══════════════════════════════════════════════════════════════════════ */ .cr-proyectos-modal__thumbs { grid-area: thumbs; display: flex; justify-content: center; gap: 8px; padding: 12px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; background: var(--cr-color-black, #000); } .cr-proyectos-modal__thumb { flex: 0 0 auto; width: 68px; height: 50px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; opacity: 0.55; transition: opacity var(--cr-transition-base, 250ms ease), border-color var(--cr-transition-base, 250ms ease); } .cr-proyectos-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cr-proyectos-modal__thumb:hover, .cr-proyectos-modal__thumb:focus-visible { opacity: 0.85; outline: none; } .cr-proyectos-modal__thumb.is-active { opacity: 1; border-color: var(--cr-color-primary, #c00000); } /* ═══════════════════════════════════════════════════════════════════════ §7 · INFO PANEL — tag, título, atributos, descripción ═══════════════════════════════════════════════════════════════════════ */ .cr-proyectos-modal__info { grid-area: info; display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } .cr-proyectos-modal__tag { align-self: flex-start; display: inline-block; padding: 6px 12px; background: var(--cr-color-primary, #c00000); color: var(--cr-color-white, #fff); font-family: var(--cr-font-body, system-ui, sans-serif); font-size: 0.6875rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 4px; } .cr-proyectos-modal__tag:empty { display: none; } .cr-proyectos-modal__title { margin: 0; font-family: var(--cr-font-display, 'Super Brigade', Impact, sans-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.05; letter-spacing: 0.5px; text-transform: uppercase; color: var(--cr-color-white, #fff); } .cr-proyectos-modal__attr { margin: 0; font-family: var(--cr-font-body, system-ui, sans-serif); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cr-color-text-muted, #81817f); } .cr-proyectos-modal__attr:empty { display: none; } .cr-proyectos-modal__desc { margin: 4px 0 0; font-family: var(--cr-font-body, system-ui, sans-serif); font-size: 0.9375rem; line-height: 1.65; color: var(--cr-color-text-dim, rgba(255, 255, 255, 0.78)); } .cr-proyectos-modal__desc:empty { display: none; } .cr-proyectos-modal__desc p { margin: 0 0 0.85em; } .cr-proyectos-modal__desc p:last-child { margin-bottom: 0; } .cr-proyectos-modal__desc a { color: var(--cr-color-primary-hover, #e60000); } /* ═══════════════════════════════════════════════════════════════════════ §8 · ESTADO "UNA SOLA IMAGEN" — .is-single ─────────────────────────────────────────────────────────────────────── El JS añade .is-single cuando no hay galería (solo la imagen destacada): ocultamos nav, contador y thumbs. ═══════════════════════════════════════════════════════════════════════ */ .cr-proyectos-modal.is-single .cr-proyectos-modal__nav, .cr-proyectos-modal.is-single .cr-proyectos-modal__counter, .cr-proyectos-modal.is-single .cr-proyectos-modal__thumbs { display: none; } .cr-proyectos-modal.is-single .cr-proyectos-modal__dialog { grid-template-areas: "stage" "info"; } /* ═══════════════════════════════════════════════════════════════════════ §9 · RESPONSIVE — @media de tamaño + accesibilidad ─────────────────────────────────────────────────────────────────────── Mobile-first: la base (arriba) es la vista apilada de 1 columna; al pasar el umbral del modal (≥880px) el dialog se reordena a 2 columnas. Todos los bloques min-width:880px se consolidan en un solo @media. Al final, la accesibilidad (prefers-reduced-motion), que NO es breakpoint de tamaño y no se consolida con el de arriba. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────── DESKTOP MODAL · min-width: 880px ─────────────────── */ @media (min-width: 880px) { /* §3 · Dialog: pasa a 2 columnas (stage+thumbs | info) */ .cr-proyectos-modal__dialog { grid-template-columns: 1.55fr 1fr; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "stage info" "thumbs info"; } /* §5 · Imagen principal: sin tope de alto (lo gobierna el grid) */ .cr-proyectos-modal__main-img { max-height: none; } /* §8 · Estado single: dialog a 1 fila, stage + info lado a lado */ .cr-proyectos-modal.is-single .cr-proyectos-modal__dialog { grid-template-rows: minmax(0, 1fr); grid-template-areas: "stage info"; } } /* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */ @media (prefers-reduced-motion: reduce) { .cr-proyectos-modal, .cr-proyectos-modal__dialog { transition: opacity 120ms ease; } .cr-proyectos-modal__dialog { transform: none; } }