/* ============================================================================ ALPHA PRO — EL AMANECER APLICADO AL SITIO ---------------------------------------------------------------------------- HOJA ADICIONAL, NO SUSTITUTIVA. Se carga SIEMPRE al final (después de home.css y, en las interiores, de interiores.css). No reescribe la forma del sitio: tipografías, radios, geometría de botones y tarjetas, todo eso queda tal cual. Lo que cambia es el SISTEMA DE FONDO y, como consecuencia obligatoria, el sistema de color del contenido que se apoya encima. REGLA DE ORO, la misma de la prueba: NINGUNA regla pinta fondo de página. El fondo es el canvas `#cielo` y nada más. Mientras el fondo se defina por sección siempre habrá un borde donde dos definiciones distintas se tocan — eso es, literalmente, lo que producía las costuras (medido antes de este cambio: 61 de 84 bordes de sección de las 6 páginas eran un escalón). LOS DOS REGÍMENES. Cada `[data-bloque]` recibe de tema.js: data-regimen = noche | alba fijo, por su posición en el DOCUMENTO --k 0..1, avance DENTRO del régimen --lum-cielo luminancia del cielo detrás (para el QA) Dentro de un régimen todo es continuo; entre regímenes hay UN salto, y ese salto ocurre en la banda del alba, donde no hay texto que medir. NOCHE = los tokens de hoy, VERBATIM. Es deliberado: la mitad de arriba está aprobada y el encargo era arreglar las costuras, no rediseñarla. Lo único que cambia arriba es qué hay detrás del contenido (el cielo en vez de seis washes recortados). Así, además, ninguna medición de contraste de la mitad superior puede empeorar por culpa de este trabajo. ============================================================================ */ /* --------------------------------------------------------------------------- 1 · EL LIENZO Y LA CAPA DE FÓRMULAS --------------------------------------------------------------------------- */ /* LA CAPA DEL DEGRADADO. Absoluta y de la altura del DOCUMENTO, así que el degradado se define de una sola pieza sobre la página entera y se mueve con el scroll sin que nadie lo empuje. La pinta cielo.js una vez por cambio de alto (no por frame): es una sola instrucción de pintado para todo el documento, que es justo lo que hace imposible la costura. Estuvo en el canvas y se sacó por rendimiento: rellenar 2,6 millones de píxeles por frame desde JS bajaba el home de 35,1 a 30,5 fps. Ver cielo.js. */ #cielo-fondo { position: absolute; top: 0; left: 0; width: 100%; z-index: -101; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; /* `screen` imita el compositing aditivo que usaba el canvas para el resplandor cálido; con `normal` una capa cálida al 17% no ilumina el azul, lo desatura. */ background-blend-mode: screen, normal; } /* --------------------------------------------------------------------------- 1.b · LA LUZ DEL AMANECER — foco, rayos, bruma y grano --------------------------------------------------------------------------- El amanecer era una INTERPOLACION DE COLOR y nada mas: dos degradados y ningun elemento. Un amanecer real no es un degradado, es una FUENTE DE LUZ baja con todo lo que esa fuente produce — halo, rayos, calidos cerca y frios lejos, y aire con particulas que revela los rayos. Referentes mirados antes de decidir (que tomo / que descarto): · Fotografia de hora azul (Blue Hour): el sol AUN BAJO el horizonte da un foco de luz sin disco visible, calido y muy concentrado, contra un cielo que sigue frio arriba. TOMO: el foco sin disco y el contraste de temperatura. DESCARTO: el disco solar y el cielo naranja pleno — aqui el amanecer es CONTENIDO. · Rayos crepusculares (god rays) de la fotografia de paisaje: haces divergentes desde el foco, tenues, irregulares en ancho. TOMO: la divergencia desde un punto y la irregularidad. DESCARTO: el contraste alto de los "godrays" de videojuego, que aqui taparia el texto. · Nubosidad baja en capas: bandas horizontales blandas que se desplazan MUY lento y en direcciones distintas segun la altura. TOMO: las capas a velocidades distintas (parallax de aire). DESCARTO: nubes dibujadas con silueta — una silueta reconocible compite con el contenido. TODAS estas capas se componen en `screen` (aditivo): sobre un cielo azul una capa calida en modo normal no ilumina, DESATURA. Es el mismo motivo por el que el resplandor calido del fondo ya usaba `background-blend-mode: screen`. Y todas van en z-index -101, detras del canvas de estrellas (-100) y de la capa de formulas (-50): son cielo, no contenido. La geometria (top y height) la escribe cielo.js, que es quien sabe el alto del documento; aqui solo esta la pinta. Ninguna anima `top`, `height`, `left` ni `width`: todas animan `transform` y `opacity`, que el compositor resuelve sin recalcular ni una linea de layout. Por eso todo este movimiento no cuesta frames de JS. --------------------------------------------------------------------------- */ #cielo-sol, #cielo-rayos, #cielo-bruma, #cielo-grano { position: absolute; left: 0; width: 100%; z-index: -101; pointer-events: none; overflow: hidden; } /* EL FOCO DE LUZ NACIENTE. Tres paradas y no dos: el nucleo calido casi blanco, el ambar/durazno de la caida, y el rosa que se apaga contra el azul. Es lo que evita el "degradado uniforme" — la luz cae rapido cerca del foco y lento lejos, como la luz de verdad, no linealmente. */ #cielo-sol .foco { position: absolute; left: 50%; bottom: 0; width: 190%; height: 100%; transform: translateX(-50%); transform-origin: 50% 100%; mix-blend-mode: screen; background: radial-gradient(ellipse 34% 46% at 50% 100%, rgba(255, 233, 206, .50) 0%, rgba(255, 206, 156, .34) 26%, rgba(245, 166, 138, .17) 52%, rgba(214, 140, 150, .06) 76%, rgba(214, 140, 150, 0) 100%), radial-gradient(ellipse 78% 70% at 50% 104%, rgba(255, 196, 150, .16) 0%, rgba(255, 196, 150, 0) 70%); animation: sol-respira 26s ease-in-out infinite alternate; } /* "El degradado que respire": el foco cambia de tamaño y de intensidad muy despacio, como cambia de verdad la luz mientras sale el sol. 26s de ida. Es el movimiento que se nota mirando 5 segundos y no distrae leyendo. */ @keyframes sol-respira { from { transform: translateX(-50%) scale(1, .94); opacity: .82; } to { transform: translateX(-50%) scale(1.09, 1.07); opacity: 1; } } /* RAYOS CREPUSCULARES. Un `conic-gradient` de sectores desiguales visto desde el foco = haces que divergen. La mascara radial los borra en el nucleo (donde estarian "dentro" del sol) y en la lejania, que es como se ven: nacen a cierta distancia del foco y se disuelven. Giran 360 grados en 4 minutos — a esa velocidad no se percibe una rotacion, se percibe que la luz respira. */ #cielo-rayos .haz { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%) rotate(0deg); transform-origin: 50% 50%; mix-blend-mode: screen; opacity: .5; background: conic-gradient(from 12deg, rgba(255, 224, 190, 0) 0deg, rgba(255, 224, 190, .13) 3deg, rgba(255, 224, 190, 0) 8deg, rgba(255, 224, 190, 0) 21deg, rgba(255, 214, 178, .09) 24deg, rgba(255, 214, 178, 0) 27deg, rgba(255, 224, 190, 0) 44deg, rgba(255, 232, 205, .15) 49deg, rgba(255, 232, 205, 0) 53deg, rgba(255, 224, 190, 0) 72deg, rgba(250, 198, 170, .08) 75deg, rgba(250, 198, 170, 0) 80deg, rgba(255, 224, 190, 0) 104deg, rgba(255, 228, 198, .12) 108deg, rgba(255, 228, 198, 0) 113deg, rgba(255, 224, 190, 0) 140deg, rgba(255, 216, 182, .10) 144deg, rgba(255, 216, 182, 0) 149deg, rgba(255, 224, 190, 0) 180deg, rgba(255, 224, 190, 0) 360deg); -webkit-mask-image: radial-gradient(closest-side, transparent 8%, #000 34%, #000 58%, transparent 92%); mask-image: radial-gradient(closest-side, transparent 8%, #000 34%, #000 58%, transparent 92%); animation: rayos-giran 240s linear infinite; } @keyframes rayos-giran { from { transform: translate(-50%, 50%) rotate(0deg); } to { transform: translate(-50%, 50%) rotate(360deg); } } /* BRUMA EN CAPAS. Tres bandas de nubosidad baja, cada una a su velocidad y en su direccion: es lo que da profundidad de aire. Se desplazan con `translate3d` sobre una capa el doble de ancha que la pantalla, asi que el ciclo no tiene costura visible. La mas lenta tarda 3 minutos en cruzar. */ #cielo-bruma .capa { position: absolute; left: -50%; width: 200%; mix-blend-mode: screen; will-change: transform; } #cielo-bruma .capa.c1 { top: 6%; height: 34%; background: radial-gradient(ellipse 30% 60% at 18% 50%, rgba(255, 226, 200, .15), transparent 70%), radial-gradient(ellipse 22% 48% at 47% 62%, rgba(226, 236, 255, .12), transparent 72%), radial-gradient(ellipse 34% 52% at 78% 44%, rgba(255, 214, 190, .11), transparent 70%); animation: bruma-va 186s linear infinite; } #cielo-bruma .capa.c2 { top: 30%; height: 42%; background: radial-gradient(ellipse 40% 46% at 30% 55%, rgba(255, 236, 216, .125), transparent 72%), radial-gradient(ellipse 26% 40% at 66% 40%, rgba(240, 226, 255, .17), transparent 74%); animation: bruma-viene 262s linear infinite; } #cielo-bruma .capa.c3 { top: 58%; height: 44%; background: radial-gradient(ellipse 46% 40% at 24% 60%, rgba(255, 228, 202, .17), transparent 70%), radial-gradient(ellipse 30% 34% at 72% 48%, rgba(255, 242, 226, .14), transparent 72%); animation: bruma-va 148s linear infinite; } @keyframes bruma-va { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(25%, 0, 0); } } @keyframes bruma-viene { from { transform: translate3d(25%, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* GRANO. Un degradado de 8 bits sobre 4000px de alto produce bandas visibles (cada tope de color dura ~500px, o sea que el salto de 1/255 se ve como una franja). El ruido las rompe: es el mismo truco del cine para el mismo problema. `feTurbulence` en un data-URI, sin pedir un archivo mas. Es estatico a proposito: un grano que se mueve es "ruido de TV", y eso si distrae. */ #cielo-grano { opacity: .5; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); background-repeat: repeat; } /* El canvas queda SOLO con las estrellas y las constelaciones, con alfa, encima del degradado. Pasada la zona de estrellas ni siquiera se dibuja. */ #cielo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -100; pointer-events: none; } /* El body pinta el primer tope del degradado y no el --bg del sitio: si el canvas tardara un frame en pintar no hay destello de otro color. */ body { background: #07080d; } /* Capa de fórmulas: espacio de DOCUMENTO, detrás del contenido y delante del cielo. `contain: paint` para que 15 SVG grandes no obliguen a repintar la página completa en cada scroll. */ #capa-formulas { position: absolute; top: 0; left: 0; width: 100%; z-index: -50; pointer-events: none; overflow: hidden; contain: paint; } .formula { position: absolute; color: #0a1c30; /* tinta oscura: marca de agua sobre cielo claro */ font-size: calc(15px * var(--esc, 1)); transform: rotate(var(--giro, 0deg)); transform-origin: left center; will-change: opacity; /* APARECEN Y SE DESVANECEN. Antes tenian una `opacity` inline fija y quedaban pegadas al fondo como una calcomania. tema.js ahora entrega `--op` (el techo medido contra la luminancia del cielo, que es lo que garantiza que no compitan con el texto) y la animacion se mueve entre el 22% y el 100% de ese techo. `--retardo` es NEGATIVO: arranca cada una en un punto distinto del ciclo ya empezado, asi no hay un fundido colectivo al cargar. 38s de ciclo: se nota que respira si uno la mira, y no se percibe si uno esta leyendo. */ opacity: var(--op, 0); animation: formula-respira 38s ease-in-out infinite alternate; animation-delay: var(--retardo, 0s); } @keyframes formula-respira { from { opacity: calc(var(--op, 0) * .22); } to { opacity: var(--op, 0); } } .formula svg { display: block; } /* MathJax pinta con currentColor; se fuerza por si alguna versión emite un fill fijo */ .formula svg [fill]:not([fill="none"]) { fill: currentColor; } .formula svg [stroke]:not([stroke="none"]) { stroke: currentColor; } @media (max-width: 640px) { .formula { font-size: calc(10.5px * var(--esc, 1)); } } /* --------------------------------------------------------------------------- 2 · LOS DOS REGÍMENES DE COLOR --------------------------------------------------------------------------- */ /* NOCHE — los valores de :root de home.css, repetidos aquí a propósito para que el régimen sea explícito y no dependa de la herencia. Un solo cambio: los bordes ganan un punto de presencia al final del tramo (--k) porque el cielo sube y un borde de #24242b se empieza a perder. */ [data-regimen="noche"] { --fg: #f5f5f7; /* --muted y --dim SIGUEN AL CIELO dentro del régimen de noche, y esta es la parte del encargo que dice "que el texto transite junto con el fondo". Motivo, medido: en la mitad oscura el cielo no es constante — sube de luminancia .002 a .049 al llegar a la banda. Los grises tenues del sitio se definieron contra un fondo casi negro y, apoyados directo sobre el cielo ya subido, se despeñan: --dim (#6b6b76, luminancia .150) sobre el cielo de la frontera da 2.0:1. Medido en la primera pasada del arnés: `cv-meta` a 2.85, `crumbs` a 3.61, `disclaimer` a 3.53. Con `--k` (0 al empezar la noche, 1 en la frontera) los dos se aclaran exactamente lo que baja el contraste, así que el texto tenue vale lo mismo arriba que abajo. Los topes de llegada no son a ojo: son los que devuelven 4.5:1 sobre el cielo más claro del régimen. */ --muted: color-mix(in srgb, #a1a1aa, #b4b4bd calc(var(--k, 0) * 100%)); --dim: color-mix(in srgb, #6b6b76, #a9aebb calc(var(--k, 0) * 100%)); --bg: #0a0a0b; --surface: #111114; --surface-2: #17171b; --border: #24242b; --border-strong: #34343d; --accent: #3d8bf0; --accent-hover: #5aa0f5; --cyan: #34c5ea; --credito: #3d8bf0; --cobranza: #22b8e6; --data: #14b8a6; --research: #8b5cf6; --nosotros: #c9a227; --hoja: transparent; } /* ALBA — la mitad de abajo, sobre hojas claras. Cada valor de texto está puesto contra una MEDICIÓN, no a ojo; los tres que más costaron están anotados. Referencia de la prueba aislada: --dim pasó por #4a5f79 (4.65:1, justo) y #3f5570 (4.29:1, FALLA al bajar la opacidad de la hoja) antes de cerrarse en #364d67 (5.30:1 en el peor punto del recorrido). */ [data-regimen="alba"] { --fg: #0b1524; --muted: #33475f; --dim: #364d67; --bg: #eef4fb; /* los scrims de kicker se vuelven claros */ /* Las tarjetas van un punto más opacas y más frías que la hoja que las sostiene: es lo que las separa de ella sin dibujar un borde fuerte. */ --surface: rgba(235, 243, 252, calc(0.84 + 0.06 * var(--k, 0))); --surface-2: rgba(222, 233, 245, calc(0.88 + 0.06 * var(--k, 0))); --border: rgba(11, 21, 36, calc(0.10 + 0.04 * var(--k, 0))); --border-strong: rgba(11, 21, 36, calc(0.20 + 0.06 * var(--k, 0))); --accent: #154a9e; --accent-hover: #1a5cc0; --cyan: #0d6f92; /* Acentos por producto, versión de fondo claro. NO se pueden aplicar por variable: productos.js escribe `--card-accent` INLINE en cada tarjeta y una custom property inline gana a cualquier regla de hoja. Por eso más abajo se redefinen los CONSUMIDORES de --card-accent, no la variable. */ --credito: #1a5cc0; --cobranza: #0d6f92; --data: #0a6f66; --research: #5b34c4; /* El oro del sitio (#c9a227) es un color de MODO OSCURO: sobre hoja clara mide 2.4:1. Este ámbar oscuro conserva el gesto de marca y mide 5.65:1. */ --nosotros: #7a5c08; --hoja: rgba(247, 251, 255, calc(0.74 + 0.08 * var(--k, 0))); --hoja-bd: rgba(11, 21, 36, calc(0.10 + 0.04 * var(--k, 0))); } [data-bloque] { color: var(--fg); } /* --------------------------------------------------------------------------- 3 · LA HOJA — la regla que hace que la legibilidad no dependa de la suerte --------------------------------------------------------------------------- El texto desnudo sobre el cielo solo es seguro mientras el cielo es oscuro: el blanco aguanta hasta luminancia .1833 y ahí se acaba. De la banda del alba hacia abajo el cielo pasa de largo ese valor, así que ABAJO NO HAY TEXTO DESNUDO: todo el contenido de un bloque de régimen "alba" se apoya en una hoja clara. Arriba, en régimen "noche", la misma hoja es invisible y el texto respira directo sobre el cielo, igual que hoy. Un solo marcado, dos comportamientos: el régimen decide. Esto NO es decoración. La primera versión de la prueba no tenía hoja y la medición de contraste la reprobó en 17 puntos (kickers, h2 y el pie completo, entre 1.02:1 y 4.07:1). Si alguien agrega una sección debajo de la banda sin `.lamina`, la va a reprobar el QA — y con razón. Sin `backdrop-filter`, a diferencia de la prueba: es la propiedad más cara del conjunto, en las hojas del sitio cubre áreas enormes y en WebKit se comporta distinto. La medición de contraste no cambia sin ella (la hoja ya es opaca por color); solo se pierde el desenfoque del cielo a través. --------------------------------------------------------------------------- */ .lamina { position: relative; } [data-regimen="noche"] .lamina { background: none; border: 0; padding: 0; box-shadow: none; } [data-regimen="alba"] .lamina { background: var(--hoja); border: 1px solid var(--hoja-bd); border-radius: var(--r-xl); box-shadow: 0 24px 60px -30px rgba(9, 24, 45, .45); padding: clamp(26px, 3.4vw, 54px); } /* --------------------------------------------------------------------------- 4 · LA BANDA DEL ALBA — el único punto donde cambia el régimen del contenido --------------------------------------------------------------------------- No lleva texto A PROPÓSITO: es lo que garantiza que el cruce de régimen no pueda producir un punto de bajo contraste, porque no hay nada que medir ahí. Es una línea de horizonte y el respiro alrededor. La frontera real que usa tema.js es el BORDE INFERIOR de este elemento (`data-frontera`), no un número de scroll: si la página crece o se reordena, el cruce se mueve con la banda. --------------------------------------------------------------------------- */ .banda-alba { position: relative; padding-block: clamp(90px, 11vw, 150px); } .banda-alba .horizonte { width: min(560px, 62%); height: 1px; margin-inline: auto; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent); } /* --------------------------------------------------------------------------- 5 · EL HERO — solo lo que está DETRÁS --------------------------------------------------------------------------- El carrusel 3D no se toca: ni su HTML, ni `.hero`, ni `.hero-carousel`, ni ninguna `.c3d-*`. Su cadena de transforms es frágil (`preserve-3d` en tres capas; `overflow`, `filter`, `opacity<1` o `mask` en cualquiera de ellas la aplanan) y está aprobado tras cinco reconstrucciones. Lo que sí cambia es `.hero-bg`, que es fondo y no carrusel. Hoy sus tres radiales se auto-recortan a la caja del hero: en el borde inferior el wash se corta en seco y ahí nace la costura que fotografió Fabián. `.hero-fade` —140px de degradado hacia var(--bg)— intentaba taparla y en realidad la empeoraba: forzaba el final del hero a negro puro justo donde empezaba el azul de la sección siguiente (medido: #090a0b -> #101a28 en 8 píxeles). La corrección es al revés: en vez de PINTAR encima, se hace que las capas del hero se desvanezcan solas antes de llegar a su propio borde. Así lo que queda al final del hero es el cielo, que sigue de largo sin enterarse de que ahí termina una sección. `.hero-fade` se borró de home.css y del HTML. La máscara va sobre `.hero-bg`, que es un hermano de `.hero-carousel`, NO un ancestro: no toca la raíz 3D (`.c3d-stage`) ni ninguna capa con preserve-3d. Verificado después con comparación píxel a píxel del carrusel. --------------------------------------------------------------------------- */ .hero-bg { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 220px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 220px), transparent); } /* Mismo problema y misma corrección en el hero de las páginas interiores, que también recorta dos radiales y una retícula contra su propia caja. */ .page-hero-bg, .page-hero-grid { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent); } /* La retícula ya trae su propia máscara radial; las dos se combinan con `mask-composite` para que ninguna anule a la otra. */ .page-hero-grid { -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 30%, #000 40%, transparent 86%), linear-gradient(to bottom, #000 calc(100% - 180px), transparent); mask-image: radial-gradient(ellipse 100% 100% at 50% 30%, #000 40%, transparent 86%), linear-gradient(to bottom, #000 calc(100% - 180px), transparent); -webkit-mask-composite: source-in; mask-composite: intersect; } /* --------------------------------------------------------------------------- 6 · CROMO FIJO — header y flotante de WhatsApp --------------------------------------------------------------------------- Ninguno de los dos vive en el documento: van pegados al viewport, así que no tienen posición de la que derivar su régimen. tema.js les escribe en el régimen del cielo que cada uno tiene detrás (`data-cielo-arriba` para el header, `data-cielo-abajo` para el flotante) y aquí se consume. Sin esto, medido: la nav del header (--muted) sobre el cielo de madrugada baja de 4.5:1 y la barra queda como una franja negra atravesada sobre una página clara; y el contorno del flotante verde (#25d366, lum .52) contra el cielo final (lum .372) da 1.36:1 cuando WCAG 1.4.11 pide 3:1 — sobre el casi-negro de hoy da 11:1, o sea que sería una REGRESIÓN introducida por el amanecer. --------------------------------------------------------------------------- */ html[data-cielo-arriba="alba"] .site-header.scrolled { background: rgba(238, 245, 252, .86); border-bottom-color: rgba(11, 21, 36, .14); } html[data-cielo-arriba="alba"] .site-header { --fg: #0b1524; --muted: #33475f; --dim: #364d67; --border-strong: rgba(11, 21, 36, .28); --accent: #154a9e; --accent-hover: #1a5cc0; } /* EL LOGOTIPO SOBRE FONDO CLARO (defecto 4) ------------------------------- El PNG de marca tiene la palabra "alpha" en BLANCO y el simbolo y "pro" en azul/celeste. Sobre el cielo claro y sobre la hoja del pie, "alpha" desaparece: se ve el simbolo y "pro" flotando sin la palabra. Fabian lo fotografio en el pie del home. Se descarto el `filter: brightness(.18) saturate(1.4)` que tenia el header, porque apaga TODO por igual: mata el blanco (bien) pero tambien hunde el azul de marca y el celeste hasta casi negro, o sea que arregla la legibilidad perdiendo el color de la marca. En su lugar hay una VARIANTE OSCURA de verdad del archivo (assets/alpha-pro-logo-oscuro.png, generada recoloreando solo los pixeles neutros a la tinta #0b1524 y bajando la luminosidad de los de color, conservando su tono y su antialiasing). Medido contra la hoja clara (#f7fbff): tinta 17.61:1, azul del simbolo 11.19:1, celeste de "pro" 6.63:1. Se cambia con `content: url()`, que sustituye la imagen renderizada sin tocar el `src`: asi no hay que editar las 6 paginas ni duplicar el marcado, y el `alt` sigue siendo el mismo para quien no ve la imagen. Las DOS apariciones estan cubiertas y por vias distintas, porque son dos problemas distintos: · el del HEADER es cromo fijo -> depende del cielo que tiene detras (data-cielo-arriba), que lo escribe tema.js segun el scroll; · el del PIE vive en el documento -> depende del regimen de su bloque (data-regimen="alba"), que es fijo por su posicion. Un solo selector no habria servido para las dos. */ html[data-cielo-arriba="alba"] .site-header .brand-logo, [data-regimen="alba"] .brand-logo { content: url("/maqueta/assets/alpha-pro-logo-oscuro.png"); /* [NEXT] ruta servida desde public/ */ } /* El flotante conserva su verde de marca —es lo que lo hace reconocible en visión periférica— y cambia solo el anillo, que es lo que WCAG mide: un contorno oscuro le devuelve la separación contra el cielo claro. POR QUÉ EL ANILLO VA SIEMPRE PUESTO Y NO SOLO EN 'alba' ----------------- El límite del componente cumple 1.4.11 si CUALQUIERA de sus dos bordes —el relleno verde o el anillo— llega a 3:1 contra el cielo que tenga detrás. Con luminancia de cielo Ls: · verde #25d366 (L=.480): (.480+.05)/(Ls+.05) >= 3 -> Ls <= .1267 · anillo #04140b (L=.0053): (Ls+.05)/(.0553) >= 3 -> Ls >= .1159 Los dos intervalos SE SOLAPAN (.1159 .. .1267): no existe una luminancia de cielo en la que fallen los dos a la vez. Por eso el anillo tiene que estar puesto ANTES de que el verde deje de alcanzar, y el conmutador de régimen ('alba' entra recién con lum >= la de la frontera) no garantiza ese orden. Dejarlo siempre puesto elimina la dependencia del conmutador y no cuesta nada: sobre el cielo de noche (#0a0e0d) el anillo da 1.05:1 contra el fondo, o sea es literalmente invisible — ahí el límite lo sigue marcando el verde, con 9.8:1. El anillo tiene que ser CASI NEGRO: con un verde oscuro tipo #0a2b18 el intervalo se abre en un hueco (.1267 .. .1558) donde no llega ninguno de los dos. #04140b ya es el color del glifo del botón (home.css), no es un color nuevo. El 2px es para que quede una columna de píxeles de color pleno: con 1px el antialiasing del borde redondeado mezcla el anillo con el cielo y lo que se mide ya no es el anillo (así se quedaba en 2.78:1 la versión anterior). */ .wa-float { box-shadow: 0 0 0 2px #04140b, 0 10px 34px -10px rgba(37, 211, 102, .7), 0 2px 12px rgba(0, 0, 0, .5); } .wa-float:hover { box-shadow: 0 0 0 2px #04140b, 0 14px 40px -10px rgba(37, 211, 102, .85), 0 2px 12px rgba(0, 0, 0, .5); } html[data-cielo-abajo="alba"] .wa-float { /* sobre cielo claro el halo verde y la sombra negra no aportan: sobra el anillo y una sombra proyectada fría que apoye el volumen. El borde de 1px del botón se suma al anillo en vez de dejar una hebra blanca entre medio. */ border-color: #04140b; box-shadow: 0 0 0 2px #04140b, 0 10px 30px -12px rgba(9, 24, 45, .5); } html[data-cielo-abajo="alba"] .wa-float:hover { border-color: #04140b; box-shadow: 0 0 0 2px #04140b, 0 14px 34px -12px rgba(9, 24, 45, .6); } /* El foco: el anillo blanco de home.css está pensado contra el casi-negro. Sobre el cielo de madrugada (#84a8cb) el blanco da 2.4:1 y el indicador de foco también tiene que llegar a 3:1 (WCAG 2.4.11). Se invierte a casi negro, que sobre ese mismo cielo da 7.6:1. */ html[data-cielo-abajo="alba"] .wa-float:focus-visible { outline-color: #04140b; } /* --------------------------------------------------------------------------- 7 · CONSUMIDORES DE --card-accent Y DEMÁS COLORES DE MODO OSCURO --------------------------------------------------------------------------- productos.js escribe `--card-accent` inline en cada tarjeta con el hex claro del producto, y una custom property inline gana a cualquier regla de hoja: no se puede corregir redefiniendo la variable, hay que redefinir a quien la usa. Todos estos son colores pensados para fondo oscuro que sobre hoja clara caen bajo umbral. --------------------------------------------------------------------------- */ [data-regimen="alba"] .card .tag, [data-regimen="alba"] .card .card-kicker, [data-regimen="alba"] .card-icon { color: var(--accent); } [data-regimen="alba"] .card-icon { background: rgba(21, 74, 158, .09); border-color: rgba(21, 74, 158, .20); } [data-regimen="alba"] .card::after { opacity: .32; } [data-regimen="alba"] .card:hover .card-glow { opacity: .12; } /* El degradado de la cita del editorial usa `background-clip: text`: su `color` computado es `transparent`, así que CUALQUIER auditoría que lea `color` lo da por bueno. Medido tope por tope sobre hoja clara, el oro del sitio da 1.01:1 — o sea invisible. Este ámbar oscuro conserva el gesto y pasa el umbral. OJO CON EL SELECTOR: la primera versión decía [data-regimen="alba"] .editorial blockquote .hl y NO aplicaba nunca. `.editorial` no es un descendiente del bloque: ES el bloque (`
`), así que el descendiente pedido no existe. El fallo pasó inadvertido a la vista —el oro claro sobre hoja clara se lee como "un color de marca"— y solo salió porque el arnés mide los TOPES del degradado y no la propiedad `color`. */ [data-regimen="alba"] blockquote .hl { background-image: linear-gradient(100deg, #5f4503, #7a5c08); } /* Rieles y beam del flujo: el degradado original (accent -> #22b8e6 -> --data) es neón sobre hoja clara, y el halo cian del beam se convierte en una mancha. */ [data-regimen="alba"] .flow-beam-fill, [data-regimen="alba"] .flow-step .fs-bar .rail > span { background: linear-gradient(180deg, var(--accent), #0d6f92 55%, var(--data)); } [data-regimen="alba"] .flow-step .fs-bar .rail > span { background: linear-gradient(90deg, var(--accent), #0d6f92 55%, var(--data)); } [data-regimen="alba"] .flow-beam-fill { box-shadow: none; } [data-regimen="alba"] .flow-step.is-active { box-shadow: 0 18px 44px -28px rgba(9, 24, 45, .5); } [data-regimen="alba"] .cta-box .glow { opacity: .10; } /* --------------------------------------------------------------------------- 8 · RESPONSIVE — la hoja se aprieta en teléfono Con el padding de escritorio la hoja se come el ancho útil a 390px. --------------------------------------------------------------------------- */ @media (max-width: 620px) { [data-regimen="alba"] .lamina { padding: 20px 16px; border-radius: var(--r-lg); } .banda-alba { padding-block: clamp(64px, 16vw, 96px); } } /* --------------------------------------------------------------------------- 9 · REDUCED MOTION El amanecer NO es una animación: está atado al scroll, o sea al usuario. Se conserva entero. Lo que se apaga es lo que se mueve solo: el titileo y la deriva de las estrellas y de las motas los apaga cielo.js, y las capas de luz —que ahora sí se animan solas— se detienen aquí. OJO: se detienen, no se ocultan. El foco de luz, los rayos y la bruma siguen PUESTOS (son el defecto 3, la luz del amanecer); lo único que se quita es el movimiento. Quien pide menos movimiento no está pidiendo un sitio más feo. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #cielo-sol .foco, #cielo-rayos .haz, #cielo-bruma .capa, .formula { animation: none !important; } .formula { opacity: var(--op, 0); } }