wrappers and `label:nth-of-type(n+5)`, * which is what the previous version did. That re-flowed the whole form * whenever a field was added or reordered. Autop is switched off for this form * in functions.php so no stray
/
lands between a label and its control.
*/
.ml-form__row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 24px;
}
.ml-form__field {
margin-bottom: 26px;
min-width: 0;
}
.ml-form__label {
display: block;
margin-bottom: 10px;
font-family: var(--ml-font);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: var(--ml-navy);
}
/* Positioning context for the leading icon. */
.ml-form__control {
position: relative;
display: block;
}
/*
* `pointer-events: none` matters: without it the icon swallows clicks aimed at
* the left end of the field, which is exactly where people click to focus it.
*/
.ml-form__icon {
position: absolute;
left: 17px;
top: 50%;
transform: translateY(-50%);
display: flex;
color: var(--ml-muted);
pointer-events: none;
}
/* A textarea's icon sits on the first line, not at the box's centre. */
.ml-form__control--area .ml-form__icon {
top: 19px;
transform: none;
}
/*
* MULTI-CLASS, and this is the whole point. Astra reaches these through
* `input[type="text"]` at (0,1,1); `.ml-contact__form input` would be (0,1,1)
* too and lose on source order. Four classes deep settles it outright.
*
* `padding-left` clears the icon; it is not decorative slack.
*/
.ml-contact .ml-contact__form .wpcf7-form input[type="text"],
.ml-contact .ml-contact__form .wpcf7-form input[type="email"],
.ml-contact .ml-contact__form .wpcf7-form input[type="tel"],
.ml-contact .ml-contact__form .wpcf7-form textarea {
display: block;
width: 100%;
margin: 0;
padding: 14px 16px 14px 50px;
box-sizing: border-box;
border: 1px solid var(--ml-line);
border-radius: 9px;
background: var(--ml-white);
box-shadow: none;
color: var(--ml-navy);
font-family: var(--ml-font);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
transition: border-color var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}
.ml-contact .ml-contact__form .wpcf7-form input[type="text"],
.ml-contact .ml-contact__form .wpcf7-form input[type="email"],
.ml-contact .ml-contact__form .wpcf7-form input[type="tel"] {
height: 48px;
padding-top: 0;
padding-bottom: 0;
}
.ml-contact .ml-contact__form .wpcf7-form textarea {
min-height: 168px;
resize: vertical;
}
.ml-contact .ml-contact__form .wpcf7-form ::placeholder {
color: var(--ml-muted);
opacity: 1;
}
/*
* Astra also paints `input:focus { border-style: dotted }`, so the focus state
* has to restate the border style as well as its colour.
*/
.ml-contact .ml-contact__form .wpcf7-form input[type="text"]:focus,
.ml-contact .ml-contact__form .wpcf7-form input[type="email"]:focus,
.ml-contact .ml-contact__form .wpcf7-form input[type="tel"]:focus,
.ml-contact .ml-contact__form .wpcf7-form textarea:focus {
outline: none;
border: 1px solid var(--ml-cyan);
border-style: solid;
box-shadow: 0 0 0 3px rgba(0, 175, 240, 0.16);
}
/* The icon takes the accent while its own field has focus. */
.ml-form__control:focus-within .ml-form__icon {
color: var(--ml-cyan);
}
/* ---------- Submit ---------- */
.ml-form__actions {
position: relative;
margin-top: 4px;
}
/*
* [submit] renders an , which cannot contain child markup, so the send
* icon is a sibling painted over the button.
*
* The offset is measured from the button's centre against the fixed label
* "Send Message" (110.7px at 15px/600 Poppins since the 2026-09-14 CTA scale,
* so ~55px each side, plus a 10px gap and the icon's own 20px). It is therefore
* tied to that exact copy - if the label changes, re-measure.
*
* `top` IS HALF THE BUTTON, NOT 50% OF .ml-form__actions. CF7 renders its
* 24px `.wpcf7-spinner` after the input, and the full-width button pushes it
* onto a second line - so the actions box is ~82px tall and a 50% top sat the
* icon 16px below the label. Measured 2026-09-14; change the button height and
* this changes with it. The button's padding below is kept SYMMETRIC
* for the same reason: an asymmetric padding shifts the centred label by half
* the difference and silently widens this gap.
*/
.ml-form__send-icon {
position: absolute;
left: 50%;
top: 25px;
transform: translate(-85px, -50%);
display: flex;
color: var(--ml-white);
pointer-events: none;
z-index: 1;
}
/*
* STATE LOCK at (0,3,1). Astra's inline `button:focus, button:hover,
* input[type="submit"]:hover, input[type="submit"]:focus { color: #ffffff;
* background-color: var(--ast-global-color-1) }` is (0,1,1) and would otherwise
* repaint this to #045cb4 the moment it is hovered - and a clicked submit keeps
* :focus, so it would stay repainted afterwards.
*/
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"],
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:hover,
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:focus,
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:focus-visible,
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:active {
width: 100%;
height: 50px;
margin: 0;
padding: 0 24px;
border: 0;
border-radius: 8px;
background: var(--ml-cyan);
color: var(--ml-white);
font-family: var(--ml-font);
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 14px 26px -16px rgba(var(--ml-shadow-tint), 0.95);
transition: background-color var(--ml-t-base) var(--ml-e-standard), transform var(--ml-t-base) var(--ml-e-standard), box-shadow var(--ml-t-base) var(--ml-e-standard);
}
/* Hover deepens within the same hue, matching the product buttons. */
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:hover,
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:focus-visible {
background: var(--ml-cyan-dark);
transform: translateY(-2px);
box-shadow: 0 20px 32px -16px rgba(var(--ml-shadow-tint), 1);
}
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:focus-visible {
outline: 2px solid var(--ml-navy);
outline-offset: 2px;
}
/* CF7's own status and validation messages, restyled to match. */
.ml-contact__form .wpcf7-not-valid-tip {
margin-top: 7px;
color: #c0392b;
font-family: var(--ml-font);
font-size: 13.5px;
font-weight: 600;
}
.ml-contact__form .wpcf7-response-output {
margin: 20px 0 0;
padding: 13px 17px;
border-radius: 10px;
border-width: 1px;
font-family: var(--ml-font);
font-size: 14.5px;
}
.ml-contact__note {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin: 22px 0 0;
color: var(--ml-body);
font-family: var(--ml-font);
font-size: 15px;
}
.ml-contact__note-icon {
display: flex;
color: var(--ml-muted);
}
.ml-contact__fallback {
margin: 0;
font-family: var(--ml-font);
color: var(--ml-body);
}
/* -------------------------------------------------------------------------
* Responsive
* ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
.ml-contact__details,
.ml-contact__form-card {
padding: 40px 32px 34px;
}
.ml-contact__card-title {
font-size: 29px;
}
}
@media (max-width: 900px) {
.ml-contact {
/* One value per tier. .ml-contact__head reads it back to cancel it. */
--ml-contact-gutter: 20px;
padding: 0 var(--ml-contact-gutter) 64px;
}
.ml-contact__head {
margin-bottom: 38px;
}
/* Single column: the details card sits above the form. */
.ml-contact__grid {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
/* Fields stack - two-up columns would be ~150px wide here. */
.ml-form__row {
grid-template-columns: minmax(0, 1fr);
}
/* Nothing to push against once the card is content-height. */
.ml-contact__social {
margin-top: 12px;
}
}
@media (max-width: 560px) {
.ml-contact {
--ml-contact-gutter: 16px;
padding: 0 var(--ml-contact-gutter) 48px;
}
.ml-contact__details,
.ml-contact__form-card {
padding: 30px 22px 26px;
}
.ml-contact__card-title {
font-size: 26px;
}
.ml-contact__lede {
font-size: 17px;
}
.ml-contact__icon {
width: 46px;
height: 46px;
}
.ml-contact__icon svg {
width: 22px;
height: 22px;
}
.ml-contact__label {
font-size: 16.5px;
}
.ml-contact__value {
font-size: 15.5px;
}
.ml-form__field {
margin-bottom: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.ml-contact__social-link,
.ml-contact .ml-contact__form .wpcf7-form input[type="text"],
.ml-contact .ml-contact__form .wpcf7-form input[type="email"],
.ml-contact .ml-contact__form .wpcf7-form input[type="tel"],
.ml-contact .ml-contact__form .wpcf7-form textarea,
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"] {
transition: none;
}
.ml-contact__social-link:hover,
.ml-contact__social-link:focus-visible,
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:hover,
.ml-contact .ml-contact__form .wpcf7-form input[type="submit"]:focus-visible {
transform: none;
}
}
/*
* POINTER FOCUS - ASTRA a:focus { outline: thin dotted } (main.min.css L3).
* A mouse click leaves :focus set, so every anchor that names no outline of its
* own kept a thin dotted ring until focus moved. Measured 2026-09-13 by the
* sitewide anchor sweep (CLAUDE.md, "Anchor pointer-focus sweep").
*
* :not(:focus-visible) IS LOAD-BEARING: this only ever applies to pointer focus,
* so the keyboard ring each family already has is untouched. Outline only -
* nothing moves, so there is no reduced-motion twin.
*/
a.ml-contact__social-link:focus:not(:focus-visible),
a.ml-contact__value:focus:not(:focus-visible) {
outline: none;
}
/* ---------------------------------------------------------------------------
* Phone: 12px above rather than 18px, the same step .ml-science__hero,
* .ml-blog__hero and the five bands normalised earlier today take.
*
* LATER IN THE FILE THAN THE BASE RULE, which it ties with on specificity -
* written above it, the 18px would win at every width (2026-09-24).
* ------------------------------------------------------------------------- */
@media (max-width: 640px) {
.ml-contact__head {
margin-top: 12px;
}
}
/* ---------- Phone fixes (2026-09-30) ---------- */
/*
* The mailto value broke mid-word on phones (overflow-wrap: anywhere) and the
* four 48px social discs with 16px gaps were wider than the card at 375.
* Smaller email text keeps the address on one line from 360 up; smaller discs
* with tighter gaps keep the icons inside the card. wrap is the safety net.
*/
@media (max-width: 560px) {
.ml-contact .ml-contact__value--link[href^="mailto:"] {
font-size: 14.5px;
}
.ml-contact .ml-contact__social-list {
gap: 8px;
flex-wrap: wrap;
}
.ml-contact .ml-contact__social-link {
width: 40px;
height: 40px;
}
.ml-contact .ml-contact__social-link svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 360px) {
.ml-contact .ml-contact__value--link[href^="mailto:"] {
font-size: 13.5px;
}
.ml-contact .ml-contact__social-list {
gap: 4px;
}
.ml-contact .ml-contact__social-link {
width: 34px;
height: 34px;
}
.ml-contact .ml-contact__social-link svg {
width: 18px;
height: 18px;
}
}