/* ============================================================ PROYECTOS - proyectos.html unicamente Se carga DESPUES de base-v2.css (header, hero, boton, label, CTA, footer, enlace con flecha, revelado) y de servicio.css (seccion clara de lectura y filas alternadas). Aqui solo va la banda de antes y despues. Todo esta bajo .proyectos (la segunda clase del ), asi que proyecto-casa-huertas.html y sus cinco comparadores NO se ven afectados: aquel archivo ni siquiera carga este CSS. NOTA DE ARQUITECTURA: al sacar css/base-v2.css, esta banda y el sello Pentagrama de cortinas se parecen lo suficiente como para compartir una sola clase de "banda oscura". ============================================================ */ /* ============================================================ BANDA DE ANTES Y DESPUES Banda oscura de ancho completo entre la intro y las filas. Mismo tratamiento que el sello Pentagrama de cortinas: fondo oscuro, dos lineas doradas finas y tipografia grande. Ni cajas ni rellenos de color. ============================================================ */ .proyectos .transformacion{background:var(--color-bg-dark);border-top:1px solid var(--color-accent-gold);border-bottom:1px solid var(--color-accent-gold);padding:var(--space-7) 0} .proyectos .transformacion .label{color:var(--color-text-on-dark-muted);margin-bottom:var(--space-2)} .proyectos .transformacion__titular{font-family:var(--font-serif);font-weight:300;font-size:var(--text-h2);line-height:var(--leading-tight);color:var(--color-text-on-dark);margin:0 0 var(--space-4)} /* El enlace con flecha de base-v2.css esta pensado para fondo claro. Aqui va sobre oscuro, asi que solo se le cambia el color: el subrayado dorado en hover es el mismo. */ .proyectos .transformacion .link-flecha{display:inline-block;margin-top:var(--space-4);color:var(--color-text-on-dark-muted)} .proyectos .transformacion .link-flecha:hover{color:var(--color-text-on-dark)} /* --- El comparador --- El mecanismo es el que ya existe: la clase .ba de estilos.css y su JavaScript en js/main.js. Un transparente cubre toda la foto; al moverlo, el JS escribe la variable --x y el CSS recorta la imagen del "despues". De ahi salen gratis el arrastre con raton, el arrastre con el dedo y las flechas del teclado. Lo de aqui abajo es SOLO su aspecto en esta banda: quitarle las esquinas redondeadas, el borde gris y la sombra que traia de la version vieja del sitio. */ /* 3/2 y no 16/9: las dos fotos de este comparador son verticales (900x1600). Cuanto mas apaisada sea la caja, mas alto se les recorta. A 16/9 se perdia el 68% de cada foto; a 3/2 se pierde el 62%. Mas alto que esto ya no parece una banda. */ .proyectos .ba{aspect-ratio:3/2} /* El deslizador ya no necesita nada aqui: el arreglo del relleno, el borde, las esquinas y el touch-action vive ahora en estilos.css, en la regla .ba input[type=range], para que lo hereden tambien los diez comparadores de las paginas de proyecto. */ /* En servicio.css la seccion de filas no lleva padding arriba porque viene despues de otra seccion del mismo fondo claro. Aqui viene despues de la banda oscura, asi que necesita aire. */ .proyectos .obras{padding-top:var(--space-6)} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:880px){ .proyectos .transformacion{padding:var(--space-6) 0} .proyectos .obras{padding-top:var(--space-5)} /* En el movil el comparador se hace mas alto. A 3/2 quedaba en 218px de alto en una pantalla de 375px: sigue quedando bajo para comparar dos fotos verticales. A 4/3 sube a 245px. */ .proyectos .ba{aspect-ratio:4/3} }