/* Capa `shapes`: la declara este mismo archivo. Antes se la asignaba el `@import ... layer(shapes)` de main.css; ahora cada hoja se encola por separado para que descarguen en paralelo. Ver inc/enqueue.php. */ @layer shapes { /* ========================================== SHAPES DECORATIVOS PARA SECTIONS ========================================== Siluetas decorativas en los bordes de un .section. Las dos bandas toman SOLAS el color de la seccion vecina (la anterior arriba, la siguiente abajo) cuando esa vecina tiene un fondo plano, asi que en el caso normal no hay que declarar ningun color. Se activa desde el JSON del PageBuilder via ClaseSeccion: "ClaseSeccion": "section section--primary shape shape--waves" Tecnica, mixta por borde: ARRIBA banda pintada si hay color que copiar; si no (fondo de pagina, section--bg, gradientes, o un section--pin de por medio) recorte real: la franja queda transparente y por el hueco se ve lo que haya detras. ABAJO siempre banda pintada —blanca si no hay color que copiar—, porque un recorte inferior filtra los pins en el momento equivocado (ver comentario de la regla base). Por defecto actua en ambos bordes (abajo espejado). Modificadores: shape--top solo el borde superior shape--bottom solo el borde inferior shape--cut renuncia al color automatico de arriba y fuerza el recorte real shape--paint banda pintada tambien arriba (sin hueco real) shape--flip voltea en horizontal las bandas PINTADAS shape--primary color de las bandas pintadas: --color-primary shape--secondary color de las bandas pintadas: --color-secondary shape--light color de las bandas pintadas: --color-base-300 shape--dark color de las bandas pintadas: --color-neutral shape--base color de las bandas pintadas: --color-base-100 shape--s franja mas baja shape--l franja mas alta Color de UN solo borde. = primary | secondary | light | dark | base | primary-light | secondary-light, los mismos fondos que section--: shape--bottom- tine solo la banda de abajo shape--top- tine solo la de arriba; implica cambiar ahi el recorte por una banda pintada shape--paint-top esa banda pintada arriba sin fijar color, para darlo a mano con --shape-color-top Un color puesto a mano gana siempre al automatico, y hace falta cuando la seccion vecina no tiene un fondo plano del que copiar (section--bg, --gradient, --half...) o cuando se quiere otro color a proposito. Por que el borde de arriba se PINTA y no se recorta: por el hueco se ve lo que hay detras de la seccion —el fondo de la pagina o un section--pin—, y la seccion anterior no esta ahi, su caja termina donde empieza esta. Ajuste fino puntual via variables: --shape-h, --shape-color y, por borde, --shape-color-top / --shape-color-bottom. Ojo: dar valor a --shape-color-top no enciende por si solo la banda de arriba, hace falta ademas shape--paint-top, shape--paint o un shape--top-. Siluetas disponibles (modificador shape--*): tilt, opacity-waves, waves, irregular-waves, curve, curve-invert, triangle, triangle-invert, arrow, arrow-invert, book, book-invert, cloud, cloud-invert, brush (SVG externo en /public/shapes/ por su peso, ~28 KB) Limitaciones asumidas: - El volteo horizontal (shape--flip) solo alcanza a las bandas pintadas, que son pseudoelementos con caja propia. El recorte superior no: es una mascara sobre la seccion entera y transformarla arrastraria tambien el contenido. Para voltear ese borde habria que duplicar el SVG (como se hace con el juego *-down) o pasar la seccion a shape--paint. - El recorte superior afecta a todo lo pintado por la seccion (fondo, borders, imagenes hijas); el contenido no llega a las franjas gracias al padding compensado. ========================================== */ /* ------------------------------------------ Siluetas. Solo cuenta el canal alfa del SVG: el fill da igual (negro por defecto), por eso van sin fill ni clases. En opacity-waves las capas con opacity generan olas semitransparentes. El juego *-down es la misma silueta espejada verticalmente (matrix(1 0 0 -1 0 alto)), para el borde inferior. ------------------------------------------ */ :root { --shape-tilt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z'/%3E%3C/svg%3E"); --shape-tilt-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 120)'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z'/%3E%3C/g%3E%3C/svg%3E"); --shape-opacity-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z'/%3E%3C/svg%3E"); --shape-opacity-waves-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 120)'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z'/%3E%3C/g%3E%3C/svg%3E"); --shape-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z'/%3E%3C/svg%3E"); --shape-waves-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 2.17)'%3E%3Cpath d='M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z'/%3E%3C/g%3E%3C/svg%3E"); --shape-irregular-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cpath d='M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z'/%3E%3C/svg%3E"); --shape-irregular-waves-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.28 2.17' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 2.17)'%3E%3Cpath d='M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z'/%3E%3C/g%3E%3C/svg%3E"); --shape-curve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' preserveAspectRatio='none'%3E%3Cpath d='M0 0q5 4 10 0z'/%3E%3C/svg%3E"); --shape-curve-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 2)'%3E%3Cpath d='M0 0q5 4 10 0z'/%3E%3C/g%3E%3C/svg%3E"); --shape-curve-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' preserveAspectRatio='none'%3E%3Cpath d='M0 0q5 4 10 0v2H0z'/%3E%3C/svg%3E"); --shape-curve-invert-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 2)'%3E%3Cpath d='M0 0q5 4 10 0v2H0z'/%3E%3C/g%3E%3C/svg%3E"); --shape-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 0L0 0 598.97 114.72 1200 0z'/%3E%3C/svg%3E"); --shape-triangle-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 120)'%3E%3Cpath d='M1200 0L0 0 598.97 114.72 1200 0z'/%3E%3C/g%3E%3C/svg%3E"); --shape-triangle-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z'/%3E%3C/svg%3E"); --shape-triangle-invert-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 120)'%3E%3Cpath d='M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z'/%3E%3C/g%3E%3C/svg%3E"); --shape-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M649.97 0L550.03 0 599.91 54.12 649.97 0z'/%3E%3C/svg%3E"); --shape-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 80)'%3E%3Cpath d='M649.97 0L550.03 0 599.91 54.12 649.97 0z'/%3E%3C/g%3E%3C/svg%3E"); --shape-arrow-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M649.97 0L599.91 54.12 550.03 0 0 0 0 80 1200 80 1200 0 649.97 0z'/%3E%3C/svg%3E"); --shape-arrow-invert-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 80)'%3E%3Cpath d='M649.97 0L599.91 54.12 550.03 0 0 0 0 80 1200 80 1200 0 649.97 0z'/%3E%3C/g%3E%3C/svg%3E"); --shape-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200,0H0V120H281.94C572.9,116.24,602.45,3.86,602.45,3.86h0S632,116.24,923,120h277Z'/%3E%3C/svg%3E"); --shape-book-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 120)'%3E%3Cpath d='M1200,0H0V120H281.94C572.9,116.24,602.45,3.86,602.45,3.86h0S632,116.24,923,120h277Z'/%3E%3C/g%3E%3C/svg%3E"); --shape-book-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M602.45,3.86h0S572.9,116.24,281.94,120H923C632,116.24,602.45,3.86,602.45,3.86Z'/%3E%3C/svg%3E"); --shape-book-invert-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 120)'%3E%3Cpath d='M602.45,3.86h0S572.9,116.24,281.94,120H923C632,116.24,602.45,3.86,602.45,3.86Z'/%3E%3C/g%3E%3C/svg%3E"); --shape-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 27.8' preserveAspectRatio='none'%3E%3Cpath d='M0 0v6.7c1.9-.8 4.7-1.4 8.5-1 9.5 1.1 11.1 6 11.1 6s2.1-.7 4.3-.2c2.1.5 2.8 2.6 2.8 2.6s.2-.5 1.4-.7c1.2-.2 1.7.2 1.7.2s0-2.1 1.9-2.8c1.9-.7 3.6.7 3.6.7s.7-2.9 3.1-4.1 4.7 0 4.7 0 1.2-.5 2.4 0 1.7 1.4 1.7 1.4h1.4c.7 0 1.2.7 1.2.7s.8-1.8 4-2.2c3.5-.4 5.3 2.4 6.2 4.4.4-.4 1-.7 1.8-.9 2.8-.7 4 .7 4 .7s1.7-5 11.1-6c9.5-1.1 12.3 3.9 12.3 3.9s1.2-4.8 5.7-5.7c4.5-.9 6.8 1.8 6.8 1.8s.6-.6 1.5-.9c.9-.2 1.9-.2 1.9-.2s5.2-6.4 12.6-3.3c7.3 3.1 4.7 9 4.7 9s1.9-.9 4 0 2.8 2.4 2.8 2.4 1.9-1.2 4.5-1.2 4.3 1.2 4.3 1.2.2-1 1.4-1.7 2.1-.7 2.1-.7-.5-3.1 2.1-5.5 5.7-1.4 5.7-1.4 1.5-2.3 4.2-1.1c2.7 1.2 1.7 5.2 1.7 5.2s.3-.1 1.3.5c.5.4.8.8.9 1.1.5-1.4 2.4-5.8 8.4-4 7.1 2.1 3.5 8.9 3.5 8.9s.8-.4 2 0 1.1 1.1 1.1 1.1 1.1-1.1 2.3-1.1 2.1.5 2.1.5 1.9-3.6 6.2-1.2 1.9 6.4 1.9 6.4 2.6-2.4 7.4 0c3.4 1.7 3.9 4.9 3.9 4.9s3.3-6.9 10.4-7.9 11.5 2.6 11.5 2.6.8 0 1.2.2c.4.2.9.9.9.9s4.4-3.1 8.3.2c1.9 1.7 1.5 5 1.5 5s.3-1.1 1.6-1.4c1.3-.3 2.3.2 2.3.2s-.1-1.2.5-1.9 1.9-.9 1.9-.9-4.7-9.3 4.4-13.4c5.6-2.5 9.2.9 9.2.9s5-6.2 15.9-6.2 16.1 8.1 16.1 8.1.7-.2 1.6-.4V0H0z'/%3E%3C/svg%3E"); --shape-cloud-invert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 27.8' preserveAspectRatio='none'%3E%3Cpath d='M265.8 3.5c-10.9 0-15.9 6.2-15.9 6.2s-3.6-3.5-9.2-.9c-9.1 4.1-4.4 13.4-4.4 13.4s-1.2.2-1.9.9c-.6.7-.5 1.9-.5 1.9s-1-.5-2.3-.2c-1.3.3-1.6 1.4-1.6 1.4s.4-3.4-1.5-5c-3.9-3.4-8.3-.2-8.3-.2s-.6-.7-.9-.9c-.4-.2-1.2-.2-1.2-.2s-4.4-3.6-11.5-2.6-10.4 7.9-10.4 7.9-.5-3.3-3.9-4.9c-4.8-2.4-7.4 0-7.4 0s2.4-4.1-1.9-6.4-6.2 1.2-6.2 1.2-.9-.5-2.1-.5-2.3 1.1-2.3 1.1.1-.7-1.1-1.1c-1.2-.4-2 0-2 0s3.6-6.8-3.5-8.9c-6-1.8-7.9 2.6-8.4 4-.1-.3-.4-.7-.9-1.1-1-.7-1.3-.5-1.3-.5s1-4-1.7-5.2c-2.7-1.2-4.2 1.1-4.2 1.1s-3.1-1-5.7 1.4-2.1 5.5-2.1 5.5-.9 0-2.1.7-1.4 1.7-1.4 1.7-1.7-1.2-4.3-1.2c-2.6 0-4.5 1.2-4.5 1.2s-.7-1.5-2.8-2.4c-2.1-.9-4 0-4 0s2.6-5.9-4.7-9c-7.3-3.1-12.6 3.3-12.6 3.3s-.9 0-1.9.2c-.9.2-1.5.9-1.5.9S99.4 3 94.9 3.9c-4.5.9-5.7 5.7-5.7 5.7s-2.8-5-12.3-3.9-11.1 6-11.1 6-1.2-1.4-4-.7c-.8.2-1.3.5-1.8.9-.9-2.1-2.7-4.9-6.2-4.4-3.2.4-4 2.2-4 2.2s-.5-.7-1.2-.7h-1.4s-.5-.9-1.7-1.4-2.4 0-2.4 0-2.4-1.2-4.7 0-3.1 4.1-3.1 4.1-1.7-1.4-3.6-.7c-1.9.7-1.9 2.8-1.9 2.8s-.5-.5-1.7-.2c-1.2.2-1.4.7-1.4.7s-.7-2.3-2.8-2.8c-2.1-.5-4.3.2-4.3.2s-1.7-5-11.1-6c-3.8-.4-6.6.2-8.5 1v21.2h283.5V11.1c-.9.2-1.6.4-1.6.4s-5.2-8-16.1-8z'/%3E%3C/svg%3E"); --shape-cloud-invert-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.5 27.8' preserveAspectRatio='none'%3E%3Cg transform='matrix(1 0 0 -1 0 27.8)'%3E%3Cpath d='M265.8 3.5c-10.9 0-15.9 6.2-15.9 6.2s-3.6-3.5-9.2-.9c-9.1 4.1-4.4 13.4-4.4 13.4s-1.2.2-1.9.9c-.6.7-.5 1.9-.5 1.9s-1-.5-2.3-.2c-1.3.3-1.6 1.4-1.6 1.4s.4-3.4-1.5-5c-3.9-3.4-8.3-.2-8.3-.2s-.6-.7-.9-.9c-.4-.2-1.2-.2-1.2-.2s-4.4-3.6-11.5-2.6-10.4 7.9-10.4 7.9-.5-3.3-3.9-4.9c-4.8-2.4-7.4 0-7.4 0s2.4-4.1-1.9-6.4-6.2 1.2-6.2 1.2-.9-.5-2.1-.5-2.3 1.1-2.3 1.1.1-.7-1.1-1.1c-1.2-.4-2 0-2 0s3.6-6.8-3.5-8.9c-6-1.8-7.9 2.6-8.4 4-.1-.3-.4-.7-.9-1.1-1-.7-1.3-.5-1.3-.5s1-4-1.7-5.2c-2.7-1.2-4.2 1.1-4.2 1.1s-3.1-1-5.7 1.4-2.1 5.5-2.1 5.5-.9 0-2.1.7-1.4 1.7-1.4 1.7-1.7-1.2-4.3-1.2c-2.6 0-4.5 1.2-4.5 1.2s-.7-1.5-2.8-2.4c-2.1-.9-4 0-4 0s2.6-5.9-4.7-9c-7.3-3.1-12.6 3.3-12.6 3.3s-.9 0-1.9.2c-.9.2-1.5.9-1.5.9S99.4 3 94.9 3.9c-4.5.9-5.7 5.7-5.7 5.7s-2.8-5-12.3-3.9-11.1 6-11.1 6-1.2-1.4-4-.7c-.8.2-1.3.5-1.8.9-.9-2.1-2.7-4.9-6.2-4.4-3.2.4-4 2.2-4 2.2s-.5-.7-1.2-.7h-1.4s-.5-.9-1.7-1.4-2.4 0-2.4 0-2.4-1.2-4.7 0-3.1 4.1-3.1 4.1-1.7-1.4-3.6-.7c-1.9.7-1.9 2.8-1.9 2.8s-.5-.5-1.7-.2c-1.2.2-1.4.7-1.4.7s-.7-2.3-2.8-2.8c-2.1-.5-4.3.2-4.3.2s-1.7-5-11.1-6c-3.8-.4-6.6.2-8.5 1v21.2h283.5V11.1c-.9.2-1.6.4-1.6.4s-5.2-8-16.1-8z'/%3E%3C/g%3E%3C/svg%3E"); /* Texturas pesadas: fuera del CSS critico, se cargan solo si se usan */ --shape-brush: url("/shapes/brush.svg"); --shape-brush-down: url("/shapes/brush-down.svg"); /* --shape-paper: url("/shapes/paper.svg"); pendiente: falta el SVG */ } /* ------------------------------------------ Base. Tecnica MIXTA, un metodo por borde: ARRIBA — recorte real (mask sobre la seccion): la silueta se resta (exclude) de una capa opaca completa y la franja queda transparente; por el hueco asoma lo que haya detras (un section--pin al pasarle por encima, o el fondo de la pagina). Sin silueta (--shape-top: none) la mascara es neutra. ABAJO — banda PINTADA (::after enmascarado con la silueta espejada, color --shape-color): simula que la seccion siguiente entra en esta. Abajo NO se recorta a proposito: es una fuga geometrica — cuando la seccion es mas baja que el viewport, su borde inferior esta en pantalla mientras aun esta cubriendo a un section--pin, y un hueco real enseñaria el pin en el momento equivocado. Pintada, no hay nada que ensenar. El padding compensa ambos bordes para que el contenido no invada las franjas. ------------------------------------------ */ .shape { --shape-h: clamp(2.5rem, 6vw, 5rem); /* --shape-color (las dos bandas de una vez) NO se declara aqui a proposito: sin declarar, el var() de abajo cae al siguiente eslabon. Es lo que ordena las tres fuentes de color, de mas a menos mandona: 1. shape--top- / shape--bottom- -> pisan --shape-color-top/-bottom 2. shape-- o --shape-color en linea -> las dos bandas 3. automatico, el color de la seccion vecina -> --shape-color-auto-* 4. y si no hay nada, --color-base-100 Un color puesto a mano gana siempre al automatico. */ --shape-color-top: var( --shape-color, var(--shape-color-auto-top, var(--color-base-100)) ); --shape-color-bottom: var( --shape-color, var(--shape-color-auto-bottom, var(--color-base-100)) ); --shape-top: none; --shape-bottom: none; position: relative; padding-top: calc(var(--padding-v) + var(--shape-h)); padding-bottom: calc(var(--padding-v) + var(--shape-h)); -webkit-mask-image: var(--shape-top), linear-gradient(#000 0 0); mask-image: var(--shape-top), linear-gradient(#000 0 0); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% var(--shape-h), 100% 100%; mask-size: 100% var(--shape-h), 100% 100%; -webkit-mask-position: top, 0 0; mask-position: top, 0 0; -webkit-mask-composite: xor; /* sintaxis legacy (Safari viejo) */ mask-composite: exclude; } /* Banda inferior pintada. El mask del elemento no le afecta en su zona: la capa opaca completa mantiene visible todo lo que no sea la franja superior */ .shape::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--shape-h); background-color: var(--shape-color-bottom); -webkit-mask-image: var(--shape-bottom); mask-image: var(--shape-bottom); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; pointer-events: none; } /* ------------------------------------------ Seleccion de silueta: cada una fija su version normal (arriba) y espejada (abajo) ------------------------------------------ */ .shape--tilt { --shape-top: var(--shape-tilt); --shape-bottom: var(--shape-tilt-down); } .shape--opacity-waves { --shape-top: var(--shape-opacity-waves); --shape-bottom: var(--shape-opacity-waves-down); } .shape--waves { --shape-top: var(--shape-waves); --shape-bottom: var(--shape-waves-down); } .shape--irregular-waves { --shape-top: var(--shape-irregular-waves); --shape-bottom: var(--shape-irregular-waves-down); } .shape--curve { --shape-top: var(--shape-curve); --shape-bottom: var(--shape-curve-down); } /* Las siluetas *-invert pintan el COMPLEMENTO: la parte opaca del SVG toca el lado interior. Con la resta (exclude), usarlas tal cual dejaria la pintura colgando del borde exterior, separada del cuerpo de la seccion. Por eso cruzan las versiones: la espejada (-down) arriba y la normal abajo, para que lo pintado quede siempre unido al cuerpo. */ .shape--curve-invert { --shape-top: var(--shape-curve-invert-down); --shape-bottom: var(--shape-curve-invert); } .shape--triangle { --shape-top: var(--shape-triangle); --shape-bottom: var(--shape-triangle-down); } .shape--triangle-invert { --shape-top: var(--shape-triangle-invert-down); --shape-bottom: var(--shape-triangle-invert); } .shape--arrow { --shape-top: var(--shape-arrow); --shape-bottom: var(--shape-arrow-down); } .shape--arrow-invert { --shape-top: var(--shape-arrow-invert-down); --shape-bottom: var(--shape-arrow-invert); } .shape--book { --shape-top: var(--shape-book); --shape-bottom: var(--shape-book-down); } .shape--book-invert { --shape-top: var(--shape-book-invert-down); --shape-bottom: var(--shape-book-invert); } /* Excepcion a la regla *-down: cloud no espeja la silueta abajo, la COMPLEMENTA. La linea de nubes cae igual en los dos bordes (no se refleja), pero abajo se pinta el lado de dentro —cloud-invert—, para que el color de la banda quede en la zona inferior, pegado al borde de la seccion, y no colgando con el fondo asomando debajo. Va con shape--flip para que ademas no coincidan en horizontal. */ .shape--cloud { --shape-top: var(--shape-cloud); --shape-bottom: var(--shape-cloud-invert); --shape-h: clamp(3rem, 8vw, 250px); } .shape--cloud-invert { --shape-top: var(--shape-cloud-invert-down); --shape-bottom: var(--shape-cloud-invert); } .shape--brush { --shape-top: var(--shape-brush); --shape-bottom: var(--shape-brush-down); } /* .shape--paper { --shape-top: var(--shape-paper); ... } pendiente */ /* ------------------------------------------ Posicion: restringir a un solo borde. Deben ir DESPUES de las siluetas: misma especificidad, ganan por orden. ------------------------------------------ */ .shape--top { padding-bottom: var(--padding-v); } .shape--top::after { content: none; } .shape--bottom { --shape-top: none; padding-top: var(--padding-v); } /* ------------------------------------------ Volteo horizontal (shape--flip). Las bandas pintadas son cajas propias, asi que basta un scaleX(-1): la mascara se aplica en el espacio del pseudoelemento y el transform espeja el resultado, sin duplicar SVG. Sirve para romper la simetria de espejo entre el borde de arriba y el de abajo cuando la silueta es irregular (cloud, brush, irregular-waves...). No afecta al recorte superior; ver la nota de limitaciones de la cabecera. ------------------------------------------ */ .shape--flip::after, .shape--flip::before { transform: scaleX(-1); } /* ------------------------------------------ Banda superior PINTADA. Existe solo si algo enciende --shape-paint-top (shape--paint o cualquier shape--top-): `content` resuelve a `none` mientras nadie la defina y el pseudoelemento ni se genera. Es la unica forma de dar color al borde de arriba, porque el recorte real no pinta: enseña lo que hay detras de la seccion —el fondo de la pagina o un section--pin—, nunca la seccion anterior, cuya caja termina mas arriba. ------------------------------------------ */ .shape::before { content: var(--shape-paint-top, none); position: absolute; top: 0; left: 0; width: 100%; height: var(--shape-h); background-color: var(--shape-color-top); -webkit-mask-image: var(--shape-top); mask-image: var(--shape-top); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; pointer-events: none; } /* ------------------------------------------ Modo todo pintado (shape--paint): sustituye el recorte superior por una banda pintada gemela de la inferior. Para cuando se quiere una banda de color tambien arriba, o ningun hueco real. El :not() evita pintarla en shape--bottom, donde --shape-top es none y la banda saldria como un rectangulo macizo (sin mascara no hay silueta que recortar). ------------------------------------------ */ .shape--paint { /* Fuera el mask entero, no solo la silueta: un mask "neutro" seguiria recortando a la caja de la seccion lo que se salga de ella (sombras, overflow de un hijo). */ -webkit-mask-image: none; mask-image: none; } .shape--paint:not(.shape--bottom) { --shape-paint-top: ""; } /* ------------------------------------------ Color de las bandas pintadas. shape-- tiñe las dos de una vez; shape--top- y shape--bottom- pisan un solo borde, para cuando arriba y abajo tocan secciones de distinto color. Importante: shape--top- CAMBIA la tecnica del borde superior —cambia el recorte por una banda pintada—, porque el hueco real no puede tomar el color de la seccion anterior. Es el modo a usar cuando la seccion de arriba tiene fondo propio; el recorte (por defecto) sigue siendo lo correcto sobre el fondo de la pagina o sobre un section--pin, que deben verse de verdad. ------------------------------------------ */ .shape--primary { --shape-color: var(--color-primary); } .shape--secondary { --shape-color: var(--color-secondary); } .shape--light { --shape-color: var(--color-base-300); } .shape--dark { --shape-color: var(--color-neutral); } .shape--base { --shape-color: var(--color-base-100); } /* Solo el borde inferior */ .shape--bottom-primary { --shape-color-bottom: var(--color-primary); } .shape--bottom-secondary { --shape-color-bottom: var(--color-secondary); } .shape--bottom-light { --shape-color-bottom: var(--color-base-300); } .shape--bottom-dark { --shape-color-bottom: var(--color-neutral); } .shape--bottom-base { --shape-color-bottom: var(--color-base-100); } .shape--bottom-primary-light { --shape-color-bottom: var(--color-base-primary); } .shape--bottom-secondary-light { --shape-color-bottom: var(--color-base-secondary); } /* Solo el borde superior. Cambian ademas la tecnica de ese borde: quitan el recorte (que no admite color) y encienden la banda pintada. shape--paint-top es el interruptor pelado, sin color, para dar uno cualquiera a mano: class="... shape--paint-top" style="--shape-color-top: var(--color-accent)" Los shape--top- son ese interruptor con el color ya puesto. */ .shape--paint-top, .shape--top-primary, .shape--top-secondary, .shape--top-light, .shape--top-dark, .shape--top-base, .shape--top-primary-light, .shape--top-secondary-light { -webkit-mask-image: none; mask-image: none; } .shape--paint-top:not(.shape--bottom), .shape--top-primary:not(.shape--bottom), .shape--top-secondary:not(.shape--bottom), .shape--top-light:not(.shape--bottom), .shape--top-dark:not(.shape--bottom), .shape--top-base:not(.shape--bottom), .shape--top-primary-light:not(.shape--bottom), .shape--top-secondary-light:not(.shape--bottom) { --shape-paint-top: ""; } .shape--top-primary { --shape-color-top: var(--color-primary); } .shape--top-secondary { --shape-color-top: var(--color-secondary); } .shape--top-light { --shape-color-top: var(--color-base-300); } .shape--top-dark { --shape-color-top: var(--color-neutral); } .shape--top-base { --shape-color-top: var(--color-base-100); } .shape--top-primary-light { --shape-color-top: var(--color-base-primary); } .shape--top-secondary-light { --shape-color-top: var(--color-base-secondary); } /* ------------------------------------------ AUTOMATICO: cada banda toma el color de la seccion vecina ------------------------------------------ Arriba se mira la seccion ANTERIOR (combinador +) y abajo la SIGUIENTE (:has(+ ...)), y se copia su fondo. Asi el borde parece la continuacion de la seccion de al lado sin declarar nada en el JSON. Solo entran las secciones de color PLANO: sobre section--bg, --gradient, --half* o una seccion sin modificador no hay un color unico que copiar, asi que esas se quedan como estaban. El borde superior ademas cambia de tecnica —el recorte no admite color, hay que pintarlo (ver .shape::before)—, y eso tiene dos excepciones que deben seguir siendo un hueco real: - la seccion anterior es un section--pin: el hueco es justo por donde tiene que asomar el pin al hacer scroll; - la seccion con shape ES el pin: se queda quieta mientras la anterior se va, y la banda pintada mantendria un color que ya no esta debajo. Para renunciar al automatico y recuperar el recorte: shape--cut. Para pintarlo de otro color, cualquier shape--top-. ------------------------------------------ */ :is( .section--primary, .section--secondary, .section--light, .section--dark, .section--primary-light, .section--secondary-light ):not(.section--pin) + .shape:not(.shape--bottom):not(.shape--cut):not(.section--pin) { -webkit-mask-image: none; mask-image: none; --shape-paint-top: ""; } /* De que color. Van sin guardas: son solo el ultimo eslabon del var() de .shape, no pintan nada por si mismas. */ .section--primary + .shape { --shape-color-auto-top: var(--color-primary); } .section--secondary + .shape { --shape-color-auto-top: var(--color-secondary); } .section--light + .shape { --shape-color-auto-top: var(--color-base-300); } .section--dark + .shape { --shape-color-auto-top: var(--color-neutral); } .section--primary-light + .shape { --shape-color-auto-top: var(--color-base-primary); } .section--secondary-light + .shape { --shape-color-auto-top: var(--color-base-secondary); } /* Abajo no hay nada que encender (la banda siempre esta pintada), solo que cambie del blanco por defecto al color de la seccion siguiente. */ .shape:has(+ .section--primary) { --shape-color-auto-bottom: var(--color-primary); } .shape:has(+ .section--secondary) { --shape-color-auto-bottom: var(--color-secondary); } .shape:has(+ .section--light) { --shape-color-auto-bottom: var(--color-base-300); } .shape:has(+ .section--dark) { --shape-color-auto-bottom: var(--color-neutral); } .shape:has(+ .section--primary-light) { --shape-color-auto-bottom: var(--color-base-primary); } .shape:has(+ .section--secondary-light) { --shape-color-auto-bottom: var(--color-base-secondary); } /* ------------------------------------------ Altura del recorte ------------------------------------------ */ .shape--s { --shape-h: clamp(1.25rem, 3vw, 2.5rem); } .shape--l { --shape-h: clamp(4rem, 10vw, 7rem); } }