/* * site/fx/fixes.css · tres arreglos sobre la capa base de Forex Trade * * Se carga la ULTIMA de todas las hojas (la op `insert` del bloque FIXES va al final de la * lista de ops, detras de fx.css, icons-anim.css y assets.css), asi que gana sin tocarlas. * * 1. el titular gigante del pie cabe en UNA linea, como en la plantilla * 2. estado CERRADO de las tres filas insertadas de `#reasons` (lo pone el CSS, no el JS, * para que no haya destello antes de que arranque fixes.js) * 3. el septimo enlace del menu (Whitepaper) vuelve a tener UNA sola capa visible */ /* =========================================================================== 1. titular del pie: GET EARLY ACCESS TO, en una linea =========================================================================== La plantilla pone 20.5vw / 28vw / 27vw / 25vw a `.heading-fullwidth`, medidas para "Subscribe to the" (1307 px de tinta en un hueco de 1400 a 2000 px de ancho). La frase nueva mide 1531 px a ese mismo cuerpo, o sea un 17,1 % mas, asi que hay que bajar el cuerpo para que siga entrando en UNA linea. El hueco no es el mismo porcentaje del viewport en los cuatro escalones (`.container.footer` es 70vw arriba y 100% menos un margen fijo abajo), asi que cada escalon lleva su valor, elegido por el ancho MAS estrecho del tramo y medido en el navegador de 320 a 2560 px. El tope en px es para cuando `.container` topa en 1920. */ .footer-parent .heading-fullwidth { font-size: min(18.45vw, 500px); } @media screen and (max-width: 991px) { .footer-parent .heading-fullwidth { font-size: 24.2vw; } } @media screen and (max-width: 767px) { .footer-parent .heading-fullwidth { font-size: 23.4vw; } } @media screen and (max-width: 479px) { .footer-parent .heading-fullwidth { font-size: 21.4vw; } } /* Cada palabra en su propio envoltorio: asi el titular puede partir ENTRE palabras si algun dia no cupiese, pero nunca a mitad de una. Las letras siguen siendo `.span-text.one...` dentro del envoltorio, que es lo que busca IX2 (a-17, descendientes del disparador). */ .heading-fullwidth .fx-nw { white-space: nowrap; display: inline-block; } /* La frase del cliente, entre el wordmark ondulado y el bloque de early access. */ .fx-tagline { margin: 1.6rem auto 0; letter-spacing: .04em; opacity: .82; } @media screen and (max-width: 767px) { .fx-tagline { margin-top: 1.1rem; font-size: 1rem; } } /* =========================================================================== 2. filas insertadas de `#reasons`: estado CERRADO =========================================================================== Los tres `` de `.fx-row-extra` nacen sin `data-w-id` (se lo quita `sanitizeInserted`), asi que IX2 no les aplica el grupo inicial de a-24. Aqui va ese grupo inicial, tal cual lo declara la plantilla: fila width 33.3333333% · height 100% .intro-parent-drag translateY 100vh, rotateZ 15deg .super-text-sm opacity 0, translateX -20% .icon-what scale 1 Se usan las propiedades individuales `translate` / `rotate` / `scale` en vez de `transform` porque a-24 le da a cada una su propia duracion y su propia curva. */ .fx-row-extra .row { width: 33.3333333%; height: 100%; translate: 0 0; } .fx-row-extra .row .intro-parent-drag { translate: 0 100vh; rotate: 15deg; } .fx-row-extra .row .super-text-sm { opacity: 0; translate: -20% 0; } .fx-row-extra .row .icon-what { scale: 1; } /* ABIERTO. El desplazamiento horizontal es el de a-26 / a-27: la fila crece al ancho de la banda y se corre 33,3333 % de su nuevo ancho por cada puesto que ocupa, para acabar pegada al borde izquierdo. */ .fx-row-extra .row.fx-open { width: 100%; translate: var(--fx-open-x, 0%) 0; } .fx-row-extra .row.fx-open .intro-parent-drag { translate: 0 0; rotate: 0deg; } .fx-row-extra .row.fx-open .super-text-sm { opacity: 1; translate: 20% 0; } .fx-row-extra .row.fx-open .icon-what { scale: 0; } /* a-25 deja el panel a 0 grados al cerrar (su segundo grupo lo fija con duracion 0), asi que la inclinacion de 15 grados solo se ve la PRIMERA vez que se abre la fila. `fx-seen` lo reproduce: el JS la pone en la primera apertura y ya no la quita. */ .fx-row-extra .row.fx-seen .intro-parent-drag { rotate: 0deg; } .fx-row-extra .row { cursor: pointer; } /* Sin movimiento: el estado se cambia igual, pero de golpe (lo hace fixes.js sin animar). */ @media (prefers-reduced-motion: reduce) { .fx-row-extra .row .intro-parent-drag, .fx-row-extra .row .super-text-sm, .fx-row-extra .row .icon-what { transition: none; } } /* =========================================================================== 3. septimo enlace del menu: Whitepaper =========================================================================== Los seis enlaces de la plantilla llevan DOS capas de texto en el mismo hueco (`.text-sm` en flujo y `.text-sm-ab.script` en absoluto sobre ella) y en reposo IX2 deja la cursiva 110 % por debajo del recorte de `.div-hide`. El septimo lo insertamos con ese `transform` en linea, pero `sanitizeInserted` borra cualquier `style` que lo mencione, asi que nacia a 0 y las dos capas se pisaban. Aqui se repone el reposo y se copia el relevo de a-8 / a-9: 300 ms con la curva outCirc de Webflow, que es sqrt(1-(t-1)^2) y por tanto se escribe exacta con linear(), no con una bezier aproximada. Las reglas de fx.css llevan `!important` en el hover, asi que estas tambien. */ .fx-nav-extra .text-sm { transform: translate3d(0, 0, 0) !important; } .fx-nav-extra .text-sm-ab { transform: translate3d(0, 110%, 0) !important; } .fx-nav-extra .text-sm, .fx-nav-extra .text-sm-ab { transition: transform .3s linear(0, 0.31225, 0.43589, 0.52678, 0.6, 0.66144, 0.71414, 0.76035, 0.8, 0.83516, 0.86603, 0.89303, 0.91652, 0.93675, 0.95394, 0.96825, 0.97980, 0.98869, 0.99499, 0.99875, 1); } .fx-nav-extra:hover .text-sm, .fx-nav-extra:focus-visible .text-sm { transform: translate3d(0, -110%, 0) !important; } .fx-nav-extra:hover .text-sm-ab, .fx-nav-extra:focus-visible .text-sm-ab { transform: translate3d(0, 0, 0) !important; } @media (prefers-reduced-motion: reduce) { .fx-nav-extra .text-sm, .fx-nav-extra .text-sm-ab { transition: none; } }