--- /dev/null
+//Support bar
+.l-checkout__support {
+ margin-bottom: 22px;
+}
+
+.l-checkout__support__bar {
+ background: #E6F0F1 url(../images/approval.svg) center right 5px no-repeat;
+ border-radius: 10px;
+ width: 100%; height: 34px;
+ position: relative;
+ span {
+ position: absolute;
+ top: 0; left: 0;
+ height: 100%;
+ background: #92BD39;
+ border-radius: 10px;
+ &:after {
+ margin: auto;
+ position: absolute;
+ top: 0; right: 13px; bottom: 2px;
+ content: attr(data-label);
+ font-weight: bold;
+ font-size: 15px;
+ color: #FFFFFF;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+}
+
+.l-checkout__support__footer {
+ display: flex;
+ margin-top: 7px;
+ justify-content: space-between;
+ align-items: center;
+ p {
+ margin: 0;
+ font-weight: normal;
+ font-size: 15px;
+ line-height: 150%;
+ color: #083F4D;
+ }
+}
+
+//Box
+.l-checkout__box {
+ background: #E1F1F2;
+ border-radius: 10px;
+ padding-bottom: 30px;
+ overflow: hidden;
+}
+
+.l-checkout__box__header {
+ display: flex;
+ background: #083F4D;
+}
+
+.l-checkout__box__header__content h1 {
+ font-style: italic;
+ font-weight: 300;
+ font-size: 48px;
+ line-height: 55px;
+ letter-spacing: -0.02em;
+ color: #92BD39;
+ margin: 0;
+}
+
+.l-checkout__box__header__content p:first-of-type {
+ font-style: normal;
+ font-weight: 600;
+ font-size: 21.5px;
+ line-height: 140%;
+ letter-spacing: -0.01em;
+ color: #FFFFFF;
+ margin-top: 23px;
+}
+
+.l-checkout__box__header__content p {
+ font-weight: normal;
+ font-size: 18px;
+ line-height: 150%;
+ color: #FFFFFF;
+ margin-top: 8px;
+ max-width: 410px;
+}
+
+.l-checkout__box__header__content {
+ padding: 32px 45px;
+}
+
+//Steps
+.l-checkout__steps {
+ display: flex;
+ padding: 0 125px;
+ justify-content: space-between;
+ margin-top: -24px;
+
+ div {
+ width: 145px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ span {
+ width: 46px;
+ height: 46px;
+ background: #86AD34;
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 21px;
+ line-height: 140%;
+ letter-spacing: -0.01em;
+ }
+
+ p {
+ margin-top: 4px;
+ font-weight: 600;
+ font-size: 21px;
+ line-height: 140%;
+ text-align: center;
+ letter-spacing: -0.01em;
+ color: #083F4D;
+ }
+
+ &.is-completed {
+ span {
+ overflow: hidden;
+ text-indent: -999px;
+ background: #86AD34 url(../images/check.svg) center no-repeat;
+ }
+ }
+
+ &.is-inactive {
+ span {
+ background: #ffffff;
+ color: #003C3C;
+ }
+ p {
+ color: #74BDC2;
+ font-weight: normal;
+ }
+ }
+ }
+}
+
+//Switch
+.l-switch__wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 35px;
+}
+
+.l-switch {
+ background: #fff;
+ display: block;
+ position: relative;
+ height: 26px;
+ width: 77px;
+ border-radius: 4px;
+}
+
+.l-switch label {
+ color: #fff;
+ font-weight: 600;
+ font-size: 21.5px;
+ line-height: 26px;
+ transition: color .2s ease;
+ width: 122px;
+ cursor: pointer;
+}
+
+.l-switch label:nth-of-type(1) {
+ left: -175%;
+ position: absolute;
+ text-align: right;
+}
+
+.l-switch label:nth-of-type(2) {
+ position: absolute;
+ right: -175%;
+ text-align: left;
+}
+
+.l-switch input {
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ height: 26px;
+ width: 77px;
+ z-index: 2;
+}
+
+.l-switch input:checked~label:nth-of-type(1) { color: #003C3C; }
+.l-switch input:checked~label:nth-of-type(2) { color: #74BDC2; }
+
+.l-switch input~:checked~label:nth-of-type(1) { color: #74BDC2; }
+.l-switch input~:checked~label:nth-of-type(2) { color: #003C3C; }
+
+.l-switch input:checked~.toggle {
+ left: 5px;
+}
+
+.l-switch input~:checked~.toggle {
+ left: 39px;
+}
+
+.l-switch input:checked {
+ z-index: 0;
+}
+
+.toggle {
+ background: #003C3C;
+ left: 0;
+ position: absolute;
+ top: 5px;
+ transition: left .2s ease;
+ height: 16px;
+ width: 33px;
+ z-index: 1;
+ border-radius: 2px;
+ cursor: pointer;
+}
+
+//Payments
+.l-checkout__payments {
+ display: flex;
+ padding: 0 30px;
+ margin-top: 34px;
+ margin-bottom: 0;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+}
+
+.l-checkout__payments__box {
+ display: flex;
+ flex-direction: column;
+ width: calc(33.333% - 20px);
+ background: #FFFFFF;
+ border-radius: 10px;
+ overflow: hidden;
+ transition: box-shadow $ease-out 250ms;
+ box-shadow: 0px 0px 0px rgba(55, 170, 156, 0);
+ margin-bottom: 30px;
+ margin-right: 30px;
+
+ &:nth-child(3) {
+ margin-right: 0;
+ }
+
+ &:nth-child(5) {
+ margin-right: 0;
+ width: calc(67.4% - 20px);
+ }
+
+ h3 {
+ margin: 0;
+ font-weight: bold;
+ font-size: 44px;
+ line-height: 130%;
+ letter-spacing: -0.01em;
+ color: #083F4D;
+ height: 90px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all $ease-out 250ms;
+
+ span {
+ font-weight: 600;
+ font-size: 25px;
+ line-height: 140%;
+ letter-spacing: -0.01em;
+ color: #92BD39;
+ margin-left: 10px;
+ transition: opacity $ease-out 250ms;
+ }
+ }
+ .l-checkout__payments__box__btn-wrp {
+ padding: 20px;
+ margin-bottom: 0;
+ margin-top: auto;
+ }
+ p {
+ margin-top: 0;
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 150%;
+ color: #474747;
+ padding: 20px;
+ strong {
+ font-weight: 600;
+ }
+ }
+ button {
+ height: 56px;
+ background: #FFFFFF;
+ border: 1px solid #92BD39;
+ border-radius: 3px;
+ width: 100%;
+ outline: 0;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ color: #083F4D;
+ transition: background $ease-out 250ms;
+
+ &:hover {
+ background: rgba(#92BD39, 0.75);
+ }
+ }
+
+ &.is-active {
+ box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35);
+
+ h3 {
+ color: white;
+ background: #083F4D;
+ }
+
+ button {
+ background: #92BD39;
+ &:hover {
+ background: #83AD2B;
+ }
+ }
+ }
+
+ &.l-checkout__payments__box--xl {
+ flex-direction: row;
+ & > div {
+ display: flex;
+ &:first-child {
+ width: 50%;
+ flex-wrap: wrap;
+ max-width: 340px;
+ margin-right: 20px;
+ }
+
+ &:last-child {
+ width: 49%;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ h3 {
+ width: 100%;
+ }
+
+ .l-checkout__payments__box__btn-wrp {
+ width: 100%;
+ }
+
+ button {
+ border-color: #FFA500;
+ background-color: #FFA500;
+ &:hover {
+ background: darken(#FFA500, 5%);
+ }
+ }
+
+ &.once {
+ h3 {
+ text-indent: 0;
+ padding-left: 0;
+ }
+ }
+ }
+}
+
+//Amount
+.l-checkout__amount {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ padding-right: 30px;
+
+ button {
+ border: none;
+ height: 56px;
+ background: #083F4D;
+ border-radius: 3px;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ margin-left: 32px;
+ color: #FFFFFF;
+ width: 340px;
+ }
+
+ .l-checkout__input {
+ width: 340px;
+ }
+}
+
+//Input
+.l-checkout__input {
+ display: flex;
+ flex-direction: column;
+
+ label {
+ font-style: normal;
+ font-weight: 600;
+ font-size: 15px;
+ line-height: 160%;
+ color: #083F4D;
+ span { color: #FF4C54; }
+ }
+ input, select, textarea {
+ height: 56px;
+ background: #FFFFFF;
+ border: 1px solid #D5ECED;
+ border-radius: 3px;
+ transition: all $ease-out 250ms;
+ padding: 10px;
+ outline: 0;
+
+ &:focus {
+ border: 1px solid #007880;
+ }
+ }
+
+ button {
+ height: 56px;
+ background: #083F4D;
+ border-radius: 3px;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ margin-left: 32px;
+ color: #FFFFFF;
+ width: 340px;
+ }
+}
+
+//Cols
+.l-checkout__cols {
+ display: flex;
+ padding: 0 30px;
+ margin-top: 50px;
+
+ &.bt-w {
+ margin-top: 30px;
+ padding-top: 20px;
+ border-top: 1px solid white;
+ }
+}
+
+.l-checkout__col {
+ &:nth-child(1) {
+ width: 402px;
+ padding-right: 62px;
+ .l-checkout__payments__box {
+ width: 100%;
+ }
+ }
+ &:nth-child(2) {
+ width: calc(100% - 340px);
+ }
+ &.full {
+ width: 100%;
+ padding-right: 0;
+
+ .l-checkout__form__row.full {
+ flex-direction: row;
+
+ & > h3 {
+ margin-top: 22px;
+ }
+
+ .l-checkout__info {
+ width: 100%;
+ padding-left: 100px;
+ }
+ }
+ }
+}
+
+.l-checkout__footer__img {
+ display: flex;
+ margin-right: 30px;
+ margin-left: auto;
+ margin-top: 30px;
+}
+
+//Form
+.l-checkout__form {
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+}
+
+.l-checkout__form__row {
+ display: flex;
+ margin-bottom: 24px;
+
+ &:nth-child(4) {
+ .l-checkout__input {
+ &:nth-child(1) { width: 172px; }
+ &:nth-child(2) { width: calc(100% - 172px); }
+ }
+ }
+
+ &.full {
+ flex-direction: column;
+
+ .l-checkout__input {
+ &:nth-child(1) {
+ padding-right: 0;
+ }
+ &:nth-child(2) {
+ padding-left: 0;
+ }
+ }
+ }
+
+ h3 {
+ margin-top: 0;
+ font-weight: 600;
+ font-size: 21.5px;
+ line-height: 140%;
+ letter-spacing: -0.01em;
+ color: #083F4D;
+ }
+
+ .iframe {
+ margin-top: 16px;
+ }
+
+ .l-checkout__input {
+ width: 100%;
+ &:nth-child(1) {
+ padding-right: 10px;
+ }
+ &:nth-child(2) {
+ padding-left: 10px;
+ }
+ }
+
+ & > a {
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 25px;
+ color: #74BDC2;
+ transition: all $ease-out 250ms;
+
+ &:hover {
+ color: #007880;
+ }
+ }
+
+ &.confirm {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+
+ .l-checkout__input {
+ width: auto;
+ }
+ }
+ .errorlist {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ color: #FF4C54;
+ li:before {
+ content: '⚠ ';
+ }
+ }
+}
+
+//Info
+.l-checkout__info__item {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ transition: all $ease-out 250ms;
+ width: 100%;
+ overflow: hidden;
+ margin-top: 15px;
+
+ &:hover {
+ background-color: darken(#E1F1F2, 2%);
+ }
+
+ div {
+ font-weight: normal;
+ font-size: 15px;
+ line-height: 150%;
+ color: #083F4D;
+ width: 100px;
+ }
+
+ h3 {
+ width: 426px;
+ font-weight: 500;
+ font-size: 18px;
+ line-height: 150%;
+ color: #083F4D;
+ padding-left: 30px;
+ }
+
+ button {
+ outline: 0;
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 0;
+ margin-left: auto;
+ &:hover {
+ opacity: 0.75;
+ }
+ }
+ input {
+ top: 0;
+ left: 0;
+ position: absolute;
+ transform: translate(-100%,-100%);
+ }
+}
+
+//Completed
+.l-checkout__completed {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ margin: auto;
+ padding: 140px 0;
+ background: url(../images/checkout-bg.png) no-repeat center;
+
+ .l-checkout__completed__wrapper {
+ max-width: 580px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+
+ h1 {
+ margin-top: 0;
+ font-style: italic;
+ font-weight: 300;
+ font-size: 58px;
+ line-height: 55px;
+ letter-spacing: -0.02em;
+ color: #083F4D;
+ }
+ p {
+ margin-top: 30px;
+ font-weight: normal;
+ font-size: 21.5px;
+ line-height: 140%;
+ text-align: center;
+ letter-spacing: -0.01em;
+ color: #007880;
+ }
+ a {
+ margin-top: 50px;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #083F4D;
+ border-radius: 3px;
+ height: 56px;
+ text-align: center;
+ color: #FFFFFF;
+ width: 340px;
+ }
+}
+
+//Footer
+.l-checkout__footer {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 12px;
+ margin-bottom: 52px;
+}
+
+.l-checkout__footer > img {
+ margin-right: 0;
+ margin-left: auto;
+}
+
+.l-checkout__footer__content {
+ display: flex;
+ flex-direction: column;
+}
+
+.l-checkout__footer__content__item {
+ display: flex;
+
+ &:not(:last-child) {
+ padding-bottom: 30px;
+ margin-bottom: 30px;
+ border-bottom: 1px solid #E1F1F2;
+ }
+}
+
+.l-checkout__footer__content h3 {
+ font-weight: 600;
+ font-size: 21.5px;
+ line-height: 140%;
+ letter-spacing: -0.01em;
+ color: #083F4D;
+ width: 318px;
+}
+
+.l-checkout__footer__content__item > div {
+ width: 100%;
+ padding-left: 120px;
+}
+
+.l-checkout__footer__content__item > div p {
+ font-weight: normal;
+ font-size: 15px;
+ line-height: 150%;
+ color: #808080;
+}
+
+.l-checkout__footer__content__item > div p a {
+ color: #007880;
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.l-checkout__footer__content {
+ .l-article__read-more {
+ margin-top: 20px;
+ font-size: 15px;
+ &:after {
+ margin-left: 5px;
+ display: inline-block;
+ transform: rotate(180deg);
+ content: $icon-arrow-up;
+ font-family: '#{$icomoon-font-family}' !important;
+ font-size: 12px;
+ speak: never;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+ }
+
+ .l-article__overlay {
+ &:after {
+ display: none;
+ }
+ &.is-clicked {
+ & + .l-article__read-more {
+ &:after {
+ transform: none;
+ }
+ }
+ }
+ }
+}
fnp / wolnelektury.git / blobdiff