/* ========================================================================== Capa FreeMind I&T — aviso de sitio en desarrollo Estética de freemindiyt.com: negro dominante, blanco, CERO acentos de color, cero degradados, cero sombras, cero radios. El contraste lo carga el peso tipográfico y el ritmo, no el color. Es una capa aparte a propósito: no toca ni una regla del sitio de SIND/DIGNIDAD. Se puede borrar entera el día del lanzamiento quitando dos líneas de cada página. ========================================================================== */ .fm { --fm-ink: #000; --fm-paper: #fff; --fm-line: rgba(255, 255, 255, .14); --fm-e: cubic-bezier(.2, .7, .3, 1); --fm-soft: cubic-bezier(.4, 0, .2, 1); --fm-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --fm-mono: "Martian Mono", ui-monospace, "SF Mono", Consolas, monospace; } /* Compuerta: la activa un script en línea del de cada página para pintar el negro antes del primer fotograma, y así no ver un destello del contenido antes de que monte la puerta. Se quita sola a los 5 s pase lo que pase. */ html.fm-esperando::before { content: ""; position: fixed; inset: 0; z-index: 9499; background: #000; } /* Mientras la puerta está puesta, la página de detrás no se desplaza. */ html.fm-bloqueado, html.fm-bloqueado body { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════ 1. PUERTA — el aviso de sitio en desarrollo y no pagado No es decoración: es una condición que el cliente tiene que leer y aceptar antes de recorrer la demostración. Por eso, a diferencia de una animación de entrada, NO se salta con un clic, NO se cierra sola y NO desaparece con prefers-reduced-motion (ahí sale entera, pero quieta). La marca es el logo de FreeMind I&T con un signo de admiración en lugar de los dos rombos: mismas coordenadas, misma banda de 36.5 unidades. Dos fases: 1. La marca se dibuja en el CENTRO exacto de la pantalla. 2. Sube y aparece el texto con los dos botones. ══════════════════════════════════════════════════════════════════════════ */ .fm-puerta { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 56px); background: var(--fm-ink); color: var(--fm-paper); font-family: var(--fm-display); -webkit-font-smoothing: antialiased; /* Se puede desplazar, pero SIN barra a la vista. Motivo: para que la marca se forme en el centro exacto de la pantalla, el bloque arranca desplazado hacia abajo y vuelve a su sitio al terminar. Ese desplazamiento asoma unos 50 px por debajo durante los 3,6 s que dura la animación, y el navegador saca una barra que aparece, parpadea y se va. El contenido cabe de sobra (583 px de 862), así que esa barra no informa de nada: solo ensucia. Se oculta la barra, no la capacidad de desplazar: en una pantalla muy baja —un móvil apaisado— se sigue llegando a los botones con la rueda, el dedo o el tabulador. */ overflow-y: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Edge antiguo */ overscroll-behavior: contain; /* que el desplazamiento no se filtre a la página de detrás */ } .fm-puerta::-webkit-scrollbar { width: 0; height: 0; } /* Al aceptar se levanta y el script la saca del DOM. */ .fm-puerta[data-fuera="true"] { animation: fmSalir .6s var(--fm-e) forwards; } .fm-puerta__centro { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 52ch; margin: auto; /* La marca se forma en el CENTRO de la pantalla, no encima del centro: el bloque arranca bajado la mitad de lo que ocupa el texto —que ya está ahí, invisible, reservando su sitio— y después sube. El valor lo mide el script, porque depende de cuánto texto haya. */ transform: translateY(var(--fm-baja, 0px)); } /* ── La marca ── */ .fm-puerta__marca { display: block; /* El mismo tamaño que el logo en la entrada de freemindiyt.com. */ width: clamp(120px, 16vw, 168px); height: auto; /* Los puntos de los vértices sobresalen del viewBox. */ overflow: visible; } /* Contorno que se traza. 2.2 es el hilo con el que se DIBUJA, no el grosor del marco: el marco sale del relleno, que es una banda de 36.5 unidades. */ .fm-marcaRing { fill: none; stroke: var(--fm-paper); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; } /* Relleno: la misma forma exacta que el contorno, así que no hay salto. */ .fm-marcaFill { fill: var(--fm-paper); fill-rule: evenodd; opacity: 0; transform-box: fill-box; transform-origin: center; } /* Eco: el hexágono se expande y se desvanece, como un pulso de radar. Es lo que hace que el aviso resalte sin usar un solo color. */ .fm-hexEcho { fill: none; stroke: var(--fm-paper); stroke-width: 2.2; opacity: 0; transform-box: fill-box; transform-origin: center; } .fm-puerta .fm-v { --d: 0ms; fill: var(--fm-paper); opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; } /* ── Texto ── */ .fm-puerta__etiqueta { margin: 2.2rem 0 0; font-family: var(--fm-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .6); opacity: 0; } .fm-puerta__titulo { margin: .9rem 0 0; font-family: var(--fm-display); font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--fm-paper); text-wrap: balance; opacity: 0; transform: translateY(8px); } .fm-puerta__texto { margin: 1.1rem 0 0; font-family: var(--fm-display); font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.6; color: var(--fm-paper); opacity: 0; transform: translateY(8px); } .fm-puerta__texto strong { font-weight: 600; } .fm-puerta__filete { width: 100%; height: 1px; margin-top: 2.4rem; background: var(--fm-line); opacity: 0; } /* ── Botones ── */ .fm-puerta__botones { display: flex; gap: 12px; margin-top: 1.8rem; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(8px); } .fm-puerta__b { font-family: var(--fm-display); font-size: .95rem; font-weight: 500; padding: 14px 26px; border: 1px solid var(--fm-paper); cursor: pointer; transition: background .2s ease, color .2s ease, opacity .2s ease; } .fm-puerta__b--si { background: var(--fm-paper); color: var(--fm-ink); } .fm-puerta__b--si:hover { background: transparent; color: var(--fm-paper); } .fm-puerta__b--no { background: transparent; color: var(--fm-paper); border-color: var(--fm-line); opacity: .75; } .fm-puerta__b--no:hover { opacity: 1; border-color: var(--fm-paper); } .fm-puerta__b:focus-visible { outline: 1px solid var(--fm-paper); outline-offset: 3px; } .fm-puerta__firma { margin-top: 2.6rem; font-family: var(--fm-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .4); opacity: 0; } .fm-puerta__firma a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; } .fm-puerta__firma a:hover { color: var(--fm-paper); } /* ── Coreografía ─────────────────────────────────────────────────────────── Los tiempos son los de freemindiyt.com. Los solapes son a propósito: el relleno entra en 2250 ms cuando el trazo aún no se ha apagado (2400 ms), y el texto entra MIENTRAS el bloque sube (2700 → 3600 ms). Separar las fases hace que la animación pegue tirones. ────────────────────────────────────────────────────────────────────────── */ .fm-puerta.fm-play .fm-v { animation: fmVertice .55s var(--fm-soft) var(--d) both, fmDesaparecer .5s var(--fm-e) 1550ms forwards; } .fm-puerta.fm-play .fm-marcaRing { animation: fmTrazar 1.4s var(--fm-soft) 1000ms forwards, fmDesaparecer .65s linear 2400ms forwards; } .fm-puerta.fm-play .fm-marcaFill { animation: fmAparecer .95s var(--fm-soft) 2250ms forwards, fmLatidoMarca 2.8s ease-in-out 3900ms infinite; } .fm-puerta.fm-play .fm-hexEcho { animation: fmEco 2.8s var(--fm-e) 3900ms infinite; } .fm-puerta.fm-play .fm-puerta__centro { animation: fmSubirBloque .9s var(--fm-e) 2700ms forwards; } .fm-puerta.fm-play .fm-puerta__etiqueta { animation: fmAparecer .7s var(--fm-soft) 2950ms forwards; } .fm-puerta.fm-play .fm-puerta__titulo { animation: fmSubir .7s var(--fm-soft) 3060ms forwards; } .fm-puerta.fm-play .fm-puerta__texto { animation: fmSubir .7s var(--fm-soft) 3180ms forwards; } .fm-puerta.fm-play .fm-puerta__filete { animation: fmAparecer .7s var(--fm-soft) 3320ms forwards; } .fm-puerta.fm-play .fm-puerta__botones { animation: fmSubir .7s var(--fm-soft) 3420ms forwards; } .fm-puerta.fm-play .fm-puerta__firma { animation: fmAparecer .7s var(--fm-soft) 3600ms forwards; } /* Estado final sin animación. El contenido de la puerta NUNCA depende de que la animación llegue a correr: si no corre, se planta esto. */ .fm-puerta.fm-quieto .fm-marcaRing { stroke-dashoffset: 0; opacity: 0; } .fm-puerta.fm-quieto .fm-marcaFill { opacity: 1; } .fm-puerta.fm-quieto .fm-v { opacity: 0; } .fm-puerta.fm-quieto .fm-puerta__centro { transform: none; } .fm-puerta.fm-quieto .fm-puerta__etiqueta, .fm-puerta.fm-quieto .fm-puerta__titulo, .fm-puerta.fm-quieto .fm-puerta__texto, .fm-puerta.fm-quieto .fm-puerta__filete, .fm-puerta.fm-quieto .fm-puerta__botones, .fm-puerta.fm-quieto .fm-puerta__firma { opacity: 1; transform: none; } /* ── Panel de rechazo ── */ .fm-puerta__no { display: none; flex-direction: column; align-items: center; text-align: center; max-width: 50ch; margin: auto; opacity: 0; transform: translateY(10px); animation: fmSubir .6s var(--fm-e) forwards; } .fm-puerta[data-rechazado="true"] .fm-puerta__centro { display: none; } .fm-puerta[data-rechazado="true"] .fm-puerta__no { display: flex; } .fm-puerta__palabra { margin: 1.6rem 0 0; font-family: var(--fm-display); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -.03em; color: var(--fm-paper); } .fm-puerta__palabra span { font-weight: 300; margin-left: .3em; } .fm-puerta__notxt { margin: 1.2rem 0 0; font-family: var(--fm-display); font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.6; color: rgba(255, 255, 255, .8); } /* El lema del grupo, con el filete de la casa a la izquierda. Es la frase que cierra: va aparte del párrafo para que se lea como declaración, no como coletilla. */ .fm-puerta__lema { margin: 1.6rem 0 0; padding-left: 1.1em; border-left: 2px solid var(--fm-paper); text-align: left; font-family: var(--fm-display); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.45; letter-spacing: -.02em; color: var(--fm-paper); } .fm-puerta__datos { list-style: none; padding: 2rem 0 0; margin: 2.2rem 0 0; display: grid; gap: 1.3rem; width: 100%; border-top: 1px solid var(--fm-line); } .fm-puerta__k { display: block; font-family: var(--fm-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: .5em; } .fm-puerta__v { color: var(--fm-paper); font-family: var(--fm-display); font-size: 1.02rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .fm-puerta__v:hover { opacity: .75; } .fm-puerta__volver { margin-top: 2.4rem; } @keyframes fmVertice { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } } @keyframes fmTrazar { to { stroke-dashoffset: 0; } } @keyframes fmDesaparecer { to { opacity: 0; } } @keyframes fmAparecer { to { opacity: 1; } } @keyframes fmSubir { to { opacity: 1; transform: none; } } @keyframes fmSubirBloque { to { transform: translateY(0); } } @keyframes fmSalir { to { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes fmLatidoMarca { 0%, 100% { transform: scale(1); } 38% { transform: scale(1.05); } } @keyframes fmEco { 0% { opacity: .5; transform: scale(1); } 70% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; transform: scale(1.22); } } /* ══════════════════════════════════════════════════════════════════════════ 2. DISTINTIVO FLOTANTE — «sitio en desarrollo» Pequeño, esquina inferior, se puede cerrar. Nunca tapa contenido ni bloquea la interacción con la página. ══════════════════════════════════════════════════════════════════════════ */ .fm-distintivo { position: fixed; left: clamp(12px, 2.5vw, 24px); bottom: clamp(12px, 2.5vw, 24px); z-index: 8000; background: var(--fm-ink); border: 1px solid rgba(255, 255, 255, .22); color: var(--fm-paper); max-width: min(340px, calc(100vw - 32px)); opacity: 0; transform: translateY(10px); transition: opacity .45s var(--fm-e), transform .45s var(--fm-e); } .fm-distintivo[data-visible="true"] { opacity: 1; transform: none; } .fm-distintivo__barra { display: flex; align-items: center; gap: 12px; padding: 11px 14px; width: 100%; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; } .fm-distintivo__punto { width: 6px; height: 6px; flex: none; background: var(--fm-paper); animation: fmLatido 2.4s ease-in-out infinite; } @keyframes fmLatido { 0%, 100% { opacity: 1; } 50% { opacity: .28; } } .fm-distintivo__texto { font-family: var(--fm-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fm-distintivo__flecha { margin-left: auto; flex: none; opacity: .5; transition: transform .3s var(--fm-e); } .fm-distintivo[data-abierto="true"] .fm-distintivo__flecha { transform: rotate(180deg); } .fm-distintivo__panel { display: none; border-top: 1px solid var(--fm-line); padding: 18px 16px 16px; } .fm-distintivo[data-abierto="true"] .fm-distintivo__panel { display: block; } .fm-distintivo__panel p { font-family: var(--fm-display); font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0 0 14px; } .fm-distintivo__panel strong { color: var(--fm-paper); font-weight: 600; } .fm-distintivo__pie { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--fm-line); } .fm-distintivo__pie img { width: 20px; height: auto; flex: none; opacity: .9; } .fm-distintivo__pie a { font-family: var(--fm-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .2s; } .fm-distintivo__pie a:hover { color: var(--fm-paper); text-decoration: underline; } .fm-distintivo__cerrar { margin-left: auto; background: none; border: 0; color: rgba(255, 255, 255, .45); cursor: pointer; padding: 4px; font-family: var(--fm-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; transition: color .2s; } .fm-distintivo__cerrar:hover { color: var(--fm-paper); } /* ══════════════════════════════════════════════════════════════════════════ 3. FRANJA DE CRÉDITO — la estética de la empresa, dentro de la página Va justo encima del pie de SIND/DIGNIDAD. Es el bloque negro puro donde FreeMind aparece con su propia identidad, sin contaminar la del sindicato. ══════════════════════════════════════════════════════════════════════════ */ .fm-franja { background: var(--fm-ink); color: var(--fm-paper); border-top: 1px solid var(--fm-line); padding: clamp(48px, 7vw, 88px) 0; } .fm-franja__caja { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px); } .fm-franja__marca { width: clamp(44px, 5vw, 62px); } .fm-franja__marca img { width: 100%; height: auto; opacity: .95; } .fm-franja__etiqueta { display: inline-flex; align-items: center; gap: .8em; font-family: var(--fm-mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin: 0 0 14px; } .fm-franja__etiqueta::before { content: ""; width: 26px; height: 1px; background: rgba(255, 255, 255, .4); } .fm-franja h2 { font-family: var(--fm-display); font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .5em; color: var(--fm-paper); } .fm-franja h2 span { font-weight: 260; } .fm-franja p { font-family: var(--fm-display); font-size: .92rem; line-height: 1.65; color: rgba(255, 255, 255, .66); margin: 0; max-width: 56ch; } .fm-franja__enlace { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .28); padding: 14px 22px; font-family: var(--fm-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fm-paper); text-decoration: none; white-space: nowrap; transition: background .25s var(--fm-e), color .25s var(--fm-e), border-color .25s; } .fm-franja__enlace:hover { background: var(--fm-paper); color: var(--fm-ink); border-color: var(--fm-paper); } @media (max-width: 860px) { .fm-franja__caja { grid-template-columns: 1fr; gap: 26px; } .fm-franja__marca { width: 48px; } } /* ══════════════════════════════════════════════════════════════════════════ Accesibilidad: si la persona pidió menos movimiento, se quita el movimiento — no el contenido. OJO con la puerta: antes aquí había un `display: none` para la entrada, porque la entrada era decorativa y esconderla no costaba nada. La puerta NO se puede esconder: es la condición que el cliente tiene que leer. Aparece igual, entera y de inmediato, solo que sin animación (clase .fm-quieto). ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .fm-puerta, .fm-puerta * { animation: none !important; transition: none !important; } .fm-distintivo { transition: none; opacity: 1; transform: none; } .fm-distintivo__punto { animation: none; } }