✏️ Editing: _form.scss Writable

// Contact Form 7
// Style message error contact form
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output
,.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
	border-color: red;
	color: red;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: green;
}

.ova-ctform7{

.two-column{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap:13px;
		width: 100%;
		margin-bottom: 27px;

@media(max-width: 767px){
			grid-template-columns: 1fr;
			margin-bottom: 13px;
		}

.ova_wrap_input{
			p{
				margin: 0;
			}
		}
	}

.ova_wrap_input{
		width: 100%;

p{
			margin: 0;
		}
	}

.ova-submit{
		display: inline-block;
		margin-top: 46px;

input[type='submit']{
			font-size: 15px;
			font-weight: 700;
			padding: 22px 40px;
			border: 2px solid transparent;
			position: relative;
			font-family: var(--primary-font);
			text-transform: uppercase;
			color: #000000;
			background-color: var(--primary);

&:hover{
				color: var(--heading);
				background-color: transparent;
				border-color: var(--heading);
			}
		}

.wpcf7-spinner {
			position: absolute;
		}
	}

textarea {
		height: 270px;

@media(max-width: 767px){
			height: 150px;
		}
	}

input, textarea{
		border-radius: 0;
		border: none;
	}

input[type='text'],input[type='tel'],input[type='email'],textarea {
		font-size: 18px;
		line-height: 1.2;
		color: var(--text);
		width: 100%;
		padding: 18px 20px;
		background-color: transparent;
		border: 1px solid rgba(212, 220, 224, 0.06);
		border-radius: 5px;

&::placeholder{
			opacity:1;
			color: var(--text);
			text-transform: capitalize;
		}
	}

&.home-3{
		.two-column{
			gap:30px;
			margin-bottom: 60px;

@media(max-width: 767px){
				margin-bottom: 30px;
			}
		}
		.ova-submit{
			margin-top: 50px;

input[type='submit']{
				font-family: var(--primary-font);
				font-size: 16px;
				font-weight: 600;
				line-height: 1.2;
				text-transform: capitalize;
				color: var(--heading);
				padding: 22px 52px;
				border: 1px solid #434447;
				background-color: transparent;

&:hover{
					background-color: var(--primary);
					border-color: var(--heading);
				}
			}
		}

textarea {
			height: 120px;
		}

input:-webkit-autofill,
		input:-webkit-autofill:hover, 
		input:-webkit-autofill:focus, 
		input:-webkit-autofill:active{
		    -webkit-box-shadow: 0 0 0 70px #141519 inset !important;
		}

input:-webkit-autofill{
		    -webkit-text-fill-color: #FFF !important;
		}

input[type='text'],input[type='tel'],input[type='email'],textarea {
			font-size: 16px;
			font-weight: 600;
			line-height: 1.2;
			letter-spacing: -0.02em;
			color: var(--heading);
			
			width: 100%;
			padding: 15px 5px;
			background-color: transparent;
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-width: 0 0 1px 0;
			border-radius: 0;

&::placeholder{
				opacity:1;
				color: var(--heading);
				text-transform: capitalize;
			}
		}
	}
}

// MAILCHIMP FORM
.ova-mc4wp-form-wrapper{
	.ova-mc4wp-form{
		position: relative;
		width:100%;
		margin-bottom: 15px;

.icon-email{
			display: none;
		}

input[type="email"]{
			font-size: 15px;
			line-height: 1.7;
			font-weight: 400;
			width: 100%;
			color: #817F7E;
			background-color: transparent;
			padding: 14px 170px 10px 5px;
			border-radius: 0;
			border-width: 0 0 1px 0;
			border-style: solid ;
			border-color: #ededed1a;
			outline: none;

&::placeholder{
				color: #817F7E;
				opacity: 1;
			}
		}

button[type="submit"]{
			@include transaction( all, 0.3s, linear );
			position: absolute;
			padding: 12px 22px 13px;
			top: 50%;
			right: 0;
			transform:translateY( -50% );
			border-radius: 0;
			border: none;
			outline: none;
			background-color: var(--primary);

&:hover{
				@include transaction( all, 0.3s, linear );
				background-color: var(--heading);

.text{
					@include transaction( all, 0.3s, linear );
					color: var(--primary);
				}
			}

.text{
				@include transaction( all, 0.3s, linear );
				color: #fff;
				text-transform: capitalize;
				font-size: 16px;
				line-height: 1.6;
				font-weight: 500;
				margin: 0;
			}

.text-home2{
				display: none;
			}

.icon{
				display: none;
			}
			.icon-about{
				display: none;
			}
		}
	}

label {
		display: inline-flex;
		align-items:center;

input[type="radio"] {
			min-width: 16px;
			width:16px;
			height: 16px;
			margin: 0 8px;
		} 
		a {
			@include transaction( all, 0.3s, linear );
			color: #fff;
			line-height: 1.4;

&:hover{
				@include transaction( all, 0.3s, linear );
				color: var(--primary);
			}
		}
	}
}

