added corporate colors and defined bubble colors
This commit is contained in:
parent
7e88861955
commit
db6dc06d56
18
README.md
18
README.md
|
|
@ -30,15 +30,15 @@ A WordPress theme for the Xarxaprod.cat
|
||||||
|
|
||||||
### Colors
|
### Colors
|
||||||
The colors used in the design are:
|
The colors used in the design are:
|
||||||
- black: #000000
|
- black: `#000000` `rgb(0,0,0)`
|
||||||
- white: #ffffff
|
- white: `#ffffff` `rgb(255,255,255)`
|
||||||
- salmon: #ff866f
|
- red: `#f27173` `rgb(242,113,115)`
|
||||||
- yellow: #ffcb1f
|
- yellow: `#f6cc4c` `rgb(246,204,076)`
|
||||||
- pink: #ff6bc3
|
- green: `#84c779` `rgb(132,199,121)`
|
||||||
- violet: #651aff
|
- cyan: `#61cae4` `rgb(97,202,228)`
|
||||||
- cyan: #00d1ec
|
- lila: `#de7fb4` `rgb(222,127,180)`
|
||||||
- green: #00f274
|
- pink: `#f58b77` `rgb(245,139,119)`
|
||||||
- red: #ff5a69
|
- violet: `#5859a7` `rgb(88,89,167)`
|
||||||
|
|
||||||
### Fonts
|
### Fonts
|
||||||
|
|
||||||
|
|
|
||||||
470
adminstyles.css
470
adminstyles.css
|
|
@ -970,226 +970,274 @@ Add your custom styles in this file so it is easier to update the theme.
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper :root {
|
.edit-post-visual-editor__content-area .editor-styles-wrapper :root {
|
||||||
--bubble-color-01: #ff5a69;
|
--color-xxp-black: #000;
|
||||||
--bubble-color-02: #ffcb1f;
|
--color-xxp-white: #fff;
|
||||||
--bubble-color-03: #00d1ec;
|
--color-xxp-red: #f27173;
|
||||||
--bubble-color-04: #00f274;
|
--color-xxp-yellow: #f6cc4c;
|
||||||
|
--color-xxp-green: #84c779;
|
||||||
|
--color-xxp-cyan: #61cae4;
|
||||||
|
--color-xxp-lila: #de7fb4;
|
||||||
|
--color-xxp-pink: #f58b77;
|
||||||
|
--color-xxp-violet: #5859a7;
|
||||||
|
--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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .home {
|
@media screen {
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #ff79a8;
|
|
||||||
--bubble-color-03: #ff9221;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-617 {
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .home {
|
||||||
--bubble-color-01: #4a30f4;
|
--bubble-color-01: var(--color-xxp-white);
|
||||||
--bubble-color-02: #fff;
|
--bubble-color-02: var(--color-xxp-red);
|
||||||
--bubble-color-03: #fff;
|
--bubble-color-03: var(--color-xxp-yellow);
|
||||||
--bubble-color-04: #f6ca43;
|
--bubble-color-04: var(--color-xxp-white);
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-626,
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2936,
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2937 {
|
|
||||||
--bubble-color-01: #ffcb1f;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #ff79a8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-634 {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #f6ca43;
|
|
||||||
--bubble-color-03: #4a30f4;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-659 {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #6cd3eb;
|
|
||||||
--bubble-color-03: #f6ca43;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-associats-search,
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-associat {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #68ed81;
|
|
||||||
--bubble-color-03: #ff79a8;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat {
|
|
||||||
--bubble-color-01: #ff9221;
|
|
||||||
--bubble-color-02: #f6ca43;
|
|
||||||
--bubble-color-03: #ff866f;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-arxiu-general,
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-643 {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #f61818;
|
|
||||||
--bubble-color-03: #f61818;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-convos-search,
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-convo {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #ff5a69;
|
|
||||||
--bubble-color-03: #00f274;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-convo {
|
|
||||||
--bubble-color-01: #e572ba;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #4a30f4;
|
|
||||||
--bubble-color-04: #e572ba;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-agenda-search {
|
|
||||||
--bubble-color-01: #e158ae;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #ff5a69;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .category-activitats {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #00f274;
|
|
||||||
--bubble-color-03: #6cd3eb;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-28,
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-faqs-page {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #6cd3eb;
|
|
||||||
--bubble-color-03: #4a30f4;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-ajut-search,
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-ajut,
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-ajut {
|
|
||||||
--bubble-color-01: #6cd3eb;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #4a30f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1673 {
|
|
||||||
--bubble-color-01: #f6ca43;
|
|
||||||
--bubble-color-02: #ff9221;
|
|
||||||
--bubble-color-03: #00f274;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2366 {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #4a30f4;
|
|
||||||
--bubble-color-03: #ff5a69;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2364 {
|
|
||||||
--bubble-color-01: #00f274;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #4a30f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2365 {
|
|
||||||
--bubble-color-01: #e572ba;
|
|
||||||
--bubble-color-02: #f6ca43;
|
|
||||||
--bubble-color-03: #e572ba;
|
|
||||||
--bubble-color-04: #f6ca43;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1760 {
|
|
||||||
--bubble-color-01: #6cd3eb;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #6cd3eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .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 {
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-617 {
|
||||||
width: 90vw;
|
--bubble-color-01: var(--color-xxp-violet);
|
||||||
height: 20vw;
|
--bubble-color-02: var(--color-xxp-white);
|
||||||
|
--bubble-color-03: var(--color-xxp-white);
|
||||||
|
--bubble-color-04: var(--color-xxp-yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-626,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2936,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2937 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-634 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-659 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-associats-search,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-arxiu-general,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-643 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-convos-search,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-28,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-template-ajut-search,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .post-type-archive-xarxaprod-ajut,
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-ajut {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1673 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2366 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2364 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-2365 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .page-id-1760 {
|
||||||
|
--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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .liquid-bubbles {
|
||||||
|
overflow: hidden;
|
||||||
|
float: left;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1000;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
|
||||||
|
position: absolute;
|
||||||
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
border-radius: 20%;
|
||||||
|
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-01 {
|
||||||
|
top: var(--position);
|
||||||
|
left: var(--position);
|
||||||
|
--bgcolor: var(--bubble-color-01);
|
||||||
|
--bgangle: 135deg;
|
||||||
|
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-02 {
|
||||||
|
top: var(--position);
|
||||||
|
right: var(--position);
|
||||||
|
--bgcolor: var(--bubble-color-02);
|
||||||
|
--bgangle: 225deg;
|
||||||
|
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-03 {
|
||||||
|
bottom: var(--position);
|
||||||
|
left: var(--position);
|
||||||
|
--bgcolor: var(--bubble-color-03);
|
||||||
|
--bgangle: 45deg;
|
||||||
|
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-04 {
|
||||||
|
bottom: var(--position);
|
||||||
|
right: var(--position);
|
||||||
|
--bgcolor: var(--bubble-color-04);
|
||||||
|
--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);*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
|
||||||
|
--size: 50vw;
|
||||||
|
--position: 0;
|
||||||
|
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);*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles {
|
||||||
|
--size: 40vw;
|
||||||
|
--position: -5vw;
|
||||||
filter: blur(20rem);
|
filter: blur(20rem);
|
||||||
|
|
||||||
/* transform: rotate(5deg);*/
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-01 {
|
|
||||||
top: var(--position);
|
|
||||||
left: var(--position);
|
|
||||||
--bgcolor: var(--bubble-color-01);
|
|
||||||
--bgangle: 135deg;
|
|
||||||
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-02 {
|
|
||||||
top: var(--position);
|
|
||||||
right: var(--position);
|
|
||||||
--bgcolor: var(--bubble-color-02);
|
|
||||||
--bgangle: 225deg;
|
|
||||||
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-03 {
|
|
||||||
bottom: var(--position);
|
|
||||||
left: var(--position);
|
|
||||||
--bgcolor: var(--bubble-color-03);
|
|
||||||
--bgangle: 45deg;
|
|
||||||
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper .bubbles.bubble-04 {
|
|
||||||
bottom: var(--position);
|
|
||||||
right: var(--position);
|
|
||||||
--bgcolor: var(--bubble-color-04);
|
|
||||||
--bgangle: 325deg;
|
|
||||||
animation: 4s ease-in-out 1s infinite alternate bubble-move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-post-visual-editor__content-area .editor-styles-wrapper hr {
|
.edit-post-visual-editor__content-area .editor-styles-wrapper hr {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,21 +1,21 @@
|
||||||
$color__xxp-black: #000000;
|
$color__xxp-black: #000000;
|
||||||
|
$color__xxp-black-rgb: rgb(0,0,0);
|
||||||
$color__xxp-white: #ffffff;
|
$color__xxp-white: #ffffff;
|
||||||
$color__xxp-salmon: #ff866f;
|
$color__xxp-white-rgb: rgb(255,255,255);
|
||||||
$color__xxp-yellow: #ffcb1f;
|
$color__xxp-red: #f27173;
|
||||||
$color__xxp-pink: #ff6bc3;
|
$color__xxp-red-rgb: rgb(242,113,115);
|
||||||
$color__xxp-violet: #651aff;
|
$color__xxp-yellow: #f6cc4c;
|
||||||
$color__xxp-cyan: #00d1ec;
|
$color__xxp-yellow-rgb: rgb(246,204,076);
|
||||||
$color__xxp-green: #00f274;
|
$color__xxp-green: #84c779;
|
||||||
$color__xxp-red: #ff5a69;
|
$color__xxp-green-rgb: rgb(132,199,121);
|
||||||
$color__xxp-lila: #ff79a8;
|
$color__xxp-cyan: #61cae4;
|
||||||
$color__xxp-orange: #ff9221;
|
$color__xxp-cyan-rgb: rgb(97,202,228);
|
||||||
$color__xxp-blue: #4a30f4;
|
$color__xxp-lila: #de7fb4;
|
||||||
$color__xxp-yellow-2: #f6ca43;
|
$color__xxp-lila-rgb: rgb(222,127,180);
|
||||||
$color__xxp-green-2: #68ed81;
|
$color__xxp-pink: #f58b77;
|
||||||
$color__xxp-pink: #e572ba;
|
$color__xxp-pink-rgb: rgb(245,139,119);
|
||||||
$color__xxp-red-2: #f61818;
|
$color__xxp-violet: #5859a7;
|
||||||
$color__xxp-cyan: #6cd3eb;
|
$color__xxp-violet-rgb: rgb(88,89,167);
|
||||||
$color__xxp-lila-2: #e158ae;
|
|
||||||
|
|
||||||
$color__white: #fff;
|
$color__white: #fff;
|
||||||
$color__white-dark: #fdfdfd;
|
$color__white-dark: #fdfdfd;
|
||||||
|
|
|
||||||
|
|
@ -1,227 +1,271 @@
|
||||||
body {
|
body {
|
||||||
background: $color__background-body; // Fallback for when there is no custom background color defined.
|
//Fallback for when there is no custom background color defined.
|
||||||
//background-image: url(./assets/img/background-colors-02.jpg);
|
background: $color__background-body;
|
||||||
//background-size: cover;
|
|
||||||
//background-position: center center;
|
|
||||||
//background-repeat: no-repeat;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
&.admin-bar { //if else breaks the WordPress inline styles when front end editing
|
&.admin-bar {
|
||||||
|
//if else breaks the WordPress inline styles when front end editing
|
||||||
position: inherit;
|
position: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:root{
|
:root{
|
||||||
// check colors at sass/abstracts/variables/_colors.scss
|
//check colors at sass/abstracts/variables/_colors.scss
|
||||||
--bubble-color-01: #ff5a69; //$color__xxp-red;
|
--color-xxp-black: #000000;
|
||||||
--bubble-color-02: #ffcb1f; //$color__xxp-yellow;
|
--color-xxp-white: #ffffff;
|
||||||
--bubble-color-03: #00d1ec; //$color__xxp-cyan;
|
--color-xxp-red: #f27173;
|
||||||
--bubble-color-04: #00f274; //$color__xxp-green;
|
--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);
|
||||||
}
|
}
|
||||||
//bubble color definition
|
@media screen {
|
||||||
.home {
|
.home {
|
||||||
--bubble-color-01: #ffffff;
|
--bubble-color-01: var(--color-xxp-white);
|
||||||
--bubble-color-02: #ff79a8; //$color__xxp-lila;
|
--bubble-color-02: var(--color-xxp-red);
|
||||||
--bubble-color-03: #ff9221; //$color__xxp-orange;
|
--bubble-color-03: var(--color-xxp-yellow);
|
||||||
--bubble-color-04: #ffffff;
|
--bubble-color-04: var(--color-xxp-white);
|
||||||
}
|
}
|
||||||
.page-id-617 //que es xarxaprod
|
.page-id-617 //que es xarxaprod
|
||||||
{
|
{
|
||||||
--bubble-color-01: #4a30f4; //$color__xxp-blue;
|
--bubble-color-01: var(--color-xxp-violet);
|
||||||
--bubble-color-02: #ffffff;
|
--bubble-color-02: var(--color-xxp-white);
|
||||||
--bubble-color-03: #ffffff;
|
--bubble-color-03: var(--color-xxp-white);
|
||||||
--bubble-color-04: #f6ca43; //$color__xxp-yellow-2;
|
--bubble-color-04: var(--color-xxp-yellow);
|
||||||
}
|
}
|
||||||
.page-id-626, //qui som junta
|
.page-id-626, //qui som junta
|
||||||
.page-id-2936, //comisions
|
.page-id-2936, //comisions
|
||||||
.page-id-2937 //ofi tecnica
|
.page-id-2937 //ofi tecnica
|
||||||
{
|
{
|
||||||
--bubble-color-01: #ffcb1f;
|
--bubble-color-01: var(--color-xxp-yellow);
|
||||||
--bubble-color-02: #ffffff;
|
--bubble-color-02: var(--color-xxp-white);
|
||||||
--bubble-color-03: #ffffff;
|
--bubble-color-03: var(--color-xxp-yellow);
|
||||||
--bubble-color-04: #ff79a8;
|
--bubble-color-04: var(--color-xxp-lila);
|
||||||
}
|
}
|
||||||
.page-id-634 //que oferim
|
.page-id-634 //que oferim
|
||||||
{
|
{
|
||||||
--bubble-color-01: #ffffff;
|
--bubble-color-01: var(--color-xxp-white);
|
||||||
--bubble-color-02: #f6ca43;
|
--bubble-color-02: var(--color-xxp-yellow);
|
||||||
--bubble-color-03: #4a30f4;
|
--bubble-color-03: var(--color-xxp-violet);
|
||||||
--bubble-color-04: #ffffff;
|
--bubble-color-04: var(--color-xxp-white);
|
||||||
}
|
}
|
||||||
.page-id-659 //premsa
|
.page-id-659 //premsa
|
||||||
{
|
{
|
||||||
--bubble-color-01: #ffffff;
|
--bubble-color-01: var(--color-xxp-cyan);
|
||||||
--bubble-color-02: #6cd3eb;
|
--bubble-color-02: var(--color-xxp-cyan);
|
||||||
--bubble-color-03: #f6ca43;
|
--bubble-color-03: var(--color-xxp-yellow);
|
||||||
--bubble-color-04: #ffffff;
|
--bubble-color-04: var(--color-xxp-white);
|
||||||
}
|
}
|
||||||
.page-template-associats-search,
|
.page-template-associats-search,
|
||||||
.post-type-archive-xarxaprod-associat
|
.post-type-archive-xarxaprod-associat
|
||||||
{
|
{
|
||||||
--bubble-color-01: #ffffff;
|
--bubble-color-01: var(--color-xxp-white);
|
||||||
--bubble-color-02: #68ed81;
|
--bubble-color-02: var(--color-xxp-green);
|
||||||
--bubble-color-03: #ff79a8;
|
--bubble-color-03: var(--color-xxp-pink);
|
||||||
--bubble-color-04: #ffffff;
|
--bubble-color-04: var(--color-xxp-pink);
|
||||||
}
|
}
|
||||||
.single-xarxaprod-associat {
|
.single-xarxaprod-associat {
|
||||||
--bubble-color-01: #ff9221;
|
--bubble-color-01: var(--color-xxp-pink);
|
||||||
--bubble-color-02: #f6ca43;
|
--bubble-color-02: var(--color-xxp-yellow);
|
||||||
--bubble-color-03: #ff866f;
|
--bubble-color-03: var(--color-xxp-pink);
|
||||||
--bubble-color-04: #ffffff;
|
--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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-template-arxiu-general,
|
@media screen and (max-width: 48em) {
|
||||||
.page-id-643 //arxiu-convos vell
|
@keyframes bubble-move {
|
||||||
{
|
from {
|
||||||
--bubble-color-01: #ffffff;
|
width: 50vw;
|
||||||
--bubble-color-02: #f61818;
|
height: 70vh;
|
||||||
--bubble-color-03: #f61818;
|
filter: blur(3rem);
|
||||||
--bubble-color-04: #ffffff;
|
/* 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%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.page-template-convos-search,
|
@media screen and (min-width: 48em) {
|
||||||
.post-type-archive-xarxaprod-convo
|
@keyframes bubble-move {
|
||||||
{
|
from {
|
||||||
--bubble-color-01: #ffffff;
|
width: 40vw;
|
||||||
--bubble-color-02: #ff5a69;
|
height: 40vw;
|
||||||
--bubble-color-03: #00f274;
|
filter: blur(10rem);
|
||||||
--bubble-color-04: #ffffff;
|
/* transform: rotate(0);*/
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
width: 90vw;
|
||||||
|
height: 20vw;
|
||||||
|
filter: blur(20rem);
|
||||||
|
/* transform: rotate(5deg);*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bubbles {
|
||||||
|
--size: 40vw;
|
||||||
|
--position: -5vw;
|
||||||
|
filter: blur(20rem);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.single-xarxaprod-convo {
|
@media screen and (min-width: 80em) {
|
||||||
--bubble-color-01: #e572ba;
|
|
||||||
--bubble-color-02: #ffffff;
|
|
||||||
--bubble-color-03: #4a30f4;
|
|
||||||
--bubble-color-04: #e572ba;
|
|
||||||
}
|
|
||||||
.page-template-agenda-search {
|
|
||||||
--bubble-color-01: #e158ae;
|
|
||||||
--bubble-color-02: #ffffff;
|
|
||||||
--bubble-color-03: #ffffff;
|
|
||||||
--bubble-color-04: #ff5a69;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-activitats {
|
|
||||||
--bubble-color-01: #ffffff;
|
|
||||||
--bubble-color-02: #00f274;
|
|
||||||
--bubble-color-03: #6cd3eb;
|
|
||||||
--bubble-color-04: #ffffff;
|
|
||||||
}
|
|
||||||
.page-id-28, //espai assesorament
|
|
||||||
.page-template-faqs-page
|
|
||||||
{
|
|
||||||
--bubble-color-01: #ffffff;
|
|
||||||
--bubble-color-02: #6cd3eb;
|
|
||||||
--bubble-color-03: #4a30f4;
|
|
||||||
--bubble-color-04: #ffffff;
|
|
||||||
}
|
|
||||||
.page-template-ajut-search,
|
|
||||||
.post-type-archive-xarxaprod-ajut,
|
|
||||||
.single-xarxaprod-ajut
|
|
||||||
//.custom-post-type-ajuts
|
|
||||||
{
|
|
||||||
--bubble-color-01: #6cd3eb;
|
|
||||||
--bubble-color-02: #ffffff;
|
|
||||||
--bubble-color-03: #ffffff;
|
|
||||||
--bubble-color-04: #4a30f4;
|
|
||||||
}
|
|
||||||
.page-id-1673 //XarxaREC
|
|
||||||
{
|
|
||||||
--bubble-color-01: #f6ca43;
|
|
||||||
--bubble-color-02: #ff9221;
|
|
||||||
--bubble-color-03: #00f274;
|
|
||||||
--bubble-color-04: #ffffff;
|
|
||||||
}
|
|
||||||
.page-id-2366 //Firas i mercats
|
|
||||||
{
|
|
||||||
--bubble-color-01: #ffffff;
|
|
||||||
--bubble-color-02: #4a30f4;
|
|
||||||
--bubble-color-03: #ff5a69;
|
|
||||||
--bubble-color-04: #ffffff;
|
|
||||||
}
|
|
||||||
.page-id-2364 //Sostenibilitat
|
|
||||||
{
|
|
||||||
--bubble-color-01: #00f274;
|
|
||||||
--bubble-color-02: #ffffff;
|
|
||||||
--bubble-color-03: #ffffff;
|
|
||||||
--bubble-color-04: #4a30f4;
|
|
||||||
}
|
|
||||||
.page-id-2365 //projecte educatiu
|
|
||||||
{
|
|
||||||
--bubble-color-01: #e572ba;
|
|
||||||
--bubble-color-02: #f6ca43;
|
|
||||||
--bubble-color-03: #e572ba;
|
|
||||||
--bubble-color-04: #f6ca43;
|
|
||||||
}
|
|
||||||
.page-id-1760 //Mentoratge
|
|
||||||
{
|
|
||||||
--bubble-color-01: #6cd3eb;
|
|
||||||
--bubble-color-02: #ffffff;
|
|
||||||
--bubble-color-03: #ffffff;
|
|
||||||
--bubble-color-04: #6cd3eb;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
470
style.css
470
style.css
|
|
@ -827,226 +827,274 @@ body.admin-bar {
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bubble-color-01: #ff5a69;
|
--color-xxp-black: #000;
|
||||||
--bubble-color-02: #ffcb1f;
|
--color-xxp-white: #fff;
|
||||||
--bubble-color-03: #00d1ec;
|
--color-xxp-red: #f27173;
|
||||||
--bubble-color-04: #00f274;
|
--color-xxp-yellow: #f6cc4c;
|
||||||
|
--color-xxp-green: #84c779;
|
||||||
|
--color-xxp-cyan: #61cae4;
|
||||||
|
--color-xxp-lila: #de7fb4;
|
||||||
|
--color-xxp-pink: #f58b77;
|
||||||
|
--color-xxp-violet: #5859a7;
|
||||||
|
--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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home {
|
@media screen {
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #ff79a8;
|
|
||||||
--bubble-color-03: #ff9221;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-617 {
|
.home {
|
||||||
--bubble-color-01: #4a30f4;
|
--bubble-color-01: var(--color-xxp-white);
|
||||||
--bubble-color-02: #fff;
|
--bubble-color-02: var(--color-xxp-red);
|
||||||
--bubble-color-03: #fff;
|
--bubble-color-03: var(--color-xxp-yellow);
|
||||||
--bubble-color-04: #f6ca43;
|
--bubble-color-04: var(--color-xxp-white);
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-626,
|
|
||||||
.page-id-2936,
|
|
||||||
.page-id-2937 {
|
|
||||||
--bubble-color-01: #ffcb1f;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #ff79a8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-634 {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #f6ca43;
|
|
||||||
--bubble-color-03: #4a30f4;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-659 {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #6cd3eb;
|
|
||||||
--bubble-color-03: #f6ca43;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-template-associats-search,
|
|
||||||
.post-type-archive-xarxaprod-associat {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #68ed81;
|
|
||||||
--bubble-color-03: #ff79a8;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-xarxaprod-associat {
|
|
||||||
--bubble-color-01: #ff9221;
|
|
||||||
--bubble-color-02: #f6ca43;
|
|
||||||
--bubble-color-03: #ff866f;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-template-arxiu-general,
|
|
||||||
.page-id-643 {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #f61818;
|
|
||||||
--bubble-color-03: #f61818;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-template-convos-search,
|
|
||||||
.post-type-archive-xarxaprod-convo {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #ff5a69;
|
|
||||||
--bubble-color-03: #00f274;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-xarxaprod-convo {
|
|
||||||
--bubble-color-01: #e572ba;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #4a30f4;
|
|
||||||
--bubble-color-04: #e572ba;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-template-agenda-search {
|
|
||||||
--bubble-color-01: #e158ae;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #ff5a69;
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-activitats {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #00f274;
|
|
||||||
--bubble-color-03: #6cd3eb;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-28,
|
|
||||||
.page-template-faqs-page {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #6cd3eb;
|
|
||||||
--bubble-color-03: #4a30f4;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-template-ajut-search,
|
|
||||||
.post-type-archive-xarxaprod-ajut,
|
|
||||||
.single-xarxaprod-ajut {
|
|
||||||
--bubble-color-01: #6cd3eb;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #4a30f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-1673 {
|
|
||||||
--bubble-color-01: #f6ca43;
|
|
||||||
--bubble-color-02: #ff9221;
|
|
||||||
--bubble-color-03: #00f274;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-2366 {
|
|
||||||
--bubble-color-01: #fff;
|
|
||||||
--bubble-color-02: #4a30f4;
|
|
||||||
--bubble-color-03: #ff5a69;
|
|
||||||
--bubble-color-04: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-2364 {
|
|
||||||
--bubble-color-01: #00f274;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #4a30f4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-2365 {
|
|
||||||
--bubble-color-01: #e572ba;
|
|
||||||
--bubble-color-02: #f6ca43;
|
|
||||||
--bubble-color-03: #e572ba;
|
|
||||||
--bubble-color-04: #f6ca43;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-id-1760 {
|
|
||||||
--bubble-color-01: #6cd3eb;
|
|
||||||
--bubble-color-02: #fff;
|
|
||||||
--bubble-color-03: #fff;
|
|
||||||
--bubble-color-04: #6cd3eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
.page-id-617 {
|
||||||
width: 90vw;
|
--bubble-color-01: var(--color-xxp-violet);
|
||||||
height: 20vw;
|
--bubble-color-02: var(--color-xxp-white);
|
||||||
|
--bubble-color-03: var(--color-xxp-white);
|
||||||
|
--bubble-color-04: var(--color-xxp-yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-id-626,
|
||||||
|
.page-id-2936,
|
||||||
|
.page-id-2937 {
|
||||||
|
--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 {
|
||||||
|
--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 {
|
||||||
|
--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 {
|
||||||
|
--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,
|
||||||
|
.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 {
|
||||||
|
--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 {
|
||||||
|
--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 {
|
||||||
|
--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 {
|
||||||
|
--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 {
|
||||||
|
--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 {
|
||||||
|
--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 {
|
||||||
|
position: absolute;
|
||||||
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
border-radius: 20%;
|
||||||
|
background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubbles.bubble-01 {
|
||||||
|
top: var(--position);
|
||||||
|
left: var(--position);
|
||||||
|
--bgcolor: var(--bubble-color-01);
|
||||||
|
--bgangle: 135deg;
|
||||||
|
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubbles.bubble-02 {
|
||||||
|
top: var(--position);
|
||||||
|
right: var(--position);
|
||||||
|
--bgcolor: var(--bubble-color-02);
|
||||||
|
--bgangle: 225deg;
|
||||||
|
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubbles.bubble-03 {
|
||||||
|
bottom: var(--position);
|
||||||
|
left: var(--position);
|
||||||
|
--bgcolor: var(--bubble-color-03);
|
||||||
|
--bgangle: 45deg;
|
||||||
|
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubbles.bubble-04 {
|
||||||
|
bottom: var(--position);
|
||||||
|
right: var(--position);
|
||||||
|
--bgcolor: var(--bubble-color-04);
|
||||||
|
--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: 0;
|
||||||
|
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);
|
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubbles.bubble-01 {
|
|
||||||
top: var(--position);
|
|
||||||
left: var(--position);
|
|
||||||
--bgcolor: var(--bubble-color-01);
|
|
||||||
--bgangle: 135deg;
|
|
||||||
animation: 5s ease-in-out 2s infinite alternate bubble-move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubbles.bubble-02 {
|
|
||||||
top: var(--position);
|
|
||||||
right: var(--position);
|
|
||||||
--bgcolor: var(--bubble-color-02);
|
|
||||||
--bgangle: 225deg;
|
|
||||||
animation: 3s ease-in-out 0s infinite alternate bubble-move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubbles.bubble-03 {
|
|
||||||
bottom: var(--position);
|
|
||||||
left: var(--position);
|
|
||||||
--bgcolor: var(--bubble-color-03);
|
|
||||||
--bgangle: 45deg;
|
|
||||||
animation: 2s ease-in-out 3s infinite alternate bubble-move;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubbles.bubble-04 {
|
|
||||||
bottom: var(--position);
|
|
||||||
right: var(--position);
|
|
||||||
--bgcolor: var(--bubble-color-04);
|
|
||||||
--bgangle: 325deg;
|
|
||||||
animation: 4s ease-in-out 1s infinite alternate bubble-move;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue