/* =========================================================== el movimiento Una sola capa para todas las pantallas nuevas: escaparate, ficha, aula, registro y cuenta. La idea no es «que tenga animaciones», es que nada aparezca de golpe y que al pulsar algo el sitio conteste. Tres reglas que se respetan en todo el fichero: 1. UNA CURVA. cubic-bezier(.22,1,.36,1) — arranca rápido y frena largo, que es como se mueven las cosas con peso. Mezclar curvas se nota y ensucia. 2. POCO RECORRIDO. Nada se desplaza más de 16 px ni escala más de un 4 %. Lo que se mueve mucho llama la atención sobre el movimiento; lo que se mueve poco llama la atención sobre el contenido. 3. SI ALGO FALLA, SE VE. El contenido sólo se esconde cuando el JavaScript ha confirmado que va a poder enseñarlo (clase dv-mueve en el ). Sin JavaScript, o con él a medias, la página se ve entera y quieta. Y con «prefers-reduced-motion» no se mueve nada. No es un extra: para algunas personas el movimiento marea de verdad. ------------------------------------------------------------------------ */ :root{ --dv-curva:cubic-bezier(.22,1,.36,1); --dv-curva-corta:cubic-bezier(.4,0,.2,1); --dv-rapido:.18s; --dv-medio:.34s; --dv-largo:.52s; } /* ------------------------------------------------- de una página a la otra En vez del parpadeo en blanco de siempre, un fundido. Sólo lo hacen los navegadores que lo entienden, y sólo entre páginas nuestras: las demás se comportan como siempre. */ @view-transition{ navigation:auto } /* Corto a propósito. El servidor tarda medio segundo en contestar; si encima el fundido dura otro medio, el conjunto no parece una transición, parece que la web va lenta. */ ::view-transition-old(root){ animation:dv-se-va .1s var(--dv-curva-corta) both } ::view-transition-new(root){ animation:dv-llega .22s var(--dv-curva) both } @keyframes dv-se-va{ to{ opacity:0 } } @keyframes dv-llega{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } /* En la cuenta, lo único que cambia al saltar de pestaña es el panel de la derecha. Se le pone nombre para que sólo se mueva él: el menú y el titular se quedan clavados, que es lo que hace que parezca una pestaña y no una página nueva. */ .dvcu-woo .woocommerce-MyAccount-content{ view-transition-name:dv-panel } .dvcu-t{ view-transition-name:dv-nombre } ::view-transition-old(dv-panel){ animation:dv-se-va .09s var(--dv-curva-corta) both } ::view-transition-new(dv-panel){ animation:dv-llega .26s var(--dv-curva) both } /* -------------------------------------------------- la barra de «ya voy» Dos píxeles arriba del todo en cuanto se pulsa un enlace. No es decoración: es la única respuesta que puede dar la web mientras espera al servidor. */ .dv-cargando{ position:fixed;top:0;left:0;height:2px;width:0;z-index:99999; background:var(--oro-suave,#D2AB74); opacity:0;pointer-events:none; } .dv-cargando.dv-va{opacity:1;width:82%;transition:width 1.4s cubic-bezier(.1,.75,.2,1),opacity .12s} /* Y en la cuenta, el panel se apaga un poco mientras llega el siguiente. */ .dvcu-woo .woocommerce-MyAccount-content{transition:opacity .16s var(--dv-curva-corta)} .dvcu-woo .woocommerce-MyAccount-content.dv-esperando{opacity:.38} /* ---------------------------------------------------- aparecer al bajar Cada bloque entra cuando llega a la pantalla, y los hermanos entran uno detrás de otro. El retraso lo pone el JavaScript en --i. */ html.dv-mueve .dv-viene{ opacity:0; transform:translateY(16px); will-change:opacity,transform; } html.dv-mueve .dv-viene.dv-aqui{ opacity:1; transform:none; transition:opacity var(--dv-largo) var(--dv-curva), transform var(--dv-largo) var(--dv-curva); transition-delay:calc(var(--i,0) * 70ms); } /* Cuando ya ha entrado se suelta el will-change: dejarlo puesto reserva memoria de vídeo para siempre y en móviles se paga. */ html.dv-mueve .dv-viene.dv-quieto{ will-change:auto } /* ============================================================ el escaparate */ .dvl-portada{position:relative} .dvl-portada img{transition:transform var(--dv-largo) var(--dv-curva), filter var(--dv-largo) var(--dv-curva)} .dvl-capsula:hover .dvl-portada img, .dvl-capsula:focus-within .dvl-portada img{transform:scale(1.035)} /* Un velo que se retira: da profundidad sin poner una sombra, que en una web tan blanca cantaría. */ .dvl-portada::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(10,11,15,0) 55%,rgba(10,11,15,.18)); opacity:0;transition:opacity var(--dv-medio) var(--dv-curva); } .dvl-capsula:hover .dvl-portada::after, .dvl-capsula:focus-within .dvl-portada::after{opacity:1} .dvl-nombre a{transition:color var(--dv-rapido) var(--dv-curva-corta)} /* El botón con una flecha que asoma al acercarse. */ .dvl-btn,.dvc-btn,.dva-btn,.dvr-enviar .dva-btn{ position:relative; transition:background var(--dv-rapido) var(--dv-curva-corta), color var(--dv-rapido) var(--dv-curva-corta), transform var(--dv-rapido) var(--dv-curva-corta); } .dvl-btn:active,.dvc-btn:active,.dva-btn:active{transform:translateY(1px)} .dvl-btn::after,.dvc-btn-negro::after{ content:"";display:inline-block;width:0;overflow:hidden;white-space:nowrap; transition:width var(--dv-medio) var(--dv-curva),margin var(--dv-medio) var(--dv-curva); } .dvl-capsula:hover .dvl-btn::after{content:"→";width:1em;margin-left:.6em} /* =============================================================== la ficha */ .dvc-portada-dentro{overflow:hidden} .dvc-imagen img{transition:transform 1.2s var(--dv-curva)} .dvc-portada:hover .dvc-imagen img{transform:scale(1.02)} /* El temario: un filete que aparece por la izquierda al pasar por encima. Es la parte que más se mira antes de comprar; que conteste importa. */ .dvc-clase{ position:relative; transition:background var(--dv-rapido) var(--dv-curva-corta), padding-left var(--dv-medio) var(--dv-curva); } .dvc-clase::before{ content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px; background:var(--dvc-oro,#D2AB74); transform:scaleY(0);transform-origin:50% 0; transition:transform var(--dv-medio) var(--dv-curva); } .dvc-clase:hover::before{transform:scaleY(1)} .dvc-clase:hover{padding-left:12px} .dvc-modulo{transition:color var(--dv-rapido) var(--dv-curva-corta)} /* --------------------------------------------------- la barra que acompaña Cuando el precio y el botón de arriba se pierden de vista, bajan a una franja fija. No es un truco de venta: es que en una página larga, cuando por fin te decides, el botón está tres pantallas más arriba. */ .dvc-fija{ position:fixed;left:0;right:0;bottom:0;z-index:60; background:rgba(10,11,15,.94); -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px); color:#fff; transform:translateY(102%); transition:transform var(--dv-medio) var(--dv-curva); padding:12px max(18px,calc(50vw - 590px)); box-shadow:0 -1px 0 rgba(255,255,255,.1); } .dvc-fija.dv-asoma{transform:none} .dvc-fija-dentro{display:flex;align-items:center;gap:18px;max-width:1180px;margin:0 auto} .dvc-fija-t{flex:1;min-width:0;margin:0;font-size:14.5px;line-height:1.3;color:rgba(255,255,255,.88); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dvc-fija-p{flex:none;margin:0;font-size:17px;color:#fff;white-space:nowrap} .dvc-fija-p del{opacity:.45;font-size:.72em;margin-right:7px} .dvc-fija-p ins{text-decoration:none;color:var(--dvc-oro,#D2AB74)} .dvc-fija .dvc-btn{flex:none;background:#fff;color:#0A0B0F;padding:13px 24px;white-space:nowrap} .dvc-fija .dvc-btn:hover{background:var(--dvc-oro,#D2AB74)} @media (max-width:620px){ .dvc-fija-t{display:none} .dvc-fija-dentro{gap:12px} .dvc-fija .dvc-btn{flex:1;text-align:center;padding:14px 12px} } /* ================================================================= el aula */ /* La barra de avance se llena desde cero al entrar: enseña que algo se ha guardado, en vez de aparecer ya llena como si fuera un dibujo. */ .dva-avance-pista > *{transition:width var(--dv-largo) var(--dv-curva)} .dva-temario li a{transition:color var(--dv-rapido) var(--dv-curva-corta), border-color var(--dv-medio) var(--dv-curva), background var(--dv-rapido) var(--dv-curva-corta), padding-left var(--dv-medio) var(--dv-curva)} .dva-temario li a:hover{padding-left:14px} .dva-paso{transition:background var(--dv-rapido) var(--dv-curva-corta), color var(--dv-rapido) var(--dv-curva-corta), transform var(--dv-rapido) var(--dv-curva-corta)} .dva-paso:active{transform:translateY(1px)} /* =========================================== los formularios y la cuenta */ .dvr-campo input,.dvcu-woo input,.dvcu-woo select,.dvcu-woo textarea{ transition:border-color var(--dv-rapido) var(--dv-curva-corta), box-shadow var(--dv-rapido) var(--dv-curva-corta), background var(--dv-rapido) var(--dv-curva-corta)} .dvr-mal{animation:dv-llega var(--dv-medio) var(--dv-curva) both} .dvcu-woo .woocommerce-MyAccount-navigation-link a{ transition:color var(--dv-rapido) var(--dv-curva-corta), padding-left var(--dv-medio) var(--dv-curva), background var(--dv-rapido) var(--dv-curva-corta)} .dvcu-woo .woocommerce-MyAccount-navigation-link:not(.is-active) a:hover{padding-left:10px} /* ------------------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ .dv-cargando{display:none} html.dv-mueve .dv-viene, html.dv-mueve .dv-viene.dv-aqui{opacity:1;transform:none;transition:none} .dvc-fija{transition:none} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important} ::view-transition-old(root),::view-transition-new(root){animation:none} }