xarxaprod-wp-theme/sass/base/elements/_body.scss

body {
  background: $color__background-body; // Fallback for when there is no custom background color defined.
  //background-image: url(./assets/img/background-colors-02.jpg);
  //background-size: cover;
  //background-position: center center;
  //background-repeat: no-repeat;
  position: relative;
  &.admin-bar { //if else breaks the WordPress inline styles when front end editing
    position: inherit;
  }
}

:root{
  // check colors at sass/abstracts/variables/_colors.scss
  --bubble-color-01: #ff5a69; //$color__xxp-red;
  --bubble-color-02: #ffcb1f; //$color__xxp-yellow;
  --bubble-color-03: #00d1ec; //$color__xxp-cyan;
  --bubble-color-04: #00f274; //$color__xxp-green;
}
//bubble color definition
.home {
  --bubble-color-01: #ffffff; 
  --bubble-color-02: #ff79a8; //$color__xxp-lila;
  --bubble-color-03:  #ff9221; //$color__xxp-orange;
  --bubble-color-04: #ffffff;
}
.page-id-617 //que es xarxaprod 
{
  --bubble-color-01: #4a30f4; //$color__xxp-blue;
  --bubble-color-02: #ffffff;
  --bubble-color-03: #ffffff;
  --bubble-color-04: #f6ca43; //$color__xxp-yellow-2;
}
.page-id-626, //qui som junta
.page-id-2936, //comisions
.page-id-2937 //ofi tecnica
{
  --bubble-color-01: #ffcb1f; 
  --bubble-color-02: #ffffff;
  --bubble-color-03: #ffffff;
  --bubble-color-04: #ff79a8;
}
.page-id-634 //que oferim
{
  --bubble-color-01: #ffffff; 
  --bubble-color-02: #f6ca43;
  --bubble-color-03: #4a30f4;
  --bubble-color-04: #ffffff;
}
.page-id-659 //premsa
{
  --bubble-color-01: #ffffff; 
  --bubble-color-02: #6cd3eb;
  --bubble-color-03: #f6ca43;
  --bubble-color-04: #ffffff; 
}
.page-template-associats-search {
  --bubble-color-01: #ffffff;
  --bubble-color-02: #68ed81;
  --bubble-color-03: #ff79a8;
  --bubble-color-04: #ffffff;
}
.single-xarxaprod-associat {
  --bubble-color-01: #ff9221;
  --bubble-color-02: #f6ca43;
  --bubble-color-03: #ff866f; 
  --bubble-color-04: #ffffff;
}

.page-template-arxiu-genera {
  --bubble-color-01: #ffffff; 
  --bubble-color-02: #f61818;
  --bubble-color-03: #f61818;
  --bubble-color-04: #ffffff;
}
.liquid-bubbles {
	overflow: hidden;
	float: left;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1000;
	width: 100vw;
	height: 100vh;

}
@keyframes bubble-move {
	from {
		width: 40vw;
    height: 40vw;
	  filter: blur(10rem);
	 /* transform: rotate(0);*/
	}
	to {
		width: 90vw;
		height: 20vw;
	  filter: blur(20rem);
	 /* transform: rotate(5deg);*/
	}
}
.bubbles {
	--size: 40vw;
	--position: -5vw;
  filter: blur(20rem);
	position:absolute;
	width: var(--size);
	height: var(--size);
	border-radius: 20%;
	background: linear-gradient(var(--bgangle),var(--bgcolor), transparent);
	//animation: 4s ease-in-out 4s infinite alternate bubble-move;
	&.bubble-01{
	  top: var(--position);
	  left: var(--position);
	  --bgcolor: var(--bubble-color-01);
		//--bgangle: to bottom right;
		--bgangle: 135deg;
	  animation: 5s ease-in-out 2s infinite alternate bubble-move;
	}
	&.bubble-02{
	  top: var(--position);
		right: var(--position);
	  --bgcolor: var(--bubble-color-02);
		//--bgangle: to bottom left;
		--bgangle: 225deg;
	  animation: 3s ease-in-out 0s infinite alternate bubble-move;
	}
	&.bubble-03{
		bottom: var(--position);
	  left: var(--position);
	  --bgcolor: var(--bubble-color-03);
		//--bgangle: to top right;
		--bgangle: 45deg;
	  animation: 2s ease-in-out 3s infinite alternate bubble-move;
	}
	&.bubble-04{
		bottom: var(--position);
		right: var(--position);
	  --bgcolor: var(--bubble-color-04);
		//--bgangle: to top left;
		--bgangle: 325deg;
	  animation: 4s ease-in-out 1s infinite alternate bubble-move;
	}
}