/** `.formdesign-minimal` is a class that demarcates the minimal design of the donation banner. */ #donate_banner.template-chevron { color: #fff; background-color: #fff; } #donate_banner.template-chevron .donate-notification { background-color: #EEEE37; } #donate_banner.template-chevron #donate-close-button { top: 10px; right: 7px; } #donate_banner.template-chevron #donate-close-button img { filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8)); } #donate_banner.template-chevron #donate-close-button #banner-close-image-white { display: block; } #donate_banner.template-chevron #donate-close-button #banner-close-image-dark { display: none; } #donate_banner.template-chevron .donate-body { padding: 0 4rem 0 0; height: 100%; } #donate_banner.template-chevron.goldbarvisible .donate-body { height: calc(100% - 4rem); } #donate_banner .supplemental-background-layer { position: absolute; width: 100%; height: 100%; z-index: -1; } #donate_banner .snowflake__inner_type_0:before, #donate_banner .snowflake__inner_type_2:before, #donate_banner .snowflake__inner_type_4:before { background-image: url('../images/thank-you-banner/snowflakes/snowflake-filled.svg'); } #donate_banner .snowflake__inner_type_1:before, #donate_banner .snowflake__inner_type_3:before, #donate_banner .snowflake__inner_type_5:before { background-image: url('../images/thank-you-banner/snowflakes/snowflake-open.svg'); } #donate_banner.template-chevron.background-winter #donate-body-background-layer1 { background-image: url('../images/thank-you-banner/ground-trees-tile.svg'); background-repeat: repeat-x; background-position: 0 100%; } #donate_banner.template-chevron.background-winter #donate-body-background-layer2 { background-image: url('../images/thank-you-banner/snowfall-tile.svg'); } #donate_banner.template-chevron .main-content { padding: 1rem 1rem 1.5rem 1rem; } @media (max-width: 767px) { #donate_banner.template-chevron .main-content { padding: 1rem 1rem 0 1rem; } } #donate_banner.template-chevron.formdesign-minimal .main-content { padding: 1rem; } #donate_banner.template-chevron .appeal-text { margin-bottom: 1rem; } #donate_banner.template-chevron.formdesign-minimal .appeal-text { margin-bottom: 0; } #donate_banner.template-chevron #banner-body-left-container { clip-path: polygon(0% 0%, calc(100% - 4rem) 0%, 100% 50%, calc(100% - 4rem) 100%, 0% 100%); background-color: var(--donationBannerChevronBG, #194880); } #donate_banner.template-chevron .donate-form .donate-form-chevrons { display: block; width: 4rem; height: 100%; background-color: var(--donationBannerChevronBG, #194880); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%, 4rem 50%); } #donate_banner.template-chevron.formdesign-minimal .donate-form .donate-form-chevrons { width: 5rem; } #donate_banner.template-chevron #chevron-image-container { clip-path: polygon(0% 0%, calc(100% - 4rem) 0%, 100% 50%, calc(100% - 4rem) 100%, 0% 100%); } #donate_banner.template-chevron.chevron-image-girlsreading #chevron-image-container { width: 100%; background-image: url('../images/girls_reading.jpg'); max-width: 250px; background-repeat: no-repeat; background-position: 44% 35%; background-size: cover; } #donate_banner.template-chevron.chevron-image-white #chevron-image-container { height: 100%; background-color: #fff; flex: 0 0 4rem; } #donate_banner.template-chevron.goldbarvisible #chevron-image-container { clip-path: polygon(0% -4rem, calc(100% - 4rem) -4rem, 100% calc(50% - 2rem), calc(100% - 4rem) 100%, 0% 100%); } #donate_banner.template-chevron donation-form-edit-donation { color: #2c2c2c; --paymentButtonSelectedColor: #194880; --paymentButtonFontColor: #000; --paymentButtonSelectedFontColor: #fff; } #donate_banner.template-chevron .cta-button { background-color: #23765D; } @media (min-width: 768px) { #donate_banner.template-chevron .donate-form .white-box { padding: 1rem 1.5rem; } #donate_banner.formdesign-minimal.template-chevron .donate-form .white-box { padding: 0; } #donate_banner.template-chevron.formdesign-minimal #donate-close-button { top: 5px; } } @media (max-width: 767px) { #donate_banner.template-chevron.background-winter #donate-body-background-layer1 { background-image: none; } #donate_banner.template-chevron.goldbarvisible #donate-close-button #banner-close-image-white { display: none; } #donate_banner.template-chevron.goldbarvisible #donate-close-button #banner-close-image-dark { display: block; } #donate_banner.template-chevron .donate-body { width: 100%; padding: 0 0 1rem 0; } #donate_banner.template-chevron .donate-form { width: 100%; padding: 1rem; } #donate_banner.template-chevron.goldbarvisible #chevron-image-container, #donate_banner.template-chevron #chevron-image-container { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 3rem), 50% 100%, 0% calc(100% - 3rem)); } #donate_banner.template-chevron.goldbarvisible.chevron-image-girlsreading #chevron-image-container, #donate_banner.template-chevron.chevron-image-girlsreading #chevron-image-container { max-width: unset; height: 100px; width: 100%; } #donate_banner.template-chevron.goldbarvisible.chevron-image-white #chevron-image-container, #donate_banner.template-chevron.chevron-image-white #chevron-image-container { max-width: unset; flex: 0 0 3rem; width: 100%; } #donate_banner.template-chevron #banner-body-left-container { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 3rem), 50% 100%, 0% calc(100% - 3rem)); padding-bottom: 2rem; } #donate_banner.template-chevron .donate-form .donate-form-chevrons { display: none; } #donate_banner.template-chevron .donate-form .white-box { padding: 0; } }