/* =========================================================
FLOATING KEYWORDS + PROJECT CONSTELLATIONS
========================================================= */
/* AREA GENERALE */
.keyword-cloud-field {
position: relative;
width: 100%;
height: 80vh;
min-height: 760px;
overflow: visible;
}
/* =========================================================
CLUSTER
========================================================= */
.keyword-cluster {
position: absolute;
z-index: 10;
}
.keyword-cluster:hover {
animation-play-state: paused;
}
.keyword-cluster.active {
animation-play-state: paused;
z-index: 100;
}
/* =========================================================
NUVOLA
========================================================= */
.keyword-cloud-button {
-webkit-appearance: none;
appearance: none;
position: relative;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
min-width: 145px;
min-height: 76px;
padding: 18px 28px;
box-sizing: border-box;
border: 1px solid #038100;
background: white;
color: #038100;
font-family: "Marist Variable", Georgia, serif;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.03em;
cursor: pointer;
transition: transform 0.3s ease;
}
/* forme organiche */
.montage .keyword-cloud-button {
border-radius: 56% 44% 52% 48% / 46% 58% 42% 54%;
}
.display .keyword-cloud-button {
border-radius: 45% 55% 42% 58% / 57% 43% 60% 40%;
}
.performance .keyword-cloud-button {
border-radius: 60% 40% 53% 47% / 42% 55% 45% 58%;
}
.self .keyword-cloud-button {
border-radius: 47% 53% 61% 39% / 58% 44% 56% 42%;
}
.anacronism .keyword-cloud-button {
border-radius: 58% 42% 45% 55% / 48% 61% 39% 52%;
}
.figurel .keyword-cloud-button {
border-radius: 42% 58% 54% 46% / 61% 39% 55% 45%;
}
/* hover */
.keyword-cloud-button:hover {
background: white;
color: #038100;
}
/* aperta */
.keyword-cluster.active .keyword-cloud-button {
transform: scale(1.05);
}
/* =========================================================
POSIZIONE DELLE SEI NUVOLE
========================================================= */
.cloud-1 {
top: 11%;
left: 9%;
animation: float-one 28s ease-in-out infinite;
}
.cloud-2 {
top: 14%;
left: 58%;
animation: float-two 33s ease-in-out infinite;
}
.cloud-3 {
top: 38%;
left: 27%;
animation: float-three 31s ease-in-out infinite;
}
.cloud-4 {
top: 48%;
left: 68%;
animation: float-four 36s ease-in-out infinite;
}
.cloud-5 {
top: 72%;
left: 13%;
animation: float-five 30s ease-in-out infinite;
}
.cloud-6 {
top: 69%;
left: 48%;
animation: float-six 35s ease-in-out infinite;
}
/* =========================================================
MOVIMENTI
========================================================= */
@keyframes float-one {
0% {
transform: translate(0, 0) rotate(-2deg);
}
25% {
transform: translate(55px, 28px) rotate(1deg);
}
50% {
transform: translate(95px, -18px) rotate(2deg);
}
75% {
transform: translate(30px, -40px) rotate(-1deg);
}
100% {
transform: translate(0, 0) rotate(-2deg);
}
}
@keyframes float-two {
0% {
transform: translate(0, 0) rotate(1deg);
}
25% {
transform: translate(-65px, 30px) rotate(-1deg);
}
50% {
transform: translate(-35px, 75px) rotate(-2deg);
}
75% {
transform: translate(40px, 38px) rotate(1deg);
}
100% {
transform: translate(0, 0) rotate(1deg);
}
}
@keyframes float-three {
0% {
transform: translate(0, 0) rotate(1deg);
}
25% {
transform: translate(75px, -45px) rotate(-2deg);
}
50% {
transform: translate(125px, 18px) rotate(2deg);
}
75% {
transform: translate(50px, 55px) rotate(-1deg);
}
100% {
transform: translate(0, 0) rotate(1deg);
}
}
@keyframes float-four {
0% {
transform: translate(0, 0) rotate(-1deg);
}
25% {
transform: translate(-70px, -35px) rotate(2deg);
}
50% {
transform: translate(-110px, 20px) rotate(0deg);
}
75% {
transform: translate(-45px, 60px) rotate(-2deg);
}
100% {
transform: translate(0, 0) rotate(-1deg);
}
}
@keyframes float-five {
0% {
transform: translate(0, 0) rotate(2deg);
}
25% {
transform: translate(65px, -50px) rotate(0deg);
}
50% {
transform: translate(120px, -15px) rotate(-2deg);
}
75% {
transform: translate(55px, 25px) rotate(1deg);
}
100% {
transform: translate(0, 0) rotate(2deg);
}
}
@keyframes float-six {
0% {
transform: translate(0, 0) rotate(-2deg);
}
25% {
transform: translate(55px, -70px) rotate(1deg);
}
50% {
transform: translate(-35px, -90px) rotate(2deg);
}
75% {
transform: translate(-70px, -30px) rotate(0deg);
}
100% {
transform: translate(0, 0) rotate(-2deg);
}
}
/* =========================================================
PROGETTI SATELLITE
========================================================= */
.project-satellite {
position: absolute;
z-index: 5;
width: 175px;
opacity: 0;
visibility: hidden;
pointer-events: none;
color: #214c35;
font-family:
Baskerville,
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-style: italic;
font-weight: 400;
font-size: 1.05em;
line-height: 1.25;
letter-spacing: 0;
background: transparent;
border: 0;
text-decoration: none;
transition:
opacity 0.45s ease,
transform 0.65s cubic-bezier(.22,.8,.3,1);
}
.keyword-cluster.active .project-satellite {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* =========================================================
POSIZIONI DEI SATELLITI
========================================================= */
.satellite-1 {
left: -155px;
top: -85px;
transform: translate(80px, 70px) scale(0.7);
}
.keyword-cluster.active .satellite-1 {
transform: translate(0, 0) scale(1) rotate(-3deg);
}
.satellite-2 {
left: 190px;
top: -75px;
transform: translate(-80px, 70px) scale(0.7);
}
.keyword-cluster.active .satellite-2 {
transform: translate(0, 0) scale(1) rotate(2deg);
}
.satellite-3 {
left: 235px;
top: 70px;
transform: translate(-80px, 0) scale(0.7);
}
.keyword-cluster.active .satellite-3 {
transform: translate(0, 0) scale(1) rotate(-1deg);
}
.satellite-4 {
left: 75px;
top: 155px;
transform: translate(0, -70px) scale(0.7);
}
.keyword-cluster.active .satellite-4 {
transform: translate(0, 0) scale(1) rotate(3deg);
}
.satellite-5 {
left: -190px;
top: 75px;
transform: translate(90px, 0) scale(0.7);
}
.keyword-cluster.active .satellite-5 {
transform: translate(0, 0) scale(1) rotate(-2deg);
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.keyword-cloud-field {
min-height: 850px;
}
.keyword-cloud-button {
min-width: 105px;
min-height: 60px;
padding: 14px 18px;
font-size: 0.82em;
}
.project-satellite {
width: 115px;
font-size: 0.78em;
}
.satellite-1 {
left: -75px;
top: -75px;
}
.satellite-2 {
left: 120px;
top: -75px;
}
.satellite-3 {
left: 145px;
top: 60px;
}
.satellite-4 {
left: 30px;
top: 130px;
}
.satellite-5 {
left: -95px;
top: 60px;
}
}