:root { accent-color: #009ee3; --color-1: #e5007d; --transition-short: all 0.3s ease-in-out; } /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* global */ .path-spenden p { margin: 0 0 8px; } .path-spenden p:last-child { margin: 0; } /* wrapper */ body { font: 400 17px/24px Calibri,sans-serif; color: #333; background-position: center center; background-size: cover; } header { text-align: right; margin: 0 0 12px; } header img { width: 120px; } main.main-container { padding: 28px; } @media only screen and (min-width: 768px) { main.main-container { width: 100%; max-width: 750px; margin: 40px; background: #fff; } } @media only screen and (min-width: 950px) { main.main-container { margin: 40px 0 40px 160px; } } body.path-spenden #edit-links p { padding-top: 50px; } /* Intro */ .path-spenden h1 { font-family: "TexGyreHeros Bold",sans-serif; font-size: 1.375rem; font-size: clamp(1.375rem, 1.25rem + 0.625vw, 1.625rem); line-height: 1.2308; margin: 0 0 16px; } .path-spenden .form-item-intro { margin: 0 0 24px; } /* amount */ div#edit-amount-range { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 20px; } div#edit-amount-range .form-item { width: unset; height: unset; margin: 0; flex: 1 0 auto; } div#edit-amount-range label { display: flex; justify-content: center; align-items: center; padding: 10px; font: 400 22px/1.6667 "TexGyreHeros Bold"; color: #fff; background: var(--color-1); cursor: pointer; } @media only screen and (min-width: 768px) { div#edit-amount-range label { font-size: 24px; padding: 30px 0; } } #edit-amount-range label:hover { background: #009ee3; } div#paypment-other-amount > div { display: flex; justify-content: center; align-items: center; border: 1px solid #e9e9ee; margin: 0 0 24px; padding: 10px; } div.form-item-amount { display: block!important; position: relative; } div.form-item-amount::after { content: '€'; position: absolute; left: unset; right: 10px; top: calc(50% - .45em); font: 400 24px/1 "TexGyreHeros Bold"; } div.form-item-amount .form-text { position: relative; margin: 0; } .form-item-amount label { font-family: 'Calibri Bold'; margin: 0 24px 0 0; } .form-item-amount::after { content: unset; } /* payment method */ .path-spenden #uv-spenden-form button.button:not(#edit-payment-additional-information):not(.edit-choose-default) { border-radius: 0; display: block; width: 100%; margin: 0 0 15px; padding: 14px 0; font: 400 17px/1 'Calibri Bold',sans-serif; text-transform: uppercase; text-align: center; background: var(--color-1); color: #fff; border: 0; cursor: pointer; } .path-spenden button.button:not(#edit-payment-additional-information):not(.edit-choose-default):hover, .path-spenden button.button:not(#edit-payment-additional-information):not(.edit-choose-default)[data-drupal-selector="edit-stripe"]:hover, .path-spenden button.button:not(#edit-payment-additional-information):not(.edit-choose-default):focus { background: #CC0070; } .path-spenden #edit-paypment-method-wrapper button.button:not(#edit-payment-additional-information):not(.edit-choose-default)[disabled] { background: #F4F5F6; color: #6C6C6C; cursor: default; } /* form items */ .form-text, .form-email, .form-select, .StripeElement { width: 100%; margin: 0 0 16px; padding: 11px 20px; min-height: 44px; border: 0; border-bottom: 1px solid #d3d4d6; background: #f7f7f7; font: 400 17px/1 Calibri, sans-serif; } .path-spenden .form-text:focus, .path-spenden .form-text:active, .path-spenden .form-email:focus, .path-spenden .form-email:active, .path-spenden .form-select:focus, .path-spenden .form-select:active, .path-spenden .StripeElement:focus, .path-spenden .StripeElement:active { border-color: var(--color-1); } .form-item-note { font-size: 16px; line-height: 20px; color: #6c6c6c; margin: 0 0 18px; } .form-text[name="zip_code"] { width: 100px; margin-right: 15px; } div#email-consent { margin: 8px 0 24px; } .form-item-legal .form-checkbox { opacity: 1; -webkit-appearance: auto; width: 18px; height: 18px; margin: 0; } div.form-item-legal .control-label.option:before { content: unset; } div.form-item-legal .form-checkbox:checked + .control-label.option:before { content: unset; } div.form-item-legal .form-checkbox, div.form-item-legal .control-label.option { vertical-align: middle; cursor: pointer; } div.form-item-legal .form-checkbox { margin: 0 10px 0 0; } /* ######################################### Hotfix Hessen ######################################## */ .uv-spenden-form.receiver-07000000 #edit-choose-payment-amount, .uv-spenden-form.receiver-07000000 #paypment-amount-wrapper > div > fieldset > legend, .uv-spenden-form.receiver-07000000 #edit-intro img, .uv-spenden-form.receiver-07000000 #paypment-more-information-wrapper .form-type-select { display: none!important; } .uv-spenden-form.receiver-07000000 { margin: 0 0 220px; /* sticky payment-method-wrapper */ } @media only screen and (min-width: 768px) { .uv-spenden-form.receiver-07000000 { margin: 0; } } .uv-spenden-form.receiver-07000000 #edit-amount-range { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); grid-gap: 16px; position: relative; } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:not(:first-child) { position: relative; } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:not(:first-child) { display: flex; justify-content: center; flex-wrap: wrap; padding: 135px 0 0; } @media only screen and (min-width: 950px) { .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:not(:first-child) { padding: 200px 0 0; } } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:not(:first-child):after { flex: 1 0 100%; padding: 10px 15px 25px; font-size: 16px; line-height: 1.25; } /* tile 0 € (hidden) */ /* tile 10 € */ .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(2) { background: url(/themes/custom/spenden/images/spenden-he-fruchtgummi.jpg) no-repeat; } @media only screen and (min-width: 950px) { .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(2) { background: url(/themes/custom/spenden/images/spenden-he-fruchtgummi-desktop.jpg) no-repeat; } } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(2):after { content: 'So können wir zum Beispiel 100 Tüten Fruchtgummi für unsere Wahlkampf-Stände finanzieren.'; } /* tile 100 € */ .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(3) { background: url(/themes/custom/spenden/images/spenden-he-anzeigen.jpg) no-repeat; } @media only screen and (min-width: 950px) { .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(3) { background: url(/themes/custom/spenden/images/spenden-he-anzeigen-desktop.jpg) no-repeat; } } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(3):after { content: 'So können wir zum Beispiel durch Anzeigen 50.000 Menschen in sozialen Medien erreichen.'; } /* tile 1.000 € */ .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(4) { background: url(/themes/custom/spenden/images/spenden-he-werbespot.jpg) no-repeat; } @media only screen and (min-width: 950px) { .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(4) { background: url(/themes/custom/spenden/images/spenden-he-werbespot-desktop.jpg) no-repeat; } } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item:nth-child(4):after { content: 'So können wir zum Beispiel unseren Werbespot drei Wochen in hessischen Kinos laufen lassen.'; } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item input { opacity: 1; top: 0; width: 100%; height: 100%; border: 2px solid #DCDFE5; transition: var(--transition-short); } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item label { display: inline-block; width: auto; height: auto; padding: 0; font: 400 26px/1 "TexGyreHeros Bold"; color: #333; background: none; } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item label:before { content: ''; display: inline-block; width: 20px; height: 20px; margin: 0 10px 0 0; border: 2px solid #DCDFE5; border-radius: 50%; transition: var(--transition-short); } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item .form-radio:checked { border-color: var(--color-1); } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-radio:checked + .control-label.option { background: unset; } .uv-spenden-form.receiver-07000000 #edit-amount-range .form-item .form-radio:checked + .control-label.option:before { border-color: var(--color-1); background: var(--color-1); box-shadow: inset 0px 0px 0px 2px #fff; } .uv-spenden-form.receiver-07000000 #paypment-method-wrapper { position: fixed; bottom: 0; width: 100%; left: 0; padding: 20px 28px 0; background: #fff; } .uv-spenden-form.receiver-07000000 #paypment-method-wrapper:has(.form-wrapper:not(#edit-paypment-method-wrapper)) { position: static; padding: 0; } @media only screen and (min-width: 768px) { .uv-spenden-form.receiver-07000000 #paypment-method-wrapper { position: static; padding: 0; } } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .bank-information:hover .tooltiptext { visibility: visible; opacity: 1; } .tooltip .iban-text, .tooltip .bic-text { visibility: hidden; font-size: 0; } .tooltip .copy-iban, .tooltip .copy-bic { background: url(../images/copy.svg); width: 24px; height: 24px; display: block; cursor: pointer; transform: scale(0.7); } .bank-information { display: inline; padding: 2px; cursor: pointer; } .bank-information:hover { background: #F4F5F6; } .bank-information-2 { padding: 2px; } /* .tooltip .copy-iban:hover, .tooltip .copy-bic:hover { background: url(../images/content_copy_2.svg); } */