body.is-open { height: 100%; overflow-y: hidden; } .l-change-pop { margin-top: 18px; } .is-open .l-change-pop { height: auto; margin-top: 18px; padding: 10px 50px; } .l-navigation__logo { height: 44px; } .l-navigation__menu { .scrollable { height: 100%; overflow-y: scroll; padding-bottom: 30px; } } .l-navigation__menu__book__header { display: flex; align-items: center; justify-content: space-between; p { margin: 0; &.korona { &:before { content: url('images/korona.svg'); width: 21px; margin-right: -21px; position: relative; top: -10px; left: -3px; } } } } .l-navigation__menu__book { .button { display: inline-block; font-size: 16px; font-weight: 700; padding: 0 20px; min-width: 212px; line-height: 38px; text-align: center; /* green 700 */ background: #92BD39; color: #083F4D; border-radius: 6px; transition: background-color 150ms; &:hover { background-color: #FBC40F; } } } .l-navigation__menu__book__info { img { width: 42px; height: 60px; } } .l-navigation__menu__links ul li a em { font-style: normal; color: #FFA500; font-weight: 600; } .l-navigation__login { color: #74BDC2; margin-right: 20px; a { color: white; } } .l-navigation__actions { position: relative; height: 44px; .user { margin-right: 25px; } } .l-books { margin-right: -17px; } .l-books__grid { margin-right: -17px; } .l-books__item { width: 212px; margin-right: 17px !important; // reverse the 5n+5 rule. transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms; } .by-popularity { .l-books__item { order: attr(data-pop); } } .toggle-input { left: calc(50% - 77px/2); opacity: 0; position: absolute; //top: 0; height: 26px; width: 77px; z-index: 2; &:checked { z-index: 0; } } .l-checkout__box { position: relative; } .l-checkout__payments { display: none; } .toggle-input{ &#switch-once:checked { ~.l-switch__wrapper { label { &:nth-of-type(1) { color: #003C3C; } &:nth-of-type(2) { color: #74BDC2; } } .toggle { left: 5px; } } ~.payments-once { display: flex; } } &#switch-monthly:checked { ~.l-switch__wrapper { label { &:nth-of-type(1) { color: #74BDC2; } &:nth-of-type(2) { color: #003C3C; } } .toggle { left: 39px; } } ~.payments-recurring { display: flex; } } } .l-checkout__footer__content__item > div ul { font-weight: normal; font-size: 15px; line-height: 150%; color: #808080; } .l-checkout__form__row { .iframe { margin-bottom: 16px; } } .l-books__item__content { width: 100%; .fragment-text { max-width: 390px; margin-top: 20px; font-weight: 400; font-size: 18px; font-size: 1.125rem; line-height: 150%; color: #474747; h1, h2, h3, h4 { font-size: 1em; } } } #user-menu { //display: none; position:absolute; top: 60px; z-index: 1; position: absolute; width: 186px; top: 48px; right: 45px; /* yellow 900 */ background: #F7BA00; box-shadow: 0px 0px 20px rgba(1, 129, 137, 0.2); border-radius: 10px; overflow: hidden; opacity:0; pointer-events: none; transition: 200ms opacity; &.is-open { //display: block; pointer-events: all; opacity: 100%; } ul { margin: 0; padding: 0; list-style: none; li { a { color: #474747; display: block; line-height: 27px; padding: 8px 21px; &:hover { color: #474747; background: #EDAA00; } strong { font-weight: 600; } } } } } form { label.required:before { content: "* "; color: #FF4C54; } .helptext { color: #808080; font-size: 15px; line-height: 150%; margin-bottom: 30px; } } .socialaccount_providers { list-style: none; padding: 0; li { display: inline-block; margin-right: 10px; } } .page-simple { margin-bottom: 70px; padding-bottom: 30px; border-radius: 10px; background: #E1F1F2; display: flex; flex-direction: column; align-items: center; .white-box { // for legacy templates width: 100%; display: flex; flex-direction: column; align-items: center; } h1 { width: 100%; margin: 0 0 50px 0; padding: 32px 45px; border-radius: 10px 10px 0 0; font-style: italic; font-weight: 300; font-size: 48px; line-height: 55px; letter-spacing: -0.02em; background: #083F4D; color: #92BD39; } > p, form, > .normal-text { min-width: 300px; margin-left: 50px; margin-right: 50px; width: auto; } .wlfund { margin: 0; width: 90%; border-collapse: separate; tr { td { padding: .625rem .3125rem .625rem; border-top: .625rem solid rgba(255,255,255,0); border-bottom: 1px solid #083F4D; text-align: center; } } } } .page-simple, .nice-controls { button, input[type=submit] { margin: 24px 0; height: 56px; background: #083F4D; border: none; border-radius: 3px; font-weight: 600; font-size: 20px; line-height: 25px; display: flex; align-items: center; justify-content: center; text-align: center; color: #FFFFFF; width: 340px; &.active { outline: 2px solid #083F4D; outline-offset: 3px; } &:disabled { opacity: .8; } } label { font-style: normal; font-weight: 600; font-size: 15px; line-height: 160%; color: #083F4D; margin-top: 24px; } input, textarea, select { display: block; width: 100%; background: #FFFFFF; color: black; border: 1px solid #D5ECED; border-radius: 3px; transition: all cubic-bezier(0, 0, 0.2, 1) 250ms; padding: 10px; outline: 0; } input, select { height: 56px; } input[type=checkbox], input[type=radio] { display: inline; float: left; width: 1.2em; height: 1.2em; vertical-align: middle; margin-right: 1em; } } .experiment { display: flex; align-items: center; } .page-simple { .form-info { h2 { font-size: 1.5em; margin-top: 0; } } } .funding-promo-bar { margin: 18px auto; .l-checkout__support { margin: 0; a { display: flex; align-items: start; .buttonlike { margin-right: 10px; background: #FFA500; //color: #083F4D; color: black; border-radius: 5px; font-size: 1.125rem; line-height: 50px; letter-spacing: -0.01em; padding: 0 20px; font-weight: 600; transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms; &:hover { background: #92BD39; } } .funding-bar-container { flex-grow: 1; } } } } .l-checkout__support__bar { overflow: hidden; } .l-change-pop { margin-bottom: 18px; } .page-simple button.button-orange { background: #FFA500; color: black; transition: all cubic-bezier(0.25, 1, 0.5, 1) 350ms; &:hover { background: #92BD39; } } .poll-bar { height: 10px; width: 100%; display: block; border-radius: 5px; position: relative; overflow: hidden; .poll-bar-inner { height: 100%; position: absolute; border-radius: 5px; background-color: #006066; top: 0; left: 0; } }