/* pantera-fondo.css — el vídeo como fondo de TODA la página. No toca ni un texto ni un enlace: solo pone el lienzo detrás y hace que el contenido que ya existe se lea encima. ── POR QUÉ ESTE CRISTAL NO LLEVA DESENFOQUE ─────────────────────────────── La primera versión del cristal usaba backdrop-filter (desenfoque). Se quitó por dos razones comprobadas, no por gusto: 1) EL DESENFOQUE TAPA LA PANTERA. Este vídeo tiene pelaje blanco y un patrón de talavera azul de trazo fino. Desenfocado, los dos se convierten en una neblina lechosa: la pantera queda como "ambiente", que es justo lo que se rechazó. Sin desenfoque se reconocen el pelaje, el patrón y los ojos. 2) ES EL PEOR CASO DOCUMENTADO PARA UN IPHONE. backdrop-filter obliga al motor a releer lo que ya pintó detrás, filtrarlo y recomponerlo (webkit.org/blog/3632). Y como aquí el fondo es un lienzo que cambia en CADA fotograma del scroll, nada se puede cachear: Chromium expande el rectángulo de daño al elemento completo, y en Firefox el mismo caso hacía que "the entire page is rendered for every scroll" (bugzilla 1732817). Esta página llegaba a tener ~20 superficies desenfocadas a la vez encima del lienzo, tres de ellas FIJAS (la barra de arriba, la marquesina y el menú del teléfono). No existe ningún dato publicado de cuántas aguanta un iPhone de verdad — y como eso es lo único que no se puede comprobar desde aquí, se elige la opción que no depende de ello: cero desenfoques. Lo que da el aspecto de vidrio sin desenfocar: el brillo de la esquina de arriba, el filo de luz del borde y la sombra por fuera. */ /* ── los números del cristal, en un solo sitio ───────────────────────────── El tinte NO se eligió a ojo. Medidos los 240 fotogramas: luminancia media 184 de 255 y el 70 % de cada cuadro es pelaje claro, con la peor zona clara en 246. Contra ESA zona (no contra la media, que engaña): tinte .40 → texto blanco 2,88:1 ILEGIBLE tinte .50 → texto blanco 3,92:1 todavía no tinte .58 → texto blanco 5,12:1 · texto cuerpo 4,04:1 tinte .68 → texto blanco 7,3:1 · texto cuerpo 5,8:1 ✓ El mínimo legal (WCAG AA) es 4,5:1. De ahí el degradado .58 → .68: lo justo para que se lea sobre pelaje blanco y no más, para que la pantera pase. */ :root{ --pf-tinte-1:rgba(10,16,34,.58); --pf-tinte-2:rgba(6,10,22,.68); --pf-filo:rgba(255,255,255,.14); --pf-filo-alto:rgba(255,255,255,.24); --pf-titulo:#ffffff; --pf-cuerpo:#dde5f2; /* el azul hielo de la marca (#8fbdf0) se queda en 3,00:1 sobre el cristal: no llega al mínimo. Subido a este tono da 4,48:1 y es el mismo color. */ --pf-hielo:#cfe2ff; --pf-sombra-t:0 2px 18px rgba(3,6,14,.92), 0 1px 3px rgba(3,6,14,.78); --pf-sombra-p:0 1px 12px rgba(3,6,14,.90), 0 1px 2px rgba(3,6,14,.72); } /* ── el lienzo, fijo detrás de todo ───────────────────────────────────── */ #pantera-fondo{ position:fixed; inset:0; z-index:0; width:100%; height:100%; display:block; background:#060a16; pointer-events:none; } /* el velo: lo que garantiza que CUALQUIER texto se lea encima del vídeo. El .42 de abajo era .78. Medido: el velo y el tinte del pie de página SE SUMAN, y entre los dos dejaban el último tramo en luminancia 20 de 255 — la pantera desaparecía justo en su mejor plano. Ahora cada capa aporta poco y entre las dos dan ~.50, que deja el fondo en ~92: la pantera se ve y el texto blanco sigue en 6,4:1 (el mínimo legal es 4,5:1). */ #pantera-velo{ position:fixed; inset:0; z-index:1; pointer-events:none; background: linear-gradient(to bottom, rgba(6,10,22,.62) 0%, rgba(6,10,22,.30) 26%, rgba(6,10,22,.30) 62%, rgba(6,10,22,.42) 100%), radial-gradient(ellipse 120% 70% at 50% 42%, transparent 30%, rgba(6,10,22,.55) 100%); } /* ── todo el contenido pasa por delante ───────────────────────────────── */ body > *:not(#pantera-fondo):not(#pantera-velo){ position:relative; z-index:2 } /* La página era opaca: se abre para que el vídeo se vea a través. OJO con el elemento raíz: WebKit, al ver un backdrop-filter, convierte el raíz en "backdrop root" y añade una capa de composición A PANTALLA COMPLETA; desde marzo de 2024 se SALTA esa capa si el raíz tiene fondo OPACO (bugs.webkit.org 271340). Antes aquí ponía html transparente y se perdía ese ahorro gratis. Ahora html va opaco y el lienzo lo tapa igual. */ html{ background:#060a16 } body{ background:transparent !important } /* ── el encabezado: ya no necesita su propia imagen, el fondo es el vídeo ─ */ .landing-hero{ background-image:none !important; background-color:transparent !important } .landing-hero::before{ background: linear-gradient(to bottom, rgba(6,10,22,.72) 0%, rgba(6,10,22,.58) 38%, rgba(6,10,22,.50) 62%, rgba(6,10,22,.86) 100%) !important } /* y una sombra propia bajo el texto del encabezado: se lee aunque detras venga pelaje blanco */ .landing-hero-inner h1, .landing-hero-inner p{ text-shadow:0 2px 22px rgba(6,10,22,.92), 0 1px 4px rgba(6,10,22,.8) } .landing-hero-inner p{ color:#cdd6e4 !important } .hero-fx{ display:none !important } /* fuera el zoom en bucle y el barrido automático */ /* ── las secciones: cada bloque lleva su propio velo para poder leerse ── */ .sec, section, .faq-wrap, .process-grid, .stat-row{ background:transparent !important } .sec > .wrap > h2, .sec > .wrap > p, .sec > .wrap > ul, .sec > .wrap > ol{ position:relative } /* ══ EL CRISTAL ═══════════════════════════════════════════════════════════ Tres capas y ningún desenfoque: (1) el brillo de la esquina de arriba — la luz resbalando por el vidrio; (2) el tinte, que es lo único que hace legible el texto; (3) el filo de luz del borde + la sombra por fuera, que es lo que hace que el ojo lo lea como una lámina de vidrio y no como un div opaco. */ .pf-panel{ position:relative; background: radial-gradient(132% 72% at 12% -8%, rgba(190,214,255,.16) 0%, rgba(190,214,255,.045) 34%, transparent 62%), linear-gradient(180deg, var(--pf-tinte-1) 0%, var(--pf-tinte-2) 100%); border:1px solid var(--pf-filo); border-top-color:var(--pf-filo-alto); border-radius:22px; padding:30px 26px; margin:28px auto; max-width:min(94vw,780px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 24px 60px rgba(2,5,12,.42); } @media(min-width:900px){ .pf-panel{ padding:40px 48px } } /* MATAR EL AIRE MUERTO DE DENTRO — la otra mitad de "están vacíos". empire.css le da 48 px de margen por ENCIMA al primer título de cada bloque (línea 407) y 20 px por debajo al último párrafo (línea 409). Dentro de un panel que ya tiene su propio relleno eso son ~136 px de nada rodeando el texto: una franja vacía arriba y otra abajo DENTRO de cada cristal. */ .pf-panel > :first-child, .pf-rotulo > :first-child{ margin-top:0 !important } .pf-panel > :last-child, .pf-rotulo > :last-child { margin-bottom:0 !important } .pf-panel h2{ margin-top:36px } @media(max-width:600px){ .pf-panel h2{ margin-top:28px } } /* ── EL RÓTULO: para los bloques que son SOLO un título ─────────────────── Medido en el navegador: de los 7 bloques de texto de esta página, tres (117, 104 y 104 letras de texto propio, sin tarjetas dentro) son solo el rótulo de la rejilla que viene debajo — "Todo lo que resolvemos por ti", "Y la tecnología que trabaja detrás", "Proceso de aplicación". Metidos en la lámina grande quedaban cajones de 780 × 250 px con dos líneas flotando en medio. Eso TAMBIÉN es un recuadro vacío, y es el que faltaba. Aquí la banda se ciñe a las palabras. */ .pf-rotulo{ position:relative; background: radial-gradient(130% 80% at 14% -14%, rgba(190,214,255,.14) 0%, transparent 58%), linear-gradient(180deg, rgba(10,16,34,.56) 0%, rgba(6,10,22,.66) 100%); border:1px solid var(--pf-filo); border-top-color:var(--pf-filo-alto); border-radius:18px; padding:16px 24px; margin:38px auto 6px; max-width:min(92vw,660px); text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 14px 34px rgba(2,5,12,.34); } /* El texto de esta web es gris #888888 sobre negro. Encima del cristal, con pelaje blanco detrás, ese gris desaparece. Sube a blanco y lleva sombra propia: la sombra hace de velo local justo detrás de cada letra, que es lo que sustituye al desenfoque para que el patrón fino no estorbe al leer. */ .pf-panel h1, .pf-panel h2, .pf-panel h3, .pf-panel h4, .pf-panel strong, .pf-panel b, .pf-panel a, .pf-rotulo h1, .pf-rotulo h2, .pf-rotulo h3, .pf-rotulo h4, .pf-rotulo strong, .pf-rotulo b{ color:var(--pf-titulo) !important; text-shadow:var(--pf-sombra-t); } .pf-panel p, .pf-panel li, .pf-panel td, .pf-panel summary, .pf-panel span, .pf-rotulo p, .pf-rotulo li, .pf-rotulo span{ color:var(--pf-cuerpo) !important; text-shadow:var(--pf-sombra-p); } /* Un recuadro DENTRO de otro = doble oscuridad. Era lo que apagaba las preguntas frecuentes: la pregunta llevaba su tinte y el panel que la envuelve otro encima. El de dentro pierde el suyo y se dibuja con filo y raya — y así queda más CLARO que el panel, que es contraste gratis. */ .pf-panel .faq-item, .pf-panel .div-item, .pf-panel .cond, .pf-panel .pcard, .pf-panel .pcard-in, .pf-panel .stat-row{ background:rgba(255,255,255,.055) !important; border:1px solid rgba(255,255,255,.11) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important; } /* las condiciones traen su propio texto gris de la hoja vieja */ .cond h4, .cond h3, .cond strong{ color:var(--pf-titulo) !important; text-shadow:var(--pf-sombra-t) } .cond p, .cond span{ color:var(--pf-cuerpo) !important; text-shadow:var(--pf-sombra-p) } /* los capítulos entran conforme bajas. El movimiento lo pone GSAP: aquí solo se esconden, para que no se vean saltar antes de que arranque el script. */ .pf-entra{ opacity:0 } /* ── EL TÍTULO DEL ENCABEZADO, PARTIDO EN DOS ───────────────────────────── "La agencia de OnlyFans para" entra desde la izquierda y "creadoras en España." desde la derecha, y se encuentran. Las dos mitades tienen que ser inline-block o el navegador no les deja moverse (a un trozo de texto suelto no se le puede aplicar un desplazamiento). */ .landing-hero-inner h1 .pf-h1-izq, .landing-hero-inner h1 em{ display:inline-block } /* ── EL PROCESO: APLICACIÓN · REVISIÓN · LLAMADA · MONTAMOS EL SISTEMA ──── Iban en 1,05 rem y en minúsculas: se perdían dentro de la tarjeta. */ .process-title{ font-size:clamp(1.3rem, 3.4vw, 1.78rem) !important; text-transform:uppercase; letter-spacing:.045em; line-height:1.12; margin-bottom:14px !important; color:var(--pf-titulo) !important; text-shadow:var(--pf-sombra-t); } .process-num{ font-size:.74rem !important; letter-spacing:.18em; color:var(--pf-hielo) !important; opacity:.75; } .process-desc{ color:var(--pf-cuerpo) !important; text-shadow:var(--pf-sombra-p) } .process-grid .div-item{ padding:30px 24px !important } /* ── LAS CONDICIONES, SIN LETRA PEQUEÑA ────────────────────────────────── Las dos columnas vivían dentro de un panel de 780 px: 360 px por columna, que en un párrafo de cuatro líneas se ve como una tira vertical. El panel que lleva una rejilla dentro se ensancha (la clase la reparte el script, porque no todos los navegadores entienden :has). */ /* el !important no es por capricho: index.html:553 lleva max-width:880px metido en el atributo style, y eso le gana a cualquier regla normal */ .pf-panel.pf-ancho{ max-width:min(96vw,1180px) !important } /* y la sección que lo envuelve lleva 64 px de aire a cada lado: con ellos, el panel no puede pasar de 1072 por mucho que se le suba el tope. Solo en las secciones que llevan un panel ancho se recorta ese aire. */ @media(min-width:1000px){ .pf-sec-ancho{ padding-left:20px !important; padding-right:20px !important } } /* EN EL TELÉFONO esa regla no entra, y entonces sale a la luz un problema que venía del HTML: esta sección es la ÚNICA de toda la página que vive DENTRO de otra .sec (index.html:552), así que el aire lateral se suma DOS VECES — 24 px de la de fuera más 24 px de la de dentro = 48 px por lado. Medido en vivo a 440 px de ancho: panel de las condiciones .... 344 px los demás paneles .... 392 px cada condición .............. 290 px cada pregunta FAQ .... 338 px y como .cond además reserva 52 px a la izquierda para el círculo del visto, al texto le quedaban 214 px: de ahí que se partiera a cinco palabras por línea. El aire de la sección de fuera ya está puesto; el de dentro sobra. Comprobado que `.sec .sec` solo alcanza a este bloque y a ninguno más. */ @media(max-width:999px){ .sec .sec{ padding-left:0 !important; padding-right:0 !important } } .cond-grid{ gap:22px !important; margin-top:30px !important } @media(min-width:900px){ .cond{ padding:28px 30px 28px 60px !important } } .cond{ border-radius:18px !important } /* ── LA TARJETA FINAL ──────────────────────────────────────────────────── "Tu cuenta de OnlyFans en España merece un sistema profesional". Llevaba el fondo OPACO metido en el atributo style (var(--bg-2)) — otra losa encima de la pantera, como lo era el pie. Pasa a cristal, y los bordes bien redondos. */ .pf-cta{ background: radial-gradient(130% 70% at 12% -8%, rgba(190,214,255,.17) 0%, rgba(190,214,255,.05) 34%, transparent 62%), linear-gradient(180deg, var(--pf-tinte-1) 0%, var(--pf-tinte-2) 100%) !important; border:1px solid var(--pf-filo); border-top-color:var(--pf-filo-alto); border-radius:34px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 26px 64px rgba(2,5,12,.44); padding:56px 26px !important; } @media(min-width:900px){ .pf-cta{ border-radius:52px !important; padding:72px 48px !important } } .pf-cta h2, .pf-cta h2 em{ color:var(--pf-titulo) !important; text-shadow:var(--pf-sombra-t) } .pf-cta p{ color:var(--pf-cuerpo) !important; text-shadow:var(--pf-sombra-p) } .pf-cta .eyebrow{ color:var(--pf-hielo) !important } /* ── NADA DESENFOCA EL LIENZO ────────────────────────────────────────────── Estos tres ya traían su propio desenfoque de antes y van FIJOS encima del vídeo, así que desenfocaban el vídeo entero en cada fotograma del scroll: · nav.scrolled (empire.css:200) blur(24px) — y sin !important, o sea que era MÁS específico que el `nav` que había aquí: ganaba él. Este era el peor de los tres, porque se activa en cuanto bajas un dedo. · #mainNav .nav-links (empire.css:640) blur(12px) a pantalla completa, y encima sobre un fondo que ya es opaco al 98 %: no aportaba nada. · .div-item (index.html:192) blur(18px) × 6 tarjetas a la vez. */ nav, nav.scrolled, #mainNav, #mainNav.scrolled{ background:rgba(6,10,22,.90) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } #mainNav .nav-links{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important } /* y el cuarto, que no estaba en ninguna hoja: assets/cookies.js se inyecta un