All rules scoped to .an-homepage-embed so nothing leaks into host sites. ========================================================================= */ /* ------------------------------------------------------------------------- 1. BASE — font, colour & background ------------------------------------------------------------------------- */ .an-homepage-embed { font-family: "Jost", sans-serif; color: #4E4E4E; background-color: #FF7700; border-bottom: 2px solid #e8e8e8; } /* When .an-homepage-embed is the on the AN page wrapper */ body.gen_body.an-homepage-embed { margin: 0; color: #000000; border-bottom: none; } /* When .an-homepage-embed is injected into a fundraiser iframe body — keep white background, override the orange set by the rule above */ body.an-homepage-embed:not(.gen_body) { background-color: #FFFFFF !important; border-bottom: none; margin: 0; } .an-homepage-embed h1, .an-homepage-embed h2, .an-homepage-embed h3, .an-homepage-embed h4, .an-homepage-embed h5, .an-homepage-embed #can_embed_form h2, .an-homepage-embed #donate_auto_modal h2, .an-homepage-embed #donate_make_recurring_modal h2 { font-family: "Jost", sans-serif; font-weight: 600; text-transform: uppercase !important; color: #000000; } /* Base line-height for all form/modal content */ .an-homepage-embed #can_embed_form, .an-homepage-embed #donate_auto_modal, .an-homepage-embed #donate_make_recurring_modal { line-height: 22px; } /* Inline bold: override AN's default bold (700) */ .an-homepage-embed strong, .an-homepage-embed b { font-weight: 600 !important; } /* ------------------------------------------------------------------------- 2. HEADER — white logo bar (AN page wrapper only) ------------------------------------------------------------------------- */ .an-homepage-embed #gen_header { padding: 5px 0; background-color: #FFFFFF; text-align: center; } .an-homepage-embed #gen_header img { width: 100%; max-width: 350px; } .an-homepage-embed #gen_header .gen_wrapper { padding-top: 0; padding-bottom: 0; } /* ------------------------------------------------------------------------- 3. PAGE WRAPPER — centred container, 1160px max ------------------------------------------------------------------------- */ .an-homepage-embed .gen_wrapper { padding: 24px 10px; width: 1160px; max-width: 100%; margin: auto; box-sizing: border-box; } /* ------------------------------------------------------------------------- 4. COLUMN CARDS — white cards on description and form columns ------------------------------------------------------------------------- */ /* Description column */ .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix #can_main_col, .an-homepage-embed .can_embed #can_embed_form > .clearfix #can_main_col { background-color: #FFFFFF; border-radius: 6px; padding: 28px 28px 32px; box-sizing: border-box; } /* Fundraiser widget container — iframe is transparent so white bg shows through */ .an-homepage-embed .gen_wrapper [id^="can-fundraising-area"] { background-color: #FFFFFF; border-radius: 6px; overflow: hidden; } /* Form/action column, survey wrapper, and thank-you state */ .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .can_embed #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .gen_wrapper .survey_int, .an-homepage-embed .gen_wrapper #can_embed_form.can_thank_you_wrap, .an-homepage-embed .can_embed #can_embed_form.can_thank_you_wrap { background-color: #FFFFFF !important; border-radius: 6px !important; padding: 20px 28px 28px !important; box-sizing: border-box !important; max-width: 773px !important; margin-left: auto !important; margin-right: auto !important; } /* ------------------------------------------------------------------------- 5. PETITION QUOTE (h4) — sentence case override ------------------------------------------------------------------------- */ .an-homepage-embed #can_embed_form #can_sidebar h4 { text-transform: none !important; font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; } /* ------------------------------------------------------------------------- 6. ENTRY TITLE — size and remove default bottom border ------------------------------------------------------------------------- */ .an-homepage-embed #can_embed_form h2.entry-title, .an-homepage-embed #can_embed_form h1.entry-title { font-size: 35px; line-height: 40px; margin-bottom: 10px !important; border-bottom: none !important; } .an-homepage-embed #can_embed_form .main_action_image { margin-bottom: 10px !important; } /* ------------------------------------------------------------------------- 7. HIDE "SPONSORED BY" SECTION ------------------------------------------------------------------------- */ .an-homepage-embed #action_info_inner, .an-homepage-embed .action_owner_box { display: none !important; } /* Bold org name in info blocks */ .an-homepage-embed .action_info_user, .an-homepage-embed .donation_info_user { font-weight: 700 !important; } /* ------------------------------------------------------------------------- 8. SUBMIT BUTTON — brand orange, bold, generous padding ------------------------------------------------------------------------- */ .an-homepage-embed #can_embed_form input[type="submit"], .an-homepage-embed #can_embed_form .button, .an-homepage-embed #donate_auto_modal input[type="submit"], .an-homepage-embed #donate_auto_modal .button { background-color: #FF7700 !important; font-weight: 700 !important; padding-top: 16px !important; padding-bottom: 16px !important; } .an-homepage-embed #can_embed_form input[type="submit"]:hover, .an-homepage-embed #can_embed_form .button:hover, .an-homepage-embed #donate_auto_modal input[type="submit"]:hover, .an-homepage-embed #donate_auto_modal .button:hover { background-color: #FF7700 !important; opacity: .7; } /* ------------------------------------------------------------------------- 9. LINKS — teal ------------------------------------------------------------------------- */ .an-homepage-embed .gen_name { margin: 0; color: #01aace; } .an-homepage-embed a { color: #01aace; text-decoration: none; } .an-homepage-embed a:hover { color: #01aace; opacity: .7; text-decoration: none; } /* ------------------------------------------------------------------------- 10. PROGRESS BAR — goal thermometer ------------------------------------------------------------------------- */ .an-homepage-embed .action_status_tracker { text-align: center; margin-bottom: 12px; } .an-homepage-embed .action_status_running_total { font-family: "Jost", sans-serif; font-size: 1em; font-weight: 700 !important; color: #FF7700 !important; margin-bottom: 6px; } /* Track — light gray pill */ .an-homepage-embed .action_status_status_bar { display: block; width: 100%; height: 10px; border-radius: 5px; background: #e0e0e0; overflow: hidden; margin: 0 0 6px; } /* Fill — orange */ .an-homepage-embed #can_embed_form .action-widget--toggle .action_status_status_bar span.action_status_status_bar-grow { background: #FF7700 !important; } /* Goal subtext */ .an-homepage-embed .action_status_goal { font-size: 0.8em; color: #888; margin-bottom: 12px; } /* Survey footer next/submit button */ .an-homepage-embed #can_embed_form_inner.survey_int #survey_questions_footer button { height: auto !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* ------------------------------------------------------------------------- 11. TWO-COLUMN LAYOUT — flex layout for all action types ------------------------------------------------------------------------- */ /* --- AN page wrapper context (layout-- classes) --- */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix { align-items: flex-start; display: flex; flex-flow: row wrap; gap: 20px; } /* Thank-you block: always full width */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form.can_768 > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form.can_768 > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form.can_768 > .clearfix .can_thank_you-block { width: 100%; } /* Referral code: always full width */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix .can_thank_you-block #referral_code_select_wrap, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix .can_thank_you-block #referral_code_select_wrap, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix .can_thank_you-block #referral_code_select_wrap { width: 100%; } /* Action owner box (reverse layout): full width */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_main_col #action_info .action_owner_box { float: none; margin-right: 0; width: 100%; } /* Mobile overrides */ @media (max-width: 767px) { /* Smaller title — 35px is too large on a phone */ .an-homepage-embed #can_embed_form h2.entry-title, .an-homepage-embed #can_embed_form h1.entry-title { font-size: 24px !important; line-height: 28px !important; } /* Reduce top/bottom gap in gen_wrapper to match horizontal padding (10px) */ .an-homepage-embed .gen_wrapper { padding-top: 10px; padding-bottom: 10px; } .rfuk-loader__pad { padding-top: 10px; } /* Halve card padding inside white boxes */ .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix #can_main_col, .an-homepage-embed .can_embed #can_embed_form > .clearfix #can_main_col { padding: 14px 14px 16px !important; } .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .can_embed #can_embed_form > .clearfix #can_sidebar { padding: 10px 14px 14px !important; } } /* Mobile: both columns full width */ .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_main_col, .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_main_col { width: 100%; margin-bottom: 0; } .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix #can_sidebar { margin-left: auto; } @media (min-width: 768px) { .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix { flex-flow: row nowrap; } /* Thank-you state: revert to wrap */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form.can_thank_you_wrap > .clearfix, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form.can_thank_you_wrap > .clearfix, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form.can_thank_you_wrap > .clearfix { flex-flow: row wrap; } /* Referral code: full width at desktop */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #referral_code_select_wrap, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix #referral_code_select_wrap, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix #referral_code_select_wrap { width: 100%; } /* Thank-you block: 31% at desktop */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form.can_768 > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form.can_768 > .clearfix .can_thank_you-block, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form.can_768 > .clearfix .can_thank_you-block { width: 31%; } /* layout--equal: description 53%, form 44% */ .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_main_col { width: 53%; margin-bottom: 0; } .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_sidebar { width: 44%; } /* layout--reverse: description 30%, form 65% */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_main_col { width: 30%; margin-bottom: 0; } .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_sidebar { width: 65%; } /* One-column letter: both full width */ .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_letter_one_col #can_sidebar, .an-homepage-embed .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_letter_one_col #can_main_col, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_letter_one_col #can_sidebar, .an-homepage-embed .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_letter_one_col #can_main_col { width: 100%; } } /* layout--full: always single column */ .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix { flex-flow: row wrap; } .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .gen_wrapper.layout--full #can_embed_form > .clearfix #can_main_col { width: 100%; margin-bottom: 0; } /* Event campaigns: always stacked */ .an-homepage-embed .gen_wrapper.layout--reverse .event_campaign #can_embed_form > .clearfix, .an-homepage-embed .gen_wrapper.layout--full .event_campaign #can_embed_form > .clearfix, .an-homepage-embed .gen_wrapper.layout--equal .event_campaign #can_embed_form > .clearfix { flex-flow: row wrap; } .an-homepage-embed .gen_wrapper.layout--reverse .event_campaign #can_embed_form > .clearfix .entry-title, .an-homepage-embed .gen_wrapper.layout--full .event_campaign #can_embed_form > .clearfix .entry-title, .an-homepage-embed .gen_wrapper.layout--equal .event_campaign #can_embed_form > .clearfix .entry-title { width: 100%; } .an-homepage-embed .gen_wrapper.layout--reverse .event_campaign #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .gen_wrapper.layout--full .event_campaign #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .gen_wrapper.layout--equal .event_campaign #can_embed_form > .clearfix #can_sidebar { order: 2; } /* --- Host-site embed context (can_embed class) --- */ .an-homepage-embed .can_embed #can_embed_form > .clearfix, .an-homepage-embed .can_embed #can_embed_form > div > .clearfix { align-items: flex-start; display: flex; flex-flow: row wrap; gap: 20px; } .an-homepage-embed .can_embed #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .can_embed #can_embed_form > div > .clearfix #can_sidebar { margin-left: auto; width: 100%; } .an-homepage-embed .can_embed #can_embed_form > .clearfix #can_main_col, .an-homepage-embed .can_embed #can_embed_form > div > .clearfix #can_main_col { width: 100%; margin-bottom: 0; } @media (min-width: 768px) { .an-homepage-embed .can_embed #can_embed_form > .clearfix, .an-homepage-embed .can_embed #can_embed_form > div > .clearfix { flex-flow: row nowrap; } .an-homepage-embed .can_embed #can_embed_form > .clearfix #can_sidebar, .an-homepage-embed .can_embed #can_embed_form > div > .clearfix #can_sidebar { width: 44%; } .an-homepage-embed .can_embed #can_embed_form > .clearfix #can_main_col, .an-homepage-embed .can_embed #can_embed_form > div > .clearfix #can_main_col { width: 53%; margin-bottom: 0; } } /* --- Basic embed wrapper (no layout-- class, no can_embed class) --- */ .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix { align-items: flex-start; display: flex; flex-flow: row wrap; gap: 20px; } .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix #can_sidebar { margin-left: auto; width: 100%; } .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix #can_main_col { width: 100%; margin-bottom: 0; } @media (min-width: 768px) { .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix { flex-flow: row nowrap; } .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix #can_sidebar { width: 44%; } .an-homepage-embed .gen_wrapper #can_embed_form > .clearfix #can_main_col { width: 53%; margin-bottom: 0; } } /* ------------------------------------------------------------------------- 12. CLEARFIX PSEUDO-ELEMENT FIX AN's .clearfix uses ::before/::after for float-clearing. In our flex layout those pseudo-elements become ghost flex items, creating a phantom gap before the first real column. Hide them — flexbox doesn't need float-clearing. ------------------------------------------------------------------------- */ .an-homepage-embed #can_embed_form > .clearfix::before, .an-homepage-embed #can_embed_form > .clearfix::after { display: none !important; } /* ------------------------------------------------------------------------- 13. HIDE "EMBED THIS ACTION" BLOCK — post-sign thank-you ------------------------------------------------------------------------- */ .an-homepage-embed .can_thank_you-block:has(.embed_textarea) { display: none !important; } /* ------------------------------------------------------------------------- 13. SURVEY — question label size and weight ------------------------------------------------------------------------- */ .an-homepage-embed .survey_int .control-label.check_radio_label { font-size: 1em; font-weight: 500; } /* ------------------------------------------------------------------------- 14. LOADING PLACEHOLDER — skeleton overlay (AN page wrapper only) ------------------------------------------------------------------------- */ .an-homepage-embed .gen_wrapper.layout--equal { position: relative; } #rfuk-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 450px; z-index: 10; background: #FF7700; margin: 0; border-radius: 0; pointer-events: none; } .rfuk-loader__pad { padding: 24px 10px 0; display: flex; align-items: flex-start; justify-content: center; width: 100%; } .rfuk-loader__card { background: #ffffff; border-radius: 6px; max-width: 773px; width: 100%; padding: 40px 28px 48px; box-sizing: border-box; } .rfuk-loader__line { background: #ebebeb; border-radius: 4px; margin-bottom: 14px; animation: rfuk-pulse 1.4s ease-in-out infinite; } @keyframes rfuk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ------------------------------------------------------------------------- 15. DAISY CHAIN — post-sign thank-you flow ------------------------------------------------------------------------- */ .an-homepage-embed .rfuk-wrap { font-family: "Jost", sans-serif; color: #4E4E4E; max-width: 480px; margin: 0 auto; padding: 24px 16px; text-align: center; } .an-homepage-embed .rfuk-wrap h2 { font-family: "Jost", sans-serif; font-size: 1.6em; font-weight: 700; color: #000000; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 16px; line-height: 1.25; } .an-homepage-embed .rfuk-wrap p { margin: 0 0 14px; font-size: 1em; line-height: 1.65; } .an-homepage-embed .rfuk-wrap strong { color: #4E4E4E; font-weight: 500; } .an-homepage-embed .rfuk-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .an-homepage-embed .rfuk-btn { display: inline-block; padding: 16px 20px; border-radius: 6px; font-family: "Jost", sans-serif; font-size: 1em; font-weight: 700; text-decoration: none; cursor: pointer; border: none; text-align: center; transition: opacity .15s; letter-spacing: .02em; } .an-homepage-embed .rfuk-btn:hover { opacity: .88; } .an-homepage-embed .rfuk-btn--primary { background: #FF7700; color: #fff !important; } .an-homepage-embed .rfuk-btn--whatsapp { background: #25d366; color: #fff !important; } .an-homepage-embed .rfuk-btn--facebook { background: #1877f2; color: #fff !important; } .an-homepage-embed .rfuk-btn--secondary { background: #ebebeb; color: #4E4E4E !important; } .an-homepage-embed .rfuk-btn--link { background: none; color: #01aace; font-size: .9em; padding: 6px; text-decoration: underline; cursor: pointer; border: none; font-weight: 400; }