// message error
.mc4wp-response{
	margin: 15px 0;
}

// Custom MC4WP footer-home-2
.custom-mailchimp-footer-home-2{
	.ova-mc4wp-form-wrapper{
		.ova-mc4wp-form{

input[type="email"]{
				border-radius: 0;
				padding: 27px 33px;
				border: none;
				background-color: #ffffff14;
				font-size: 16px;
				font-weight: 500;
				line-height: 1.6;
				color: #ffffff9c;
				text-align: left;
				&::placeholder{
					color: #ffffff9c;
				}

@media(max-width: 1024px){
					padding: 15px 20px;
				}
			}

button[type="submit"]{
				background-color: var(--secondary);
				padding: 27px 22px;

@media(max-width: 1024px){
					padding: 17px 12px;
				}

&:hover{
					background-color: var(--heading);
				}

.text{
					display: none;
				}

.text-home2{
					display: inline-block;
					font-family: 'Manrope';
					font-size: 15px;
					line-height: 1.3;
					font-weight: 800;
					letter-spacing: 0.17em;
					color: #000;
					background-color: #ffffff14;

@media(max-width: 767px){
						font-size: 12px;
					}
				}
				
				.icon{
					display: none;
				}
			}
		}
	}
}

// Custom MC4WP footer-home-3
.custom-mailchimp-footer-home-3{
	.ova-mc4wp-form-wrapper{
		.ova-mc4wp-form{

input[type="email"]{
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0px 13px 22px rgba(6, 34, 51, 0.06);
				border-radius: 0;
				padding:17px 50px 16px 18px;
			}

button[type="submit"]{
				background-color: var(--primary);
				padding: 16px 22px;

&:hover{
					background-color: var(--heading);
					.icon{
						i{
							@include transaction( all, 0.3s, linear );
							color: var(--primary);
						}
					}
				}

.text{
					display: none;
				}
				.text-home2{
					display: none;
				}
				
				.icon{
					display: inline-flex;
					i{
						@include transaction( all, 0.3s, linear );
						display: inline-flex;
						font-size: 24px;
						color: var(--heading);
					}
				}
			}
		}

label{
			a{
				color: var(--heading);
				&:hover{
					color: var(--primary);
				}
			}
		}
	}
}

// Custom MC4WP about page
.custom-mailchimp-about-page{
	.ova-mc4wp-form-wrapper{
		.ova-mc4wp-form{

.icon-email{
				display: inline-flex;
				position: absolute;
				top: 50%;
				left: 3px;
				transform:translateY(-50%);
				padding: 0 12px 0 0;
    			border-right: 1px solid #949392;

i{
					display: inline-flex;
					font-size: 18px;
					color: #949392;
				}
			}

input[type="email"]{
				border-radius: 0;
				padding: 19px 170px 19px 45px;
				border-bottom: 1px solid #FFF;
				font-size: 18px;
				font-weight: 400;
				line-height: 1.6;
				color: #FFF;
				&::placeholder{
					color: #949392;
				}
			}

input:-webkit-autofill,
			input:-webkit-autofill:hover, 
			input:-webkit-autofill:focus, 
			input:-webkit-autofill:active{
			    -webkit-box-shadow: 0 0 0 70px #141519 inset !important;
			}

input:-webkit-autofill{
			    -webkit-text-fill-color: #FFF !important;
			}

button[type="submit"]{
				background-color: transparent;
				padding: 19px 0;
				display: inline-flex;
				align-items:center;

&:hover{
					.text{
						color: var(--primary);
					}
					.icon-about{
						i{
							color: var(--primary);
						}
					}
				}

.text{
					@include transaction( all, 0.3s, linear );
					color: var(--text);
					text-transform: capitalize;
					letter-spacing: 0.05em;
					margin: 0 8px;
				}

.text-home2{
					display: none;
				}

.icon-about{
					display: inline-flex;
					i{
						@include transaction( all, 0.3s, linear );
						display: inline-flex;
						font-size: 18px;
						color: var(--heading);
					}
				}
					
				.icon{
					display: none;
				}
			}
		}
	}
}

🔐 Sid Gifari File Manager Pro