.kmgm-contact-page {
background: var(--kmgm-white, #ffffff);
color: var(--kmgm-text, #172235);
}
.kmgm-contact-page .kmgm-contact-form {
display: grid;
gap: 18px;
padding: 28px;
background: var(--kmgm-partnerships-ice, #f3fbfb);
border: 1px solid var(--kmgm-border, #dce3eb);
border-top: 4px solid var(--kmgm-partnerships-teal, #168a8a);
border-radius: var(--kmgm-radius-md, 16px);
box-shadow: var(--kmgm-shadow-sm);
}
.kmgm-contact-page .kmgm-contact-form label {
display: grid;
gap: 7px;
margin: 0;
color: var(--kmgm-partnerships-deep, #082f37);
font-weight: 700;
}
.kmgm-contact-page .kmgm-contact-form input,
.kmgm-contact-page .kmgm-contact-form select,
.kmgm-contact-page .kmgm-contact-form textarea {
width: 100%;
margin: 0;
padding: 12px 14px;
border: 1px solid var(--kmgm-border, #dce3eb);
border-radius: var(--kmgm-radius-sm, 8px);
background: var(--kmgm-white, #ffffff);
color: var(--kmgm-text, #172235);
font: inherit;
line-height: 1.5;
transition:
border-color var(--kmgm-transition, 180ms ease),
box-shadow var(--kmgm-transition, 180ms ease);
}
.kmgm-contact-page .kmgm-contact-form textarea {
min-height: 160px;
resize: vertical;
}
.kmgm-contact-page .kmgm-contact-form input:focus,
.kmgm-contact-page .kmgm-contact-form select:focus,
.kmgm-contact-page .kmgm-contact-form textarea:focus {
outline: none;
border-color: var(--kmgm-partnerships-teal, #168a8a);
box-shadow: 0 0 0 3px rgba(22, 138, 138, 0.16);
}
.kmgm-contact-page .kmgm-contact-form button[type="submit"] {
width: fit-content;
min-width: 170px;
padding: 13px 22px;
border: 1px solid var(--kmgm-partnerships-teal, #168a8a);
border-radius: var(--kmgm-radius-pill, 999px);
background: var(--kmgm-partnerships-teal, #168a8a);
color: #ffffff;
font-weight: 800;
cursor: pointer;
transition:
background var(--kmgm-transition, 180ms ease),
border-color var(--kmgm-transition, 180ms ease),
transform var(--kmgm-transition, 180ms ease);
}
.kmgm-contact-page .kmgm-contact-form button[type="submit"]:hover,
.kmgm-contact-page .kmgm-contact-form button[type="submit"]:focus-visible {
background: var(--kmgm-partnerships-deep, #082f37);
border-color: var(--kmgm-partnerships-deep, #082f37);
transform: translateY(-1px);
}
.kmgm-contact-page .kmgm-contact-form input[type="checkbox"] {
width: auto;
margin-right: 8px;
accent-color: var(--kmgm-partnerships-teal, #168a8a);
}
.kmgm-contact-page .kmgm-contact-form [role="status"],
.kmgm-contact-page .kmgm-contact-form .kmgm-contact-status {
color: var(--kmgm-partnerships-deep, #082f37);
font-weight: 700;
}
.kmgm-contact-page a:focus-visible,
.kmgm-contact-page button:focus-visible,
.kmgm-contact-page input:focus-visible,
.kmgm-contact-page select:focus-visible,
.kmgm-contact-page textarea:focus-visible {
outline: 3px solid var(--kmgm-partnerships-gold, #d5a72d);
outline-offset: 3px;
}
@media (max-width: 767px) {
.kmgm-contact-page .kmgm-contact-form {
padding: 20px;
}
.kmgm-contact-page .kmgm-contact-form button[type="submit"] {
width: 100%;
}
}