/* =================================================================== COR — "Let's Build Together" form Every measurement is taken off the Elementor Form widget this replaces, read from the live home page at 1600: fields 72 tall, white on the tint at 15px radius with 24px side padding, Circular 500 18; labels Circular 500 16/16 in charcoal; message 119 tall; button 266 x 60, transparent with a 2px Agave border, 30px radius, Circular Bold 16 uppercase tracked 10%. Written as WPForms' OWN custom properties rather than as overrides. Its modern stylesheet carries rules like `.wpforms-container .wpforms-form input[type=text]`, which outrank a plain class — the first attempt at this styled almost nothing, and winning on specificity would have meant !important on every line. The variables are what those rules read, so setting them here is both shorter and the supported way in. Scoped to `.cor-bt-form`, which the plugin puts on this form alone, so the Contact page's form is untouched. =================================================================== */ .cor-bt-form { /* fields */ --wpforms-field-size-input-height: 72px; --wpforms-field-size-padding-h: 24px; --wpforms-field-size-font-size: 18px; /* this one is the LABEL-to-field gap, not the gap between fields */ --wpforms-field-size-input-spacing: 8px; --wpforms-field-border-radius: 15px; --wpforms-field-border-size: 1px; --wpforms-field-border-style: solid; --wpforms-field-border-color: #FFFFFF; --wpforms-field-background-color: #FFFFFF; --wpforms-field-text-color: #101010; --wpforms-field-menu-color: #FFFFFF; /* labels */ --wpforms-label-color: #2D2926; --wpforms-label-size-font-size: 16px; --wpforms-label-size-line-height: 16px; /* button */ --wpforms-button-size-height: 60px; --wpforms-button-size-padding-h: 60px; --wpforms-button-size-font-size: 16px; --wpforms-button-size-margin-top: 0px; --wpforms-button-border-radius: 30px; --wpforms-button-border-size: 2px; --wpforms-button-border-style: solid; --wpforms-button-border-color: #259596; /* Careful with these two. The resting background is the **-alt** variable — `background-color: var(--wpforms-button-background-color-alt, var( --wpforms-button-background-color))` — so setting -alt to Agave, as reads naturally, paints a solid Agave pill with Agave text on it and the label disappears. -alt is the resting state; the plain one is the fallback, and is also what the focus ring is drawn in, so it stays a real colour. */ --wpforms-button-background-color-alt: transparent; --wpforms-button-background-color: #259596; --wpforms-button-text-color: #259596; } /* WPForms wraps every form in a container carrying `margin: 24px auto`, from `div.wpforms-container-full:not(:empty)`. The Elementor Form widget had none, so the form sat 24px below the heading it lines up with. That rule reads (0,2,1) and the obvious `div.wpforms-container.cor-bt-wrap` ties it at (0,2,1) — a tie is decided by which stylesheet prints last, and WPForms' printed later. Naming the third class wins it outright. */ div.wpforms-container.wpforms-container-full.cor-bt-wrap { margin: 0; } /* --- the handful of things with no variable behind them ------------- Prefixed with `.wpforms-container` so these read 0,3,1 against the modern stylesheet's 0,3,0. Without the prefix they lose on specificity and silently do nothing — which is how the label came out bold and the message box 367px tall on the first pass. No !important needed once the selectors are honest about what they are competing with. */ /* Weight and family: WPForms sets a bold label and inherits the family. */ .wpforms-container form.cor-bt-form .wpforms-field-label { font-family: "Circular", sans-serif; font-weight: 500; } .wpforms-container form.cor-bt-form input, .wpforms-container form.cor-bt-form select, .wpforms-container form.cor-bt-form textarea, .wpforms-container form.cor-bt-form button[type="submit"] { font-family: "Circular", sans-serif; } .wpforms-container form.cor-bt-form input, .wpforms-container form.cor-bt-form select { font-weight: 500; } .wpforms-container form.cor-bt-form button[type="submit"] { font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; } /* The gap BETWEEN fields. The variable above is the label-to-field one. */ .wpforms-container form.cor-bt-form .wpforms-field { padding: 0 0 24px; } /* The message box. WPForms sizes a textarea as a MULTIPLE of the input height — `textarea.wpforms-field-large` is `calc(var(--wpforms-field-size-input-height) * 5.1)`, which against a 72px field is 367 — and that rule reads (0,3,2), so it needs `div.wpforms-container-full` here to be beaten rather than tied. */ div.wpforms-container-full form.cor-bt-form textarea, div.wpforms-container-full form.cor-bt-form textarea.wpforms-field-large { height: 119px; min-height: 119px; padding-top: 20px; resize: vertical; } /* Every field here is required, and the Elementor form marked none of them, so the red asterisks would be new noise rather than new information. */ .wpforms-container form.cor-bt-form .wpforms-required-label { display: none; } /* Name and Email share a row, as they do now. `calc` rather than a percentage: a percentage plus the gap overflows the row. */ .wpforms-container form.cor-bt-form .wpforms-field-container { display: flex; flex-wrap: wrap; column-gap: 10px; } .wpforms-container form.cor-bt-form .wpforms-field { width: 100%; } .wpforms-container form.cor-bt-form .wpforms-field.cor-bt-half { width: calc(50% - 5px); } /* Hover: fill Agave, white text. WPForms' own hover lays a 20% black gradient over the resting background, which on an outlined button is a grey wash rather than the site's fill. */ div.wpforms-container-full form.cor-bt-form button[type="submit"]:hover, div.wpforms-container-full form.cor-bt-form button[type="submit"]:active, div.wpforms-container-full form.cor-bt-form button[type="submit"]:focus { background: #259596; color: #FFFFFF; } @media (max-width: 767px) { .cor-bt-form { --wpforms-field-size-input-height: 64px; } .wpforms-container form.cor-bt-form .wpforms-field.cor-bt-half { width: 100%; } .wpforms-container form.cor-bt-form button[type="submit"] { width: 100%; } } @media (prefers-reduced-motion: reduce) { .wpforms-container form.cor-bt-form button[type="submit"] { transition: none; } } /* ---- Newsletter consent checkbox (Contact form + Newsletter popup), 10 Sep, Marker CS-10 ---- Makayla: "can this be more discreet… I do want it auto checked though". The field was a WPForms image-choice card; it is now a plain checkbox with a small label. */ .wpforms-container .wpforms-field.cor-consent ul { margin: 0; } .wpforms-container .wpforms-field.cor-consent li { display: flex; align-items: center; gap: 10px; } .wpforms-container .wpforms-field.cor-consent input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: 0 0 18px; accent-color: var(--cor-consent-ink); } .wpforms-container .wpforms-field.cor-consent label.wpforms-field-label-inline { font-family: Circular, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: #2D2926; margin: 0; } /* CS-10, second pass (Makayla, 11 Sep): "any chance to change the blue checkmark and stroke color to the flight blue color vs. the default?" The "default" is WPForms' own #066AAB, which it uses for both parts of the control: the box is drawn on ::before and the tick on ::after (a rotated border-left + border-bottom), and when the box is checked WPForms rings it with a box-shadow in --wpforms-button-background-color. At 18px that reads as a solid corporate-blue chip — the opposite of the "more discreet" this ticket asked for in the first place. So: no fill, a 1px Flight Blue stroke, a Flight Blue tick. Everything Makayla named becomes Flight Blue, and dropping the fill is what makes a Flight Blue tick legible — on a filled box it would be pale-on-pale. Ground-aware, because the same field renders in two places. The Contact blade is Midnight Green (#B8DCFC on it is ~7.9:1); the Join the List popup card is Light Gray #F5F5F4, where Flight Blue would all but vanish, so the ink goes Midnight there. One variable, set per ground, read by every rule below — including accent-color, which is what a browser would use if WPForms' modern markup were ever turned off. The three states are given the same treatment deliberately: :checked and :focus each re-declare border-color and box-shadow in WPForms' own blue, so overriding ::before alone would leave the blue ring behind the moment anyone clicked the box. */ .wpforms-container .wpforms-field.cor-consent { --cor-consent-ink: #B8DCFC; } #elementor-popup-modal-104386 .wpforms-container .wpforms-field.cor-consent, .wpforms-container .wpforms-field.cor-consent.cor-consent--light { --cor-consent-ink: #1A4348; } .wpforms-container .wpforms-field.cor-consent input[type="checkbox"]::before, .wpforms-container .wpforms-field.cor-consent input[type="checkbox"]:checked::before, .wpforms-container .wpforms-field.cor-consent input[type="checkbox"]:focus::before { background-color: transparent !important; border: 1px solid var(--cor-consent-ink) !important; box-shadow: none !important; } .wpforms-container .wpforms-field.cor-consent input[type="checkbox"]::after, .wpforms-container .wpforms-field.cor-consent input[type="checkbox"]:checked::after { border-color: var(--cor-consent-ink) !important; } /* Keyboard focus still has to be visible once the blue ring is gone. */ .wpforms-container .wpforms-field.cor-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--cor-consent-ink); outline-offset: 2px; } /* =================================================================== FORM MESSAGES — CS-75 Makayla, 14 Sep: "We need to style this WP Forms message to match the site style guide." She screenshotted the confirmation; this covers every message WPForms can put on screen, because they are one system and half-doing it would have left a lime-green box behind the first time anyone mistyped an email. Unscoped on purpose. Everything above is scoped to `.cor-bt-form`, the "Let's Build Together" form; these rules apply to all six forms on the site (Contact, Build Together, Newsletter, Join the List, Content Offer, Campaign), because a message should not look like it came from a different site depending on which form produced it. THE GROUND PROBLEM These forms sit on two very different backgrounds — Midnight Green on the Contact blade, Light Gray #F5F5F4 on the home/About footer blade and the Join the List popup card. No single ink is readable on both: 4.5:1 against Midnight needs a relative luminance above ~0.43, and against white below ~0.18. So the message panel supplies its own ground — white, like the fields already are on both pages — and the text on it is always Charcoal. That leaves only two things sitting directly on the page ground. The required marker takes `currentColor` from the label it lives in, so it follows --wpforms-label-color (already #FFFFFF on Contact and Charcoal elsewhere) without being told where it is. The field-level error text has no such variable to inherit, so --cor-msg-bad-ground is flipped by the `cor-form-ondark` class the plugin adds. Anything drawn ON the white panel keeps --cor-msg-bad, which never flips: a pale coral icon on white would be invisible. =================================================================== */ .wpforms-container { --cor-msg-panel: #FFFFFF; --cor-msg-ink: #2D2926; /* Charcoal — on the white panel */ --cor-msg-ok: #259596; /* Agave Green */ --cor-msg-bad: #A6342B; /* on white: 6.4:1 */ --cor-msg-bad-ground: #A6342B; } /* Added by cor_fr_frontend_container_class() to any form whose ground is dark, and settable by hand from the form's "Form CSS Class" setting. */ .wpforms-container.cor-form-ondark { --cor-msg-bad-ground: #FFB4AB; /* on Midnight Green: 7.4:1 */ } /* --- the panel, shared by the confirmation and the form-level error --- No left rule. A 4px rule inside a 15px radius tapers away at both corners and reads as a rendering fault rather than a device; the icon carries the same meaning and survives the radius. The error container is listed twice, once with `.wpforms-form` in the path. WPForms' own `…-full .wpforms-form .wpforms-error-container` ties a plain (0,3,1) selector and prints later, so the box was styled while the text inside it stayed WPForms red — everything landed EXCEPT the colour, which is the failure mode that looks like a design choice rather than a bug. The second selector wins the tie; the first still covers the container rendered outside a
. */ div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message), div.wpforms-container.wpforms-container-full .wpforms-error-container, div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-error-container, div.wpforms-container.wpforms-container-full .wpforms-error-noscript, div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-error-noscript { position: relative; background: var(--cor-msg-panel); border: 0; border-radius: 15px; margin: 0 0 24px; padding: 28px 32px 28px 70px; color: var(--cor-msg-ink); font-family: "Circular", sans-serif; font-size: 18px; line-height: 28px; font-weight: 500; } div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full { margin-bottom: 0; } div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full p, div[submit-success] > .wpforms-confirmation-container-full p, div.wpforms-container.wpforms-container-full .wpforms-error-container p, div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-error-container p, div.wpforms-container.wpforms-container-full .wpforms-error-noscript p { margin: 0; color: inherit; } div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full p + p, div[submit-success] > .wpforms-confirmation-container-full p + p { margin-top: 12px; } /* The two icons. Drawn as a masked box rather than an or a font glyph so the colour is a CSS property — the same mark can then be Agave here and red below without shipping two files. Absolutely positioned, with the panel padded to make room, rather than laid out as the first item of a flex row. A confirmation is arbitrary HTML the editor types into WPForms — the Campaign forms return a heading, a line of copy and a download link — and on a flex container every one of those becomes a flex ITEM and they line up side by side. Out of flow, the icon cannot touch the content. */ div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full::before, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message)::before, div.wpforms-container.wpforms-container-full .wpforms-error-container::before, div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-error-container::before, div.wpforms-container.wpforms-container-full .wpforms-error-noscript::before { content: ""; position: absolute; left: 32px; top: 31px; width: 22px; height: 22px; background: currentColor; } div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full::before, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message)::before { background: var(--cor-msg-ok); -webkit-mask: var(--cor-msg-tick) center / 22px 22px no-repeat; mask: var(--cor-msg-tick) center / 22px 22px no-repeat; } div.wpforms-container.wpforms-container-full .wpforms-error-container::before, div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-error-container::before, div.wpforms-container.wpforms-container-full .wpforms-error-noscript::before { background: var(--cor-msg-bad); -webkit-mask: var(--cor-msg-alert) center / 22px 22px no-repeat; mask: var(--cor-msg-alert) center / 22px 22px no-repeat; } .wpforms-container { --cor-msg-tick: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4.5 11.5l4.2 4.2L17.5 6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --cor-msg-alert: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M11 6.4v6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='15.8' r='1.15' fill='%23000'/%3E%3C/svg%3E"); } /* --- field-level validation ----------------------------------------- `div.wpforms-container-full .wpforms-form label.wpforms-error` is (0,3,1) in WPForms' sheet and holds #D63637; a plain `.wpforms-container label.wpforms-error` at (0,2,1) loses and does nothing at all — which is how this first came out in WPForms red while looking, in the source, as though it had been styled. Matching the shape and printing later is enough; no !important. */ div.wpforms-container.wpforms-container-full .wpforms-form label.wpforms-error, div.wpforms-container.wpforms-container-full .wpforms-form em.wpforms-error { font-family: "Circular", sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--cor-msg-bad-ground); margin-top: 6px; } /* WPForms already draws its warning triangle as a masked box rather than an image, so the glyph takes whatever `background` it is given — `currentColor` is all it needs to follow the text onto either ground. The mask is swapped for the same mark the panel uses above, so the form does not speak in two icon sets. */ div.wpforms-container.wpforms-container-full .wpforms-form label.wpforms-error::before, div.wpforms-container.wpforms-container-full .wpforms-form em.wpforms-error::before { background: currentColor; width: 15px; height: 15px; margin-right: 2px; vertical-align: -2px; -webkit-mask: var(--cor-msg-alert) center / 15px 15px no-repeat; mask: var(--cor-msg-alert) center / 15px 15px no-repeat; } /* The fields carry no border at all — they are a white box with a 15px radius, and --wpforms-field-border-color is transparent — so there is no edge to turn red. The ring is drawn as an `outline` pulled inside by its own offset: it follows the radius, it does not change the box model (the field does not shift by a pixel when it goes from valid to invalid), and, unlike box-shadow, nothing else is competing for the property. box-shadow was the first attempt and lost to an !important rule that resolves to a transparent inset shadow — even at (0,4,1). Drawn in the non-flipping red: it sits on the field's own white. */ div.wpforms-container.wpforms-container-full .wpforms-form input.wpforms-error, div.wpforms-container.wpforms-container-full .wpforms-form textarea.wpforms-error, div.wpforms-container.wpforms-container-full .wpforms-form select.wpforms-error, div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-has-error .choices__inner { outline: 1px solid var(--cor-msg-bad); outline-offset: -1px; } /* The required marker inherits the label it sits in, so it is Charcoal on the light blades and white on Midnight without being told which is which. WPForms points it at --wpforms-label-error-color, i.e. red on every label on the form — thirty asterisks shouting at a visitor who has not done anything wrong yet. */ .wpforms-container .wpforms-required-label, .wp-core-ui div.wpforms-container .wpforms-required-label { color: currentColor; opacity: .55; font-weight: 400; } /* --- submitting ------------------------------------------------------ WPForms disables the button while the request is in flight. Left alone the browser greys it; this keeps the button in the site's colours and just softens it, so the only thing that changes is the spinner appearing. */ div.wpforms-container-full form button[type="submit"]:disabled, div.wpforms-container-full form button[type="submit"].wpforms-disabled { opacity: .6; cursor: wait; } .wpforms-container .wpforms-submit-spinner { filter: saturate(0) brightness(0); opacity: .55; } .cor-form-ondark .wpforms-submit-spinner { filter: saturate(0) brightness(3); opacity: .8; } @media (max-width: 767px) { div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message), div.wpforms-container.wpforms-container-full .wpforms-error-container, div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-error-container, div.wpforms-container.wpforms-container-full .wpforms-error-noscript { padding: 22px 20px 22px 54px; font-size: 16px; line-height: 26px; } div.wpforms-container.wpforms-container-full .wpforms-confirmation-container-full::before, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message)::before, div.wpforms-container.wpforms-container-full .wpforms-error-container::before, div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-error-container::before, div.wpforms-container.wpforms-container-full .wpforms-error-noscript::before { left: 20px; top: 24px; } }