/* ============================================================ KERUTO — LAYOUT DE PÁGINA (Fase 2) Los estilos de componentes (botones, tarjetas, fondo, topbar, filas de categorías, tipografías…) viven como CLASES GLOBALES de Bricks. Aquí queda solo la composición/colocación de la página "Explorar trabajos", las transiciones y el responsive. ============================================================ */ /* ------------------------------------------------------------ 0. Marco de página: ocultar cabecera/pie de Bricks ------------------------------------------------------------ */ body:has(section.ker-home) #brx-header, body:has(section.ker-home) #brx-footer, body:has(section.ker-explorar) #brx-footer { display: none !important; } @media (min-width: 768px) { html:has(section.ker-home), body:has(section.ker-home), html:has(section.ker-explorar), body:has(section.ker-explorar) { overflow: hidden !important; } } /* ============================================================ 1. PÁGINA DESTINO — Explorar trabajos (colocación) ============================================================ */ /* El "stage" ocupa todo el interior del marco (ancho fluido). La escala vertical la marca --u (definida en la clase ker-shell). */ .ker-explorar .ker-stage { position: absolute; inset: 0; width: auto; height: auto; } /* --- cuerpo: lista de categorías + grid de proyectos --- */ /* El cuerpo empieza arriba del todo: así los resultados pueden subir por detrás de la barra superior al hacer scroll (no se cortan de golpe). */ .ker-explorar .ker-body { position: absolute; top: 0; left: calc(56 * var(--u)); right: calc(56 * var(--u)); bottom: 0; width: auto; display: flex; flex-direction: row; gap: calc(44 * var(--u)); align-items: stretch; } /* El panel de categorías va PEGADO al borde izquierdo del marco, como la tarjeta de navegación de la ficha de trabajo (fase 3): sin borde izquierdo y con las esquinas izquierdas rectas (solo redondean las de la derecha). Se desplaza con position:relative (no con margen) para que el grid de proyectos NO se mueva de su sitio. Arriba y abajo mantiene su aire. */ .ker-explorar .ker-catpanel { position: relative; left: calc(-56 * var(--u)); flex: 0 0 calc(560 * var(--u)); width: auto; margin-top: calc(210 * var(--u)); margin-bottom: calc(56 * var(--u)); border-width: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) 0; border-radius: 0 calc(28 * var(--u)) calc(28 * var(--u)) 0; } /* Medidas del panel y de la fila, expuestas como variables para que la fila activa pueda ir "a sangre" hasta los bordes del panel (ver el CSS dinámico de la categoría activa en functions.php / ker-transitions.js). */ .ker-explorar .ker-catpanel { --kc-pad: calc(10 * var(--u)); } .ker-explorar .ker-catrow { --kc-rowpad: calc(22 * var(--u)); } /* Icono de la categoría activa en blanco, como el texto sobre la banda verde. */ .ker-explorar .ker-catrow__icon { transition: filter .2s ease; } .ker-explorar .ker-catrow.is-active .ker-catrow__icon { filter: brightness(0) invert(1); } /* La banda de color (hover y categoría activa) vive en un pseudo-elemento a sangre. Así el ancho, el padding y los márgenes de la fila NUNCA cambian: no hay relayout ni parpadeo de geometría (esquinas redondeadas / ancho parcial) al pasar el ratón, ni siquiera con el filtro SVG del panel. */ .ker-explorar .ker-catrow { position: relative; isolation: isolate; } .ker-explorar .ker-catrow::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--kc-pad)); right: calc(-1 * var(--kc-pad)); background: transparent; border-radius: 0; pointer-events: none; transition: background-color .18s ease; } .ker-explorar .ker-catrow:not(.is-active):hover::before { background: var(--ker-hover); } /* El grid de resultados y las tarjetas son la clase global ker-project-grid. El padding superior deja la primera fila en su sitio (210u) pero el área de scroll llega hasta el borde: al desplazar, las tarjetas pasan por detrás del menú y se funden con el degradado. */ .ker-explorar .ker-project-grid { padding-top: calc(210 * var(--u)); /* 24u + los 4u del wrapper = 28u de aire hasta la barra, igual que la ficha. */ padding-right: calc(24 * var(--u)); } /* Estado vacío (categorías sin trabajos todavía). Ocupa todo el ancho. */ .ker-explorar .ker-project-grid .bricks-posts-no-results { grid-column: 1 / -1; aspect-ratio: auto; } .ker-explorar .ker-project-grid .bricks-posts-no-results .bricks-layout-inner { border: none; background: none; filter: none; display: flex; align-items: flex-start; justify-content: flex-start; } .ker-explorar .ker-empty { margin: 0; padding: calc(16 * var(--u)) 0; font-family: "Darumadrop One", cursive; font-size: calc(28 * var(--u)); line-height: 1.3; color: rgba(29, 29, 29, .5); } /* --- barra de scroll dibujada a mano (píldora negra sobre pista blanca) --- */ .ker-project-grid::-webkit-scrollbar, .ker-f3-content::-webkit-scrollbar, .ker-f3-works::-webkit-scrollbar { width: calc(13 * var(--u)); } .ker-project-grid::-webkit-scrollbar-track, .ker-f3-content::-webkit-scrollbar-track, .ker-f3-works::-webkit-scrollbar-track { background: #ffffff; border: calc(1.5 * var(--u)) solid rgba(0, 0, 0, .75); border-radius: 999px; margin-bottom: calc(4 * var(--u)); } /* El scroll de resultados y de la ficha de trabajo puede subir hasta el borde superior (el contenido pasa por detrás del menú), pero la barra dibujada empieza DEBAJO del menú (210u), como en la plantilla de trabajo. */ .ker-project-grid::-webkit-scrollbar-track, .ker-f3-content::-webkit-scrollbar-track { margin-top: calc(210 * var(--u)); } .ker-project-grid::-webkit-scrollbar-thumb, .ker-f3-content::-webkit-scrollbar-thumb, .ker-f3-works::-webkit-scrollbar-thumb { background: #000000; border: calc(2 * var(--u)) solid #ffffff; border-radius: 999px; } /* Firefox no admite ::-webkit-scrollbar: usa su propia sintaxis. */ @supports not selector(::-webkit-scrollbar) { .ker-project-grid, .ker-f3-content, .ker-f3-works { scrollbar-width: thin; scrollbar-color: #000000 #ffffff; } } /* ============================================================ 2. TRANSICIONES El filtrado de categorías usa FLIP propio (ker-transitions.js): traslación + zoom, nunca opacidad. La navegación entre páginas lleva View Transitions situacionales (ker-nav.css + ker-nav.js): lo que permanece se desplaza o queda inmutable y el contenido hace zoom out/in. Sin fundidos en elementos persistentes. ============================================================ */ /* Al cambiar de categoría se usa FLIP (ker-transitions.js), NO View Transitions: las tarjetas que se quedan se trasladan, las que salen hacen zoom out y las que entran zoom in. Nunca se anima la opacidad: no hay fundidos. El panel de categorías (y el resto de la página) permanece visible siempre. */ .ker-explorar .ker-project-grid .bricks-layout-wrapper { position: relative; } /* Fantasma de una tarjeta que desaparece: se queda clavado en su sitio mientras se achica (zoom out) y luego se retira. */ .ker-explorar .ker-project-grid .ker-ghost { margin: 0; transform-origin: 50% 50%; pointer-events: none; z-index: 2; } /* ============================================================ 3. HOME — ETIQUETA DE CATEGORÍA AL HOVER Un solo rótulo flotante sobre la tarjeta apuntada. Aparece sin fundido: solo se desliza 4px y se oculta al salir del grid. ============================================================ */ .ker-home .ker-grid__label { position: absolute; z-index: 4; pointer-events: none; white-space: nowrap; font-family: var(--font-display); font-weight: 400; font-size: calc(24 * var(--u)); line-height: 1.1; color: var(--ker-green); visibility: hidden; translate: -50% 4px; transition: translate .16s ease, visibility 0s linear .16s; } .ker-home .ker-grid__label.is-visible { visibility: visible; translate: -50% 0; transition: translate .16s ease; } /* ============================================================ 4. MÓVIL / TABLET ESTRECHA (colocación) ============================================================ */ @media (max-width: 767px) { html:has(section.ker-explorar), body:has(section.ker-explorar) { overflow: auto !important; } .ker-explorar .ker-stage { position: relative; inset: auto; left: auto; top: auto; translate: none; width: auto; height: auto; display: block; padding: 20px 16px 44px; box-sizing: border-box; } .ker-explorar .ker-body { position: static; flex-direction: column; gap: 22px; margin-top: 18px; } .ker-explorar .ker-catpanel { position: static; left: auto; flex: none; width: auto; margin-top: 0; margin-bottom: 0; border-width: 4px; border-radius: 20px; /* Sin padding: la categoría activa (verde) y el botón negro llegan de borde a borde; la esquina redonda la recorta overflow:hidden del panel. Ojo: --kc-pad tiene que llevar unidad (0px, no 0): si no, calc(-1 * ...) sale como número y el ::before de la banda no se posiciona. */ padding: 0; --kc-pad: 0px; } /* Acordeón de categorías: la activa (verde) arriba, el botón negro "seleccionar otra categoría" en medio y el resto de categorías debajo al abrir. El orden va por .is-active (JS); antes de que corra, el