/* ========================================================================== Thinkhub — Esquema de movimiento ========================================================================== Una sola idea, aplicada en todo el sitio: **el contenido llega, no aparece**. Todo entra desde abajo con un desplazamiento corto y un fundido, sobre la misma curva que ya usa el prototipo del .fig (OUT_CUBIC). Nada rebota, nada gira, nada escala de 0 a 1: eso envejece rápido y pelea con la tipografía. Las tres reglas que sostienen el conjunto: 1. UNA CURVA. `--ease` (la OUT_CUBIC del archivo) para entradas y hovers. Salidas y cierres usan `--ease-in`, apenas más seca, porque irse rápido se siente correcto y quedarse lento se siente pesado. 2. DOS DISTANCIAS. 16px para elementos de texto, 32px para bloques y medios. Más que eso ya se lee como "efecto"; menos, no se percibe. 3. UN ESCALONADO. Los hijos de un grupo entran cada 70ms, con tope de 6. Alcanza para que el ojo lea una secuencia sin que el último llegue tarde. Duraciones: 0.3s hover (la del archivo), 0.6s entrada, 0.5s salida. La entrada es más lenta que el hover a propósito: el hover responde al usuario y tiene que sentirse inmediato; la entrada acompaña al scroll. Todo esto se apaga entero con `prefers-reduced-motion` al final del archivo. -------------------------------------------------------------------------- */ /* El drawer y la marquesina descansan fuera del viewport a propósito. Sin esto ese desborde suma scroll horizontal en toda la página. Se recorta en la raíz y no en `body` para no romper `position: sticky` del stack de casos. */ html { overflow-x: clip; } :root { /* Curva de salida: complementa a la --ease de entrada que ya está en tokens. */ --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* Curva para transformaciones de layout (drawer, sticky). */ --ease-inout: cubic-bezier(0.645, 0.045, 0.355, 1); --dur-enter: 0.6s; --dur-exit: 0.5s; --stagger: 70ms; --shift-text: 16px; /* títulos, párrafos, captions */ --shift-block: 32px; /* cards, medios, secciones */ } /* -------------------------------------------------------------------------- 1. Entradas al hacer scroll El JS agrega `.is-in` cuando el elemento entra en viewport. El estado de partida vive acá y no en JS para que, si el script no carga, el contenido quede visible igual (por eso `.reveal` sin `.is-in` es lo único oculto y el fallback `.no-js` de más abajo lo anula). -------------------------------------------------------------------------- */ .reveal { opacity: 0; translate: 0 var(--shift-text); transition: opacity var(--dur-enter) var(--ease), translate var(--dur-enter) var(--ease); } /* Bloques y medios recorren un poco más. */ .reveal--block { translate: 0 var(--shift-block); } /* Variante para medios: suma una escala mínima. El 1.02 → 1 hace que la imagen se "asiente" en lugar de deslizarse, que es lo que pide una foto grande como la del equipo. */ .reveal--media { translate: 0 var(--shift-block); scale: 1.02; transition: opacity var(--dur-enter) var(--ease), translate var(--dur-enter) var(--ease), scale var(--dur-enter) var(--ease); } .reveal.is-in { opacity: 1; translate: 0 0; scale: 1; } /* Sin JS no hay quien agregue `.is-in`, así que el estado oculto se anula. Va después de `.reveal` a propósito: misma especificidad no alcanzaría, por eso el selector suma el `html.no-js`. El arranca con esa clase y el script la saca apenas corre. */ html.no-js .reveal { opacity: 1; translate: none; scale: none; transition: none; } /* Escalonado. El JS numera los hijos con --i; el tope de 6 lo pone el propio JS para que una grilla larga no termine con un retraso absurdo. */ .reveal { transition-delay: calc(var(--i, 0) * var(--stagger)); } /* -------------------------------------------------------------------------- 2. Navegación La navbar es fija y transparente. Al bajar se le pone fondo y una línea fina: da separación cuando hay contenido detrás, sin cambiar de altura (cambiar altura en scroll produce saltos de layout). -------------------------------------------------------------------------- */ .navbar { transition: background-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease), translate var(--dur-exit) var(--ease-inout); } .navbar.is-stuck { background: color-mix(in srgb, var(--c-dark) 72%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } /* Sobre fondo claro la navbar clara invierte el tinte. */ .navbar--light.is-stuck { background: color-mix(in srgb, var(--c-light) 72%, transparent); box-shadow: 0 1px 0 rgba(33, 34, 36, 0.08); } /* Se esconde al bajar y vuelve al subir: devuelve la pantalla completa mientras se lee y el menú queda a un gesto de distancia. */ .navbar.is-hidden { translate: 0 -100%; } /* Links: subrayado que crece desde la izquierda. Reemplaza al fundido de opacidad, que en un menú corto se lee como que el link se apaga. */ .navbar__links a:not(.btn) { position: relative; transition: color var(--dur) var(--ease); } .navbar__links a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: currentColor; scale: 0 1; transform-origin: left center; transition: scale var(--dur) var(--ease); } .navbar__links a:not(.btn):hover::after, .navbar__links a:not(.btn):focus-visible::after { scale: 1 1; } /* La página activa queda marcada de entrada. */ .navbar__links a[aria-current="page"]::after { scale: 1 1; } /* -------------------------------------------------------------------------- 3. Menú mobile El drawer entra desde la derecha y los items caen escalonados. El overlay sólo funde: si además se moviera, competiría con el panel. -------------------------------------------------------------------------- */ /* El drawer descansa fuera de pantalla a la derecha. Aunque sea `fixed`, ese desplazamiento sigue contando para el ancho del documento y mete scroll horizontal en todas las páginas: por eso va oculto con `visibility` Y sin ocupar espacio hasta que se abre. */ .nav-drawer { position: fixed; inset: 0 0 0 auto; z-index: 200; width: min(88vw, 380px); padding: calc(var(--navbar-h) + var(--sp-32)) var(--gutter) var(--sp-32); display: flex; flex-direction: column; gap: var(--sp-28); background: var(--c-dark); translate: 100% 0; visibility: hidden; transition: translate var(--dur-exit) var(--ease-inout), visibility 0s linear var(--dur-exit); } .nav-drawer.is-open { translate: 0 0; visibility: visible; transition: translate var(--dur-enter) var(--ease-inout), visibility 0s; } .nav-drawer a { font-size: var(--fs-paragraph-m); line-height: var(--lh-paragraph-m); opacity: 0; translate: 0 var(--shift-text); transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease); } .nav-drawer.is-open a { opacity: 1; translate: 0 0; /* Arrancan recién cuando el panel ya recorrió la mitad. */ transition-delay: calc(160ms + var(--i, 0) * var(--stagger)); } .nav-overlay { position: fixed; inset: 0; z-index: 190; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity var(--dur-exit) var(--ease), visibility 0s linear var(--dur-exit); } .nav-overlay.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-enter) var(--ease), visibility 0s; } /* El ícono del toggle rota a X. */ .navbar__toggle img { transition: rotate var(--dur) var(--ease); } .navbar__toggle[aria-expanded="true"] img { rotate: 90deg; } /* Con el menú abierto el fondo no scrollea. */ body.has-drawer { overflow: hidden; } /* -------------------------------------------------------------------------- 4. Foco visible Un anillo consistente en todo el sitio. Va con `:focus-visible` para que no aparezca al hacer click, sólo al navegar con teclado. -------------------------------------------------------------------------- */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; border-radius: 2px; } /* -------------------------------------------------------------------------- 5. Movimiento reducido No se degrada: se apaga. Todo lo que entra queda en su estado final y las transiciones bajan a cero. El drawer sigue funcionando, sin deslizarse. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal--block, .reveal--media { opacity: 1; translate: none; scale: none; transition: none; } .navbar, .navbar__links a:not(.btn)::after, .nav-drawer, .nav-drawer a, .nav-overlay, .navbar__toggle img { transition-duration: 0.01ms; } .navbar.is-hidden { translate: none; } }