/* Combined Master WPR Donation Page CSS Stylesheet This css file merges all css styling fomerly contained in Engaging Networks saved components. Moved to common stylesheet referenced in page templates in July 2022, in conjunction with 4Site changes. TH merged all JS code contained in EN blocks into single .js file, too. */ /***************************** * 4Site - Engaging Networks - Page Template v1.0.1 * Repository: https://github.com/4SiteStudios/Engaging-Networks-Page-Template ****************************/ /************************************************************** >>> TABLE OF CONTENTS *************************************************************** # Base Styles # General Overrides of EN Styles # Flexible Images # Inputs ## General ## Textarea ## Select ## Focus State ## Radio & Checkboxes ## Buttons # Error Messages ## Input Errors ## Page Errors # Loading Spinner # Components ## Form Block: Personal Information ## Copy Block: Personal Information Title ## Form Block: Address ## Copy Block: Address Title ## Form Block: Payment Information ## Copy Block: Payment Information Title ## Form Block: Recurring Payment ## Form Block: Donation Amount ## Copy Block: Advocacy ## Contact Block Component: Msg Details ***************************************************************/ /************************************ * Base Styles ***********************************/ body { background-color: #ffffff; margin: 0; color: #2a2a2a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 100%; line-height: 1.4; } h1, h2, h3, h4, h5, h6, strong { font-weight: 500; } #main-content-wrapper { margin: 0 auto; max-width: 41.25rem; width: 100%; } #main-content { background-color: #ffffff; padding: 2.1875rem 0 4.375rem 0; } #main-content-inner { margin: 0 auto; padding: 0 1.875rem; } /* Logo */ img.page-logo{ cursor: pointer; } @media (min-width: 41.25em) { /** Background Image or Pattern **/ /* html { background: url("https://acb0a5d73b67fccd4bbe-c2d8138f0ea10a18dd4c43ec3aa4240a.ssl.cf5.rackcdn.com/10041/2304DonationPageBackground.png?v=1681159168000") repeat center center fixed; } */ } @media (min-width: 41.25em) { body { background-color: #eeeeee; } #main-content { margin: 2.1875rem; border-radius: 0.4375rem; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12); } } .en__field--504169 { display: none; } /* What inspired you to donate? This may be shared on air and online during member drives to encourage others to give. */ /************************************ * General overrides of EN styles ***********************************/ #main-content-inner > p:first-of-type { text-align: center; } #main-content .en__component--column, #main-content .en__field__element { min-width: 100% !important; } #main-content .en__field__item { width: 100%; } #main-content .en__field__label { max-width: 100%; width: auto; } /** * Flexible images */ #main-content img { max-width: 100%; height: auto !important; } /************************************ * Inputs ***********************************/ /* General */ #main-content input[type="date"], #main-content input[type="datetime"], #main-content input[type="datetime-local"], #main-content input[type="email"], #main-content input[type="month"], #main-content input[type="number"], #main-content input[type="password"], #main-content input[type="range"], #main-content input[type="search"], #main-content input[type="tel"], #main-content input[type="text"], #main-content input[type="time"], #main-content input[type="url"], #main-content input[type="week"], #main-content textarea { max-width: 100%; width: 100%; min-width: initial; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; height: 2.4375rem; margin: 0 0 1rem; padding: 0.5rem; border: 1px solid #cacaca; border-radius: 0.1875rem; background-color: #fefefe; -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5; color: #0a0a0a; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #main-content textarea { height: 20rem; resize: vertical; } #main-content select { height: 2.4375rem; width: 100%; margin: 0 0 1rem; padding: 0.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #cacaca; border-radius: 0.1875rem; background-color: #fefefe; font-family: inherit; font-size: 1rem; font-weight: normal; line-height: 1.5; color: #0a0a0a; background-image: url("data:image/svg+xml;utf8,"); background-origin: content-box; background-position: right center; background-position: right -1rem center; background-repeat: no-repeat; background-size: 0.5625rem 0.375rem; padding-right: 1.5rem; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; } /* Focus state */ #main-content input[type="date"]:focus, #main-content input[type="datetime"]:focus, #main-content input[type="datetime-local"]:focus, #main-content input[type="email"]:focus, #main-content input[type="month"]:focus, #main-content input[type="number"]:focus, #main-content input[type="password"]:focus, #main-content input[type="range"]:focus, #main-content input[type="search"]:focus, #main-content input[type="tel"]:focus, #main-content input[type="text"]:focus, #main-content input[type="time"]:focus, #main-content input[type="url"]:focus, #main-content input[type="week"]:focus, #main-content select:focus, #main-content textarea:focus { outline: none; border: 1px solid #8a8a8a; background-color: #fefefe; -webkit-box-shadow: 0 0 0.3125rem #cacaca; box-shadow: 0 0 0.3125rem #cacaca; -webkit-transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; transition: box-shadow 0.5s, border-color 0.25s ease-in-out, -webkit-box-shadow 0.5s; } /* Radio & Checkbox Inputs */ #main-content .en__field__input--radio, #main-content .en__field__input--checkbox { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } #main-content-inner > form > div > div > div.en__component.en__component--formblock.personal-information > div.en__field.en__field--text.en__field--678761.en__field--emailAddress.en__mandatory{ width: 100%; } /* #main-content .en__field__input--radio + .en__field__label, #main-content .en__field__input--checkbox + .en__field__label { position: relative; margin-left: 2rem; cursor: pointer; } #main-content .en__field__input--radio + .en__field__label:before, #main-content .en__field__input--checkbox + .en__field__label:before { content: ""; position: absolute; left: -2rem; height: 1.5rem; width: 1.5rem; margin-right: .5em; display: inline-block; vertical-align: middle; border: 1px solid #c3c3c3; border-radius: 50%; -webkit-box-shadow: inset 0 0 0 5px #fff; box-shadow: inset 0 0 0 5px #fff; cursor: pointer; -webkit-transition-duration: .25s; transition-duration: .25s; -webkit-transition-property: border-color, background-color; transition-property: border-color, background-color; } */ /* #main-content .en__field__input--checkbox + .en__field__label:before { border-radius: 10%; -webkit-box-shadow: none; box-shadow: none; } */ /* #main-content .en__field__input--radio:checked + .en__field__label:before, #main-content .en__field__input--checkbox:checked + .en__field__label:before { border-color: #2ba6cb; background-color: #2ba6cb; } #main-content .en__field__input--checkbox:checked + .en__field__label:before { content: "\a0\2713"; border-color: #2ba6cb; background-color: #2ba6cb; color: #ffffff; } */ #main-content .en__field__input--radio:focus + .en__field__label:before, #main-content .en__field__input--checkbox:focus + .en__field__label:before { outline: #8a8a8a auto 0.3125rem; } /* Buttons */ #main-content button { display: block; width: 100%; margin: 0 0 1rem 0; font-family: inherit; padding: 0.85rem 1rem; -webkit-appearance: none; border: 1px solid transparent; border-radius: 0.1875rem; -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out; transition: background-color 0.25s ease-out, color 0.25s ease-out; font-size: 1rem; text-align: center; cursor: pointer; background-color: #2ba6cb; color: #fefefe; } #main-content .en__submit { width: 100%; margin-top: 2rem; } #main-content button:hover, #main-content button:focus { background-color: #258dad; } #main-content button[disabled], #main-content button[disabled]:hover, #main-content button[disabled]:focus { background-color: #1779ba; color: #fefefe; } #main-content button[disabled] { opacity: 0.25; cursor: not-allowed; } /* Split Text: 2Up */ @media (min-width: 41.25em) { #main-content .en__field__element--splittext > .en__field__item { width: 48.75%; } #main-content .en__field__element--splittext > .en__field__item:first-child { margin-right: 0.25rem; } #main-content .en__field__element--splittext > .en__field__item:last-child { margin-left: 0.25rem; } } /* Split Triple Text: 3Up */ @media (min-width: 41.25em) { #main-content .en__field__element--tripletext > .en__field__item { width: 31.75%; } #main-content .en__field__element--tripletext > .en__field__item:nth-of-type(2) { margin-left: 0.5rem; margin-right: 0.5rem; } } /* Split Select: 2Up */ @media (min-width: 41.25em) { #main-content .en__field__element--splitselect > .en__field__item { width: 48.75%; } #main-content .en__field__element--splitselect > .en__field__item:nth-of-type(1) { margin-right: 0.25rem; } #main-content .en__field__element--splitselect > .en__field__item:nth-of-type(2) { margin-left: 0.25rem; } } /* Split Triple Select: 3Up */ @media (min-width: 41.25em) { #main-content .en__field__element--tripleselect > .en__field__item { width: 31.75%; } #main-content .en__field__element--tripleselect > .en__field__item:nth-of-type(2) { margin-left: 0.5rem; margin-right: 0.5rem; } } /* #main-content .en__field--sample-radio > .en__field__element--radio > .en__field__item { width: 31.75%; } */ #main-content .en__field--sample-radio > .en__field__element--radio > .en__field__item:nth-of-type(2n) { margin-left: 0.5rem; margin-right: 0.5rem; } #main-content .en__field--donationAmt .en__field__item { width: 32.5%; } .en__field__element .en__field__element--radio .frequency{ padding: 50px; } .en__field__element--radio.frequency{ /* background-color: #2ba6cb; */ text-align: center; justify-content: center; align-items: center; display: flex; color: #ffffff; /* margin: 10px; */ } .en__field__element--radio.frequency div{ width: 100%; margin: 0 4px; } .en__field__element--radio.frequency div.en__field__item .en__field__label--item{ text-align: center; } .en__field__element--radio.frequency label { background-color: #fff; color: #000; font-weight: bold; border: 1px solid #a6a6a6; border-radius: 0.1875rem; padding: 15px 0; width: 100% !important; height: 100%; } .en__field__element--radio.frequency input[type=radio]:checked + label { background-color: #2ba6cb; color: #fff; } /* Sample Radio: 3Up */ @media (min-width: 41.25em) { } /************************************ * Loading spinner for submit button ***********************************/ .loader { display: inline-block; position: relative; width: 0.75rem; height: 0.75rem; margin-top: -0.1875rem; vertical-align: middle; } .loader-quart { border-radius: 50%; border: 0.375rem solid rgba(255, 255, 255, 0.4); } .loader-quart:after { content: ''; position: absolute; top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem; border-radius: 3.125rem; border: 0.375rem solid transparent; border-top-color: #ffffff; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); tranform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); tranform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); tranform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); tranform: rotate(360deg); } } /************************************ * Error Messages ***********************************/ /* Input Errors */ #main-content .en__component .en__field--text { position: relative; } #main-content .en__component .en__field__error { position: absolute; top: -1.25rem; padding: 0.25rem 0.25rem; color: #b71c1c; font-size: 0.75rem; border-radius: 0.1875rem; background-color: #f4ddda; } /* Page Errors */ .en__errorHeader { margin-left: -1.875rem; margin-right: -1.875rem; padding: 0.5rem 2rem; color: #b71c1c; font-weight: 700; text-align: center; background-color: #f4ddda; } .en__errorList > .en__error { margin-left: -1.875rem; margin-right: -1.875rem; padding: 0.5rem 2rem; list-style: none; color: #b71c1c; text-align: center; background-color: #f4ddda; } /************************************ * Components ***********************************/ /** * Form Block Component: Personal Information */ @media (min-width: 41.25em) { } /* Safari 5.1 Windows */ #main-content .en__component--formblock.personal-information > .en__field { display: inline-block; width: 100%; } #main-content .en__component--formblock.personal-information > .en__field:nth-child(3) { width: 100%; } /* Modern Browsers */ #main-content .en__component--formblock.personal-information { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #main-content .en__component--formblock.personal-information > .en__field:nth-child(3) { -ms-flex-preferred-size: 100%; flex-basis: 100%; } #main-content .en__component--formblock.personal-information > .en__field:nth-child(1) { -ms-flex-preferred-size: 48%; flex-basis: 48%; } #main-content .en__component--formblock.personal-information > .en__field:nth-child(2) { -ms-flex-preferred-size: 48%; flex-basis: 48%; } #main-content .en__component--formblock.personal-information > .en__field:nth-child(3) { -ms-flex-preferred-size: 100%; flex-basis: 100%; } #main-content .en__component--formblock.personal-information > .en__field:nth-child(1) { margin-right: 0.5rem; padding-bottom: 0; } #main-content .en__component--formblock.personal-information > .en__field:nth-child(2) { margin-left: 0.5rem; padding-bottom: 0; } /** * Copy Block Component: Personel Information Title */ #main-content .en__component--copyblock.personal-information-title > h2 { margin-left: 2rem; } #main-content .en__component--copyblock.personal-information-title > h2:before { content: ""; display: inline-block; vertical-align: baseline; margin-left: -2rem; margin-right: 0.5rem; height: 1.75rem; width: 1.75rem; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABe0lEQVRYR+2W4TEEQRCFv4sAGZABESACMkAEZIAMiAAZEAEiIANCIALqq9s9e1e7Nd2zVfbPddXV1NZ1v37zeqanZ0xss4nzsyZQo8ABcAK4bjcl/ARegIdmDVc2S+AUuCugnwH3UQYZAu72Iwi8A6hK0TIEboDzIuLc4Ra4iPhmCFjj/Qgo8NqckaJ7hsAXsFFEnDvouxXxzRD4iQB2fELYIacGdE1gcgUmvwV2N1twxGzJds2iZQ7hLvBWRJw77AHvEd8MAfEiZQg3IQGzBHwP3NlQQ/oGVCr0DtQQMMYEKrFKwuQ+0SHp2/JkFWjj+l5GW68tOGW1BEyy2heqsKJBm81LqMSWwG/Xrim9CrhaIg9jUZESAe/yEXCc0vXP+RHwZ1/otSEC7tTRq535KvMvwrwVjmoqs2R9BK6Ay7EZB+LFvu7+t0ogM3bVclwa17oElP25FjUZd9iWo0vAw+KB+w97ag92l0Bm5htLcjEzlq7h2ETF+MkJ/AKQCTkh5Nk4+QAAAABJRU5ErkJggg=='); background-position: 0 0; background-repeat: no-repeat; } /** * Form Block Component: Address */ #main-content .en__component--formblock.address > .en__field--select { width: 100%; } @media (min-width: 41.25em) { /* Safari 5.1 Windows */ #main-content .en__component--formblock.address > .en__field { display: inline-block; width: 48%; } /* Modern Browsers */ #main-content .en__component--formblock.address { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #main-content .en__component--formblock.address > .en__field { -ms-flex-preferred-size: 48%; flex-basis: 48%; } #main-content .en__component--formblock.address > .en__field:nth-child(odd) { margin-right: 0.5rem; } #main-content .en__component--formblock.address > .en__field:nth-child(even) { margin-left: 0.5rem; } } /** * Copy Block Component: Address Title */ #main-content .en__component--copyblock.address-title > h2 { margin-left: 2rem; } #main-content .en__component--copyblock.address-title > h2:before { content: ""; display: inline-block; vertical-align: bottom; margin-left: -2rem; margin-right: 0.5rem; height: 2rem; width: 1.75rem; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB6UlEQVRYR6WX/TFlQRDFz4uADKwIEAEbASJABIgAEVgRIAJEgAgQATIgAupXdUeN2Zme7rld9f66fbrP9PdbKC77kjYlrU8/LDxPv1tJdxGTi4DyjqRzSX86mDdJx5Ig0xUvgX+SDrvWfiuAgYgpHgIjzpPTC0lHFoMeAcJ+UzGA4asp73ymHnC0V9HdtdLRI0A+VzKjn5K2MselP4g8SFrKPmBjtRUFiwDVflkANwznSRUSTwWuGQWLACHOQ9rNZ+a0xF5L4kH/iUWA3l7LEJ7Xt6KALfAhAl+Fdq9eSuMuvGXUZcBoMRc+QmBOCuBZ9WURoJ2Y+e6hYhTh49S+oRooKxmwJwq1Nhzqgtoc+JD0tzOI7iUtF089mCZnKAJsvddGkREd5gLthfBqllW116dJyEQMEUC5nAVG0Tc/vWR3Q5gAC4YbYI6wktmoVekNFysNXlIsomr4m71ZWOay2fZ6K/Q4z1jpTelFACDrl8oeETqGeTKLAOByKHnINIdPDvZEYDQK3dd7ayARjkTB9foogUhHmJU/koKEOZV00imAM0noucRbA8kYM57pmB+quaP3aeqxM1wSJdArSFfhzUlBwtb+rESO1h8OIxEAXKYiHPrEYJQA+Pzw8Bwq1ZqYQwCDaf9zHwzJN9UKWyGqF8gUAAAAAElFTkSuQmCC'); background-position: 0 0; background-repeat: no-repeat; } /** * Form Block Component: Payment Information */ #main-content .en__component--formblock.payment-information > .en__field--ccexpire > .en__field__element--splitselect > .en__field__item { padding: 0; width: 40%; } @media (min-width: 41.25em) { /* Safari 5.1 Windows */ #main-content .en__component--formblock.payment-information > .en__field { display: inline-block; width: 48%; } /* Modern Browsers */ #main-content .en__component--formblock.payment-information { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #main-content .en__component--formblock.payment-information > .en__field { -ms-flex-preferred-size: 48%; flex-basis: 48%; } #main-content .en__component--formblock.payment-information > .en__field:nth-child(odd) { margin-right: 0.5rem; } #main-content .en__component--formblock.payment-information > .en__field:nth-child(even) { margin-left: 0.5rem; } } /** * Copy Block Component: Payment Information Title */ #main-content .en__component--copyblock.payment-information-title > h2 { margin-left: 2rem; } #main-content .en__component--copyblock.payment-information-title > h2:before { content: ""; display: inline-block; vertical-align: baseline; margin-left: -2rem; margin-right: 0.5rem; height: 1.75rem; width: 2rem; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAtElEQVRYR+2WwQ3CMAxFXyfoCGUEOgkrsAEjEDZghG5URmg26AYgR40ERVVQgpwe7FsOzn/6tmw3VI6msj4GEB24AyfgoFSSCRiAmwCI+EVJeC0TAGagBXrgoQRyBEZgEoDnIqrdkEHXAN4dUCr/p4wBmAO7csAGkTkQHVgvp9Q7d4JuLqOU4L+2pwHs5x6oeZJ56XwHXHNbuTAvHKUSAnEGusIPf033y1nutKffF6ABVHfgBWDaOs5lsuVZAAAAAElFTkSuQmCC'); background-position: 0 0; background-repeat: no-repeat; } /** * Form Block Component: Recurring Payment */ #main-content .en__component--formblock.recurring-payment > .en__field--recurrfreq { display: none; } /* #main-content .en__component--formblock.recurring-payment > .en__field--recurrpay .en__field__item { height: 2.5rem; width: auto; } */ #main-content .en__component--formblock.recurring-payment > .en__field--recurrpay .en__field__item:nth-child(1) { /* width: 100%; */ /* margin-right: 0.5rem; */ } #main-content .en__component--formblock.recurring-payment > .en__field--recurrpay .en__field__item:nth-child(2) { /* width: 100%; */ /* margin-left: 0.5rem; */ } @media (min-width: 31.25em) { #main-content .en__component--formblock.recurring-payment { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #main-content .en__component--formblock.recurring-payment > .en__field { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } } /** * Form Block Component: Donation Amount */ /* Safari 5.1 Windows */ #main-content .en__component--formblock.donation-amt .en__field__item.en__field__item--hidden { padding: 10px; display: inline-block; } /* Modern Browsers */ #main-content .en__component--formblock.donation-amt .en__field__item.en__field__item--other { display: inline-flex; } #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item { height: 2.5rem; } #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item { width: 32%; } #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item--other { width: calc(32% - 32px); } #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item--other-radio { width: auto; } @media (min-width: 31.25em) { #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item { width: 32%; } #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item--other { width: calc(32% - 32px); } #main-content .en__component--formblock.donation-amt .en__field__element--radio > .en__field__item--other-radio { width: auto; } #main-content .en__component--formblock.recurring-payment > .en__field__element--radio > .en__field__item { height: 2.5rem; } #main-content .en__component--formblock.recurring-payment > .en__field--recurrday .en__field__input--text { margin-bottom: 0; } } /** * Copy Block Component: Advocacy * Contact Block Component: Message Details * Toggle message area display */ #main-content .en__component--copyblock.view-message .btn--view-message { padding-left: 0; background-color: #ffffff; color: inherit; font-size: 1.5rem; text-align: left; } #main-content .en__component--copyblock.view-message .btn--view-message:before { content: '\2b'; display: inline-block; margin-right: 0.5rem; } #main-content .en__component--copyblock.view-message .btn--view-message.active:before { content: '\2212'; display: inline-block; margin-right: 0.5rem; } #main-content .en__component--contactblock.msgDetails .en__field__input--checkbox + .en__field__label:before { top: -0.5rem; } #main-content .en__component--contactblock.msgDetails { display: none; } #main-content .en__component--contactblock.msgDetails.show { display: block; margin-bottom: 2rem; } /** * Form Block Component: Select Fields * Overrides EN Default Styling to ensure mobile friendly widths */ .en__field__input--select { min-width: initial; } @media (min-width: 41.25em) { html { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } body { background-color: initial; } /** Red * for Mandatory Fields .en__mandatory label.en__field__label:not(.en__field__label--item)::after { content: "*"; color: red; }**/ /** STYLES and COLORS **/ #main-content .en__submit button { background: #2ba6cb; } /** Disable this to align page to center **/ #main-content-wrapper { /* margin: initial; */ } #main-content { font-family: Arial, Helvetica, sans-serif; color: black ; } #main-content h1 { font-family: Arial, Helvetica, sans-serif; color: #555555; } #main-content h2 { font-family: Arial, Helvetica, sans-serif; color: #555555; } #main-content h3 { font-family: Arial, Helvetica, sans-serif; color: #ffffff; } #main-content a { color:#2ba6cb; } /* #main-content-inner .en__field__input--radio: checked + .en__field__label:before, #main-content-inner .en__field__input--checkbox:checked + .en__field__label:before { border-color: #2ba6cb; background-color: #2ba6cb; } */ /** Hide Fix **/ .en__hidden { display: none !important; } /** Fixes the column issue **/ #main-content .en__component--advrow .en__component--column { min-width: inherit !important; } #main-content .en__component--row.en__component--advrow { display: flex; flex-wrap: wrap; } #main-content .en__component--column { min-width: inherit !important; } /* Donation amount button styling. Is this still necessary, after 4Site's tweaks to button styles in Jul 2022? Redundant, or is the 4Site code dependent on this styling? */ /* DONATION AMOUNTS - changing to buttons */ /* 1. change the color of the recurring label */ .en__field--donationAmt label.en__field__label.en__field__label--item { display: flex; /* width: 32%; */ /* margin: 0 0 1rem 0; */ font-family: inherit; padding: 0.85rem 1rem; -webkit-appearance: none; border-radius: 0.1875rem; -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out; transition: background-color 0.25s ease-out, color 0.25s ease-out; font-size: 1rem; text-align: center; cursor: pointer; color: #000; border: 1px solid #a6a6a6; justify-content: center; align-items: center; } /* 2. change the hover or active behavior of the donation amount */ .en__field--donationAmt label.en__field__label.en__field__label--item:hover, .en__field--donationAmt input[type='radio']:checked + label { background-color: #2ba6cb; border: 1px solid transparent; color: #fefefe; } /* 3. remove the radio button */ .en__field--donationAmt .en__field__label:before { display: none !important; } .en__field--donationAmt .en__field__input--radio + .en__field__label { /* margin-left: 0px !important; margin-right: .5em; */ } /*4. Split to 3 buttons */ @media (min-width: 41.25em) { } /* RECURRING - hide label*/ .en__field--recurrpay label.en__field__label:not(.en__field__label--item) { display: none; } /* Form Block Component: */ @media (min-width: 41.25em) { /* Safari 5.1 Windows */ #main-content .en__component--formblock.tribute-information > .en__field { width: 100%; display: none; } #main-content .en__component--formblock.tribute-information > .en__field:not(.en__hidden) { display: inline-block !important; } #main-content .en__component--formblock.tribute-information > .en__field:nth-child(3) { width: 100%; } /* Modern Browsers */ #main-content .en__component--formblock.tribute-information { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #main-content .en__component--formblock.tribute-information > .en__field { -ms-flex-preferred-size: 48%; flex-basis: 48%; } #main-content .en__component--formblock.tribute-information > .en__field:nth-child(3) { -ms-flex-preferred-size: 100%; flex-basis: 100%; } #main-content .en__component--formblock.tribute-information > .en__field:nth-child(1) { /* margin-right: 0.5rem; */ } #main-content .en__component--formblock.tribute-information > .en__field:nth-child(2) { /* margin-left: 0.5rem; */ } } /* Adding Other to the label */ .en__field__item--other-radio label.en__field__label.en__field__label--item:after { content: "Other"; } /* Updating textarea height */ #main-content textarea { height: 5rem !important; } input[type=radio]:checked + label { font-weight: bold } /* WPR - Hide duplicate 'no thank you gift' option. i.e. WPR has a 'product' in EN called 'no thank you gift', rather than relying on the default 'no gift' option in EN for UX reasons. This hides that default no gift option from EN, so that our product selection for no gift can be displayed. */ div.en__pgList > div:last-of-type { background: red; display: none; } .en__pg__image { max-height: 250px !important; max-width: 200px !important; } h2.en__pg__name { margin: auto } /* NEW 4SITE PREMIUM SELECTION RELATED CSS STYLING 2023-01 */ body { --fields_spacing-block: 0.5rem; --fields_spacing-inline: 0.25em; --radio_background-color: #fff; --radio_background-color_hover: #fff; --radio_background-color_selected: #2ba6cb; --radio_border-background-color: #fff; --radio_border-color: #2ba6cb; --radio_border-color_hover: #767677; --radio_border-color_selected: #2ba6cb; --radio_border-radius: 50%; --radio_border-width: 2px; --radio_box-shadow: none; --radio_box-shadow_hover: none; --radio_box-shadow_selected: inset 0 0 0 4px #fff; --radio_color: #000; --radio_color_hover: #000; --radio_color_selected: #2ba6cb; --radio_content: ""; --radio_font-family: "Fira Sans", "Segoe UI", Helvetica, Arial, sans-serif; --radio_font-size: 16px; --radio_font-weight: ; --radio_height: 22px; --radio_line-height: 1.7; --radio_text-transform: ; --radio_top: 0px; --radio_width: 22px; } .en__pg__display img { max-width: 150px !important; min-width: 100% !important; } .en__pg .en__pg__body { display: grid; grid-template-columns: min-content auto auto; grid-template-rows: min-content; grid-auto-columns: min-content; grid-auto-rows: min-content; gap: 0px 0px; grid-auto-flow: row; align-items: center; grid-template-areas: "en__pg__select en__pg__detail en__pg__display"; cursor: pointer; } .en__pg__select { min-width: 35px; align-self: center; grid-area: en__pg__select; padding: 0 calc(var(--fields_spacing-inline) * 2) 0 0; } .en__pg__display { grid-area: en__pg__display; padding: 0 0 0 calc(var(--fields_spacing-inline) * 2); } .en__pg__detail { grid-area: en__pg__detail; padding: 0; position: relative; display: flex; flex-direction: column; gap: 5px; } .en__pg__detail > * { width: 100%; } .en__pg__detail .en__pg__name { order: 1; } .en__pg__detail .en__pg__optionTypes { order: 2; flex-direction: column; margin: 10px 0; width: 90%; } .en__pg__detail .en__pg__description { order: 4; } .en__pg__detail .en__pg__optionTypes label { display: none; } .en__pg__detail .en__pg__description > * { margin: 0 0 10px; } .en__pg__detail .en__field__error { order: 3; top: auto !important; position: relative !important; } .en__pg__name { margin-top: 0; } h2.en__pg__name { text-align: left; } .en__pg__optionType { display: flex; flex-direction: column; margin: 0; } .en__pg__optionType select { width: auto; margin: 0 !important; } .en__pg__image { max-width: 125px; min-width: 100%; } .en__pg--selected .en__pg__image--selected { outline-color: transparent; } .en__pg.en__pg--selected { background-color: rgb(44 166 203 / 10%); } .en__pgList[data-nogift] .en__pg:last-of-type .en__pg__display { flex-basis: 0; padding: 0; } .en__pg__select input { cursor: pointer; visibility: hidden; width: 30px; max-width: min-content; content: ""; min-height: var(--radio_height); } .en__pg__select input:before { visibility: visible; content: var(--radio_content); justify-content: center; align-items: center; color: var(--radio_color); background-color: var(--radio_background-color); border-style: solid; border-width: var(--radio_border-width); border-color: var(--radio_border-color); border-radius: var(--radio_border-radius); height: var(--radio_height); width: var(--radio_width); min-width: var(--radio_width); box-shadow: var(--radio_box-shadow); display: flex; } .en__pg__select input:focus:before, .en__pg__select input:hover:before { color: var(--radio_color_hover); background-color: var(--radio_background-color_hover); border-color: var(--radio_border-color_hover); box-shadow: var(--radio_box-shadow_hover); } .en__pg__select input:not(:checked):before { color: transparent; } .en__pg__select input:checked:before { color: var(--radio_color_selected); background-color: var(--radio_background-color_selected); border-color: var(--radio_border-color_selected); box-shadow: var(--radio_box-shadow_selected); } @media (max-width: 41.25em) { .en__pg .en__pg__body { grid-template-areas: "en__pg__select en__pg__detail" "en__pg__display en__pg__display"; gap: 10px; } .en__pg__display { padding: 0; max-width: 450px; margin: 0 auto; } } @media (min-width: 41.25em) { html { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } body { background-color: initial; } /** Red * for Mandatory Fields .en__mandatory label.en__field__label:not(.en__field__label--item)::after { content: "*"; color: red; }**/ /** STYLES and COLORS **/ #main-content .en__submit button { background: $ { blueprint ~ buttoncolor } ; } /** Disable this to align page to center **/ #main-content-wrapper { margin: initial; } #main-content { font-family: $ { blueprint ~ primaryfont } ; color:$ { blueprint ~ primarycolor } ; } #main-content h1 { font-family: $ { blueprint ~ heading1font } ; color:$ { blueprint ~ heading1color } ; } #main-content h2 { font-family:$ { blueprint ~ heading2font } ; color:$ { blueprint ~ heading2color } ; } #main-content h3 { font-family: $ { blueprint ~ heading3font } ; color:$ { blueprint ~ heading3color } ; } #main-content a { color$ { blueprint ~ linkcolor } ; } #main-content-inner .en__field__input--radio:checked + .en__field__label:before, #main-content-inner .en__field__input--checkbox:checked + .en__field__label:before { border-color: $ { blueprint ~ buttoncolor } ; background-color: $ { blueprint ~ buttoncolor } ; } /** Hide Fix **/ .en__hidden { display: none !important; } /** Fixes the column issue **/ #main-content .en__component--advrow .en__component--column { min-width: inherit !important; } #main-content .en__component--row.en__component--advrow { display: flex; flex-wrap: wrap; } #main-content .en__component--column { min-width: inherit !important; } p#ah-disclaimer, p#ah-disclaimer span { font-size: 16px; } @media (max-width: 35.25em) { #main-content-inner{ padding: 0 20px; } #main-content .en__field--donationAmt .en__field__item{ width: 100%; } .en__field__element--radio.frequency div{ margin: 0; } .en__field__element--radio.frequency label { font-size: 0.8rem; } ul.wpr-page-steps li { width: 33%; padding: 20px; font-size: 18px; } ul.wpr-page-steps li, ul.wpr-page-steps li strong { font-size: 14px; } #main-content .en__component--formblock.personal-information > .en__field:nth-child(3),#main-content .en__component--formblock.personal-information > .en__field:nth-child(2), #main-content .en__component--formblock.personal-information > .en__field:nth-child(1) { -ms-flex-preferred-size: 100%; flex-basis: 100%; margin: 0; } #main-content-inner{ padding: 0 10px; } .en__field__element--radio.frequency{ flex-direction: column; } } /* MWD Styles */ section#wpr-page-steps{ display: flex; width: 100%; } ul.wpr-page-steps{ display: flex; width: 100%; padding: 0; margin: 0; text-align: center; } ul.wpr-page-steps li{ flex-grow: 1; list-style: none; padding: 20px 0; height: 30px; color: #696969; } ul.wpr-page-steps li a{ color: #696969 !important; text-decoration: underline; } ul.wpr-page-steps li a:visited{ color: #696969; text-decoration: underline; } ul.wpr-page-steps li strong{ font-weight: bold; color: #000000; } /* CHARITY NAVIGATOR */ img.threeStarCharity{ margin: 0 auto; display: flex; } img.thirdStepCharityLogo{ max-width: 300px; height: auto; margin: 0 auto; display: block !important; } /* Other */ .en__field__input--other{ padding: 1.5rem 1rem !important; }