/* Namespaced theme variables for visual donation form */ .charitable-donation-form, .charitable-visual-donation-form { /* Defensive: neutralize themes that add a default border via broad resets such as Hello Elementor's `html :where([style*="border-color"]) { border-style: solid; }` matching our --charitable-input-border-color custom property. */ border: 0; } .charitable-visual-donation-form { /* Spacing */ --charitable-field-gap: 16px; --charitable-input-padding-y: 10px; --charitable-input-padding-x: 12px; --charitable-fieldset-margin: 16px 0; --charitable-fieldset-padding: 12px; --charitable-label-margin-bottom: 6px; --charitable-description-margin-top: 4px; --charitable-field-margin-bottom: var(--charitable-field-gap); --charitable-section-gap: 24px; --charitable-button-margin-top: 20px; /* Colors */ --charitable-text-color: inherit; --charitable-label-color: inherit; --charitable-input-bg: #ffffff; --charitable-input-text-color: #000000; --charitable-error-color: #dc3232; --charitable-error-bg: #f8d7da; --charitable-success-color: #28a745; --charitable-required-indicator-color: #dc3232; /* Placeholder styling */ --charitable-placeholder-color: #999999; --charitable-placeholder-opacity: 0.7; /* Borders */ --charitable-input-border-color: #ccc; --charitable-input-border-radius: 4px; --charitable-fieldset-border: 0; /* Divider */ --charitable-divider-color: #e0e0e0; --charitable-divider-style: solid; /* Focus */ --charitable-focus-ring-color: #0a58ca; /* accessible default */ --charitable-focus-ring-width: 2px; --charitable-focus-ring-offset: 2px; /* Typography */ --charitable-font-family: inherit; --charitable-font-size-base: 16px; --charitable-label-font-size: 14px; --charitable-label-font-weight: 600; --charitable-description-font-size: 13px; --charitable-description-font-style: normal; --charitable-input-font-size: 16px; --charitable-input-line-height: 1.5; /* Buttons */ --charitable-button-bg: #0073aa; --charitable-button-text-color: #ffffff; --charitable-button-border-radius: 4px; --charitable-button-padding-y: 12px; --charitable-button-padding-x: 24px; --charitable-button-font-size: 16px; /* 700 to match the ink label introduced in 1.8.19.1; a semibold dark label on a mid-tone button reads thinner than the white one it replaced. */ --charitable-button-font-weight: 700; /* Design system token fallback defaults (1.8.14+) */ --charitable-heading-size: 1.5rem; --charitable-body-size: 1rem; --charitable-transition-speed: 0ms; --charitable-transition-easing: ease-out; --charitable-progress-animate: 0; --charitable-amount-border-radius: 4px; --charitable-amount-font-size: 14px; --charitable-donate-btn-radius: 4px; --charitable-donate-btn-text-transform: uppercase; --charitable-donate-btn-font-size: 15px; --charitable-progress-height: 8px; --charitable-progress-radius: 999px; --charitable-headline-font-size: 1.5rem; --charitable-stat-color: inherit; --charitable-progress-color: currentColor; --charitable-headline-color: inherit; --charitable-body-color: inherit; --charitable-tab-active-color: inherit; --charitable-tab-inactive-color: inherit; } /* Density: Base (now uses tighter spacing) */ .charitable-visual-donation-form.visual-theme-base { --charitable-field-gap: 8px; --charitable-input-padding-y: 6px; --charitable-input-padding-x: 8px; --charitable-fieldset-margin: 0; --charitable-fieldset-padding: 0; --charitable-fieldset-border: 0; } /* Ensure base removes fieldset box spacing in all cases */ .charitable-visual-donation-form.visual-theme-base fieldset, .charitable-visual-donation-form.visual-theme-base .charitable-fieldset { margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Density: Spaced (renamed from Compact, now uses standard spacing) */ .charitable-visual-donation-form.visual-theme-spaced { --charitable-field-gap: 16px; --charitable-input-padding-y: 10px; --charitable-input-padding-x: 12px; --charitable-fieldset-margin: 16px 0; --charitable-fieldset-padding: 12px; --charitable-fieldset-border: 0; } /* Element rules (scoped) */ .charitable-visual-donation-form .charitable-field, .charitable-visual-donation-form .charitable-fieldset, .charitable-visual-donation-form .charitable-form-row { margin-bottom: var(--charitable-field-gap); } .charitable-visual-donation-form fieldset { margin: var(--charitable-fieldset-margin); padding: var(--charitable-fieldset-padding); border: var(--charitable-fieldset-border); } /* Remove borders from charitable-fieldset for all themes */ .charitable-visual-donation-form .charitable-fieldset { border: 0; } /* Remove padding from nested fieldsets (fieldset within fieldset) */ .charitable-visual-donation-form .charitable-fieldset .charitable-fieldset, .charitable-visual-donation-form .charitable-fieldset .charitable-fieldset-field-wrapper { padding: 0 !important; } .charitable-visual-donation-form input[type="text"], .charitable-visual-donation-form input[type="email"], .charitable-visual-donation-form input[type="tel"], .charitable-visual-donation-form input[type="number"], .charitable-visual-donation-form input[type="date"], .charitable-visual-donation-form select, .charitable-visual-donation-form textarea { padding: var(--charitable-input-padding-y) var(--charitable-input-padding-x); border: var(--charitable-input-border-width, 1px) solid var(--charitable-input-border-color); border-radius: var(--charitable-input-border-radius); outline: none; background-color: var(--charitable-input-bg); color: var(--charitable-input-text-color, #000000) !important; font-family: var(--charitable-font-family); font-size: var(--charitable-input-font-size); line-height: var(--charitable-input-line-height); } /* Placeholder styling - faded appearance to distinguish from actual text */ /* Uses CSS variables for filterable customization */ .charitable-visual-donation-form input[type="text"]::placeholder, .charitable-visual-donation-form input[type="email"]::placeholder, .charitable-visual-donation-form input[type="tel"]::placeholder, .charitable-visual-donation-form input[type="number"]::placeholder, .charitable-visual-donation-form input[type="date"]::placeholder, .charitable-visual-donation-form textarea::placeholder { color: var(--charitable-placeholder-color, #999999); opacity: var(--charitable-placeholder-opacity, 0.7); } /* WebKit browsers (Chrome, Safari, Edge) */ .charitable-visual-donation-form input[type="text"]::-webkit-input-placeholder, .charitable-visual-donation-form input[type="email"]::-webkit-input-placeholder, .charitable-visual-donation-form input[type="tel"]::-webkit-input-placeholder, .charitable-visual-donation-form input[type="number"]::-webkit-input-placeholder, .charitable-visual-donation-form input[type="date"]::-webkit-input-placeholder, .charitable-visual-donation-form textarea::-webkit-input-placeholder { color: var(--charitable-placeholder-color, #999999); opacity: var(--charitable-placeholder-opacity, 0.7); } /* Firefox */ .charitable-visual-donation-form input[type="text"]::-moz-placeholder, .charitable-visual-donation-form input[type="email"]::-moz-placeholder, .charitable-visual-donation-form input[type="tel"]::-moz-placeholder, .charitable-visual-donation-form input[type="number"]::-moz-placeholder, .charitable-visual-donation-form input[type="date"]::-moz-placeholder, .charitable-visual-donation-form textarea::-moz-placeholder { color: var(--charitable-placeholder-color, #999999); opacity: var(--charitable-placeholder-opacity, 0.7); } /* Internet Explorer and Edge (legacy) */ .charitable-visual-donation-form input[type="text"]:-ms-input-placeholder, .charitable-visual-donation-form input[type="email"]:-ms-input-placeholder, .charitable-visual-donation-form input[type="tel"]:-ms-input-placeholder, .charitable-visual-donation-form input[type="number"]:-ms-input-placeholder, .charitable-visual-donation-form input[type="date"]:-ms-input-placeholder, .charitable-visual-donation-form textarea:-ms-input-placeholder { color: var(--charitable-placeholder-color, #999999); opacity: var(--charitable-placeholder-opacity, 0.7); } /* Multiple select fields - ensure minimum height for better UX */ .charitable-visual-donation-form select[multiple] { min-height: 100px; } .charitable-visual-donation-form label { color: var(--charitable-label-color); font-size: var(--charitable-label-font-size); font-weight: var(--charitable-label-font-weight); margin-bottom: var(--charitable-label-margin-bottom); font-family: var(--charitable-font-family); } /* Override label margin-bottom for donor name fieldset label */ .charitable-visual-donation-form .charitable-fieldset.charitable-donor-name-side-by-side .charitable-field-label { margin-bottom: 11px; display: inline-block; } /* Override label margin for label-pos-below */ .charitable-visual-donation-form.label-pos-below .charitable-form-field > label { margin-bottom: 0 !important; } .charitable-visual-donation-form .charitable-form-help-text { font-size: var(--charitable-description-font-size); font-style: var(--charitable-description-font-style); margin-top: var(--charitable-description-margin-top); color: var(--charitable-text-color); font-family: var(--charitable-font-family); } .charitable-visual-donation-form .charitable-form-field { margin-bottom: var(--charitable-field-margin-bottom); } .charitable-visual-donation-form .charitable-form-field input[type="text"], .charitable-visual-donation-form .charitable-form-field input[type="email"], .charitable-visual-donation-form .charitable-form-field input[type="password"], .charitable-visual-donation-form .charitable-form-field select, .charitable-visual-donation-form .charitable-form-field textarea { /* box-sizing is border-box, so 100% already fits the 10px padding inside the box. The previous calc(100% - 20px) left standalone fields (e.g. email) ~20px short of the donor-name / address fields, which explicitly use width:100%. */ width: 100%; padding: 10px !important; } .charitable-visual-donation-form .charitable-form-field select { width: 100% !important; } .charitable-visual-donation-form .charitable-donate-button-submit { background-color: var(--charitable-button-bg, #f89d35); /* Ink, not white: these two fallbacks are a pair, and white on #f89d35 is 2.13:1 (WCAG 1.4.3 needs 4.5:1) where ink is 8.41:1. The live value is normally computed per background in charitable_get_visual_form_styles(); this keeps the written-in fallback a passing combination too. 1.8.19.1 */ color: var(--charitable-button-text-color, #1e1515); border-radius: var(--charitable-button-border-radius, 4px); padding: var(--charitable-button-padding-y, 12px) var(--charitable-button-padding-x, 24px); font-size: var(--charitable-button-font-size, 16px); font-weight: var(--charitable-button-font-weight, 700); margin-top: var(--charitable-button-margin-top, 20px); font-family: var(--charitable-font-family, inherit); border: none; cursor: pointer; display: inline-block; text-align: center; text-decoration: none; transition: background-color 0.2s ease; } /* Ensure visual form button styling overrides base theme rules */ /* Higher specificity to override .charitable-campaign-field-donation-form rules */ .charitable-campaign-field.charitable-campaign-field-donation-form .charitable-visual-donation-form .charitable-form-field.charitable-submit-field button.charitable-donate-button-submit, .charitable-campaign-field.charitable-campaign-field-donation-form .charitable-visual-donation-form .charitable-donate-button-submit { background-color: var(--charitable-button-bg, #f89d35) !important; /* Ink fallback, paired with the orange above. See the note on the rule at ~line 261. 1.8.19.1 */ color: var(--charitable-button-text-color, #1e1515) !important; } .charitable-visual-donation-form .required { color: var(--charitable-required-indicator-color); } /* Suggested donation amounts styling for visual forms */ .charitable-visual-donation-form .donation-amounts.donation-suggested-amount { grid-template-columns: 1fr; } .charitable-visual-donation-form .donation-amounts.has-suggested-amounts label { font-size: 1em; line-height: 1.2em; font-weight: normal !important; } /* Base theme: Remove margin from donation amounts list */ .charitable-visual-donation-form.visual-theme-base .donation-amounts { margin: 0 !important; } .charitable-visual-donation-form .donation-amount.custom-donation-amount { margin: 0; } .charitable-visual-donation-form .custom-donation-input { max-width: 100%; width: 100%; } .charitable-visual-donation-form .donation-amounts.donation-suggested-amount .custom-donation-amount-wrapper { padding: 10px 15px 15px 15px; display: flex; align-items: center; } .charitable-visual-donation-form .donation-amount.suggested-donation-amount { display: flex; flex-direction: column; justify-content: center; } .charitable-visual-donation-form .donation-amounts .donation-amount .amount { font-weight: bolder; min-width: 25%; } .charitable-visual-donation-form .donation-amounts .donation-amount.custom-donation-amount.selected label { margin: 0; /* Paired with the selected tile's background rather than hardcoded white (WCAG 1.4.3). This is the most specific of the several rules competing for this label, so it was the one that actually painted it — white on the default #f89d35 is 2.13:1. 1.8.19.1 */ color: var(--charitable-form-amount-selected-text, white); } .charitable-visual-donation-form .donation-amounts .donation-amount .custom-donation-amount-wrapper, .charitable-visual-donation-form .donation-amounts .donation-amount > label { display: flex; flex-direction: row; gap: 20px; align-items: center; } .charitable-visual-donation-form .donation-amounts .donation-amount .custom-donation-amount-wrapper label .description { font-size: 0.8em; line-height: 0.8em; display: block; width: max-content; } .charitable-visual-donation-form .donation-amounts.has-suggested-amounts .donation-amount > label .description { /* font-size: 0.8em !important; */ /* line-height: 0.8em !important; */ } .charitable-visual-donation-form .donation-amounts .donation-amount .custom-donation-amount-wrapper label { font-size: 1em; } /* Donate button alignment (applies to single and multistep submit) */ .charitable-visual-donation-form.donate-align-left .charitable-submit-field, .charitable-visual-donation-form.donate-align-right .charitable-submit-field, .charitable-visual-donation-form.donate-align-center .charitable-submit-field { display: flex; flex-direction: column; } .charitable-visual-donation-form.donate-align-left .charitable-submit-field { align-items: flex-start; } .charitable-visual-donation-form.donate-align-right .charitable-submit-field { align-items: flex-end; } .charitable-visual-donation-form.donate-align-center .charitable-submit-field { align-items: center; } .charitable-visual-donation-form.donate-width-full .charitable-submit-field .charitable-donate-button-submit, .charitable-visual-donation-form.donate-width-half .charitable-submit-field .charitable-donate-button-submit { width: 100%; } .charitable-visual-donation-form.donate-width-half .charitable-submit-field { max-width: 50%; margin-left: auto; margin-right: auto; } @media (max-width: 600px) { .charitable-visual-donation-form.donate-width-half .charitable-submit-field { max-width: 100%; } } .charitable-visual-donation-form input[type="text"]:focus, .charitable-visual-donation-form input[type="email"]:focus, .charitable-visual-donation-form input[type="tel"]:focus, .charitable-visual-donation-form input[type="number"]:focus, .charitable-visual-donation-form input[type="date"]:focus, .charitable-visual-donation-form select:focus, .charitable-visual-donation-form textarea:focus { box-shadow: 0 0 0 var(--charitable-focus-ring-offset) #fff, 0 0 0 calc(var(--charitable-focus-ring-width) + var(--charitable-focus-ring-offset)) var(--charitable-focus-ring-color); } .charitable-visual-donation-form .charitable-section-divider { border-top: 1px var(--charitable-divider-style) var(--charitable-divider-color); margin: var(--charitable-field-gap) 0; } /* ======================================== Label Position: Below ======================================== */ .charitable-visual-donation-form.label-pos-below .charitable-form-field { display: flex !important; flex-direction: column !important; } /* Side-by-side donor name fields - ensure parent fieldset allows side-by-side layout */ .charitable-visual-donation-form.label-pos-below .charitable-fieldset.charitable-donor-name-side-by-side { display: block !important; } /* Side-by-side donor name fields - use flex but with inline-block to maintain side-by-side */ .charitable-visual-donation-form.label-pos-below .charitable-fieldset.charitable-donor-name-side-by-side .charitable-form-field { display: inline-flex !important; flex-direction: column !important; width: calc(50% - 8px) !important; box-sizing: border-box !important; vertical-align: top !important; } .charitable-visual-donation-form.label-pos-below .charitable-form-field > label { order: 2 !important; margin-top: 6px !important; margin-bottom: 0 !important; } .charitable-visual-donation-form.label-pos-below .charitable-form-field > input, .charitable-visual-donation-form.label-pos-below .charitable-form-field > select, .charitable-visual-donation-form.label-pos-below .charitable-form-field > textarea { order: 1 !important; } /* Handle nested structures like address fields */ .charitable-visual-donation-form.label-pos-below .charitable-address-fields-container .charitable-form-field { display: flex !important; flex-direction: column !important; } .charitable-visual-donation-form.label-pos-below .charitable-address-fields-container .charitable-form-field > label { order: 2 !important; margin-top: 6px !important; margin-bottom: 0 !important; } .charitable-visual-donation-form.label-pos-below .charitable-address-fields-container .charitable-form-field > input, .charitable-visual-donation-form.label-pos-below .charitable-address-fields-container .charitable-form-field > select { order: 1 !important; } /* Handle donor name fields */ .charitable-visual-donation-form.label-pos-below .charitable-donor-name-fields-container .charitable-form-field > label { order: 2 !important; margin-top: 6px !important; margin-bottom: 0 !important; } .charitable-visual-donation-form.label-pos-below .charitable-donor-name-fields-container .charitable-form-field > input, .charitable-visual-donation-form.label-pos-below .charitable-donor-name-fields-container .charitable-form-field > select { order: 1 !important; } /* Handle fieldset labels (like "Your Donation") - use :has() for modern browsers */ .charitable-visual-donation-form.label-pos-below .charitable-fieldset:has(> .charitable-field-label) { display: flex !important; flex-direction: column !important; } .charitable-visual-donation-form.label-pos-below .charitable-fieldset > .charitable-field-label { order: 2 !important; margin-top: 6px !important; margin-bottom: 0 !important; } .charitable-visual-donation-form.label-pos-below .charitable-fieldset > [id^="charitable-donation-options-"], .charitable-visual-donation-form.label-pos-below .charitable-fieldset > .charitable-donation-options { order: 1 !important; } /* Remove bottom margin from ul elements inside donation options when labels are below */ .charitable-visual-donation-form.label-pos-below .charitable-donation-options ul { margin-bottom: 0 !important; } /* Adjust margin-top for donation amounts label when labels are below - override general fieldset label rule */ .charitable-visual-donation-form.label-pos-below .charitable-fieldset > .charitable-field-label-donation-amounts { margin-top: -10px !important; margin-bottom: 20px !important; } /* Handle payment section fields */ .charitable-visual-donation-form.label-pos-below #charitable-gateway-fields .charitable-form-field { display: flex !important; flex-direction: column !important; } .charitable-visual-donation-form.label-pos-below #charitable-gateway-fields .charitable-form-field > label { order: 2 !important; margin-top: 6px !important; margin-bottom: 0 !important; } .charitable-visual-donation-form.label-pos-below #charitable-gateway-fields .charitable-form-field > input, .charitable-visual-donation-form.label-pos-below #charitable-gateway-fields .charitable-form-field > select { order: 1 !important; } /* ======================================== Multi-Step Form Animations ======================================== */ /* Fade Animation - Default for all multistep forms (STRICT FADE ONLY, no transform/position changes) */ .charitable-form-multistep.charitable-multistep-animation-fade .charitable-multistep-field { opacity: 0; transition: opacity 0.3s ease; /* Override any transform from base animations */ transform: none !important; } .charitable-form-multistep.charitable-multistep-animation-fade .charitable-multistep-field.charitable-multistep-field-visible { opacity: 1; /* Override the fadeIn keyframe animation that includes translateY */ animation: none !important; transform: none !important; } /* Ensure fields container doesn't cause layout shifts during animation */ .charitable-form-multistep .charitable-multistep-fields-container { position: relative; min-height: 100px; /* Prevents container collapse during transitions */ } /* Smooth step header transitions - FADE ONLY (no transform) */ .charitable-form-multistep.charitable-multistep-animation-fade .charitable-multistep-step-header { transition: opacity 0.2s ease; transform: none !important; } /* ======================================== Fee Relief Override for Visual Forms ======================================== */ /* Override fee-relief plugin inline CSS in visual forms */ /* Apply same fieldset styling as other fieldsets based on theme */ /* Also override .charitable-form-fields .charitable-fieldset from charitable.css */ /* Make fee-relief text green in visual forms (but keep labels with inherited color) */ .charitable-visual-donation-form .charitable-fieldset.fee-relief, .charitable-visual-donation-form .charitable-fee-relief-fieldset { color: #28a745 !important; } /* Keep checkbox label with black color */ .charitable-visual-donation-form .charitable-fieldset.fee-relief label, .charitable-visual-donation-form .charitable-fee-relief-fieldset label { color: #000000 !important; } /* Make donation total text green */ .charitable-visual-donation-form .charitable-fieldset.fee-relief .charitable-donation-total, .charitable-visual-donation-form .charitable-fee-relief-fieldset .charitable-donation-total { color: #28a745 !important; } /* Base theme: Remove all spacing (matches line 70-75) */ .charitable-visual-donation-form.visual-theme-base fieldset.charitable-fieldset.fee-relief, .charitable-visual-donation-form.visual-theme-base .charitable-fieldset.fee-relief, .charitable-visual-donation-form.visual-theme-base .charitable-form-fields .charitable-fieldset.fee-relief { margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Spaced theme: Use theme-specific values (matches line 82-84) */ .charitable-visual-donation-form.visual-theme-spaced fieldset.charitable-fieldset.fee-relief, .charitable-visual-donation-form.visual-theme-spaced .charitable-fieldset.fee-relief, .charitable-visual-donation-form.visual-theme-spaced .charitable-form-fields .charitable-fieldset.fee-relief { margin: 16px 0 !important; padding: 1.5em 20px 0.5em !important; border: 0 !important; } /* Default (no theme specified): Use CSS variables (matches line 95-99) */ .charitable-visual-donation-form fieldset.charitable-fieldset.fee-relief, .charitable-visual-donation-form .charitable-fieldset.fee-relief, .charitable-visual-donation-form .charitable-form-fields .charitable-fieldset.fee-relief { margin: var(--charitable-fieldset-margin) !important; padding: var(--charitable-fieldset-padding) !important; border: 0 !important; } /** * Text Block field. * * @since 1.8.19.1 * * Size and color are applied inline to .charitable-text-block-container so every * element in the block scales and colors together from one control set. * * Inheritance alone is not enough for headings: a theme's `h1-h6 { color }` rule is a * direct selector match and beats the inherited value, so an

inside a red block * rendered in the theme's heading color. The .charitable-text-block-has-color class is * added ONLY when a color has actually been chosen, which keeps an untouched block's * theme heading color exactly as it was. * * Links are deliberately excluded - a link should keep looking like a link. */ .charitable-text-block-has-color h1, .charitable-text-block-has-color h2, .charitable-text-block-has-color h3, .charitable-text-block-has-color h4, .charitable-text-block-has-color h5, .charitable-text-block-has-color h6, .charitable-text-block-has-color strong, .charitable-text-block-has-color em, .charitable-text-block-has-color li, .charitable-text-block-has-color p { color: inherit; } /* * Quill emits a trailing empty paragraph, usually as


, which adds a blank * line of dead space under every block. :empty does not match it (the
is a child) * and targeting the
only hides the
, leaving the paragraph's line box behind - * so the paragraph itself has to be the subject, via :has(). */ .charitable-text-block-container > p:last-child:empty { display: none; } /* Separate rule on purpose: a browser that cannot parse :has() discards the whole selector list it appears in, which would take the :empty rule above with it. */ .charitable-text-block-container > p:last-child:has( > br:only-child ) { display: none; } /** * Base font size. * * @since 1.8.19.1 * * --charitable-font-size-base was emitted from the first build but consumed by NOTHING, * so the Base Font Size control in Visual Style silently did nothing - the exact * emitted-but-unconsumed trap this codebase has hit before. The default is 16px, which is * already what the form computes, so this rule changes nothing until the control is set. */ .charitable-visual-donation-form.charitable-typography-custom { font-size: var(--charitable-font-size-base); } /** * Keep the Visual Style label controls off things that are not field labels. * * @since 1.8.19.1 * * `.charitable-visual-donation-form label` has always set colour and size from * --charitable-label-color / --charitable-label-font-size, but until 1.8.19.1 nothing * could set those variables, so the selector's over-reach was invisible. Giving * customers the controls exposed it: gateway choices ("Stripe", "Offline Donation") * and the suggested-amount options are