/*! * IZ Leadform Alerts — unified alert-canon styles (v1.3.0, marker IZ_LEADFORM_ALERTS_V1) * v1.2.9: hide the dag-frontend char-counter on short fixed fields (email/name/phone); keep only on * the message textarea. See rule at end of file. * v1.2.3: hide rule extended to adopted prefixes (.dag-phone-prefix/.phone-prefix/.iz-phone-prefix--injected) * so "+1" collapses on 11-digit leading-1 entry regardless of which prefix was adopted (REQ-L5-07). * --------------------------------------------------------------------------------------- * FRONT-END progressive-enhancement layer ONLY. Styles the canon class names emitted by the * adopter JS (iz-leadform-alerts.js). It changes NOTHING about form submission or delivery. * * Design goals: * - THEME-AGNOSTIC: no single brand baked in. Every colour routes through a CSS custom * property with a neutral fallback, so a theme can retint by redefining the property * (e.g. `:root{ --iz-alert-text:#b00020 }`) without touching this file. * - ADDITIVE / LOW-SPECIFICITY: single-class / class-scoped selectors so this layers over * existing form CSS. It sets colours and toggles visibility only — it does NOT impose * layout (widths, flex, grid) on fields, so it will not reflow a theme's form. * - A11Y: error text meets WCAG AA contrast on light grounds and white; the error ring is an * `outline` (not box-shadow) so the theme's own :focus box-shadow ring still shows through. * - Only the canon class names are styled: .iz-field, .iz-field.is-error, .iz-field-error, * .iz-form-alert and .iz-phone-cc (+ .hide). * * No @import, no @font-face, no web fonts. */ /* ---- Tunable tokens (override per-theme by redefining on :root or a form) ------------- */ :root { --iz-alert-text: #c0392b; /* error TEXT — ~4.8:1 on #fdecec and on white (WCAG AA) */ --iz-alert-border: #d33; /* control border + ring in the error state */ --iz-alert-bg: #fdecec; /* summary alert-box background */ } /* Dark-ground families: lift the red so text stays legible on a dark form surface. */ @media (prefers-color-scheme: dark) { :root { --iz-alert-text: #ff8a80; --iz-alert-border: #ff6b6b; --iz-alert-bg: #3a1c22; } } /* ---- Field wrapper -------------------------------------------------------------------- */ /* .iz-field is a passthrough wrapper the adopter guarantees around each control. Left structurally unstyled so it never changes the theme's field layout. */ /* Error state: tint the control's border + an OUTLINE ring (coexists with the theme's own :focus box-shadow — we never clobber the focus indicator). Descendant selector so a control nested inside .iz-phone-cc / a theme sub-wrapper still lights up. */ .iz-field.is-error input, .iz-field.is-error select, .iz-field.is-error textarea { border-color: var(--iz-alert-border, #d33) !important; outline: 2px solid var(--iz-alert-border, #d33) !important; outline-offset: 1px; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18) !important; } /* Fleet cohesion layers also use !important and may load after this file. These selectors intentionally outrank their neutral/focus borders only while our accessible error state is set. */ body[class] form[class] .iz-field.is-error input[aria-invalid="true"][name]:not([data-iz-validation-ignore]), body[class] form[class] .iz-field.is-error select[aria-invalid="true"][name]:not([data-iz-validation-ignore]), body[class] form[class] .iz-field.is-error textarea[aria-invalid="true"][name]:not([data-iz-validation-ignore]) { border-color: var(--iz-alert-border, #d33) !important; outline: 2px solid var(--iz-alert-border, #d33) !important; outline-offset: 1px !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18) !important; } body[class*="cro-profile--"] #apply-financing form[class] .iz-field.is-error input[aria-invalid="true"][name], body[class*="cro-profile--"] #apply-financing form[class] .iz-field.is-error select[aria-invalid="true"][name], body[class*="cro-profile--"] #apply-financing form[class] .iz-field.is-error textarea[aria-invalid="true"][name] { border-color: var(--iz-alert-border, #d33) !important; outline: 2px solid var(--iz-alert-border, #d33) !important; outline-offset: 1px !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18) !important; } /* ---- Per-field error text (small.iz-field-error, role=alert aria-live=polite) --------- */ /* Hidden by default; revealed only while its wrapper carries .is-error. Self-contained colour (no dependence on the theme's text colour). */ .iz-field-error { display: none; } .iz-field.is-error .iz-field-error { display: block; margin-top: .4em; font-size: .8125em; /* ~13px at a 16px base — relative so it tracks the theme */ line-height: 1.35; color: var(--iz-alert-text, #c0392b); } /* ---- Form summary (div.iz-form-alert, role=alert aria-live=assertive, unique id/form) -- */ /* Contract: the adopter injects this element carrying the native `hidden` attribute, so it is HIDDEN BY DEFAULT. The adopter drives visibility by BOTH toggling `hidden` and the `.iz-form-alert--show` class; the two rules below are consistent (hidden wins when set, --show forces display when the attribute is cleared — defeating a theme `display:none`). */ .iz-form-alert { margin: 0 0 1em; padding: .7em 1em; border: 1px solid var(--iz-alert-border, #d33); border-left-width: 4px; border-radius: 6px; background: var(--iz-alert-bg, #fdecec); color: var(--iz-alert-text, #c0392b); font-size: .9375em; /* ~15px — relative */ line-height: 1.4; } .iz-form-alert[hidden] { display: none !important; } .iz-form-alert.iz-form-alert--show { display: block !important; } /* ---- Phone country-code prefix (span.iz-phone-cc containing "+1") --------------------- */ .iz-phone-cc { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 700; opacity: .75; } /* ---- B1 (FLEET-FORMS-PHONE-PREFIX-20260907): the prefix has no geometry of its own ----- MEASURED, not assumed. On the pilot d1.gromovina.icu, resting state, through the staging bypass, with iz-std/render-gates/_phonestate.py: route padding-left prefix right edge text under prefix /contact-us/ 20px 28px (1280/1366/390) YES /financing/ 12px 28px (1280/1366) YES /shipping/ 10px 28px (1280/1366) YES /financing/ 12px 206px (390) YES /shipping/ 10px 206px (390) YES TWO geometries, not one. The rule above makes the prefix `inline-flex` — an ordinary IN-FLOW sibling — because iz-leadform-alerts.js inserts it as a sibling BEFORE the control (insertCcBefore, src/iz-leadform-alerts.js:287) and deliberately does NOT re-parent the control: re-parenting breaks wpcf7's error-hint placement. That contract stays untouched here. In flow and with no paired padding on the control, the prefix either sits ON the text (28px edge vs 10-20px padding) or, when the line runs out of room, wraps to its own line (206px edge at 390px width). One padding value cannot fix the second case — the prefix has to leave the flow. The pattern below is NOT new: it is the one already proven in canon at deploy/cro-component-cohesion/iz-cro-component-cohesion.css:118-127, where it is gated behind `body[class*="cro-profile--"]`. Sites without that body class — the pilot among them — never receive it. This lifts the same geometry to the canon stylesheet so it reaches every adopter. NOTHING BUT GEOMETRY. No name, value, action, method, nonce, required, validation or POST shape is touched; the prefix keeps pointer-events:none so it cannot take a click or focus. */ .iz-field { position: relative; } .iz-field .iz-phone-cc { position: absolute; z-index: 2; left: 1px; top: 1px; bottom: 1px; display: flex; align-items: center; padding: 0 11px 0 14px; pointer-events: none; } /* The control's own left padding must clear the prefix box. 56px matches the proven cro-component-cohesion value for the same prefix padding; `:not(.hide)` so the padding is dropped in the same breath as the prefix when the JS collapses it on an 11-digit leading-1 entry — otherwise the field would keep a 56px hole with nothing in it. ADJACENT SIBLING, not :has(). Read from the code, not guessed: insertCcBefore does `parent.insertBefore(cc, control)` (src/iz-leadform-alerts.js:295), so the prefix is the control's IMMEDIATELY PRECEDING sibling. `+` states exactly that and needs no :has() support. Scoped to .iz-phone-cc — the prefix this file owns. An ADOPTED theme prefix (.dag-phone-prefix / .phone-prefix) keeps whatever geometry its own theme gives it; this rule does not reach it, and REQ-L5-07 adoption is unaffected. */ .iz-phone-cc:not(.hide) + input { padding-left: 56px; } /* v1.2.3: the JS toggles `.hide` on whatever prefix element is in use — which, per REQ-L5-07, may be an ADOPTED theme/engine prefix (.dag-phone-prefix / .phone-prefix / .iz-phone-prefix--injected), not our own .iz-phone-cc. Scope the hide to all of them so "+1" collapses on an 11-digit leading-1 entry regardless of which prefix was adopted (the retired engine hid via .dag-phone-wrap.no-prefix; that CSS left with it, so without this the adopted badge stayed visible). */ .iz-phone-cc.hide, .dag-phone-prefix.hide, .phone-prefix.hide, .iz-phone-prefix--injected.hide { display: none !important; } /* Legacy cleanup only. v1.3 keeps invalid submit controls clickable so clicking them can reveal the alert summary and focus the first highlighted field. */ button.iz-submit-disabled, input[type="submit"].iz-submit-disabled, .iz-submit-disabled[type="submit"], button.iz-submit-disabled:disabled, input.iz-submit-disabled:disabled { opacity: .55 !important; cursor: not-allowed !important; filter: saturate(.6) !important; } /* ---- REQ-L7-21 (canon): phone char-counter overlap ------------------------------------ The theme's dag-frontend.js appends a `.char-counter` ("14/20") to the PHONE field — even though its own source comments say the phone is "deliberately skipped" — and it lands on top of the "Format: (555) 123-4567 — 10 digits" help text. An INHERITED defect (every dag clone gets it), so it is fixed once here in the canon, never per-root. A running character count is meaningless on a fixed-format phone number, so we suppress the PHONE counter (restoring dag-frontend's own intent) — this is theme-adaptive by construction (nothing to lay out or colour, works light/dark/square/rounded) and generalises the per- root nylemax fix without its hardcoded light-theme badge. Scoped to the phone field: the counter is either inside .dag-phone-wrap or a sibling after it in the field, so both are matched; a legitimate message-field counter (in a field WITHOUT a .dag-phone-wrap) is untouched. */ .dag-phone-wrap .char-counter, .dag-phone-wrap ~ .char-counter { display: none !important; } /* v1.2.9 (owner-ratified fleet): retire the noise char-counter on the remaining short fixed fields (email / name) too. dag-frontend appends a ("0/100") to EVERY maxlength field; a live character count is meaningless on a name/email/phone and breaks the form's single visual language — the owner ratified keeping a counter ONLY on the free-text MESSAGE. We hide every .char-counter, then restore it only inside a field that contains a