@font-face { font-family: SourceSansPro; src: url('fonts/SourceSansPro-Regular.otf'); } @font-face { font-family: SourceSansPro; src: url('fonts/SourceSansPro-Bold.otf'); font-weight: bold; } @font-face { font-family: SourceSansPro; src: url('fonts/SourceSansPro-It.otf'); font-style: italic; } @font-face { font-family: SourceSansPro; src: url('fonts/SourceSansPro-BoldIt.otf'); font-weight: bold; font-style: italic; } @font-face { font-family: SourceSansPro; src: url('fonts/SourceSansPro-Light.otf'); font-weight: 300; } @font-face { font-family: SourceSansPro; src: url('fonts/SourceSansPro-LightIt.otf'); font-style: italic; font-weight: 300; } /* There's another global layout option in the footer section, that pushes the main #wrapper down */ html, body { height: 100%; margin: 0px !important; min-width: 520px; font-family: 'SourceSansPro', sans-serif; font-size: 14pt; font-weight: 300; background-color: #F1F2E3; color: white; } html { overflow-y: scroll; } /* These describe our vertical hierarchy elementes */ .collapsable { width: 100%; padding: 0.4em 0 0.4em 0px; margin-left: 0; margin-right: 0; } /* This defindes our content width */ .block-header, .juice { overflow: hidden; width: 480px; margin: 0.5em auto 0 auto; padding: 0; } ul { list-style-type: none; padding-left:0; } h1 { font-size: 30pt; font-weight: 300; text-transform: uppercase; cursor: pointer; vertical-align: top; padding: 0px 0px 0px 10px; } h1 svg { transform: scale(1.35) translate(0px, 4px) rotate(0deg); margin-right: 21px; float: left; transition: transform 0.5s; } #wrapper.step-1 h1 svg { transform: scale(1.35) translate(0px, 4px) rotate(360deg); } h2 { font-size: 24pt; font-weight: 300; cursor: pointer; } /* Never show links with underlines, if we need to, we make dotted bottom borders */ a:link, a:visited { text-decoration: none; color: black; } /* ******** Style text input boxes ******** */ input[type="text"] { width: 95%; padding: 0.4em 0.6em 0.4em 0.6em; margin-bottom: 0.7em; border: 0px solid rgba(255, 255, 255, 0.30); border-radius: 6px; font-family: 'SourceSansPro', sans-serif; font-size: 13pt; font-weight: normal; transition: background-color 1s; background-color: rgba(255, 255, 255, 0.30); color: white; } input[type="text"].missing { background-color: rgba(255, 127, 127, 0.60); } /* Remove blue focus hint */ input:focus { outline: none !important; } /* Style place holder text (and repeat for each browser namespace:( */ ::placeholder { color: white; opacity: 0.5; font-variant: small-caps; font-weight: normal; letter-spacing: 0.15em; } ::-moz-placeholder { color: white; opacity: 0.5; font-variant: small-caps; font-weight: normal; letter-spacing: 0.15em; } ::-ms-placeholder { color: white; opacity: 0.5; font-variant: small-caps; font-weight: normal; letter-spacing: 0.15em; } ::-webkit-input-placeholder { color: white; opacity: 0.5; font-variant: small-caps; font-weight: normal; letter-spacing: 0.15em; } /* Placeholder text should disappear when giving input the focus */ input:focus::placeholder { opacity: 0; } :focus::-moz-placeholder { opacity: 0; } :focus::-ms-placeholder { opacity: 0; } :focus::-webkit-input-placeholder { opacity: 0; } /* ********* Style select boxes ******** */ select { height: 2em; border-radius: 4px; font-family: 'SourceSansPro', sans-serif; font-size: 13pt; font-weight: 300; } input[type=checkbox]:not(old) { display: none; opacity: 0; } input[type=checkbox]:not(old) + label { display: inline-block; margin-left: 0; line-height: 1.7em; text-indent: -68px; /* Make 2nd line of label align, takes border width of tickbox into account */ padding-left: 68px; } input[type=checkbox]:not(old) + label > span { display: inline-block; width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0.30); margin: 2px 36px 8px 2px; border: 0px solid rgba(255, 255, 255, 0.30); border-radius: 6px; vertical-align: top; font-size: 1pt; } input[type=checkbox]:not(old):checked + label > span { transition: font-size 0.4s; font-size: 17pt; } input[type=checkbox]:not(old):checked + label > span:before { content: '✓'; display: inline-block; width: 28px; color: white; text-align: left; font-weight: bold; margin-left: 144px; } label { margin-bottom: 1em; } label:first-line { vertical-align: middle; } /* Global element definitions done. Now for basic color scheme */ #unsicher { background-color: #840020; } #footer { background-color: #F1F2E3; } .block-step1 { background-color: #F1F2E3; } .block-step2 { background-color: #047E7C; } .block-step3 { background-color: #0C6D74; } .block-step4 { background-color: #145C6C; } .block-step5 { background-color: #1C4B64; } .block-step6 { background-color: #243A5C; } .block-step7 { background-color: #2C2954; } /* Those background definitions must match font colors of circles with numbers to appear as cut-outs */ .block-step1 .circle_num { color: #F1F2E3; } .block-step2 .circle_num { color: #047E7C; } .block-step3 .circle_num { color: #0C6D74; } .block-step4 .circle_num { color: #145C6C; } .block-step5 .circle_num { color: #1C4B64; } .block-step6 .circle_num { color: #243A5C; } .block-step7 .circle_num { color: #2C2954; } /* Block 1 needs black font and circles for contrast */ .block-step1 { color: black !important; } .block-step1 .circle_num { background-color: black; } #footer { color: #787970; } /* Shadows between sections give the user a sense of depth between stacked cards */ .block-step2, .block-step3, .block-step4, .block-step5, .block-step6, .block-step7, #unsicher { box-shadow: inset 0px 8px 6px -5px rgba(0, 0, 0, 0.5); } /* Footer shadow is inverted an marks end of stacked cards */ #footer { box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5); } /* Circles in headings guide the user through the 5 step process */ .circle_num { float: left; margin: 0 28px 0 0; width: 40px; height: 40px; border-radius: 50%; border: 0px; line-height: 1.2em; font-size: 23pt; text-align: center; background-color: #F1F2E3; font-weight: normal; } .circle_num.undone { transform: rotate3d(0, 0, 0, 0deg); transition: transform 0.5s 0.5s, visibility 0.5s 0.5s; } /* step1 has a h1 and the circle needs more finetuning to fit headline */ .block-step1 .circle_num { margin: 4px 28px 0 0; line-height: 1.3em; } /* Define rest of font styles */ .hint { font-style: italic; font-weight: 300; } dt { font-weight: bold; } dd { margin: 0; } .block-step1 a:link, .block-step1 a:visited { border-bottom: dotted 1px rgba(0,0,0,0.25); } /* Our inter-step animations rely on the section's max-height being transitioned from 0 to the original height. Initially hide all sections and only unhide them depending on the global state (as set with a class on the wrapper element) */ .juice, .block-moreinfo, #unsicher, #wrapper.step-0 h2 { overflow: hidden; max-height: 0px; transition: max-height, height; transition-timing-function: ease; transition-duration: 0.5s; transition-delay: 0s; } .link-faq, .hide-moreinfo, .show-moreinfo { display: inline-block; border-bottom: dotted 1px rgba(0,0,0,0.25); margin: auto 1em 1em auto; cursor: pointer; } .link-faq { display: none; } .hide-moreinfo { display: none; } #wrapper.moreinfo-shown .hide-moreinfo { display: inline-block; } #wrapper.moreinfo-shown .link-faq { display: inline-block; } #wrapper.moreinfo-shown .show-moreinfo { display: none; } .hidden { overflow: hidden; max-height: 0px; transition: max-height, height, background-color; transition-duration: 0.5s; } .warnmiss { width: 95%; max-height: 5em; background-color: #E65946; border-radius: 6px; text-align: center; color: white; padding: 0.4em 0.6em 0.4em 0.6em; transition: max-height, height, background-color; transition-duration: 0.5s; } /* These are the heights of the expanded sections, only shown if the wrapper has the appropriate class */ #wrapper.step-1 .block-step1 .juice { max-height: 550px; } #wrapper.step-2 .block-step2 .juice { max-height: 950px; } #wrapper.step-3 .block-step3 .juice { max-height: 1050px; } #wrapper.step-4 .block-step4 .juice { max-height: 1050px; } #wrapper.step-5 .block-step5 .juice { max-height: 1200px; } #wrapper.step-6 .block-step6 .juice { max-height: 850px; } #wrapper.step-7 .block-step7 .juice { max-height: 650px; } #wrapper.moreinfo-shown .block-moreinfo { max-height: 3700px; } #wrapper.step-1.moreinfo-shown .block-step1 .juice { max-height: 4500px;} /* The unsicher section does not have a headline initially visible, so the sections padding must be hidden and everything must be unhidden together */ #unsicher { padding-top: 0; padding-bottom: 0; } #wrapper.step-0 .block-step0 .juice, #wrapper.step-0 #unsicher { max-height: 450px; } /* If the user did not yet confirm that he's sure, disallow expanding blocks */ .block-header { pointer-events: none; } #wrapper.stepdone-0 #head1 { pointer-events: auto; } #wrapper.stepdone-1 #head2 { pointer-events: auto; } #wrapper.stepdone-2 #head3 { pointer-events: auto; } #wrapper.stepdone-3 #head4 { pointer-events: auto; } #wrapper.stepdone-4 #head5 { pointer-events: auto; } #wrapper.stepdone-5 #head6 { pointer-events: auto; } #wrapper.stepdone-6 #head7 { pointer-events: auto; } /* Our navigational buttons have a consistent height defined by its wrapper box */ .two-buttons, .one-button { height: 4em; margin: 2.5em 0 1.5em 0; } /* Style our buttons */ .button { width: 45%; height: 2em; padding-top: 0.7em; padding-bottom: 0; border-radius: 10px; color: white; font-weight: bold; text-align: center; text-transform: uppercase; transition-duration: 0.2s; cursor: pointer; } .button-green { background-color: #8ECA63; } .button-green:hover { background-color: #96E65C; } .button-red { background-color: #E65946; } .button-red:hover { background-color: #FF1E00; } .one-button .button-green { /* Place buttons, single green is centered, two buttons float */ margin-right: auto; margin-left: auto; } .two-buttons .button-green { float: left; } .button-red { float: right; } /* Smaller buttons are for non-navigational purposes */ .button-small { display: inline-block; padding: 0.2em 0.4em 0.2em 0.4em; margin: 0 0.4em 1em 0; border-radius: 4px; background-color: white; color: #222; font-weight: normal; font-size: 13pt; cursor: pointer; transition-duration: 0.2s; } .button-small:hover { background-color: rgba(255, 255, 255, 0.30); color: white; } /* Style things that depend on the progress. Example: circles turn squares when a step is finished */ .circle_num.done { position: relative; margin-right: -68px; left: -68px; visibility: hidden; transition: transform 0.5s, visibility 0.5s; transform: rotate3d(45, 45, 1, 90deg); background-color: #8ECA63;; color: white; } #wrapper.stepdone-2 .block-step2 .circle_num.undone, #wrapper.stepdone-3 .block-step3 .circle_num.undone, #wrapper.stepdone-4 .block-step4 .circle_num.undone, #wrapper.stepdone-5 .block-step5 .circle_num.undone, #wrapper.stepdone-6 .block-step6 .circle_num.undone { transform: rotate3d(45, 45, 1, 90deg); transition: transform 0.5s, visibility 0.5s; visibility: hidden; } #wrapper.stepdone-2 .block-step2 .circle_num.done, #wrapper.stepdone-3 .block-step3 .circle_num.done, #wrapper.stepdone-4 .block-step4 .circle_num.done, #wrapper.stepdone-5 .block-step5 .circle_num.done, #wrapper.stepdone-6 .block-step6 .circle_num.done { visibility: visible; transform: rotate3d(0,0,0,0deg); transition: transform 0.5s 0.5s, visibility 0.5s 0.5s; } /* Make shift date selector */ select.tag { width: 15%; margin-right: 3%; } select.monat { width: 25%; margin-right: 3%; } select.jahr { width: 15%; margin-right: 3%; } select.zeit { min-width: 20%; width: 25%; } /* ******** FOOTER ******** */ /* This ensures there's always enough space to push footer to the bottom of the screen */ #wrapper { width: 100%; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -300px; } #footer, .push { height: 300px; border: none; } #footer { width: 100%; min-width: 520px; margin: 0; padding: 50px 0px 0 0px; font-size: 11pt; font-weight: 300; overflow: hidden; text-align: center; } /* Footer links have a softer color than in block 1 */ #footer a:link, #footer a:visited { color: #787970; } #footer .partner a:link, #footer .implementor a:link, #footer .partner a:visited, #footer .implementor a:visited, #footer .show-impressum span { border-bottom: dotted 1px rgba(0,0,0,0.25); } #footer .show-impressum { cursor: pointer; margin-bottom: 1em; } .partners { width: 480px; padding: 0; margin: 0 auto 24px auto; border: none; } .partner { display: inline-block; vertical-align: bottom; width: 160px; height: 120px; margin: 0px 0px 0px 0px; } .partner > img { opacity: 0.5; padding: 0 0 0 10px; margin-bottom: 10px; transform: rotate(0deg); transition: transform 1s; } #footer.impressum-shown .partner > img { transform: rotate(720deg); } .partner#ccc > img { padding: 10px 0 0 0; margin: 0; } .implementor { margin-bottom: 0.3em; } /* ******** Horizontal footer slide magic ******** */ .scrollcontainer { width: 200%; } .block-impressum { float: right; width: 50%; height: 260px; position: relative; transition: left 1s; top: 0; left: 0%; } .block-impressum p { margin: 0 0 .1em 0; } #footer.impressum-shown .block-impressum { left: -50%; top: 0; } .block-credits { width: 50%; float: left; position: relative; left: 0; transition: left 1s; margin: 0; } #footer.impressum-shown .block-credits { left: -50%; } .visdp, .datenschutz { vertical-align: top; display: inline-block; width: 188px; margin: 2em 0 0 32px; text-align: left; padding: 0 0 0 0; } .back { background-color: #8E99A0; display: inline-block; float: none; color: #F1F2E3; width: 40px; height: 40px; cursor: pointer; margin: 65px 0 0 0; } .back:hover { background-color: black; }