PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.12.2
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.12.2
1.8.13.1 1.8.13 1.8.12.3 1.8.12.2 1.8.12.1 1.8.12 1.8.11.3 1.8.11.2 1.8.11.1 1.8.11 1.6.6 1.6.60 1.6.7 1.6.8 1.6.9 1.7.0 1.7.0.1 1.7.0.11 1.7.0.12 1.7.0.14 1.7.0.2 1.7.0.3 1.7.0.5 1.7.0.6 1.7.0.7 All 212 releases
charitable / assets / css / campaign-builder / builder-preview.css

builder-preview.css in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.12.2, at assets/css/campaign-builder/builder-preview.css

1,319 lines 44.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #charitable-design-wrap {
2 /* description */
3 /* progress */
4 /* donate amount */
5 /* sharing options */
6 /* campaign summary */
7 /* info bar */
8 /* button */
9 /* html */
10 /* donation form */
11 /* donation options */
12 /* donor wall */
13 /* organizer */
14 /* photo */
15 /* video */
16 /* generic container */
17 /* header specific */
18 /* row specific? */
19 /* article specific */
20 /* headlines */
21 /* alignment in preview */
22 /* Recurring Donations */
23 }
24 #charitable-design-wrap.no-fields-mode {
25 position: relative;
26 }
27 #charitable-design-wrap.no-fields-mode .charitable-campaign-preview.charitable-campaign-preview-container {
28 min-height: 600px;
29 z-index: 1;
30 position: relative;
31 background-color: transparent;
32 }
33 #charitable-design-wrap.no-fields-mode .charitable-campaign-preview.charitable-campaign-preview-container .charitable-field-wrap {
34 padding: 0;
35 }
36 #charitable-design-wrap.no-fields-mode .charitable-campaign-preview.charitable-campaign-preview-container .charitable-preview-row .charitable-field-wrap {
37 min-height: 400px;
38 }
39 #charitable-design-wrap.no-fields-mode .charitable-campaign-preview.charitable-campaign-preview-container .charitable-preview-header .charitable-field-wrap {
40 min-height: 200px;
41 }
42 #charitable-design-wrap.loading {
43 position: relative;
44 }
45 #charitable-design-wrap.loading i {
46 display: inline-block;
47 height: 50px;
48 width: 50px;
49 background-size: 50px 50px;
50 margin-top: calc(50% + 25px);
51 margin-left: calc(50% - 25px);
52 }
53 #charitable-design-wrap.loading .charitable-campaign-preview-loader {
54 height: 100%;
55 width: 100%;
56 position: absolute;
57 z-index: 9;
58 background-color: #fff;
59 opacity: 0.8;
60 display: block;
61 }
62 #charitable-design-wrap .charitable-drag-new-block-here {
63 display: none;
64 }
65 #charitable-design-wrap .charitable-field-target {
66 border-width: 3px;
67 border-color: rgba(0, 0, 0, 0.15);
68 border-style: dashed;
69 position: relative;
70 min-height: 600px;
71 }
72 #charitable-design-wrap .charitable-field-target .charitable-drag-new-block-here {
73 display: block;
74 position: absolute;
75 top: 50%;
76 bottom: auto;
77 left: 0;
78 right: 0;
79 text-align: center;
80 height: 100%;
81 }
82 #charitable-design-wrap .charitable-field-target .charitable-drag-new-block-here p {
83 font-weight: 700;
84 font-size: 18px;
85 line-height: 18px;
86 color: black;
87 }
88 #charitable-design-wrap .charitable-preview-notice * {
89 color: black;
90 }
91 #charitable-design-wrap .charitable-campaign-preview-loader {
92 display: none;
93 }
94 #charitable-design-wrap .charitable-campaign-preview.charitable-campaign-preview-container {
95 background-color: #ffffff;
96 padding: 0;
97 }
98 #charitable-design-wrap .row {
99 display: flex;
100 flex-direction: row;
101 flex-wrap: wrap;
102 width: 100%;
103 }
104 #charitable-design-wrap .column {
105 display: flex;
106 flex-direction: column;
107 flex-basis: 100%;
108 flex: 1;
109 }
110 #charitable-design-wrap .no-padding {
111 padding: 0;
112 background-color: transparent;
113 }
114 #charitable-design-wrap .placeholder {
115 padding: 10px;
116 }
117 #charitable-design-wrap .placeholder.one-icon-centered,
118 #charitable-design-wrap .placeholder div.one-icon-centered {
119 display: flex;
120 }
121 #charitable-design-wrap .placeholder.one-icon-centered i,
122 #charitable-design-wrap .placeholder div.one-icon-centered i {
123 margin: auto;
124 display: table;
125 text-align: center;
126 height: 100%;
127 font-size: 500%;
128 width: 100%;
129 opacity: 0.55;
130 color: #2d2d2d;
131 }
132 #charitable-design-wrap .placeholder.charitable-loading {
133 opacity: 0.35;
134 }
135 #charitable-design-wrap .placeholder .charitable-campaign-builder-placeholder-preview-text {
136 max-height: 550px;
137 }
138 #charitable-design-wrap .charitable-campaign-builder-placeholder-preview-text {
139 opacity: 0.35;
140 overflow: hidden;
141 }
142 #charitable-design-wrap .charitable-prevent-select {
143 -webkit-user-select: none; /* Safari */
144 -ms-user-select: none; /* IE 10 and IE 11 */
145 user-select: none; /* Standard syntax */
146 pointer-events: none;
147 }
148 #charitable-design-wrap .charitable-hover-button {
149 background-color: #036aab;
150 display: none;
151 color: #ffffff;
152 position: absolute;
153 top: 0;
154 right: 0;
155 width: auto;
156 }
157 #charitable-design-wrap .charitable-hover-button i {
158 font-size: 14px;
159 padding: 5px;
160 }
161 #charitable-design-wrap .charitable-campaign-builder-no-description-preview {
162 padding: 25px;
163 display: inline-block;
164 }
165 #charitable-design-wrap .charitable-campaign-builder-no-description-preview i {
166 font-size: 60px;
167 line-height: 60px;
168 display: block;
169 float: left;
170 color: #e27730;
171 }
172 #charitable-design-wrap .charitable-campaign-builder-no-description-preview p {
173 margin: 0;
174 padding: 0;
175 }
176 #charitable-design-wrap .charitable-campaign-builder-no-description-preview div {
177 float: left;
178 margin-left: 25px;
179 color: #2d2d2d;
180 }
181 #charitable-design-wrap .charitable-campaign-builder-no-description-preview div h2 {
182 margin-top: 0;
183 margin-bottom: 0;
184 font-size: 32px;
185 line-height: 42px;
186 font-weight: 800;
187 color: #e27730;
188 }
189 #charitable-design-wrap .progress {
190 padding: 5px;
191 margin: 5px;
192 border-radius: 4px;
193 border-color: #b6b6b6;
194 background-color: #ffffff;
195 border-width: 1px;
196 border-style: solid;
197 }
198 #charitable-design-wrap .progress .progress-bar {
199 height: 16px;
200 width: 50%;
201 border-radius: 4px;
202 background-color: #2d2d2d;
203 -webkit-transition: 0.4s linear;
204 -moz-transition: 0.4s linear;
205 -o-transition: 0.4s linear;
206 transition: 0.4s linear;
207 -webkit-transition-property: width, background-color;
208 -moz-transition-property: width, background-color;
209 -o-transition-property: width, background-color;
210 transition-property: width, background-color;
211 opacity: 0.35;
212 }
213 #charitable-design-wrap .progress-bar-info-row {
214 display: table;
215 width: 100%;
216 font-size: 14px;
217 line-height: 21px;
218 opacity: 0.35;
219 }
220 #charitable-design-wrap .progress-bar-info-row .campaign-percent-raised {
221 width: 45%;
222 float: left;
223 font-weight: 700;
224 padding-left: 0px;
225 }
226 #charitable-design-wrap .progress-bar-info-row .campaign-goal {
227 width: 45%;
228 float: right;
229 text-align: right;
230 padding-right: 0px;
231 }
232 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options {
233 margin-top: 10px;
234 }
235 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts {
236 display: flex;
237 flex-wrap: wrap;
238 justify-content: space-between;
239 }
240 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount {
241 color: white;
242 flex: 0 0 25%;
243 background-color: transparent;
244 padding: 5px;
245 text-align: center;
246 display: table;
247 min-height: 75px;
248 }
249 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount input[type=radio] {
250 display: none;
251 }
252 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount .amount {
253 font-weight: 400;
254 }
255 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount .description {
256 display: block;
257 margin-top: 4px;
258 font-size: 0.85em;
259 line-height: 1.3;
260 color: var(--charitable_campaign_theme_tertiary);
261 }
262 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount > label {
263 display: table-cell;
264 width: 100%;
265 border: 1px solid #ddd;
266 padding: 0;
267 min-height: 75px;
268 vertical-align: middle;
269 margin: 0;
270 font-size: 14px;
271 cursor: pointer;
272 font-weight: 400;
273 }
274 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount.custom-donation-amount {
275 flex-basis: 100%;
276 min-height: auto;
277 }
278 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount.custom-donation-amount label {
279 display: none;
280 }
281 #charitable-design-wrap .charitable-field-donate-amount .charitable-preview-donation-options .charitable-preview-donation-amounts .charitable-preview-donation-amount.custom-donation-amount input[type=text] {
282 background: transparent;
283 border: 1px solid white !important;
284 color: white;
285 width: 100%;
286 border: 0;
287 pointer-events: none;
288 }
289 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-field-row,
290 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-field-row {
291 width: 100%;
292 margin-bottom: 10px;
293 display: table;
294 }
295 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column,
296 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column {
297 display: inline-block;
298 }
299 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column .charitable-placeholder,
300 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column .charitable-placeholder {
301 background-repeat: no-repeat;
302 background-position: center;
303 background-size: contain;
304 min-height: auto;
305 opacity: 0.5;
306 }
307 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-twitter .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-twitter .charitable-placeholder,
308 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-twitter .charitable-placeholder,
309 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-twitter .charitable-placeholder {
310 background-image: url("../../images/campaign-builder/fields/social-sharing/twitter.svg");
311 }
312 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-facebook .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-facebook .charitable-placeholder,
313 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-facebook .charitable-placeholder,
314 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-facebook .charitable-placeholder {
315 background-image: url("../../images/campaign-builder/fields/social-sharing/facebook.svg");
316 }
317 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-instagram .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-instagram .charitable-placeholder,
318 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-instagram .charitable-placeholder,
319 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-instagram .charitable-placeholder {
320 background-image: url("../../images/campaign-builder/fields/social-sharing/instagram.svg");
321 }
322 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-linkedin .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-linkedin .charitable-placeholder,
323 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-linkedin .charitable-placeholder,
324 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-linkedin .charitable-placeholder {
325 background-image: url("../../images/campaign-builder/fields/social-sharing/linkedin.svg");
326 }
327 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-tiktok .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-tiktok .charitable-placeholder,
328 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-tiktok .charitable-placeholder,
329 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-tiktok .charitable-placeholder {
330 background-image: url("../../images/campaign-builder/fields/social-sharing/tiktok.svg");
331 }
332 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-pinterest .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-pinterest .charitable-placeholder,
333 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-pinterest .charitable-placeholder,
334 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-pinterest .charitable-placeholder {
335 background-image: url("../../images/campaign-builder/fields/social-sharing/pinterest.svg");
336 }
337 #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-sharing-preview-mastodon .charitable-placeholder, #charitable-design-wrap .charitable-field-preview-social-sharing .charitable-social-field-column.charitable-social-linking-preview-mastodon .charitable-placeholder,
338 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-sharing-preview-mastodon .charitable-placeholder,
339 #charitable-design-wrap .charitable-field-preview-social-linking .charitable-social-field-column.charitable-social-linking-preview-mastodon .charitable-placeholder {
340 background-image: url("../../images/campaign-builder/fields/social-sharing/mastodon.svg");
341 }
342 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div,
343 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div {
344 text-align: center;
345 min-height: 30px;
346 margin-left: 10px;
347 margin-right: 10px;
348 vertical-align: middle;
349 }
350 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div span,
351 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div span {
352 height: 20px;
353 width: 66%;
354 display: block;
355 margin: 5px auto;
356 }
357 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div span:nth-child(2),
358 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div span:nth-child(2) {
359 width: 33%;
360 }
361 #charitable-design-wrap .charitable-field-preview-social-sharing div.charitable-field-row div:first-of-type,
362 #charitable-design-wrap .charitable-field-preview-social-linking div.charitable-field-row div:first-of-type {
363 margin-left: 5px;
364 }
365 #charitable-design-wrap .charitable-field-preview-campaign-summary {
366 padding-left: 20px;
367 padding-right: 20px;
368 }
369 #charitable-design-wrap .charitable-field-preview-campaign-summary .campaign-summary-item {
370 float: left;
371 width: 50%;
372 border-bottom: 1px solid #e6e6e6;
373 opacity: 0.35;
374 }
375 #charitable-design-wrap .charitable-field-preview-campaign-summary .amount,
376 #charitable-design-wrap .charitable-field-preview-campaign-summary .donors-count {
377 display: block;
378 font-size: 1.5em;
379 font-weight: bolder;
380 color: #e27730;
381 line-height: 1.7em;
382 }
383 #charitable-design-wrap .charitable-field-preview-info-bar .row {
384 width: 100%;
385 }
386 #charitable-design-wrap .charitable-field-preview-info-bar .column {
387 align-items: center;
388 justify-content: center;
389 }
390 #charitable-design-wrap .charitable-field-preview-info-bar div {
391 text-align: center;
392 background-color: #f8f8f8;
393 min-height: 60px;
394 vertical-align: middle;
395 }
396 #charitable-design-wrap .charitable-field-preview-info-bar div span {
397 height: 10px;
398 width: 66%;
399 display: block;
400 margin: 5px auto;
401 }
402 #charitable-design-wrap .charitable-field-preview-info-bar div span:nth-child(2) {
403 width: 33%;
404 }
405 #charitable-design-wrap .charitable-field-preview-donate-button .row {
406 width: 100%;
407 }
408 #charitable-design-wrap .charitable-field-preview-donate-button .column {
409 align-items: center;
410 justify-content: center;
411 }
412 #charitable-design-wrap .charitable-field-preview-donate-button div {
413 text-align: center;
414 background-color: transparent;
415 vertical-align: middle;
416 }
417 #charitable-design-wrap .charitable-field-preview-donate-button div span.button {
418 background: #00a32a;
419 border-color: #00a32a;
420 border-width: 1px;
421 min-height: 40px;
422 width: 90%;
423 display: block;
424 margin: 5px auto;
425 opacity: 0.2;
426 }
427 #charitable-design-wrap .charitable-field-preview-donate-button div .charitable-placeholder {
428 color: #ffffff;
429 font-weight: 700;
430 font-size: 16px;
431 line-height: 35px;
432 }
433 #charitable-design-wrap .charitable-field-preview-html span.placeholder {
434 min-height: 30px;
435 width: 100%;
436 display: table;
437 margin: 0 0 5px 0;
438 font-size: 18px;
439 line-height: 19px;
440 font-weight: 400;
441 background-color: #f6f6f6;
442 }
443 #charitable-design-wrap .charitable-field-preview-html span.placeholder p {
444 padding: 5px 25px;
445 font-size: 16px;
446 line-height: 18px;
447 font-weight: 400;
448 }
449 #charitable-design-wrap .charitable-field-preview-html span.placeholder h6 {
450 margin: 0;
451 font-weight: 600;
452 padding: 15px 25px 5px 25px;
453 font-size: 16px;
454 line-height: 18px;
455 }
456 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.charitable-form-placeholder {
457 width: 100% !important;
458 }
459 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span,
460 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder {
461 width: 100%;
462 min-height: 100px;
463 background-color: #f6f6f6;
464 }
465 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span p,
466 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder p {
467 padding: 5px 25px;
468 font-size: 16px;
469 line-height: 18px;
470 font-weight: 400;
471 }
472 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span h6,
473 #charitable-design-wrap .charitable-field-donation-form .charitable-preview-field-container span.placeholder h6 {
474 margin: 0;
475 font-weight: 600;
476 padding: 15px 25px 5px 25px;
477 font-size: 16px;
478 line-height: 18px;
479 }
480 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview,
481 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview {
482 min-height: 30px;
483 background-color: #f6f6f6;
484 width: 100%;
485 display: block;
486 margin: 0 0 5px 0;
487 padding: 10px;
488 }
489 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview h5,
490 #charitable-design-wrap .charitable-field-preview-donation-options .shortcode-preview h5.charitable-field-preview-headline,
491 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview h5,
492 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview h5.charitable-field-preview-headline {
493 font-weight: 500;
494 font-size: 18px;
495 line-height: 18px;
496 padding: 10px;
497 margin: 0;
498 }
499 #charitable-design-wrap .charitable-field-preview-shortcode .shortcode-preview {
500 display: flex;
501 flex-wrap: wrap;
502 align-content: center;
503 margin: 0 0 0 0;
504 padding: 10px;
505 }
506 #charitable-design-wrap .charitable-field-donation-wall .charitable-field-donation-wall-placeholder {
507 display: table;
508 background-color: transparent;
509 width: 100%;
510 }
511 #charitable-design-wrap .charitable-field-donation-wall ol {
512 display: grid;
513 grid-column-gap: 50px;
514 grid-template-columns: repeat(3, auto);
515 justify-content: space-between;
516 padding: 10px 10px 10px 10px;
517 margin: 0;
518 }
519 #charitable-design-wrap .charitable-field-donation-wall ol li {
520 display: inline-block;
521 text-align: center;
522 padding: 0;
523 }
524 #charitable-design-wrap .charitable-field-donation-wall ol li p {
525 font-weight: 500;
526 font-size: 14px;
527 margin: 0;
528 padding: 0;
529 }
530 #charitable-design-wrap .charitable-field-donation-wall ol li img {
531 max-width: 100px;
532 }
533 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-vertical {
534 margin-left: auto;
535 margin-right: auto;
536 display: table;
537 }
538 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-vertical li {
539 display: block;
540 margin-bottom: 10px;
541 }
542 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-horizontal {
543 margin-left: auto;
544 margin-right: auto;
545 display: table;
546 }
547 #charitable-design-wrap .charitable-field-donation-wall ol.donors-list-horizontal li {
548 display: inline-block;
549 margin: 15px;
550 }
551 #charitable-design-wrap .charitable-unknown-field-headline {
552 color: red;
553 font-weight: 800;
554 }
555 #charitable-design-wrap .charitable-preview-field-unknown {
556 color: red;
557 }
558 #charitable-design-wrap .charitable-preview-field-unknown .placeholder {
559 border-color: red !important;
560 border-width: 5px;
561 color: red;
562 border-style: dashed;
563 background-color: transparent !important;
564 text-align: center;
565 font-weight: 600;
566 }
567 #charitable-design-wrap .charitable-preview-field-unknown .placeholder strong {
568 font-weight: 900;
569 }
570 #charitable-design-wrap .charitable-preview-field-container {
571 overflow: hidden;
572 }
573 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container {
574 margin-top: 20px;
575 margin-bottom: 20px;
576 display: table;
577 width: auto;
578 word-wrap: anywhere;
579 }
580 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column {
581 display: table-cell;
582 vertical-align: middle;
583 width: 90px;
584 text-align: center;
585 }
586 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column .charitable-organizer-image {
587 border-radius: 50%;
588 background-color: black;
589 width: 75px;
590 height: 75px;
591 background-size: cover;
592 }
593 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info {
594 display: table-cell;
595 vertical-align: middle;
596 }
597 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .placeholder {
598 margin: 0;
599 padding: 0;
600 background-color: transparent;
601 }
602 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-title,
603 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-title h5.charitable-field-preview-headline {
604 margin: 0;
605 padding: 0;
606 font-size: 15px;
607 line-height: 25px;
608 font-weight: 400;
609 }
610 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info .charitable-organizer-name {
611 font-weight: 600;
612 font-size: 21px;
613 line-height: 31px;
614 }
615 #charitable-design-wrap .primary-image-container {
616 display: table;
617 width: 100%;
618 min-height: 250px;
619 margin: 0;
620 border-color: rgba(0, 0, 0, 0.15);
621 border-width: 1px;
622 border-style: solid;
623 /* images */
624 }
625 #charitable-design-wrap .primary-image-container img.charitable-campaign-builder-preview-photo {
626 max-width: 100%;
627 }
628 #charitable-design-wrap .primary-image-container .primary-image {
629 background-size: cover;
630 min-height: 200px;
631 width: 100%;
632 margin: 0;
633 background-position: center;
634 opacity: 1;
635 background-repeat: no-repeat;
636 -webkit-transition: background-color 1.2s ease-in-out;
637 transition: background-color 1.2s ease-in-out;
638 background-color: #F9F9F9;
639 display: table-cell;
640 vertical-align: middle;
641 text-align: center;
642 }
643 #charitable-design-wrap .primary-image-container i {
644 font-size: 42px;
645 line-height: 42px;
646 color: rgba(0, 0, 0, 0.15);
647 }
648 #charitable-design-wrap .primary-image-container.has-image {
649 min-height: auto;
650 border: 0;
651 }
652 #charitable-design-wrap .primary-image-container.has-image .primary-image {
653 background-color: transparent;
654 min-height: inherit;
655 }
656 #charitable-design-wrap .primary-image-container.has-image .primary-image img.temp-icon {
657 display: none;
658 }
659 #charitable-design-wrap .primary-video-container {
660 display: table;
661 width: 100%;
662 min-height: auto !important;
663 margin: 0;
664 border-color: rgba(0, 0, 0, 0.15);
665 border-width: 1px;
666 border-style: solid;
667 }
668 #charitable-design-wrap .primary-video-container .primary-video {
669 background-size: cover;
670 min-height: 200px;
671 width: 100%;
672 margin: 0;
673 background-position: center;
674 opacity: 1;
675 background-repeat: no-repeat;
676 -webkit-transition: background-color 1.2s ease-in-out;
677 transition: background-color 1.2s ease-in-out;
678 background-color: white;
679 display: table-cell;
680 vertical-align: middle;
681 text-align: center;
682 }
683 #charitable-design-wrap .primary-video-container .primary-video.charitable-video-has-thumbnail {
684 min-height: auto;
685 display: inline-block;
686 background-color: transparent;
687 width: auto;
688 display: block;
689 }
690 #charitable-design-wrap .primary-video-container .primary-video img {
691 max-width: 100%;
692 }
693 #charitable-design-wrap .primary-video-container i {
694 font-size: 42px;
695 line-height: 42px;
696 color: rgba(0, 0, 0, 0.15);
697 }
698 #charitable-design-wrap .primary-video-container.has-video {
699 min-height: auto;
700 border: 0;
701 }
702 #charitable-design-wrap .primary-video-container.has-video .primary-video {
703 background-color: transparent;
704 min-height: inherit;
705 }
706 #charitable-design-wrap .charitable-preview-align-left .primary-video {
707 margin-left: 0;
708 margin-right: auto;
709 }
710 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder {
711 width: 100%;
712 margin-left: auto;
713 margin-right: auto;
714 background-color: #f6f6f6;
715 height: auto;
716 max-height: auto;
717 min-height: 200px;
718 padding-top: 0;
719 padding-bottom: 0;
720 display: inline-block;
721 }
722 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder p {
723 padding: 5px 25px;
724 font-size: 16px;
725 line-height: 18px;
726 font-weight: 400;
727 }
728 #charitable-design-wrap .charitable-field .charitable-preview-field-container span.charitable-generic-placeholder h6 {
729 margin: 0;
730 font-weight: 600;
731 padding: 15px 25px 5px 25px;
732 font-size: 16px;
733 line-height: 18px;
734 }
735 #charitable-design-wrap header.charitable-preview-header .charitable-field-target {
736 min-height: 150px;
737 }
738 #charitable-design-wrap header .title-description,
739 #charitable-design-wrap div.charitable-preview-row .title-description {
740 margin: 0px 5px;
741 word-break: break-word;
742 }
743 #charitable-design-wrap header .title-description span,
744 #charitable-design-wrap div.charitable-preview-row .title-description span {
745 height: 10px;
746 width: 99%;
747 display: block;
748 margin: 0 0 5px 0;
749 }
750 #charitable-design-wrap header .title-description span:nth-child(2),
751 #charitable-design-wrap div.charitable-preview-row .title-description span:nth-child(2) {
752 width: 66%;
753 }
754 #charitable-design-wrap header .title-description span:nth-child(3),
755 #charitable-design-wrap div.charitable-preview-row .title-description span:nth-child(3) {
756 width: 33%;
757 }
758 #charitable-design-wrap header.no-padding .column,
759 #charitable-design-wrap div.charitable-preview-row.no-padding .column {
760 padding: 0;
761 background-color: transparent;
762 }
763 #charitable-design-wrap div.charitable-preview-row .charitable-field-column,
764 #charitable-design-wrap header.charitable-preview-header .charitable-field-column {
765 display: grid;
766 padding: 5px;
767 }
768 #charitable-design-wrap article {
769 border: 2px solid transparent;
770 position: relative;
771 }
772 #charitable-design-wrap article nav {
773 display: block;
774 width: 100%;
775 margin: 20px;
776 }
777 #charitable-design-wrap article nav li {
778 display: inline-block;
779 margin: 0 20px 0 0;
780 text-transform: uppercase;
781 font-weight: 500;
782 color: #2d2d2d;
783 padding-bottom: 0;
784 }
785 #charitable-design-wrap article nav li a {
786 text-decoration: none;
787 }
788 #charitable-design-wrap article nav li.active {
789 border-bottom: 1px solid #2d2d2d;
790 }
791 #charitable-design-wrap article nav li.active a {
792 /* border: 5px dotted red; */
793 }
794 #charitable-design-wrap article nav li.charitable-tab-hide {
795 display: none;
796 }
797 #charitable-design-wrap article nav.tab-style-boxed li {
798 border-radius: 0;
799 }
800 #charitable-design-wrap article nav.tab-style-rounded li {
801 border-radius: 35px;
802 }
803 #charitable-design-wrap article nav.tab-style-minimum li, #charitable-design-wrap article nav.tab-style-none li {
804 background-color: none;
805 }
806 #charitable-design-wrap article nav.tab-style-minimum li a, #charitable-design-wrap article nav.tab-style-none li a {
807 background-color: none;
808 color: black;
809 }
810 #charitable-design-wrap article nav.tab-size-small li {
811 font-size: 10px;
812 padding: 0;
813 }
814 #charitable-design-wrap article nav.tab-size-small li a {
815 font-size: 16px;
816 padding: 18px;
817 }
818 #charitable-design-wrap article nav.tab-size-medium li {
819 font-size: 14px;
820 padding: 0;
821 }
822 #charitable-design-wrap article nav.tab-size-medium li a {
823 font-size: 21px;
824 padding: 23px;
825 }
826 #charitable-design-wrap article nav.tab-size-large li {
827 font-size: 21px;
828 padding: 0;
829 }
830 #charitable-design-wrap article nav.tab-size-large li a {
831 font-size: 30px;
832 padding: 32px;
833 }
834 #charitable-design-wrap article .tab-content {
835 padding: 0;
836 }
837 #charitable-design-wrap article .tab-content ul {
838 margin: 20px;
839 }
840 #charitable-design-wrap article .tab-content ul li {
841 display: none;
842 }
843 #charitable-design-wrap article .tab-content ul li li {
844 display: block;
845 }
846 #charitable-design-wrap article .tab-content ul li.active {
847 display: block;
848 }
849 #charitable-design-wrap article .tab-content ul li .empty-tab-notice {
850 display: none;
851 }
852 #charitable-design-wrap article .tab-content ul li .no-tab-notice {
853 text-align: center;
854 }
855 #charitable-design-wrap article .tab-content ul li.empty-tab {
856 border-color: rgba(0, 0, 0, 0.15);
857 border-style: dashed;
858 }
859 #charitable-design-wrap article .tab-content ul li.empty-tab .empty-tab-notice {
860 display: block;
861 text-align: center;
862 margin: 0;
863 position: absolute;
864 top: 50%;
865 left: 50%;
866 transform: translate(-50%, -50%);
867 }
868 #charitable-design-wrap article .tab-content ul li a {
869 text-decoration: none;
870 }
871 #charitable-design-wrap article .tab-content ul li span {
872 /* background-color: $color_grey_background;
873 height: 10px; */
874 width: 99%;
875 display: block;
876 margin: 0 0 5px 0;
877 }
878 #charitable-design-wrap article .tab-content ul li span.medium {
879 height: 30px;
880 }
881 #charitable-design-wrap article .tab-content ul li span.big {
882 width: 100%;
883 height: 100px;
884 }
885 #charitable-design-wrap article .tab-content ul li span.avatar {
886 width: 50px;
887 height: 50px;
888 margin: 0 10px 10px 0;
889 }
890 #charitable-design-wrap article .tab-content ul li span.avatar.big {
891 width: 100px;
892 height: 100px;
893 }
894 #charitable-design-wrap article .tab-content ul li div.placeholder-row {
895 display: flex;
896 }
897 #charitable-design-wrap article .tab-content ul li div.placeholder-column {
898 flex: 1;
899 }
900 #charitable-design-wrap article .tab-content ul li div.placeholder-column.avatar {
901 flex: 0 0 50px;
902 }
903 #charitable-design-wrap article .tab-content ul li div.placeholder-column.avatar.big {
904 flex: 0 0 100px;
905 }
906 #charitable-design-wrap article .tab-content ul li div.placeholder-column.right span {
907 float: right;
908 }
909 #charitable-design-wrap article .tab-content ul li .charitable-tab-wrap {
910 min-height: 100px;
911 position: relative;
912 }
913 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(1) {
914 width: 99%;
915 }
916 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(2) {
917 width: 33%;
918 }
919 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(3),
920 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(4),
921 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(5) {
922 width: 90%;
923 }
924 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(2),
925 #charitable-design-wrap article .tab-content ul li.tab_type_html span:nth-child(5) {
926 margin-bottom: 20px;
927 }
928 #charitable-design-wrap article .tab-content ul li.tab_type_html.big {
929 width: 99%;
930 height: 100px;
931 }
932 #charitable-design-wrap article .tab-content.empty-tabs {
933 border: 1px solid #a8a8a8;
934 padding: 25px;
935 }
936 #charitable-design-wrap article .tab-content.empty-tabs .no-tab-notice {
937 text-align: center;
938 margin: 0;
939 }
940 #charitable-design-wrap article .tab-content.empty-tabs ul {
941 margin: 0 0 0 0;
942 }
943 #charitable-design-wrap article .badge {
944 background-color: #f6f7f7;
945 border-radius: 25%;
946 color: #2c3338;
947 font-size: 11px;
948 margin-left: 5px;
949 padding: 6px 8px;
950 position: relative;
951 text-decoration: none;
952 text-transform: uppercase;
953 top: -1px;
954 white-space: nowrap;
955 }
956 #charitable-design-wrap article#charitable-preview-tab-container {
957 border: 1px solid transparent;
958 }
959 #charitable-design-wrap article#charitable-preview-tab-container.disabled {
960 opacity: 0.3;
961 }
962 #charitable-design-wrap h5.charitable-field-preview-headline {
963 margin: 0 0 10px 0;
964 padding: 0;
965 font-size: 16px;
966 line-height: 16px;
967 font-weight: 700;
968 word-break: break-word;
969 }
970 #charitable-design-wrap .charitable-preview-align-center {
971 margin-left: auto;
972 margin-right: auto;
973 }
974 #charitable-design-wrap .charitable-preview-align-left {
975 margin-left: 0;
976 margin-right: auto;
977 }
978 #charitable-design-wrap .charitable-preview-align-right {
979 margin-left: auto;
980 margin-right: 0;
981 }
982 #charitable-design-wrap .charitable-preview-field-container {
983 position: relative;
984 }
985 #charitable-design-wrap .charitable-preview-field-indicator {
986 background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='blue' stroke-width='1' stroke-dasharray='2' /><path d='M0 0 L100 100 ' stroke='blue' stroke-width='1' stroke-dasharray='2' /></svg>");
987 background-repeat: no-repeat;
988 background-position: center center;
989 background-size: 100% 100%, auto;
990 z-index: 99;
991 position: absolute;
992 top: 0;
993 bottom: 0;
994 left: 0;
995 right: 0;
996 }
997 #charitable-design-wrap .charitable-preview-recurring-donation-options {
998 display: flex;
999 flex-direction: row;
1000 justify-content: start;
1001 align-items: center;
1002 gap: 10px;
1003 width: 100%;
1004 border-bottom: 1px solid #ccc;
1005 margin: 0;
1006 }
1007 #charitable-design-wrap .charitable-preview-recurring-donation-option {
1008 display: flex;
1009 align-items: center;
1010 border-bottom: 0;
1011 gap: 10px;
1012 margin: 0 0 0 0;
1013 }
1014 #charitable-design-wrap .charitable-preview-recurring-donation-option.selected {
1015 background-color: #f5f5f5;
1016 }
1017 #charitable-design-wrap .charitable-preview-recurring-donation-option span {
1018 font-size: 14px;
1019 font-weight: 400;
1020 color: #333;
1021 padding: 10px;
1022 border-radius: 0;
1023 margin: 0;
1024 border-bottom: 0 !important;
1025 }
1026 #charitable-design-wrap .charitable-preview-recurring-donation-simple-hidden {
1027 display: none;
1028 }
1029 #charitable-design-wrap .charitable-preview-recurring-donation-advanced-hidden {
1030 display: none;
1031 }
1032
1033 #charitable-design-wrap .row {
1034 container-type: inline-size;
1035 container-name: previewArea;
1036 }
1037
1038 /* If the container is larger than 700px */
1039 @container previewArea (max-width: 700px) {
1040 #charitable-design-wrap .charitable-field-column {
1041 flex: auto;
1042 }
1043 }
1044 #charitable-design-wrap .charitable-field-organizer {
1045 container-type: inline-size;
1046 container-name: organizerArea;
1047 }
1048
1049 @container organizerArea (max-width: 350px) {
1050 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container {
1051 display: block !important;
1052 }
1053 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-image-column {
1054 display: block;
1055 }
1056 #charitable-design-wrap .charitable-preview-field-container .charitable-organizer-container .charitable-organizer-info {
1057 display: block;
1058 }
1059 }
1060 /* mobile or narrow widths */
1061 .charitable-campaign-wrap .charitable-campaign-container {
1062 container-type: inline-size;
1063 container-name: campaign-area;
1064 }
1065 @container campaign-area (max-width: 700px) {
1066 .charitable-campaign-wrap .charitable-campaign-column,
1067 .charitable-campaign-wrap .charitable-campaign-column:nth-child(even),
1068 .charitable-campaign-wrap .charitable-campaign-column:nth-child(odd) {
1069 flex: 0 0 100% !important;
1070 padding-top: 0;
1071 padding-bottom: 0;
1072 padding-left: 0;
1073 padding-right: 0;
1074 }
1075 }
1076
1077 .charitable-preview-wrap.charitable-preview-hide-field-names h6.charitable-preview-field-title {
1078 display: none;
1079 transition: all 0.6s ease-out;
1080 }
1081
1082 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field {
1083 border-color: transparent;
1084 background-color: transparent;
1085 }
1086 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field.active {
1087 /* border-color: transparent; */
1088 border-color: rgba(53, 132, 232, 0.4);
1089 background-color: transparent;
1090 }
1091 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-preview-field-container .placeholders {
1092 margin-bottom: 0;
1093 margin-top: 0;
1094 transition: all 0.6s ease-out;
1095 }
1096 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-campaign-preview .placeholder,
1097 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .primary-image-container.placeholder {
1098 background-color: transparent;
1099 margin-top: 0;
1100 margin-bottom: 0;
1101 transition: all 0.6s ease-out;
1102 }
1103 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field .charitable-preview-field-container .placeholder {
1104 margin-bottom: 0;
1105 margin-top: 0;
1106 transition: all 0.6s ease-out;
1107 border-color: transparent;
1108 background-color: transparent;
1109 }
1110 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * div,
1111 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * ol,
1112 .charitable-preview-wrap.charitable-preview-minimum-preview .charitable-field * span {
1113 opacity: 1 !important;
1114 transition: all 0.6s ease-out;
1115 }
1116 .charitable-preview-wrap.charitable-preview-live .charitable-field {
1117 border-color: transparent;
1118 background-color: transparent;
1119 }
1120 .charitable-preview-wrap.charitable-preview-live .charitable-field.active {
1121 border-color: transparent;
1122 background-color: transparent;
1123 }
1124 .charitable-preview-wrap.charitable-preview-live .charitable-field h4,
1125 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-edit,
1126 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-duplicate,
1127 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-field-delete {
1128 display: none;
1129 transition: all 0.6s ease-out;
1130 }
1131 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-preview-field-container .placeholders {
1132 margin-bottom: 0;
1133 margin-top: 0;
1134 transition: all 0.6s ease-out;
1135 }
1136 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-campaign-preview .placeholder,
1137 .charitable-preview-wrap.charitable-preview-live .charitable-field .primary-image-container.placeholder {
1138 background-color: transparent;
1139 margin-top: 0;
1140 margin-bottom: 0;
1141 transition: all 0.6s ease-out;
1142 }
1143 .charitable-preview-wrap.charitable-preview-live .charitable-field .charitable-preview-field-container .placeholder {
1144 margin-bottom: 0;
1145 margin-top: 0;
1146 transition: all 0.6s ease-out;
1147 border-color: transparent;
1148 background-color: transparent;
1149 }
1150 .charitable-preview-wrap.charitable-preview-live .charitable-field * div,
1151 .charitable-preview-wrap.charitable-preview-live .charitable-field * ol,
1152 .charitable-preview-wrap.charitable-preview-live .charitable-field * span {
1153 opacity: 1 !important;
1154 transition: all 0.6s ease-out;
1155 }
1156 .charitable-preview-wrap.charitable-preview-live .charitable-panel-fields .charitable-field.active {
1157 background-color: transparent;
1158 }
1159
1160 .charitable-panel-fields .charitable-field-dragging.charitable-field-photo img {
1161 max-height: 300px;
1162 }
1163
1164 /* Campaign Hero block — preview placeholder styling. Beacon family templates override with their own positioning. */
1165 .charitable-hero-preview {
1166 position: relative;
1167 width: 100%;
1168 min-height: 320px;
1169 background-size: cover;
1170 background-position: center;
1171 border-radius: 4px;
1172 overflow: visible;
1173 margin-bottom: 70px;
1174 }
1175 .charitable-hero-preview__overlay {
1176 position: relative;
1177 display: grid;
1178 grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
1179 gap: 32px;
1180 padding: 24px;
1181 height: 100%;
1182 min-height: 320px;
1183 align-items: end;
1184 }
1185 .charitable-hero-preview__identity {
1186 display: flex;
1187 align-items: flex-end;
1188 gap: 16px;
1189 min-width: 0;
1190 }
1191 .charitable-hero-preview__avatar {
1192 width: 140px;
1193 height: 140px;
1194 flex-shrink: 0;
1195 background: #fff;
1196 border: 1px solid rgba(255, 255, 255, 0.6);
1197 border-radius: 4px;
1198 overflow: hidden;
1199 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
1200 transform: translateY(67%);
1201 }
1202 .charitable-hero-preview__avatar img {
1203 display: block;
1204 width: 100%;
1205 height: 100%;
1206 object-fit: cover;
1207 }
1208 .charitable-hero-preview__title {
1209 color: #fff;
1210 font-size: 32px;
1211 font-weight: 700;
1212 margin: 0;
1213 line-height: 1.1;
1214 text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
1215 }
1216 /* No logo: title sits where the logo would have been (no horizontal flex gap to absorb). */
1217 .charitable-hero-preview__title.charitable-hero-preview__title--no-logo {
1218 margin-left: 0;
1219 }
1220 .charitable-hero-preview__widget {
1221 background: #fff;
1222 border-radius: 4px;
1223 padding: 12px;
1224 width: 100%;
1225 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
1226 display: flex;
1227 flex-direction: column;
1228 gap: 8px;
1229 align-self: end;
1230 margin-bottom: -60px;
1231 pointer-events: none;
1232 -webkit-user-select: none;
1233 -moz-user-select: none;
1234 user-select: none;
1235 }
1236 .charitable-hero-preview__raised {
1237 font-size: 15px;
1238 background: var(--charitable-hero-accent, #1d3a8a);
1239 color: #fff;
1240 padding: 14px 18px;
1241 border-radius: 2px;
1242 margin: -12px -12px 0;
1243 }
1244 .charitable-hero-preview__raised span {
1245 display: block;
1246 margin-bottom: 14px;
1247 font-weight: 600;
1248 }
1249 .charitable-hero-preview__bar {
1250 background: rgba(255, 255, 255, 0.3);
1251 height: 7px;
1252 border-radius: 3px;
1253 overflow: hidden;
1254 }
1255 .charitable-hero-preview__bar span {
1256 display: block;
1257 height: 100%;
1258 background: #fff;
1259 }
1260 .charitable-hero-preview__amounts {
1261 display: grid;
1262 grid-template-columns: repeat(3, 1fr);
1263 gap: 6px;
1264 }
1265 .charitable-hero-preview__amount {
1266 padding: 8px 4px;
1267 font-size: 13px;
1268 font-weight: 600;
1269 border: 1px solid #d0d5dd;
1270 background: #fff;
1271 color: #333;
1272 border-radius: 3px;
1273 cursor: default;
1274 }
1275 .charitable-hero-preview__cta {
1276 padding: 10px;
1277 font-size: 13px;
1278 font-weight: 700;
1279 color: #fff;
1280 background: var(--charitable-hero-button, var(--charitable-hero-accent, #1d3a8a));
1281 border: 0;
1282 border-radius: 3px;
1283 text-transform: uppercase;
1284 cursor: default;
1285 }
1286
1287 /* Hero block "Reset" button — JS moves this into the uploader's button row,
1288 so it sits inline with Upload + Clear and inherits secondary-button styling. */
1289 .charitable-campaign-hero-reset-image {
1290 margin-left: 4px;
1291 }
1292
1293 /* Locked rows: prevent fields inside from being deleted, duplicated, or dragged out. */
1294 .charitable-preview-row[data-row-locked="1"] .charitable-field-delete,
1295 .charitable-preview-row[data-row-locked="1"] .charitable-field-duplicate,
1296 .charitable-preview-row.is-locked .charitable-field-delete,
1297 .charitable-preview-row.is-locked .charitable-field-duplicate,
1298 .charitable-preview-header[data-row-locked="1"] .charitable-field-delete,
1299 .charitable-preview-header[data-row-locked="1"] .charitable-field-duplicate,
1300 .charitable-preview-header.is-locked .charitable-field-delete,
1301 .charitable-preview-header.is-locked .charitable-field-duplicate {
1302 display: none !important;
1303 }
1304 .charitable-preview-row[data-row-locked="1"] .charitable-field,
1305 .charitable-preview-row.is-locked .charitable-field,
1306 .charitable-preview-header[data-row-locked="1"] .charitable-field,
1307 .charitable-preview-header.is-locked .charitable-field {
1308 cursor: default;
1309 }
1310
1311 /* When the edit pencil is the only visible action, hug the right edge. */
1312 .charitable-preview-row[data-row-locked="1"] .charitable-field .charitable-field-edit,
1313 .charitable-preview-row.is-locked .charitable-field .charitable-field-edit,
1314 .charitable-preview-header[data-row-locked="1"] .charitable-field .charitable-field-edit,
1315 .charitable-preview-header.is-locked .charitable-field .charitable-field-edit,
1316 .charitable-field.charitable-no-duplicate.charitable-no-delete .charitable-field-edit {
1317 right: 0 !important;
1318 }
1319