/* ========================================================================== FUNDACIÓN PUNTO 37 — repertorio gráfico de marca -------------------------------------------------------------------------- Hoja NUEVA y aditiva. Todo lo de aquí sale de Punto37_BRANDBOOK.pdf, de dos zonas que el sitio todavía no estaba usando: · RECURSOS GRÁFICOS (banda inferior derecha): el repertorio de tramas, garabatos, formas y remates de la marca. Nueve piezas. · SELLO (banda superior, panel naranja): la chapa redonda de la marca. Y, de propina, dos zonas vecinas que también traen material reutilizable: · VARIACIONES DE COLOR / DEGRADE: las cinco columnas de goteo. · TRATAMIENTO FOTOGRÁFICO: las marcas azules que el brandbook dibuja encima de los retratos. Todas se extrajeron del PDF como vector rasterizado a 3-10x, con el fondo crema del brandbook despejado por color, y guardadas como WEBP con transparencia en img/. La sombra difusa que el brandbook le pinta al sello NO se trajo: el tema del sitio usa sombras sólidas desplazadas, nunca difuminadas, y aquí se respeta. CÓMO SE ENCIENDE ---------------- Esta hoja se carga DESPUÉS de estilo.css (y de paginas.css en las páginas interiores). Ninguna regla de aquí pisa una clase existente: todo cuelga de nombres nuevos. Los dos nombres que se parecen a algo que ya existe son deliberados y conviven sin chocar: .marco-punteado (estilo.css) = tarjeta con contorno a trazos rectos .marco-onda (esta hoja) = marco morado de onda dibujada a mano .sello-vision (estilo.css) = el sello "Visión 2030" del arte de Nosotros .sello-marca (esta hoja) = la chapa redonda del brandbook INVENTARIO — qué clase produce qué y dónde conviene usarla ---------------------------------------------------------------------- .adorno base de toda pieza suelta: se posiciona absoluta dentro de un contenedor con .con-adornos, no recibe clics y no distorsiona (lleva aspect-ratio). .adorno--trama mancha de rayado amarillo. Detrás de una cifra o del canto de una tarjeta. Inicio: bloque de cifras. .adorno--corazon corazón de trazo coral. Dona, Jornadas sociales, cierres de agradecimiento. .adorno--lunares confeti coral. Boletín, tarjetas de evento. .adorno--guirnalda hilera diagonal de equis verdes. Cruza una banda de lado a lado; va bien en Eventos y en el mapa. .adorno--rastro rastro curvo de asteriscos. Es alto: sirve de costura vertical entre dos bloques (Programas). .adorno--aspa-verde aspa de cuatro trazos. Acento pequeño. .adorno--aspa-lima aspa maciza lima. Acento pequeño, más rotundo. .adorno--asterisco asterisco morado macizo. La pieza más pesada del repertorio: una sola por pantalla y grande. .adorno--garabato garabato azul del tratamiento fotográfico. .adorno--rayado rayado azul del tratamiento fotográfico. .adorno--flota añade un vaivén lento. NO toca la opacidad. .fondo-trama trama amarilla como fondo de sección, anclada a una esquina. Para bandas de color plano que se ven vacías (Boletín, cierre de Contacto). .lista-marca lista con viñeta de marca en vez de bolita. .lista-marca--aspa viñeta = aspa lima .lista-marca--equis viñeta = aspa verde de cuatro trazos .lista-marca--asterisco viñeta = asterisco morado .lista-marca--punto viñeta = un lunar coral Usar en Nosotros (líneas de trabajo) y en Legal. .marco-onda marco morado de onda alrededor de un contenido casi cuadrado: una cifra, un ícono, un dato. NO estirar a cajas alargadas, la onda se deforma. .sello-marca la chapa redonda con sombra sólida. Cierre de Nosotros, pie de página, tarjeta de Contacto. .sello-marca--colgado la cuelga de la esquina de una tarjeta, girada. .goteo banda de cinco columnas de goteo. .goteo--abajo se apoya en el canto inferior de la sección. .goteo--arriba chorrea desde el canto superior. Es un remate ALTERNATIVO al festón de nubes; no se usan los dos en el mismo canto. .foto-tratada envuelve una foto y le pone el garabato y el rayado azules como en el brandbook. Equipo y Eventos. PERILLAS -------- Cada componente se ajusta desde el marcado con variables, sin escribir CSS nuevo: --w (ancho de la pieza), --x --y --der --aba (posición), --giro (rotación), --op (opacidad de un adorno), --vw (tamaño de viñeta), --tr-w --tr-op (mancha de fondo). Se heredan, así que van SIEMPRE en el elemento de la pieza, nunca en un contenedor: puestas en el padre se filtran a todo lo que tenga dentro. REGLA DE ANIMACIÓN ------------------ Ninguna regla de esta hoja escribe opacity:0 como estado de reposo, ni en contenido ni en adornos. Lo único que se anima es transform:translateY sobre piezas decorativas que ya nacen visibles, y aun eso se apaga con prefers-reduced-motion. No hay forma de que esta hoja deje algo invisible. ACCESIBILIDAD ------------- Todo lo de aquí es decorativo. Los .adorno son elementos vacíos y deben llevar aria-hidden="true". Las viñetas van en ::before sin content de texto, así que el lector de pantalla lee la lista limpia. ========================================================================== */ /* --- 1. TOKENS ------------------------------------------------------------ Rutas de las piezas y sus proporciones nativas en píxeles. La proporción va como token para que cada .adorno se declare con un solo --w y nunca salga aplastado. Los hexes son los del brandbook, muestreados del propio PDF; se dejan anotados porque varias piezas los traen horneados en el WEBP y algún componente necesita hacerles juego (un chip, un borde). amarillo #FFB400 coral #FF5B53 verde brillante #00E05C verde #30A71A lima #7AC943 morado #492D91 morado claro #A882DD azul #3FA9F5 */ :root{ --p-trama: url('img/trama-rayas.webp'); --ar-trama: 922/845; --p-corazon: url('img/corazon-trazo.webp'); --ar-corazon: 1150/1000; --p-lunares: url('img/lunares-coral.webp'); --ar-lunares: 788/710; --p-guirnalda: url('img/guirnalda-equis.webp'); --ar-guirnalda: 1347/795; --p-rastro: url('img/rastro-asteriscos.webp'); --ar-rastro: 1099/1247; --p-aspa-verde: url('img/aspa-verde.webp'); --ar-aspa-verde: 772/745; --p-aspa-lima: url('img/aspa-lima.webp'); --ar-aspa-lima: 627/585; --p-asterisco: url('img/asterisco-morado.webp'); --ar-asterisco: 993/927; --p-marco-onda: url('img/marco-ondulado.webp'); --ar-marco-onda: 863/1018; --p-goteo: url('img/goteo-colores.webp'); --ar-goteo: 1290/894; --p-sello: url('img/sello.webp'); --ar-sello: 1/1; --p-garabato: url('img/garabato-azul.webp'); --ar-garabato: 1009/782; --p-rayado: url('img/rayado-azul.webp'); --ar-rayado: 783/1181; /* Secundarios del brandbook. No sustituyen a los tokens de estilo.css: conviven, y sirven para que un componente nuevo case con la pieza. */ --bb-amarillo:#FFB400; --bb-coral:#FF5B53; --bb-verde-brillo:#00E05C; --bb-verde:#30A71A; --bb-lima:#7AC943; --bb-morado:#492D91; --bb-morado-claro:#A882DD; --bb-azul:#3FA9F5; } /* --- 2. PIEZAS SUELTAS ---------------------------------------------------- El contenedor manda: sin .con-adornos el adorno se posiciona contra la página entera y se va de sitio. .con-adornos--corta recorta lo que sobresale (útil en bandas de color); sin el modificador la pieza puede desbordar, que es como el arte coloca el lazo y el personaje. */ .con-adornos{position:relative} .con-adornos--corta{overflow:hidden} .adorno{ position:absolute; z-index:1; pointer-events:none; user-select:none; left:var(--x,auto); top:var(--y,auto); right:var(--der,auto); bottom:var(--aba,auto); width:var(--w,180px); aspect-ratio:var(--ar); background:var(--img) center/contain no-repeat; transform:rotate(var(--giro,0deg)); opacity:var(--op,1); } /* Cada pieza sólo declara su imagen, su proporción y un tamaño por defecto sensato. El tamaño se pisa desde el marcado con style="--w:240px". */ .adorno--trama {--img:var(--p-trama); --ar:var(--ar-trama); --w:210px} .adorno--corazon {--img:var(--p-corazon); --ar:var(--ar-corazon); --w:190px} .adorno--lunares {--img:var(--p-lunares); --ar:var(--ar-lunares); --w:120px} .adorno--guirnalda{--img:var(--p-guirnalda); --ar:var(--ar-guirnalda); --w:420px} .adorno--rastro {--img:var(--p-rastro); --ar:var(--ar-rastro); --w:260px} .adorno--aspa-verde{--img:var(--p-aspa-verde);--ar:var(--ar-aspa-verde); --w:64px} .adorno--aspa-lima{--img:var(--p-aspa-lima); --ar:var(--ar-aspa-lima); --w:58px} .adorno--asterisco{--img:var(--p-asterisco); --ar:var(--ar-asterisco); --w:150px} .adorno--garabato {--img:var(--p-garabato); --ar:var(--ar-garabato); --w:200px} .adorno--rayado {--img:var(--p-rayado); --ar:var(--ar-rayado); --w:90px} /* Detrás del contenido en vez de encima. Funciona porque el sitio ya sube el contenido de cada banda a z-index 2 (mirar .hero-grid y .env en estilo.css): con z-index 0 el adorno queda entre el grano del fondo y el texto, que es donde el arte pone estas piezas. Si se usa en una caja cuyo contenido NO está posicionado, el adorno seguiría pintando encima: ahí hay que darle al contenido position:relative y z-index:1, como hace el resto del tema. */ .adorno--detras{z-index:0} /* --- 3. TRAMA DE FONDO ---------------------------------------------------- La misma mancha de rayado amarillo, pero a escala de sección y anclada a una esquina. Va en el fondo de una banda de color plano que se lee vacía. La opacidad es de la MANCHA, no del contenido: el texto encima queda intacto. El isolation:isolate no es decorativo: convierte la sección en contexto de apilado propio, y así el z-index:-1 de la mancha queda garantizado ENCIMA del fondo de la sección y DEBAJO de todo su contenido, sin tener que tocar ni un hijo. La primera versión subía los hijos con "> *{position:relative}" y eso reventaba cualquier adorno absoluto que se metiera dentro. */ .fondo-trama{position:relative; isolation:isolate} .fondo-trama::after{ content:""; position:absolute; z-index:-1; pointer-events:none; right:var(--tr-der,-40px); bottom:var(--tr-aba,-30px); width:var(--tr-w,340px); aspect-ratio:var(--ar-trama); background:var(--p-trama) center/contain no-repeat; opacity:var(--tr-op,.55); } /* Anclada arriba a la izquierda. */ .fondo-trama--ai::after{right:auto; bottom:auto; left:var(--tr-izq,-46px); top:var(--tr-arr,-28px)} /* --- 4. VIÑETAS ----------------------------------------------------------- Sustituyen la bolita del navegador por una pieza del repertorio. El tamaño de la viñeta y la sangría van atados: se cambian con --vw. */ .lista-marca{list-style:none; margin:0; padding:0} .lista-marca li{ position:relative; padding-left:calc(var(--vw,26px) + 18px); margin:0 0 14px; } .lista-marca li:last-child{margin-bottom:0} /* Si no se pone modificador, la viñeta cae en el aspa lima en vez de quedarse sin fondo: --img y --ar se heredan, y sin valor por defecto una lista suelta dejaría una sangría vacía. */ .lista-marca li::before{ content:""; position:absolute; left:0; top:.12em; width:var(--vw,26px); aspect-ratio:var(--ar,var(--ar-aspa-lima)); background:var(--img,var(--p-aspa-lima)) center/contain no-repeat; } .lista-marca--aspa li::before{--img:var(--p-aspa-lima); --ar:var(--ar-aspa-lima)} /* Viñeta = PUNTO ROJO, igual a los marcadores del mapa (pedido de la clienta: "estos iconos deberian ser iguales a los puntos rojos del mapa"). En vez de una imagen, es un circulo rojo solido: mismo lenguaje que los puntos del recorrido. Se sube un poco y se le da tamaño de punto. */ .lista-marca--rojo li::before{ background:var(--rojo-hero); border-radius:50%; width:15px; height:15px; aspect-ratio:auto; top:.28em; } .lista-marca--rojo li{ padding-left:26px } .lista-marca--equis li::before{--img:var(--p-aspa-verde); --ar:var(--ar-aspa-verde)} .lista-marca--asterisco li::before{--img:var(--p-asterisco); --ar:var(--ar-asterisco)} /* El lunar suelto se recorta del racimo con background-size y position, así no hace falta un archivo aparte para una viñeta. Los números salen de medir el webp: el racimo trae ocho gotas y se encuadra la sexta, que está centrada y suelta (caja 137x137 px con centro en 444,448 de una imagen de 788x710). Con el tamaño en 448% la gota ocupa el 78% de la viñeta, y como los tres valores van en porcentaje el encuadre aguanta cualquier --vw. El alto va en auto para no achatar la gota. */ .lista-marca--punto li::before{ --vw:18px; aspect-ratio:1; background:var(--p-lunares) 58.3% 67.5%/448% auto no-repeat; } /* Viñeta suelta, para meterla dentro de un párrafo o de un rótulo. */ .vineta{ display:inline-block; vertical-align:-.16em; width:var(--vw,22px); aspect-ratio:var(--ar,var(--ar-aspa-lima)); background:var(--img,var(--p-aspa-lima)) center/contain no-repeat; } .vineta--aspa {--img:var(--p-aspa-lima); --ar:var(--ar-aspa-lima)} .vineta--equis {--img:var(--p-aspa-verde); --ar:var(--ar-aspa-verde)} .vineta--asterisco{--img:var(--p-asterisco); --ar:var(--ar-asterisco)} /* --- 5. MARCO DE ONDA ----------------------------------------------------- El cuadrado morado de trazo ondulado del brandbook, alrededor de un dato corto. Conserva su proporción nativa a propósito: es un trazo dibujado a mano y estirarlo se nota enseguida. El relleno es el 17% del ancho de la pieza y va con calc sobre --w a propósito: un padding en porcentaje se resuelve contra el ANCHO DEL CONTENEDOR, no contra el del elemento, y con el marco dentro de un flex de 800px el relleno se disparaba a 135px por lado y reventaba la caja. Medido en el DOM antes y después del cambio. */ /* flex:none porque el relleno se calcula sobre --w, no sobre el ancho usado: si un flex lo encogiera, el marco menguaría pero el relleno no, y el texto se quedaría sin sitio. Medido: dentro de un flex row estrecho la pieza bajaba de 140px a 111px y el hueco interior se comía el dato. */ .marco-onda{ position:relative; isolation:isolate; flex:none; display:grid; place-items:center; text-align:center; aspect-ratio:var(--ar-marco-onda); width:var(--w,190px); padding:calc(var(--w,190px) * .17); } .marco-onda::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--p-marco-onda) center/100% 100% no-repeat; } .marco-onda b{display:block; font-size:34px; font-weight:900; line-height:1} .marco-onda span{display:block; font-size:13px; font-weight:300; line-height:1.2; margin-top:4px} /* --- 6. SELLO ------------------------------------------------------------- La chapa del brandbook. La sombra va con drop-shadow porque tiene que seguir el disco y no la caja; el desenfoque es CERO, o sea la misma sombra sólida desplazada que usa el resto del tema. OJO CON EL FONDO: el aro exterior del sello es BLANCO. Sobre papel blanco el aro desaparece y sólo se lee el disco coral. En el brandbook la chapa va sobre naranja, y así es como se debe usar: encima de una banda de color, de una foto o de una tarjeta oscura. Sobre fondo claro pierde la mitad de la pieza. */ .sello-marca{ display:block; flex:none; width:var(--w,170px); aspect-ratio:1; background:var(--p-sello) center/contain no-repeat; filter:drop-shadow(0 8px 0 rgba(0,0,0,.14)); } /* Sobre fondo oscuro la sombra negra desaparece; ahí se apoya en un tono de la propia marca para que el disco siga despegado del fondo. */ .sello-marca--sobre-color{filter:drop-shadow(0 8px 0 rgba(0,0,0,.22))} /* Colgada de la esquina de una tarjeta, ligeramente girada, como el arte cuelga el sello de Visión 2030. El contenedor necesita .con-adornos. */ .sello-marca--colgado{ position:absolute; z-index:3; top:var(--y,-42px); right:var(--der,-26px); transform:rotate(var(--giro,-9deg)); } /* --- 7. GOTEO ------------------------------------------------------------- Las cinco columnas de la muestra DEGRADE. El archivo viene cortado a hueso por abajo, tal como está en el brandbook: es una pieza pensada para sangrar contra el canto de la sección, y por eso siempre se ancla a un borde. NO se combina con el festón de nubes en el mismo canto: son dos remates que compiten. O nube, o goteo. El alto sale del ancho: con --w:420px la pieza mide 291px de alto. Si la sección es más baja, el goteo la atraviesa; ahí toca bajar --w o poner .con-adornos--corta en la sección para que recorte. */ .goteo{ position:absolute; z-index:1; pointer-events:none; width:var(--w,420px); aspect-ratio:var(--ar-goteo); background:var(--p-goteo) center/contain no-repeat; left:var(--x,auto); right:var(--der,auto); } /* Se apoya en el canto de abajo: el corte queda escondido y las columnas suben hacia dentro de la sección. */ .goteo--abajo{bottom:0} /* Chorrea desde el canto de arriba: se voltea para que el corte quede pegado al borde superior y los lóbulos apunten hacia abajo. */ .goteo--arriba{top:0; transform:scaleY(-1)} /* --- 8. TRATAMIENTO FOTOGRÁFICO ------------------------------------------- El brandbook remata los retratos con tinta azul encima: un garabato a un lado y un rayado al otro. Aquí van como ::before y ::after de un envoltorio, de modo que la foto de dentro no se toca y el marcado no gana nodos. Combina bien con las máscaras de nube que ya usa el sitio (--nube-foto, --nube-retrato): la tinta se sale del recorte y ese desborde es el efecto. */ .foto-tratada{position:relative; display:block} .foto-tratada > img{position:relative; z-index:1} .foto-tratada::before, .foto-tratada::after{ content:""; position:absolute; z-index:2; pointer-events:none; background:var(--img) center/contain no-repeat; } .foto-tratada::before{ --img:var(--p-garabato); left:var(--gx,-14%); top:var(--gy,4%); width:var(--gw,46%); aspect-ratio:var(--ar-garabato); } .foto-tratada::after{ --img:var(--p-rayado); right:var(--rx,-8%); top:var(--ry,10%); width:var(--rw,18%); aspect-ratio:var(--ar-rayado); } /* La tinta detrás del retrato, para fotos recortadas contra un fondo claro. */ .foto-tratada--detras::before, .foto-tratada--detras::after{z-index:0} /* Sólo garabato, o sólo rayado. */ .foto-tratada--garabato::after{content:none} .foto-tratada--rayado::before{content:none} /* --- 9. MOVIMIENTO -------------------------------------------------------- Vaivén lento para las piezas sueltas. Se anima ÚNICAMENTE translateY y la pieza arranca y termina en su sitio: no hay estado de reposo con opacity:0 ni con la pieza fuera de cuadro, así que ningún fotograma la esconde. La rotación de la pieza se conserva porque el keyframe la vuelve a escribir. */ @keyframes p37-vaiven{ 0%,100%{transform:rotate(var(--giro,0deg)) translateY(0)} 50% {transform:rotate(var(--giro,0deg)) translateY(var(--vaiven,-10px))} } .adorno--flota{animation:p37-vaiven var(--dur,7s) ease-in-out infinite} .adorno--flota:nth-of-type(even){animation-delay:-2.4s} @media (prefers-reduced-motion:reduce){ .adorno--flota{animation:none} } /* --- 10. TAMAÑOS ---------------------------------------------------------- En tablet y móvil las piezas grandes estorban antes que decorar. Se encogen y las dos más pesadas se retiran. Se retiran con display:none, que es lo correcto para algo decorativo: no hay contenido detrás de esa regla. Ningún elemento con texto entra en este bloque. */ @media (max-width:900px){ .adorno{--w:150px} .adorno--guirnalda{--w:300px} .adorno--asterisco{--w:110px} .adorno--rastro{--w:180px} .goteo{--w:300px} .sello-marca{--w:140px} .marco-onda{--w:160px} .fondo-trama::after{--tr-w:240px; --tr-op:.45} } @media (max-width:640px){ .adorno--guirnalda, .adorno--rastro{display:none} .adorno{--w:110px} .adorno--aspa-verde{--w:44px} .adorno--aspa-lima{--w:40px} .goteo{--w:230px} .sello-marca{--w:118px} .sello-marca--colgado{--y:-30px; --der:-14px} .marco-onda{--w:140px} .foto-tratada::after{content:none} .lista-marca li{padding-left:calc(var(--vw,22px) + 14px)} .lista-marca{--vw:22px} }