272 lines
7.5 KiB
SCSS
272 lines
7.5 KiB
SCSS
body {
|
|
//Fallback for when there is no custom background color defined.
|
|
background: $color__background-body;
|
|
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
|
|
--color-xxp-black: #000000;
|
|
--color-xxp-white: #ffffff;
|
|
--color-xxp-red: #f27173;
|
|
--color-xxp-yellow: #f6cc4c;
|
|
--color-xxp-green: #84c779;
|
|
--color-xxp-cyan: #61cae4;
|
|
--color-xxp-lila: #de7fb4;
|
|
--color-xxp-pink: #f58b77;
|
|
--color-xxp-violet: #5859a7;
|
|
|
|
//default bubble color definition
|
|
--bubble-color-01: var(--color-xxp-red);
|
|
--bubble-color-02: var(--color-xxp-yellow);
|
|
--bubble-color-03: var(--color-xxp-cyan);
|
|
--bubble-color-04: var(--color-xxp-green);
|
|
}
|
|
@media screen {
|
|
.home {
|
|
--bubble-color-01: var(--color-xxp-white);
|
|
--bubble-color-02: var(--color-xxp-red);
|
|
--bubble-color-03: var(--color-xxp-yellow);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
.page-id-617 //que es xarxaprod
|
|
{
|
|
--bubble-color-01: var(--color-xxp-violet);
|
|
--bubble-color-02: var(--color-xxp-white);
|
|
--bubble-color-03: var(--color-xxp-white);
|
|
--bubble-color-04: var(--color-xxp-yellow);
|
|
}
|
|
.page-id-626, //qui som junta
|
|
.page-id-2936, //comisions
|
|
.page-id-2937 //ofi tecnica
|
|
{
|
|
--bubble-color-01: var(--color-xxp-yellow);
|
|
--bubble-color-02: var(--color-xxp-white);
|
|
--bubble-color-03: var(--color-xxp-yellow);
|
|
--bubble-color-04: var(--color-xxp-lila);
|
|
}
|
|
.page-id-634 //que oferim
|
|
{
|
|
--bubble-color-01: var(--color-xxp-white);
|
|
--bubble-color-02: var(--color-xxp-yellow);
|
|
--bubble-color-03: var(--color-xxp-violet);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
.page-id-659 //premsa
|
|
{
|
|
--bubble-color-01: var(--color-xxp-cyan);
|
|
--bubble-color-02: var(--color-xxp-cyan);
|
|
--bubble-color-03: var(--color-xxp-yellow);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
.page-template-associats-search,
|
|
.post-type-archive-xarxaprod-associat
|
|
{
|
|
--bubble-color-01: var(--color-xxp-white);
|
|
--bubble-color-02: var(--color-xxp-green);
|
|
--bubble-color-03: var(--color-xxp-pink);
|
|
--bubble-color-04: var(--color-xxp-pink);
|
|
}
|
|
.single-xarxaprod-associat {
|
|
--bubble-color-01: var(--color-xxp-pink);
|
|
--bubble-color-02: var(--color-xxp-yellow);
|
|
--bubble-color-03: var(--color-xxp-pink);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
|
|
.page-template-arxiu-general,
|
|
.page-id-643 //arxiu-convos vell
|
|
{
|
|
--bubble-color-01: var(--color-xxp-white);
|
|
--bubble-color-02: var(--color-xxp-red);
|
|
--bubble-color-03: var(--color-xxp-red);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
.page-template-convos-search,
|
|
.post-type-archive-xarxaprod-convo
|
|
{
|
|
--bubble-color-01: var(--color-xxp-white);
|
|
--bubble-color-02: var(--color-xxp-pink);
|
|
--bubble-color-03: var(--color-xxp-green);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
.single-xarxaprod-convo {
|
|
--bubble-color-01: var(--color-xxp-lila);
|
|
--bubble-color-02: var(--color-xxp-white);
|
|
--bubble-color-03: var(--color-xxp-violet);
|
|
--bubble-color-04: var(--color-xxp-lila);
|
|
}
|
|
.page-template-agenda-search {
|
|
--bubble-color-01: var(--color-xxp-lila);
|
|
--bubble-color-02: var(--color-xxp-white);
|
|
--bubble-color-03: var(--color-xxp-white);
|
|
--bubble-color-04: var(--color-xxp-red);
|
|
}
|
|
|
|
.category-activitats {
|
|
--bubble-color-01: var(--color-xxp-white);
|
|
--bubble-color-02: var(--color-xxp-green);
|
|
--bubble-color-03: var(--color-xxp-cyan);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
.page-id-28, //espai assesorament
|
|
.page-template-faqs-page
|
|
{
|
|
--bubble-color-01: var(--color-xxp-white);
|
|
--bubble-color-02: var(--color-xxp-cyan);
|
|
--bubble-color-03: var(--color-xxp-violet);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
.page-template-ajut-search,
|
|
.post-type-archive-xarxaprod-ajut,
|
|
.single-xarxaprod-ajut
|
|
//.custom-post-type-ajuts
|
|
{
|
|
--bubble-color-01: var(--color-xxp-cyan);
|
|
--bubble-color-02: var(--color-xxp-white);
|
|
--bubble-color-03: var(--color-xxp-white);
|
|
--bubble-color-04: var(--color-xxp-violet);
|
|
}
|
|
.page-id-1673 //XarxaREC
|
|
{
|
|
--bubble-color-01: var(--color-xxp-yellow);
|
|
--bubble-color-02: var(--color-xxp-white);
|
|
--bubble-color-03: var(--color-xxp-green);
|
|
--bubble-color-04: var(--color-xxp-yellow);
|
|
}
|
|
.page-id-2366 //Firas i mercats
|
|
{
|
|
--bubble-color-01: var(--color-xxp-white);
|
|
--bubble-color-02: var(--color-xxp-violet);
|
|
--bubble-color-03: var(--color-xxp-red);
|
|
--bubble-color-04: var(--color-xxp-white);
|
|
}
|
|
.page-id-2364 //Sostenibilitat
|
|
{
|
|
--bubble-color-01: var(--color-xxp-green);
|
|
--bubble-color-02: var(--color-xxp-white);
|
|
--bubble-color-03: var(--color-xxp-white);
|
|
--bubble-color-04: var(--color-xxp-violet);
|
|
}
|
|
.page-id-2365 //projecte educatiu
|
|
{
|
|
--bubble-color-01: var(--color-xxp-lila);
|
|
--bubble-color-02: var(--color-xxp-yellow);
|
|
--bubble-color-03: var(--color-xxp-lila);
|
|
--bubble-color-04: var(--color-xxp-yellow);
|
|
}
|
|
.page-id-1760 //Mentoratge
|
|
{
|
|
--bubble-color-01: var(--color-xxp-cyan);
|
|
--bubble-color-02: var(--color-xxp-white);
|
|
--bubble-color-03: var(--color-xxp-lila);
|
|
--bubble-color-04: var(--color-xxp-cyan);
|
|
}
|
|
.liquid-bubbles {
|
|
overflow: hidden;
|
|
float: left;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1000;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
}
|
|
.bubbles {
|
|
//--size: 40vw;
|
|
//--position: -5vw;
|
|
//filter: blur(8rem);
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 48em) {
|
|
@keyframes bubble-move {
|
|
from {
|
|
width: 50vw;
|
|
height: 70vh;
|
|
filter: blur(3rem);
|
|
/* transform: rotate(0);*/
|
|
}
|
|
to {
|
|
width: 100vw;
|
|
height: 40vh;
|
|
filter: blur(8rem);
|
|
/* transform: rotate(5deg);*/
|
|
}
|
|
}
|
|
.bubbles {
|
|
--size: 50vw;
|
|
--position: 0vw;
|
|
height: 70vh;
|
|
filter: blur(3rem);
|
|
border-radius: 3%;
|
|
}
|
|
}
|
|
@media screen and (min-width: 48em) {
|
|
@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);
|
|
}
|
|
}
|
|
@media screen and (min-width: 80em) {
|
|
}
|
|
|