/* ========================================================== LOVE ONLY — Action Network form redesign Designed to match the supplied reference layout. Recommended font loading in : Noto Serif + Montserrat from Google Fonts. Helvetica Now is kept as a local/licensed first-choice font. ========================================================== */ @font-face { font-family: "Montserrat"; src: url("https://actionnetwork.org/user_files/user_files/000/147/037/original/montserrat-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("https://actionnetwork.org/user_files/user_files/000/147/038/original/montserrat-400-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("https://actionnetwork.org/user_files/user_files/000/147/039/original/montserrat-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; } @font-face { font-family: "Noto Serif"; src: url("https://actionnetwork.org/user_files/user_files/000/147/040/original/noto-serif-800.woff2") format("woff2"); font-style: normal; font-weight: 800; font-display: swap; } :root { --lo-cream: #FAF8EB; --lo-pink-light: #FDBEE9; --lo-yellow: #FFF5B4; --lo-pink: #FF006C; --lo-white: #FFFFFF; --lo-brown: #441805; --lo-orange: #FF8E09; --lo-green: #D6FD9F; --lo-serif: "Noto Serif", Georgia, serif; --lo-sans: "Helvetica Now", "Helvetica Neue", Helvetica, Arial, sans-serif; --lo-montserrat: "Montserrat", Arial, sans-serif; --lo-max-width: 1440px; --lo-left-width: 56%; --lo-right-width: 44%; } /* ---------- Page / wrapper ---------- */ html, body { margin: 0; padding: 0; background: var(--lo-white); color: var(--lo-brown); } body, .gen_body, .gen_wrapper, #can_embed_form { font-family: var(--lo-montserrat) !important; background:var(--lo-cream) !important; } .gen_wrapper { box-sizing: border-box; width: calc(100% - 48px) !important; max-width: var(--lo-max-width) !important; margin: 0px auto !important; padding-bottom:130px !important; background: var(--lo-cream) !important; overflow: hidden; } .can_embed_form, #can_embed_form { padding: 0 !important; background: transparent !important; color: var(--lo-brown) !important; font-size: 16px !important; } /* Main two-column structure */ .gen_body > .gen_wrapper #can_embed_form > .clearfix, .gen_body > .gen_wrapper.layout--reverse #can_embed_form > .clearfix, .gen_body > .gen_wrapper.layout--equal #can_embed_form > .clearfix, .gen_body > .gen_wrapper.layout--full #can_embed_form > .clearfix { display: flex !important; flex-flow: row nowrap !important; align-items: stretch !important; gap: 0 !important; } #can_embed_form #can_main_col, #can_embed_form.can_768 #can_main_col, .gen_body > .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_main_col, .gen_body > .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_main_col, .gen_body > .gen_wrapper.layout--full #can_embed_form > .clearfix #can_main_col { box-sizing: border-box !important; width: var(--lo-left-width) !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 54px 56px 56px 72px !important; background: var(--lo-cream) !important; color: var(--lo-brown) !important; } #can_embed_form #can_sidebar, #can_embed_form.can_768 #can_sidebar, .gen_body > .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_sidebar, .gen_body > .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_sidebar, .gen_body > .gen_wrapper.layout--full #can_embed_form > .clearfix #can_sidebar { box-sizing: border-box !important; width: var(--lo-right-width) !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 54px 58px 56px 38px !important; border: 0 !important; background: var(--lo-cream) !important; color: var(--lo-brown) !important; } /* Hide Action Network metadata box */ #action_info { display: none !important; } /* ---------- Left content ---------- */ #can_embed_form .entry-title, #can_embed_form h1.entry-title { width: 100% !important; margin: 0 0 26px !important; padding: 0 !important; border: 0 !important; color: var(--lo-brown) !important; font-family: var(--lo-serif) !important; font-size: clamp(34px, 3vw, 48px) !important; font-weight: 800 !important; line-height: 0.98 !important; letter-spacing: -0.035em !important; text-align: left !important; text-transform: uppercase !important; } #can_main_col p, #can_main_col li, #can_main_col span, #can_main_col td, #can_main_col a { font-family: var(--lo-montserrat) !important; color: var(--lo-brown); } #can_main_col p { margin: 0 0 20px !important; font-size: 17px !important; line-height: 1.22 !important; font-weight: 400 !important; } #can_main_col strong, #can_main_col b { font-family: var(--lo-montserrat) !important; font-weight: 700 !important; } /* Highlight line from the supplied HTML:

Online hate ...

*/ #can_main_col .action_description h3 { margin: 0 0 18px !important; padding: 0 !important; color: var(--lo-pink) !important; font-family: var(--lo-montserrat) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; border-bottom:0 !important; } #can_main_col .action_description h3 span { color: inherit !important; font: inherit !important; } /* Keep utility classes available for templates where they are present. */ #can_main_col .intro, #can_main_col .highlight { color: var(--lo-pink) !important; font-weight: 700 !important; } /* “Ready?” is the final paragraph in the supplied HTML/reference. */ #can_main_col .action_description p:last-child { margin-bottom: 0 !important; font-style: italic !important; } #can_main_col em, #can_main_col i { font-family: var(--lo-montserrat) !important; font-size: 18px !important; font-weight: 400 !important; } /* If the template outputs an extra small left-side logo, hide it. The main LOVE ONLY image on the right remains untouched. */ #can_main_col .logo-container { display: none !important; } /* ---------- Right logo ---------- */ #can_sidebar .right-logo-container { width: 100% !important; margin: 0 auto 24px !important; text-align: center !important; } #can_sidebar .right-logo-container img { display: block; width: 100% !important; height: auto !important; margin: 0 auto !important; } /* ---------- Form heading ---------- */ #can_embed_form #can_sidebar h1, #can_embed_form #can_sidebar h2, #can_embed_form #can_sidebar h3, #can_embed_form #can_sidebar h4, #can_embed_form #can_sidebar .sidebartitle { margin: 12px 0 28px !important; padding: 0 !important; border: 0 !important; color: var(--lo-pink) !important; font-family: var(--lo-montserrat) !important; font-size: clamp(28px, 2.4vw, 38px) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; text-align: center !important; text-transform: uppercase !important; } /* Remove decorative lines that may be inserted by the platform/theme */ #can_sidebar h1::before, #can_sidebar h1::after, #can_sidebar h2::before, #can_sidebar h2::after, #can_sidebar h3::before, #can_sidebar h3::after, #can_sidebar h4::before, #can_sidebar h4::after, #can_sidebar .sidebartitle::before, #can_sidebar .sidebartitle::after { display: none !important; content: none !important; } /* ---------- Fields ---------- */ #can_embed_form .floatlabel-wrapper, #can_embed_form .core_field, #can_embed_form .country_wrap { margin: 0 0 5px !important; } #can_embed_form input[type="text"], #can_embed_form input[type="email"], #can_embed_form input[type="tel"], #can_embed_form input[type="number"], #can_embed_form textarea, #can_embed_form select, #can_embed_form select.can_select, #can_embed_form span.can_select { box-sizing: border-box !important; width: 100% !important; min-height: 34px !important; height: 34px !important; margin: 0 0 5px !important; padding: 6px 12px !important; border: 1px solid rgba(68, 24, 5, 0.55) !important; border-radius: 0 !important; outline: none !important; background: var(--lo-white) !important; color: var(--lo-brown) !important; box-shadow: none !important; font-family: var(--lo-montserrat) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.2 !important; } #can_embed_form .core_field .floatlabel-wrapper #form-zip_code:not(.mb_needed) { margin-bottom: 5px !important; } #can_embed_form textarea { min-height: 120px !important; height: 120px !important; resize: vertical; } #can_embed_form input::placeholder, #can_embed_form textarea::placeholder { color: rgba(68, 24, 5, 0.62) !important; opacity: 1 !important; } #can_embed_form input[type="text"]:focus, #can_embed_form input[type="email"]:focus, #can_embed_form input[type="tel"]:focus, #can_embed_form textarea:focus, #can_embed_form select:focus { border-color: var(--lo-pink) !important; box-shadow: 0 0 0 2px rgba(255, 0, 108, 0.12) !important; } #can_embed_form input[type="text"].error_input { border-color: var(--lo-pink) !important; box-shadow: 0 0 0 2px rgba(255, 0, 108, 0.12) !important; } .full #can_embed_form .iti { margin-bottom:0 !important; } #can_embed_form .international_link-wrap {display:none !important;} #can_embed_form .country_drop_wrap {display:block !important;} /* ---------- Checkbox / consent ---------- */ #can_embed_form .check_radio_field, #can_embed_form #d_sharing, #can_embed_form .affirmative_optin_d_sharing { margin-top: 8px !important; padding-top: 0 !important; border-top: 0 !important; } #can_embed_form .check_radio_field label, #can_embed_form .check_radio_label, #can_embed_form #d_sharing.affirmative_optin_d_sharing .check_radio_label, #can_embed_form small { color: var(--lo-brown) !important; font-family: var(--lo-montserrat) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.25 !important; } #can_embed_form .check_radio_field label.error_checkbox a, #can_embed_form .check_radio_field label.error_checkbox { color: var(--lo-pink) !important; } #can_embed_form input[type="checkbox"] { width: 16px !important; height: 16px !important; margin: 1px 7px 0 0 !important; accent-color: var(--lo-pink); vertical-align: top; } #can_embed_form a { color: var(--lo-orange) !important; text-decoration: none !important; } #can_embed_form a:hover { color: var(--lo-pink) !important; text-decoration: underline !important; } /* If you want to keep Action Network's extra sharing section hidden */ #can_embed_form #d_sharing { display: none !important; } /* ---------- Submit ---------- */ .gen_wrapper #can_embed_form input[type="submit"], .can_embed-html #can_embed_form input[type="submit"], .gen_wrapper #can_embed_form .button, .can_embed-html #can_embed_form .button, #can_embed_form .can_button { display: table !important; width: auto !important; min-width: 180px !important; margin: 15px auto 0 !important; padding: 12px 22px !important; border: 0 !important; border-radius: 999px !important; background: var(--lo-pink) !important; color: var(--lo-pink-light) !important; box-shadow: none !important; font-family: var(--lo-montserrat) !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important; cursor: pointer; } .gen_wrapper #can_embed_form input[type="submit"]:hover, .can_embed-html #can_embed_form input[type="submit"]:hover, .gen_wrapper #can_embed_form .button:hover, .can_embed-html #can_embed_form .button:hover, #can_embed_form .can_button:hover { background: var(--lo-brown) !important; color: var(--lo-white) !important; opacity: 1 !important; } #can_embed_form .check_radio_field {margin-bottom:5px !important;} /* ---------- Validation ---------- */ #can_embed_form .error, #can_embed_form .error_message, #can_embed_form .can_error, #can_embed_form .can_alert, #can_embed_form .action_status_message { border: 0 !important; background: transparent !important; color: var(--lo-pink) !important; font-family: var(--lo-montserrat) !important; font-size: 12px !important; line-height: 1.3 !important; } /* ---------- Thank-you view ---------- */ #can_embed_form #can_thank_you h4 { margin: 0 0 24px !important; } #can_embed_form .can_thank_you-block, #can_embed_form.can_768 .can_thank_you-block { box-sizing: border-box !important; width: 100% !important; margin: 0 0 24px !important; } #can_embed_form .country_drop_wrap { margin-bottom: 5px; } /* ---------- Desktop ---------- */ @media (min-width: 901px) { #new_answer > ul { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 12px; } #new_answer > ul > li { grid-column: 1 / -1; } #new_answer > ul > li:has(#form-first_name) { grid-column: 1; } #new_answer > ul > li:has(#form-last_name) { grid-column: 2; } #can_embed_form .country_drop_wrap { grid-column: 1 / -1; } } /* ---------- Tablet / mobile ---------- */ @media (max-width: 900px) { .gen_wrapper { width: calc(100% - 28px) !important; margin: 0px auto !important; } .gen_body > .gen_wrapper #can_embed_form > .clearfix, .gen_body > .gen_wrapper.layout--reverse #can_embed_form > .clearfix, .gen_body > .gen_wrapper.layout--equal #can_embed_form > .clearfix, .gen_body > .gen_wrapper.layout--full #can_embed_form > .clearfix { flex-flow: column nowrap !important; } #can_embed_form #can_main_col, #can_embed_form.can_768 #can_main_col, #can_embed_form #can_sidebar, #can_embed_form.can_768 #can_sidebar, .gen_body > .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_main_col, .gen_body > .gen_wrapper.layout--reverse #can_embed_form > .clearfix #can_sidebar, .gen_body > .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_main_col, .gen_body > .gen_wrapper.layout--equal #can_embed_form > .clearfix #can_sidebar, .gen_body > .gen_wrapper.layout--full #can_embed_form > .clearfix #can_main_col, .gen_body > .gen_wrapper.layout--full #can_embed_form > .clearfix #can_sidebar { width: 100% !important; min-height: 0 !important; } #can_embed_form #can_main_col, #can_embed_form.can_768 #can_main_col { padding: 36px 30px 24px !important; } #can_embed_form #can_sidebar, #can_embed_form.can_768 #can_sidebar { padding: 24px 30px 38px !important; } #can_sidebar .right-logo-container { max-width: 400px !important; } .gen_wrapper #can_embed_form input[type="submit"], .can_embed-html #can_embed_form input[type="submit"], .gen_wrapper #can_embed_form .button, .can_embed-html #can_embed_form .button, #can_embed_form .can_button { min-width: 200px !important; margin: 15px 0 0 !important; padding: 10px 50px !important; font-size: 28px !important; } } @media (max-width: 520px) { .gen_wrapper { width: 100% !important; margin: 0 !important; } #can_embed_form #can_main_col, #can_embed_form.can_768 #can_main_col, #can_embed_form #can_sidebar, #can_embed_form.can_768 #can_sidebar { padding-left: 20px !important; padding-right: 20px !important; } #can_embed_form .entry-title, #can_embed_form h1.entry-title { font-size: 32px !important; } #can_embed_form #can_sidebar h1, #can_embed_form #can_sidebar h2, #can_embed_form #can_sidebar h3, #can_embed_form #can_sidebar h4, #can_embed_form #can_sidebar .sidebartitle { font-size: 27px !important; } }