.mrpho-homepage {
background: #faf9f6;
color: #121212;
font-family: "Inter", sans-serif;
overflow-x: hidden;
}
.mrpho-homepage .hover-scale {
transition: all .4s cubic-bezier(.16, 1, .3, 1);
}
.mrpho-homepage .hover-scale:hover {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
transform: translateY(-6px) scale(1.02);
}
@keyframes mrpho-steam {
0% { opacity: .2; transform: translateY(0) scale(.9); }
50% { filter: blur(2px); opacity: .5; transform: translateY(-10px) scale(1.1); }
100% { filter: blur(4px); opacity: 0; transform: translateY(-20px) scale(1.3); }
}
.mrpho-homepage .steam-line {
animation: mrpho-steam 4s infinite ease-out;
}
.mrpho-homepage .steam-delay-1 {
animation-delay: 1s;
}
.mrpho-homepage .steam-delay-2 {
animation-delay: 2s;
}
.mrpho-homepage .product-card {
transition: opacity .3s ease-in-out, transform .3s ease-in-out;
}
.mrpho-homepage .hide-scrollbar::-webkit-scrollbar {
display: none;
}
.mrpho-homepage .hide-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}.mrpho-contact-page .mrpho-contact-hero {
background:
radial-gradient(circle at top left, rgba(224, 58, 62, 0.18), transparent 36%),
linear-gradient(135deg, #0a0a0a 0%, #121212 55%, #4a1113 100%);
}
.mrpho-contact-page .mrpho-contact-hero-copy {
color: rgba(255, 255, 255, 0.84);
}
.mrpho-contact-page .hover-lift {
transition: all .4s cubic-bezier(.16, 1, .3, 1);
}
.mrpho-contact-page .hover-lift:hover {
box-shadow: 0 30px 50px -15px rgb(0 0 0 / .08);
transform: translateY(-8px);
}
@keyframes mrpho-contact-steam {
0% { opacity: .15; transform: translateY(0) scale(.95); }
50% { filter: blur(1px); opacity: .35; transform: translateY(-10px) scale(1.05); }
100% { filter: blur(3px); opacity: 0; transform: translateY(-20px) scale(1.15); }
}
.mrpho-contact-page .steam-effect {
animation: mrpho-contact-steam 5s infinite ease-in-out;
}
.mrpho-contact-page .steam-delay-1 {
animation-delay: 1.5s;
}
.mrpho-contact-page .steam-delay-2 {
animation-delay: 3s;
}
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7 {
width: 100%;
}
.mrpho-contact-page .mrpho-contact-form-shell p {
margin: 0 0 1.5rem;
}
.mrpho-contact-page .mrpho-contact-form-shell p:last-of-type {
margin-bottom: 0;
}
.mrpho-contact-page .mrpho-contact-form-shell label {
display: block;
color: #374151;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
margin-bottom: .5rem;
text-transform: uppercase;
}
.mrpho-contact-page .mrpho-contact-form-shell input[type="text"],
.mrpho-contact-page .mrpho-contact-form-shell input[type="email"],
.mrpho-contact-page .mrpho-contact-form-shell input[type="tel"],
.mrpho-contact-page .mrpho-contact-form-shell textarea,
.mrpho-contact-page .mrpho-contact-form-shell select {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 1rem;
color: #111827;
font-size: .95rem;
font-weight: 500;
padding: .95rem 1rem;
width: 100%;
}
.mrpho-contact-page .mrpho-contact-form-shell textarea {
min-height: 150px;
resize: vertical;
}
.mrpho-contact-page .mrpho-contact-form-shell input:focus,
.mrpho-contact-page .mrpho-contact-form-shell textarea:focus,
.mrpho-contact-page .mrpho-contact-form-shell select:focus {
border-color: #e03a3e;
box-shadow: 0 0 0 4px rgb(224 58 62 / .12);
outline: none;
}
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7-submit {
background: #e03a3e;
border: 0;
border-radius: .9rem;
box-shadow: 0 12px 24px -10px rgb(224 58 62 / .4);
color: #fff;
cursor: pointer;
font-size: .95rem;
font-weight: 800;
letter-spacing: .04em;
padding: 1rem 2rem;
text-transform: uppercase;
transition: all .25s ease;
width: auto;
}
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7-submit:hover {
background: #c82d31;
transform: translateY(-2px);
}
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7-spinner {
margin-top: .75rem;
}
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7-not-valid-tip {
color: #c82d31;
font-size: .8rem;
margin-top: .45rem;
}
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7 form .wpcf7-response-output {
border-radius: 1rem;
font-size: .9rem;
margin: 1rem 0 0;
padding: .85rem 1rem;
}
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7 form.sent .wpcf7-response-output {
border-color: #10b981;
color: #065f46;
}
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7 form.invalid .wpcf7-response-output,
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7 form.failed .wpcf7-response-output,
.mrpho-contact-page .mrpho-contact-form-shell .wpcf7 form.aborted .wpcf7-response-output {
border-color: #e03a3e;
color: #991b1b;
}
@media (min-width: 640px) {
.mrpho-contact-page .mrpho-contact-form-shell .mrpho-contact-row {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}