generated from muhtadeetaron/nextjs-template
150 lines
2.4 KiB
CSS
150 lines
2.4 KiB
CSS
.form-page-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 430px;
|
|
text-align: center;
|
|
margin-bottom: 4vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-page-content .subscribe-wrapper {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.form-page-excerpt {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.form-container {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.form-container form {
|
|
width: 100%;
|
|
}
|
|
|
|
.under-form-text {
|
|
color: var(--text-color) !important;
|
|
display: block;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.form-container .form-alert {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.lower-opacity-small-text {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.form-success-button {
|
|
display: none;
|
|
}
|
|
|
|
.vertical-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.vertical-form-button {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.contact-content {
|
|
max-width: 590px;
|
|
}
|
|
|
|
.contact-content .form-page-excerpt {
|
|
max-width: 430px;
|
|
}
|
|
|
|
.contact-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.contact-form-inputs {
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
/* Styles for large desktop */
|
|
@media (min-width: 1439px) {
|
|
.form-page-content {
|
|
max-width: calc(29.9vw * var(--scale));
|
|
}
|
|
|
|
.form-page-excerpt {
|
|
margin-bottom: calc(1.67vw * var(--scale));
|
|
}
|
|
|
|
.under-form-text {
|
|
margin-top: calc(0.97vw * var(--scale));
|
|
}
|
|
|
|
.form-container .form-alert {
|
|
margin-top: calc(0.69vw * var(--scale));
|
|
}
|
|
|
|
.vertical-form {
|
|
gap: calc(1.04vw * var(--scale));
|
|
}
|
|
|
|
.vertical-form-button {
|
|
margin-top: calc(0.83vw * var(--scale));
|
|
}
|
|
|
|
.contact-content {
|
|
max-width: calc(41vw * var(--scale));
|
|
}
|
|
|
|
.contact-content .form-page-excerpt {
|
|
max-width: calc(29.9vw * var(--scale));
|
|
}
|
|
|
|
.contact-form {
|
|
gap: calc(1.04vw * var(--scale));
|
|
}
|
|
|
|
.contact-form-inputs {
|
|
gap: calc(1.04vw * var(--scale));
|
|
}
|
|
}
|
|
|
|
/* Styles for mobile */
|
|
@media (max-width: 479px) {
|
|
.form-page-excerpt {
|
|
margin-bottom: 21px;
|
|
}
|
|
|
|
.form-container .form-alert {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.under-form-text {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.vertical-form,
|
|
.contact-form,
|
|
.contact-form-inputs {
|
|
gap: 12px;
|
|
}
|
|
|
|
.vertical-form-button {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.contact-form-inputs {
|
|
flex-direction: column;
|
|
}
|
|
} |