.elementor-13 .elementor-element.elementor-element-82e2620{text-align:center;font-family:"Kalam", Sans-serif;font-size:38px;}/* Start custom CSS */body.elementor-page-13 { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .crm-checkout-message { font-size: max(1.5rem, 2vw); } #stripe-embed-container iframe { /* Match border radius of widget in frame */ border-radius: 1rem; box-shadow: -6px -6px 8px 0 rgba(127, 170, 55, 0.5) inset, 7px 7px 12px 0 rgba(220, 235, 194, 0.4) inset, 6px 6px 14px 0 rgba(127, 170, 55, 0.5), -3px -3px 12px 0 rgba(220, 235, 194, 0.4); /*mix-blend-mode: screen;*/ } html { scroll-snap-type: y mandatory; scroll-snap-stop: always; } .crm-public-footer { display: none !important; } /* Top-scope: kill select2 arrow globally on CiviCRM pages */ #crm-container .select2-arrow { display: none !important; } /* Top-scope: multi-select close button — kill sprite, use FA X */ #crm-container .select2-search-choice-close { background-image: none !important; background: none !important; width: auto !important; height: auto !important; font-size: 0; } #crm-container .select2-search-choice-close::before { content: "\f00d"; font-family: var(--fa-style-family, "Font Awesome 6 Free", "Font Awesome 6 Brands"); font-weight: var(--fa-style, 900); font-size: 0.7rem; color: #c62828; opacity: 0.5; transition: opacity 0.15s; } #crm-container .select2-search-choice-close:hover::before { opacity: 1; } /* Top-scope: select2 multi-select dropdown results panel. The dropdown (#select2-drop) attaches to , OUTSIDE #bootstrap-theme, so it must be styled at top scope — same reason the arrow and close-button rules are up here. Fonts/colors pulled from Elementor globals directly since it does not inherit --written-font-size from #bootstrap-theme. */ #select2-drop.crm-container { background-color: #F2EFE6; border: 1px solid rgba(63, 63, 70, 0.2); border-radius: 4px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden; } #select2-drop.crm-container .select2-results { margin: 0; padding: 0.25rem; } #select2-drop.crm-container .select2-results .select2-result-label { font-family: var(--e-global-typography-text-font-family, sans-serif); font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem); color: var(--e-global-color-text, #1A1A1A); padding: 0.5rem 0.75rem; border-radius: 4px; transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1); } /* Highlighted (keyboard/hover) option — brass tint, not browser blue */ #select2-drop.crm-container .select2-results .select2-highlighted .select2-result-label { background-color: color-mix(in srgb, var(--e-global-color-primary, #C9952A) 15%, transparent); color: var(--e-global-color-text, #1A1A1A); } @keyframes crm-bobbing { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -100%); } } #crm-container.crm-public #bootstrap-theme { /* Inherit Elementor global styles */ font-family: var(--e-global-typography-text-font-family, sans-serif); color: var(--e-global-color-text, #1A1A1A); --written-font-size: clamp(1.2rem, 1.5rem + 0.5vw, 3rem); --field-height: calc(1rem + var(--written-font-size)); /* Get rid of form group-specific margin*/ .form-group { margin: 0; width: 100%; } /* Layout 1 - rows */ .af-container, .af-container div:has(af-field), .af-container ng-transclude:has(af-field) { display: flex; flex-direction: column; gap: var(--crm-flex-gap); } /* Layout 2 - cols */ .af-container.af-layout-cols, .af-container.af-layout-cols div:has(af-field), .af-container.af-layout-cols ng-transclude:has(af-field) { flex: 1; flex-direction: row; display: flex; /*gap: 2rem;*/ justify-content: space-evenly; } /* Layout 3 - inline */ .af-container.af-layout-inline, .af-container.af-layout-inline div:has(af-field), .af-container.af-layout-inline ng-transclude:has(af-field) { flex-wrap: wrap; flex-direction: row; display: flex; justify-content: space-between; width: 100%; } /* Repeaters with multiple items */ div[af-repeat]:has(>div:nth-of-type(2)) { flex-wrap: nowrap; overflow-x: scroll; /* Delineate repeated items */ div[af-repeat-item="item"] { inline-size: min-content; background-color: rgba(255, 255, 255, 0.5); border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); padding: 2rem; } } .af-repeat-add-btn { align-self: center; } .af-repeat-remove-btn { padding: var(--crm-l-medium, 0.5rem) var(--crm-l-reg, 1rem); i.crm-i { width: auto; padding: 0 !important; min-width: 1rem; height: auto !important; } } .af-container-style-pane { /* Use this style for all pseudo-pages */ background-color: transparent; border-radius: 0; box-shadow: none; position: relative; padding: 2rem; padding-top: 100px !important; max-width: 100vw; /*pseudo-page takes up entire height if available*/ min-height: 100vh; padding-inline: 10vh; /*scroll-snap-align: start;*/ scroll-snap-align: start; /*Allow direct children to float when theres space*/ /*align-items: center;*/ justify-content: space-evenly; align-content: center; /*customize field spacing*/ --crm-flex-gap: max(3rem, 5%); &>.af-title { z-index: -1; background-color: transparent; color: var(--e-global-color-primary); border: none; position: absolute; top: 0; width: 100%; padding: var(--crm-l-medium, 0.5rem) var(--crm-l-reg, 1rem); margin-top: 0; text-align: center; font-size: min(10vh, 10vw); font-family: var(--font-heading); font-weight: 700; font-size: var(--size-xxl); letter-spacing: 0.02em; line-height: 1em; text-transform: uppercase; margin-block-end: 15px; } /* The whole container around a field and its labels */ af-field { max-width: 40rem; min-width: 20rem; display: flex; flex-direction: column; /* Push label/pre-help to top, post-help to bottom, and center the input wrapper */ .crm-af-field { margin-top: auto; margin-bottom: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; /* Universal field height */ min-height: var(--field-height); /* Line always at bottom */ align-items: end; .crm-form-date-wrapper { /* Make sure it fills the field */ width: 100%; } } label { font-family: var(--e-global-typography-primary-font-family, inherit); font-size: clamp(0.875rem, 0.85rem + 0.5vw, 3rem); } /* Only show these when focused */ label .crm-marker[title="Required"] { opacity: 0.45; } .crm-af-field-help-post { height: 0; transition: height 0.5s; display: none; } &:focus-within .crm-af-field-help-post { height: 1rem; display: block; } &:focus-within label .crm-marker[title="Required"] { opacity: 1; } } /* Floating hint to scroll down when ready */ &:not(:has(.ng-invalid-required)):not(:has(.af-button[ng-click="afform.submit()"]))::before { content: "\f103"; display: block; position: absolute; color: var(--e-global-color-primary); opacity: 0.5; bottom: 1rem; left: 50%; transform: translateX(-50%); font-size: 38px; font-family: "FontAwesome"; font-weight: bolder; animation: crm-bobbing 2s ease-in-out infinite; } /* Floating hint to scroll down when ready */ &:not(:has(.ng-invalid)):not(:has(.af-button[ng-click="afform.submit()"]))::before { color: var(--e-global-color-primary); opacity: 1; } } input[type="text"].form-control, input[type="email"].form-control, input[type="number"].form-control, input[type="tel"].form-control, textarea.form-control, .select2-container.form-control, .select2-choice.form-control { width: 100%; border-style: none; background-color: transparent; /* Don't pad here */ padding: 0.5rem; font-size: var(--written-font-size); line-height: calc(var(--written-font-size) * 1.5); min-height: calc(var(--written-font-size) * 1.2); --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: 0 0 #0000, 0 0 #0000; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; color: black; border-radius: 0; border-bottom: 1px solid black; font-family: var(--e-global-typography-text-font-family, sans-serif); font-weight: 400; } input[type="text"].form-control:focus, input[type="email"].form-control:focus, input[type="number"].form-control:focus, input[type="tel"].form-control:focus, textarea.form-control:focus, .select2-container-active.form-control { border-bottom: 2px solid var(--e-global-color-primary, rgba(63, 63, 70, 0.8)) !important; margin-bottom: -1px; box-shadow: none !important; } .select2-choice { min-height: calc(var(--written-font-size) * 1.2); text-decoration: none !important; color: black !important; &:not(.select2-default) .select2-chosen { font-family: var(--e-global-typography-text-font-family, sans-serif); font-weight: 400; } } .select2-default { color: rgba(85, 85, 85, 0.5) !important; } .select2-chosen { line-height: calc(var(--written-font-size) * 1.5); font-size: var(--written-font-size); font-family: var(--e-global-typography-text-font-family, sans-serif); } .select2-container { padding-bottom: 0; } /* Exact HeyForm Chip styling for radio buttons */ .crm-af-field label.radio-inline { display: inline-flex; align-items: center; justify-content: flex-start; padding: 0.5rem 1rem; margin: 0 !important; border: none; border-radius: 4px; background-color: rgba(63, 63, 70, 0.1); color: var(--e-global-color-text, rgb(63, 63, 70)); box-shadow: inset 0 0 0 1px rgba(63, 63, 70, 0.6); font-family: var(--e-global-typography-text-font-family, inherit); font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem); cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; } .crm-af-field label.radio-inline:hover { background-color: rgba(63, 63, 70, 0.2); } .crm-af-field label.radio-inline:has(input[type="radio"]:checked) { /* Mix 15% of the primary brand color with transparent for a subtle active background */ background-color: color-mix(in srgb, var(--e-global-color-primary, rgba(63, 63, 70, 1)) 15%, transparent); box-shadow: inset 0 0 0 2px var(--e-global-color-primary, rgba(63, 63, 70, 0.8)); } .crm-af-field label.radio-inline input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } /* Style the clear button to be just an X until hovered */ .crm-af-field a.crm-hover-button[title="Clear"] { /* give a little room in case hover */ padding: 0.2rem; /* Make it a round button */ border-radius: 200%; color: #2e7d32; font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem); cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; /* Visible but subtle at rest */ opacity: 0.6; align-self: center; /* Make it a check until needed */ i.crm-i.fa-times::before { content: "\f00c"; } } .select2-container .select2-choice abbr { height: auto; width: auto; background: none; /* give a little room in case hover */ padding: 0.2rem; /* Make it a round button */ border-radius: 200%; align-self: center; right: 0; &::before { color: #2e7d32; font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem); content: "\f00c"; font-family: var(--fa-style-family, "Font Awesome 6 Free", "Font Awesome 6 Brands"); font-weight: var(--fa-style, 900); opacity: 0.6; cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; } &:hover::before { content: "\f00d"; opacity: 1; color: #c62828; } } .crm-form-date-wrapper { display: flex; input { display: inline-block; } } .crm-form-date-wrapper:has(.crm-clear-link:hover) input { text-decoration-line: line-through; } .crm-af-field:hover a.crm-hover-button[title="Clear"], .crm-af-field:focus-within a.crm-hover-button[title="Clear"] { opacity: 1; } .crm-af-field a.crm-hover-button[title="Clear"]:hover, .crm-af-field a.crm-hover-button[title="Clear"]:focus { /* Back to X */ .crm-i.fa-times::before { content: "\f00d"; } background-color: rgba(63, 63, 70, 0.15) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(63, 63, 70, 0.6) !important; opacity: 1 !important; color: #c62828 !important; } .select2-container.form-control { width: 100% !important; } .select2-container .select2-choice { border-style: none; background-color: transparent; background-image: none; padding: 0; } .select2-container-active .select2-choice, .select2-container-active .select2-choices { box-shadow: none !important; -webkit-box-shadow: none !important; background-color: transparent !important; background-image: none !important; } /* Multi-select containers — match single-select look */ .select2-container-multi .select2-choices { background-color: transparent; background-image: none; border: none; box-shadow: none; padding: 0; min-height: var(--field-height); } .select2-container-multi .select2-choices .select2-search-field input.select2-input { font-family: var(--e-global-typography-text-font-family, sans-serif); font-size: var(--written-font-size); color: black; padding: 0.5rem; margin: 0; background: transparent !important; } .select2-container-multi .select2-choices .select2-search-field input.select2-default { color: rgba(85, 85, 85, 0.5) !important; } /* Selected tags in multi-select */ .select2-container-multi .select2-choices .select2-search-choice { position: relative; background-color: color-mix(in srgb, var(--e-global-color-primary, #C9952A) 15%, transparent); border: 1px solid var(--e-global-color-primary, #C9952A); border-radius: 4px; padding: 0.25rem 1.5rem 0.25rem 0.5rem; font-family: var(--e-global-typography-text-font-family, sans-serif); font-size: clamp(0.875rem, 0.85rem + 0.3vw, 1.25rem); color: var(--e-global-color-text, #1A1A1A); box-shadow: none; background-image: none; } /* Remove button on selected tags — top right (positioned by top-scope rules) */ .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close { position: absolute; top: 2px; right: 4px; left: auto; } /* ============================================================ NEW: Dollar sign prefix on money fields Catches Pledge Amount (text) and contribution/donation *amount* fields (number). Scoped to input.form-control to exclude radio buttons (e.g. membership-type-amount) which carry class crm-form-radio, not form-control. ============================================================ */ .crm-af-field:has(input.form-control[id*="amount"]) { display: flex; flex-wrap: nowrap !important; align-items: end; } .crm-af-field:has(input.form-control[id*="amount"])::before { content: "$"; font-size: var(--written-font-size); font-family: var(--e-global-typography-text-font-family, sans-serif); font-weight: 400; line-height: calc(var(--written-font-size) * .6); padding: 0 0.25rem 0.5rem 0; color: var(--e-global-color-text, #1A1A1A); opacity: 0.5; border-bottom: 1px solid black; align-self: end; } .crm-af-field:has(input.form-control[id*="amount"]):focus-within::before { opacity: 1; border-bottom: 2px solid var(--e-global-color-primary, rgba(63, 63, 70, 0.8)); margin-bottom: -1px; } /* ============================================================ Checkbox list — chip style (DORMANT fallback) Not used on the Big Give form (that field is now a select2 multi-select, styled below). Kept for any future form that uses a native checkbox list. Kills CiviCRM's default .crm-container ul.crm-checkbox-list box (width 300px, max-height 300px, overflow-y auto, white bg, border). NOTE: a native checkbox list has a known focus-jump inside the scroll-snap pane (label for=/id= focus scrolls the page). Prefer a select2 multi-select over a checkbox list on this site until that is solved with JS. ============================================================ */ ul.crm-checkbox-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; width: auto !important; max-width: 100% !important; max-height: none !important; overflow-y: visible !important; background-color: transparent !important; border: none !important; } ul.crm-checkbox-list li { display: contents; } ul.crm-checkbox-list li label { display: inline-flex; align-items: center; justify-content: flex-start; padding: 0.5rem 1rem; margin: 0 !important; border: none; border-radius: 4px; background-color: rgba(63, 63, 70, 0.1); color: var(--e-global-color-text, rgb(63, 63, 70)); box-shadow: inset 0 0 0 1px rgba(63, 63, 70, 0.6); font-family: var(--e-global-typography-text-font-family, inherit); font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem); cursor: pointer; transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; } ul.crm-checkbox-list li label:hover { background-color: rgba(63, 63, 70, 0.2); } ul.crm-checkbox-list li label:has(input[type="checkbox"]:checked) { background-color: color-mix(in srgb, var(--e-global-color-primary, rgba(63, 63, 70, 1)) 15%, transparent); box-shadow: inset 0 0 0 2px var(--e-global-color-primary, rgba(63, 63, 70, 0.8)); } ul.crm-checkbox-list li input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; outline: none !important; pointer-events: none; } /* Modernize all buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 4px; font-family: var(--e-global-typography-primary-font-family, inherit); font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); border: none !important; background-image: none !important; text-shadow: none !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; } /* Primary actions (Save, Submit, Next) */ .btn-primary, .btn-success, .btn-info { background-color: var(--e-global-color-primary, #C9952A) !important; color: white !important; } .btn-primary:hover, .btn-success:hover, .btn-info:hover { background-color: color-mix(in srgb, var(--e-global-color-primary, #C9952A) 80%, black) !important; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; } /* Secondary actions (Reset, Add/Remove Repeat) */ .btn-warning, .btn-default, .btn-sm { background-color: rgba(63, 63, 70, 0.1) !important; color: var(--e-global-color-text, #1A1A1A) !important; box-shadow: none !important; } .btn-warning:hover, .btn-default:hover, .btn-sm:hover { background-color: rgba(63, 63, 70, 0.2) !important; } /* Toggle switches */ input.crm-form-toggle { cursor: pointer; background-color: rgba(63, 63, 70, 0.2); border: 2px solid rgba(63, 63, 70, 0.3); transition: all 0.2s ease; } input.crm-form-toggle:hover { background-color: rgba(63, 63, 70, 0.3); } input.crm-form-toggle:checked { background-color: var(--e-global-color-primary, #C9952A) !important; border-color: var(--e-global-color-primary, #C9952A) !important; } input.crm-form-toggle:checked:hover { background-color: color-mix(in srgb, var(--e-global-color-primary, #C9952A) 85%, black) !important; border-color: color-mix(in srgb, var(--e-global-color-primary, #C9952A) 85%, black) !important; } input.crm-form-toggle:focus, input.crm-form-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-global-color-primary, #C9952A) 30%, transparent) !important; } } /* Confirmation message — constrain width and center */ .afform-confirmation { max-width: 600px; width: 100%; margin: 0 auto; }/* End custom CSS */