/* * Kate Angelo — Formidable Forms brand theme * ------------------------------------------------------------------------- * Restyles Formidable's built-in "with_frm_style" theme (its native * CSS-custom-property theming API) to match the kateangelo.com brand. * * VERIFIED brand colors (pulled directly from the site's live, rendered * Elementor CSS — the header CTA button, the /fp-launch-team/ hero section, * and the /about-2/ dark sections all agree on these exact hex values): * Navy (page/section backgrounds): #020F24 * Gold (CTAs / accents / required): #F5D000 * Gold hover (from header button): #FFE033 * Gold active/pressed: #E0BC00 * Fonts: Fjalla One (display/headings), Poppins (body/UI) — matches the * rest of the site. * * SCOPING — this entire file is nested under `.frm_forms.with_frm_style`, * which is Formidable's own root wrapper class. It cannot exist on the * Elementor nav/footer or any other plugin's markup, so it is safe from * the site-wide CSS-leak issue documented for home-landing.css (bare nav/ * footer selectors bled onto Elementor menus). Do NOT add bare/global * selectors to this file — keep every rule nested under .frm_forms. * * ── v1.0.5 CHANGE LOG ───────────────────────────────────────────────────── * * 1) LIGHT ICE-BLUE CARD (new). The form now sits inside its own light card * (bg #E9F1F9, 1px #C7DAEA border, 16px radius, soft shadow lifting it * off the page's dark navy section) instead of sitting transparently * directly on the navy page background, per Kate's request. Because the * `.frm_forms.with_frm_style` element IS the form's real outer wrapper * div (Formidable's own container, id="frm_form_{id}_container"), the * card treatment is applied straight to it — no extra wrapper markup * needed, and the scoping guarantee above is untouched. * * THIS FLIPS THE v1.0.4 TEXT-COLOR DECISION ON PURPOSE: v1.0.4 made * labels/help text/checkbox text LIGHT because the form sat directly on * dark navy. Now that the form sits on a light ice-blue card, all of that * text is flipped back to DARK navy (or a softer dark slate for * secondary/help text) so it stays readable on the new light background. * Only the input FIELDS keep their v1.0.4 white-bg/dark-text treatment * (still correct here), and the gold accent colors (checkbox/radio * accent-color, submit button, required-asterisk) are unchanged. * Input border color was darkened from v1.0.4's #E5E7EB (tuned for * contrast against navy) to #6B84A0, since a near-white border no longer * stands out against the new light ice-blue card / white field combo. * * 2) SUBMIT BUTTON FIX (bug fix). In v1.0.4 the button still rendered * Formidable's stock blue. Root cause, confirmed by pulling Formidable's * own live, DB-generated stylesheet * (wp-content/plugins/formidable/css/formidableforms.css — flagged * inside that file itself: "Any changes made to this file will be lost * when your Formidable settings are updated", i.e. it's the Formidable * Styler's compiled output, not something we can safely hand-edit): * * .frm_style_formidable-style.with_frm_style .frm_submit button { * background: rgba(5,125,205,1); /-- hardcoded literal blue, * NOT var(--submit-bg-color) --/ * ... * } * * That selector has specificity (0,0,3,1) — three classes + one element. * Our v1.0.4 rule (`.frm_forms.with_frm_style .frm_button_submit` / * `button[type="submit"]`) was ALSO (0,0,3,1) once the attribute * selector is counted — an exact specificity TIE. On a tie, the LAST * rule in document order wins, and Formidable's own stylesheet is * re-printed by the Elementor Formidable widget inline in the page * BODY (right before the form markup), which is always later in the * DOM than our theme's stylesheet — so Formidable's blue won * every time. This was never a caching problem. * * Fix: a new rule (below, outside the variable block) that (a) is * unambiguously MORE specific — 4 classes + 1 element, (0,0,4,1) — than * Formidable's selector, so it wins regardless of DOM order, and (b) * also carries `!important` as insurance, since Formidable's Styler * CSS is DB-generated and can change shape on any future Formidable * update. Explicit :hover/:focus/:active overrides were added the same * way for consistency, even though the hover state was already winning * via plain specificity (no tie there) — belt and suspenders. */ .frm_forms.with_frm_style { /* ---- brand variables (Formidable's own theming API) ---- */ --font: 'Poppins', 'Helvetica Neue', Arial, sans-serif; --base-font-size: 16px; --font-size: 16px; /* form title / description (only visible if a form is embedded with title=true / description=true — Launch Team + Contact use title=false. Darkened in v1.0.5 along with everything else so it stays readable if ever toggled on against the new light ice-blue card — gold-on- ice-blue measured ~1.3:1 contrast, far below readable.) */ --title-size: 28px; --title-color: #020F24; --title-margin-top: 0; --title-margin-bottom: 22px; --form-desc-size: 15px; --form-desc-color: #33425A; --form-desc-margin-bottom: 24px; /* field labels — DARK on the new ice-blue card (flipped from v1.0.4's light-on-navy treatment now that the form has its own light card). */ --label-color: #020F24; --weight: 600; --required-color: #F5D000; --required-weight: bold; /* field descriptions / help text — a softer dark slate than the labels for a light visual hierarchy, still ~8.9:1 contrast on #E9F1F9. */ --description-font-size: 13px; --description-color: #33425A; /* inputs, selects, textareas — white "light card" fields, unchanged from v1.0.4 (still correct on the new light card background). Only the border got darker so it stays visibly distinct against the new light surroundings. */ --field-font-size: 16px; --field-height: 48px; --line-height: 48px; --field-pad: 13px 16px; --field-margin: 22px; --field-weight: 400; --text-color: #0A0A0A; --border-color: #6B84A0; --field-border-width: 1px; --bg-color: #FFFFFF; --bg-color-active: #FFFFFF; --border-color-active: #F5D000; --border-radius: 0px; /* error state — keep a real, accessible red; brand-gold on an error reads as decorative, not urgent */ --text-color-error: #7A1F1F; --bg-color-error: #FDF1F1; --border-color-error: #C0392B; --border-width-error: 1.5px; /* checkboxes / radios — option text now sits on the light ice-blue card, so it's flipped to dark navy to match the labels. */ --check-align: block; --check-font-size: 15px; --check-label-color: #020F24; --check-weight: 400; /* section dividers inside long forms */ --section-font-size: 18px; --section-color: #020F24; --section-border-color: #F5D000; /* submit button — matches the site's existing gold CTA buttons (e.g. the header "Free eBook" button: bg #F5D000, text #020F24, uppercase, hover #FFE033 — all verified from that button's live CSS). NOTE: these variables alone are NOT sufficient to win the cascade — see the dedicated override rules below, which is the actual fix for the v1.0.4 blue-button bug. Kept here so hover/focus/active (which read these vars via Formidable's own CSS and were not affected by the tie) stay correct, and so the values are defined in one place. */ --submit-font-size: 15px; --submit-bg-color: #F5D000; --submit-border-color: #F5D000; --submit-border-width: 2px; --submit-text-color: #020F24; --submit-weight: 700; --submit-border-radius: 2px; --submit-padding: 16px 36px; --submit-margin: 18px 0 0 0; --submit-hover-bg-color: #FFE033; --submit-hover-border-color: #FFE033; --submit-hover-color: #020F24; --submit-active-bg-color: #E0BC00; --submit-active-border-color: #E0BC00; --submit-active-color: #020F24; /* success / message styling — Formidable renders this as its own self-contained notice box, so a light bg + dark text card reads fine regardless of the page's own background. */ --success-bg-color: #EAF7EE; --success-border-color: #B7E4C7; --success-text-color: #1E5631; /* ---- v1.0.5: light ice-blue card ---- The form's own outer wrapper (this element) now IS the card — no extra markup required. Lifts visually off the page's dark navy Elementor section via the soft shadow. */ max-width: 720px; margin: 0 auto; background-color: #E9F1F9; border: 1px solid #C7DAEA; border-radius: 16px; padding: 38px; box-shadow: 0 20px 45px rgba(2, 15, 36, 0.28); } /* Slightly reduce card padding on narrow screens so it doesn't dominate small viewports — still comfortably "generous" per spec. */ @media (max-width: 600px) { .frm_forms.with_frm_style { padding: 26px; } } /* Section/step heading style (Fjalla One, matches site display font) */ .frm_forms.with_frm_style .frm_form_title, .frm_forms.with_frm_style h3.frm_form_title { font-family: 'Fjalla One', 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; } /* Native checkbox / radio accent color (modern browsers) — unchanged from v1.0.4, gold accent stays regardless of card treatment. */ .frm_forms.with_frm_style input[type="checkbox"], .frm_forms.with_frm_style input[type="radio"] { accent-color: #F5D000; width: 18px; height: 18px; } /* Submit button: uppercase like the site's other CTA buttons (structural styling only — color is handled by the dedicated override block below). */ .frm_forms.with_frm_style .frm_button_submit, .frm_forms.with_frm_style button[type="submit"] { text-transform: uppercase; letter-spacing: 0.08em; font-family: 'Poppins', sans-serif; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } /* * ── v1.0.5 BUG FIX: submit button color override ────────────────────────── * Beats Formidable's own hardcoded-blue base-state rule * (`.frm_style_formidable-style.with_frm_style .frm_submit button`, * specificity 0,0,3,1) on BOTH specificity (this rule is 0,0,4,1 — four * classes + one element) AND `!important`, so it wins no matter which * stylesheet the browser parses last. Scoped to * `.frm_forms.with_frm_style .frm_submit …` only — cannot match anything * outside a Formidable form. */ .frm_forms.with_frm_style .frm_submit .frm_button_submit, .frm_forms.with_frm_style .frm_submit button.frm_button_submit { background-color: #F5D000 !important; border-color: #F5D000 !important; color: #020F24 !important; } .frm_forms.with_frm_style .frm_submit .frm_button_submit:hover, .frm_forms.with_frm_style .frm_submit button.frm_button_submit:hover, .frm_forms.with_frm_style .frm_submit .frm_button_submit:focus, .frm_forms.with_frm_style .frm_submit button.frm_button_submit:focus { background-color: #FFE033 !important; border-color: #FFE033 !important; color: #020F24 !important; } .frm_forms.with_frm_style .frm_submit .frm_button_submit:active, .frm_forms.with_frm_style .frm_submit button.frm_button_submit:active { background-color: #E0BC00 !important; border-color: #E0BC00 !important; color: #020F24 !important; } /* Focus ring that matches the gold active border above (keyboard a11y) */ .frm_forms.with_frm_style input:focus, .frm_forms.with_frm_style select:focus, .frm_forms.with_frm_style textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(245, 208, 0, 0.35); } /* Draft / secondary links (Save Draft, Previous) — now sit on the light ice-blue card, so flipped to dark navy (from v1.0.4's light #B9C4D9, which was correct only for the old navy-background layout). */ .frm_forms.with_frm_style .frm_save_draft, .frm_forms.with_frm_style .frm_prev_page { color: #020F24; font-family: 'Poppins', sans-serif; text-decoration: underline; } /* Field descriptions rendered below a field — now on the light card, so flipped to the same softer dark slate used for --description-color. */ .frm_forms.with_frm_style .frm_description { color: #33425A; }