217 lines
3.4 KiB
CSS
217 lines
3.4 KiB
CSS
/* contact-form.style.css */
|
|
|
|
section.content .contact-form h2 {
|
|
margin-bottom: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.contact-form h2 {
|
|
grid-column: 1/6;
|
|
grid-row: 1/2;
|
|
}
|
|
|
|
.contact-form .success {
|
|
margin-bottom: 16px;
|
|
color: rgba(116, 199, 103, 1);
|
|
}
|
|
|
|
.contact-form .error {
|
|
margin-bottom: 16px;
|
|
color: rgba(246, 81, 81, 1);
|
|
}
|
|
|
|
.contact-form .error a {
|
|
color: rgba(246, 81, 81, 1);
|
|
}
|
|
|
|
.contact-form form {
|
|
grid-column: 1/5;
|
|
grid-row: 2/3;
|
|
width: 100%;
|
|
}
|
|
|
|
.contact-form form.container {
|
|
padding: 0;
|
|
}
|
|
|
|
.contact-form form .btn {
|
|
grid-column: 1/10;
|
|
}
|
|
|
|
.contact-form .image {
|
|
grid-column: 6/13;
|
|
grid-row: 1/3;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.contact-form .image img:first-child {
|
|
background:
|
|
linear-gradient(0deg, rgba(27, 27, 27, 0.2), rgba(27, 27, 27, 0.2)),
|
|
rgba(255, 255, 255, 0.01);
|
|
box-shadow: inset 0px 2px 5px rgb(255 255 255 / 15%);
|
|
backdrop-filter: blur(8px);
|
|
border-radius: 33px;
|
|
}
|
|
|
|
.contact-form .image .planet {
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.contact-form .image .planet.blue {
|
|
right: -133px;
|
|
}
|
|
|
|
.contact-form .image .planet.yellow {
|
|
left: -124px;
|
|
top: 150px;
|
|
}
|
|
|
|
@keyframes circularOrbitYellow {
|
|
0% {
|
|
left: -124px;
|
|
top: 150px;
|
|
z-index: -1;
|
|
scale: 0.8;
|
|
}
|
|
50% {
|
|
left: 400px;
|
|
top: 80px;
|
|
z-index: -1; /* Flips to front at peak right */
|
|
scale: 1;
|
|
}
|
|
51% {
|
|
left: 390px;
|
|
top: 70px;
|
|
z-index: 3; /* Flips to front at peak right */
|
|
}
|
|
80% {
|
|
scale: 1.2;
|
|
}
|
|
90% {
|
|
left: -200px;
|
|
top: 100px;
|
|
z-index: 3; /* Flips back behind at peak left */
|
|
scale: 1;
|
|
}
|
|
91% {
|
|
left: -190px;
|
|
top: 101px;
|
|
z-index: -1; /* Flips back behind at peak left */
|
|
scale: 1;
|
|
}
|
|
100% {
|
|
left: -124px;
|
|
top: 150px;
|
|
z-index: -1;
|
|
scale: 0.8;
|
|
}
|
|
}
|
|
|
|
.yellow.orbit-element {
|
|
position: absolute;
|
|
animation: circularOrbitYellow 8s linear infinite;
|
|
}
|
|
@keyframes circularOrbitBlue {
|
|
0% {
|
|
right: -133px;
|
|
top: 150px;
|
|
z-index: 3;
|
|
scale: 1;
|
|
}
|
|
50% {
|
|
right: 400px;
|
|
top: 80px;
|
|
z-index: 3; /* Flips to front at peak right */
|
|
scale: 1.3;
|
|
}
|
|
51% {
|
|
right: 390px;
|
|
top: 70px;
|
|
z-index: -1; /* Flips to front at peak right */
|
|
scale: 1.3;
|
|
}
|
|
80% {
|
|
scale: 1.2;
|
|
top: 120px;
|
|
scale: 1;
|
|
}
|
|
90% {
|
|
right: -100px;
|
|
top: 140px;
|
|
z-index: -1; /* Flips back behind at peak left */
|
|
scale: 0.9;
|
|
}
|
|
91% {
|
|
right: -110px;
|
|
top: 141px;
|
|
z-index: 3; /* Flips back behind at peak left */
|
|
scale: 0.9;
|
|
}
|
|
100% {
|
|
right: -133px;
|
|
top: 150px;
|
|
z-index: 3;
|
|
scale: 1;
|
|
}
|
|
}
|
|
.blue {
|
|
position: absolute;
|
|
animation: circularOrbitBlue 8s linear infinite;
|
|
}
|
|
|
|
/* Tablet breakpoint */
|
|
@media (max-width: 1200px) {
|
|
.contact-form form {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.contact-form h2,
|
|
.contact-form form {
|
|
grid-column: 1/7;
|
|
}
|
|
|
|
.contact-form .image {
|
|
grid-column: 8/13;
|
|
}
|
|
}
|
|
|
|
/* Mobile breakpoint */
|
|
@media (max-width: 767px) {
|
|
.contact-form h2,
|
|
.contact-form .image,
|
|
.contact-form form {
|
|
grid-column: 1/7;
|
|
}
|
|
|
|
.contact-form h2,
|
|
.contact-form .image,
|
|
.contact-form form .btn {
|
|
grid-column: 2/6;
|
|
}
|
|
|
|
.contact-form h2 {
|
|
grid-row: 1/2;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.contact-form .image {
|
|
grid-row: 2/3;
|
|
width: 100%;
|
|
margin-bottom: 16px;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.contact-form .image img {
|
|
margin: 0 auto;
|
|
height: auto;
|
|
}
|
|
|
|
.contact-form form {
|
|
grid-row: 3/4;
|
|
}
|
|
}
|
|
|