/* ============================================================================ CUSTODE · 04-property.css — la capa de la ficha de inmueble ---------------------------------------------------------------------------- Este hueco estaba declarado y vacio en `CUSTODE_STYLESHEETS` (functions.php) desde el principio, reservado para vestir `single-myhome_listing.php` sin reescribir su estructura. Hoy contiene UNA sola cosa: el visor de fotografia. El resto de la ficha sigue vistiendose con las primitivas de 01-base y 05-pages, tal como dice la cabecera de la plantilla, y lo que se anada aqui manana debe seguir esa misma regla — vestir, no reestructurar. POR QUE LA ROPA DEL VISOR ENTRA POR LA CASCADA Y NO POR EL PIE El JavaScript del visor (`assets/js/gallery.js`) se encola en tiempo de plantilla y se imprime en el pie, porque nada de lo que hace es condicion para ver la ficha. Con el CSS no vale el mismo atajo: una hoja que llega despues del `` repinta la pagina a media carga. Por eso esta hoja viaja por `CUSTODE_STYLESHEETS`, en el ``, y por eso el visor es el unico inquilino de un archivo que se carga en TODAS las paginas: son ~2 KB y no pintan nada mientras no exista un ``, que solo construye la ficha. EL ORDEN DE LA CASCADA IMPORTA. Esta hoja entra ANTES que 05-pages.css. Todo lo de aqui esta bajo `.c-lb`, que no existe en ninguna otra hoja, asi que no hay carrera de especificidad con nadie. La unica excepcion es `.c-lb-open`, el boton que el JS interpone entre `
` y su ``: se le devuelve el tamano completo que la lamina espera, porque un boton por defecto no lo tiene. MOVIMIENTO. No hay una sola duracion escrita a mano: todas salen de los tokens `--c-dur-*`, que bajo `prefers-reduced-motion: reduce` valen 1 ms (00-tokens.css §final). El visor no necesita, por tanto, ninguna regla propia de movimiento reducido: se apaga solo con el resto del sistema. ========================================================================= */ /* ── §1 · El disparador: la lamina se vuelve pulsable ─────────────────────── */ /* El JS mete el dentro de este boton. Sin JS no existe, y la lamina se pinta exactamente como antes. */ .c-lb-open { display: block; inline-size: 100%; block-size: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; } .c-lb-open:focus-visible { outline: var(--c-hair-w) solid var(--c-brass-ring); outline-offset: var(--c-close-gap); } /* ── §2 · El visor ────────────────────────────────────────────────────────── */ .c-lb { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; margin: 0; padding: 0; border: 0; z-index: var(--c-z-modal); display: none; background: var(--c-veil-86); color: var(--c-inv-000); overscroll-behavior: contain; } .c-lb[open] { display: grid; grid-template-rows: auto 1fr auto; animation: c-lb-in var(--c-dur-tick) var(--c-ease-ink) both; } /* El fondo va SOLIDO, no velado. Un visor de fotografia con la ficha transparentandose por detras compite con la propia foto: se probo con `--c-veil-86` en los dos planos y la portada de la pagina seguia leyendose a traves del dialogo. Con la tinta plena detras, el velo del dialogo ya no deja pasar nada y el ojo solo tiene una cosa que mirar. */ .c-lb::backdrop { background: var(--c-ink); } @keyframes c-lb-in { from { opacity: 0 } to { opacity: 1 } } /* Mientras el visor esta abierto la ficha de debajo no se desplaza. */ html.has-lb { overflow: hidden; } /* ── §3 · La barra: contador a la izquierda, herramientas a la derecha ────── */ .c-lb__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--c-sp-5); padding: var(--c-sp-4) var(--c-sp-5); border-block-end: var(--c-hair-w) solid var(--c-hair-inv); } .c-lb__count { margin: 0; font-family: var(--c-font-label); font-size: var(--c-fs-l1); font-weight: var(--c-fw-label); letter-spacing: .08em; color: var(--c-inv-200); font-variant-numeric: tabular-nums; } .c-lb__tools { display: flex; align-items: center; gap: var(--c-sp-2); } .c-lb__btn { inline-size: 40px; block-size: 40px; display: grid; place-items: center; margin: 0; padding: 0; cursor: pointer; border: var(--c-hair-w) solid var(--c-hair-inv); background: none; color: var(--c-inv-000); font-family: var(--c-font-data); font-size: 1.125rem; line-height: 1; transition: border-color var(--c-dur-hover) var(--c-ease-ink), color var(--c-dur-hover) var(--c-ease-ink); } .c-lb__btn:hover:not(:disabled), .c-lb__btn:focus-visible { border-color: var(--c-brass); color: var(--c-brass-hi); } .c-lb__btn:disabled { opacity: .32; cursor: default; } .c-lb__btn--close { font-size: 1.5rem; } .c-lb__btn:focus-visible, .c-lb__nav:focus-visible { outline: var(--c-hair-w) solid var(--c-brass-ring); outline-offset: var(--c-close-gap); } /* ── §4 · El escenario ────────────────────────────────────────────────────── */ /* `touch-action: none` no es opcional: sin el, el navegador se queda el pellizco y el arrastre para su propio zoom de pagina y los punteros nunca llegan a gallery.js §7. */ .c-lb__stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; min-block-size: 0; } .c-lb.is-zoomed .c-lb__stage { cursor: zoom-out; } .c-lb.is-grabbing .c-lb__stage { cursor: grabbing; } /* LA CAJA OCUPA EL ESCENARIO ENTERO Y ES `object-fit` QUIEN ENCAJA LA FOTO. No es la primera version. La primera dejaba que la imagen se dimensionara sola con `max-block-size: 100%` dentro de una rejilla `place-items: center`, y se rompio: en un carril `1fr`, ese porcentaje se resuelve contra un alto que todavia depende del contenido, asi que el navegador se quedo con el ancho y pinto la foto a 1440 px de alto en un escenario de 630 —recortada hasta no verse—. Con `inset: 0` y los dos tamanos al 100%, la caja es definida antes de mirar la foto y no hay nada que resolver en circulo. Que `contain` pueda agrandar una foto pequena es deliberado: el visor se abre a pantalla completa y una lamina diminuta en medio de tanto negro se lee como un fallo. `fitted()` (gallery.js §3) calcula el mismo encaje sin tope, para que los topes del arrastre describan la foto que de verdad se esta pintando. Lo que NO se hace es fingir resolucion: la foto se sirve sin `srcset`, asi que lo que se agranda es el archivo, no una candidata pequena reetiquetada. */ .c-lb__img { display: block; position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-drag: none; transition: transform var(--c-dur-tick) var(--c-ease-ink); } /* Durante el gesto no hay transicion: la imagen debe ir pegada al dedo. */ .c-lb.is-grabbing .c-lb__img { transition: none; } /* La foto del visor NO lleva `--c-grade`. La gradacion de la marca es para las laminas de la pagina; aqui el lector viene a mirar el archivo, no la puesta en escena. */ /* ── §5 · Recorrido ───────────────────────────────────────────────────────── */ .c-lb__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inline-size: 48px; block-size: 64px; display: grid; place-items: center; margin: 0; padding: 0; cursor: pointer; border: 0; background: var(--c-veil-45); color: var(--c-inv-000); font-family: var(--c-font-data); font-size: 1.75rem; line-height: 1; transition: background var(--c-dur-hover) var(--c-ease-ink), color var(--c-dur-hover) var(--c-ease-ink); } .c-lb__nav:hover, .c-lb__nav:focus-visible { background: var(--c-veil-62); color: var(--c-brass-hi); } .c-lb__nav--prev { inset-inline-start: var(--c-sp-3); } .c-lb__nav--next { inset-inline-end: var(--c-sp-3); } .c-lb__hint { margin: 0; padding: var(--c-sp-3) var(--c-sp-5) var(--c-sp-4); text-align: center; font-family: var(--c-font-label); font-size: var(--c-fs-l3); letter-spacing: .06em; color: var(--c-inv-400); } /* El anuncio para lectores de pantalla: presente en el arbol, fuera de la vista. */ .c-lb__live { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── §6 · Pantallas estrechas ─────────────────────────────────────────────── */ @media (max-width: 640px) { .c-lb__bar { padding: var(--c-sp-3) var(--c-sp-4); } .c-lb__nav { inline-size: 40px; block-size: 56px; } .c-lb__hint { display: none; } /* el gesto tactil no se explica: se hace */ }