Another upgrade.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _checkout.scss
1 //Support bar
2 .l-checkout__support {
3     margin-bottom: 22px;
4
5     margin-left: 16px;
6     margin-right: 16px;
7 }
8
9 .l-checkout__support__bar {
10   background: #E6F0F1 url(../images/approval.svg) center right 5px no-repeat;
11   border-radius: 10px;
12   width: 100%; height: 34px;
13   position: relative;
14   span {
15     position: absolute;
16     top: 0; left: 0;
17     height: 100%;
18     background: #92BD39;
19     border-radius: 10px;
20     &:after {
21       margin: auto;
22       position: absolute;
23       top: 0; right: 13px; bottom: 2px;
24       content: attr(data-label);
25       font-weight: bold;
26       font-size: 15px;
27       color: #FFFFFF;
28       display: flex;
29       align-items: center;
30       justify-content: center;
31     }
32   }
33 }
34
35 .l-checkout__support__footer {
36   display: flex;
37   margin-top: 7px;
38   justify-content: space-between;
39   align-items: center;
40   p {
41     margin: 0;
42     font-weight: normal;
43     font-size: 15px;
44     line-height: 150%;
45     color: #083F4D;
46   }
47 }
48
49 //Box
50 .l-checkout__box {
51   background: #E1F1F2;
52   border-radius: 10px;
53   padding-bottom: 30px;
54   overflow: hidden;
55   margin: 0 16px;
56 }
57
58 .l-checkout__box__header {
59   display: flex;
60   background: #083F4D;
61
62   img {
63       display: none;
64       @include rwd($break-flow) {
65           display: block;
66       }
67   }
68 }
69
70 .l-checkout__box__header__content h1 {
71   font-style: italic;
72   font-weight: 300;
73   font-size: 48px;
74   line-height: 55px;
75   letter-spacing: -0.02em;
76   color: #92BD39;
77   margin: 0;
78 }
79
80 .l-checkout__box__header__content p:first-of-type {
81   font-style: normal;
82   font-weight: 600;
83   font-size: 21.5px;
84   line-height: 140%;
85   letter-spacing: -0.01em;
86   color: #FFFFFF;
87   margin-top: 23px;
88 }
89
90 .l-checkout__box__header__content p {
91   font-weight: normal;
92   font-size: 18px;
93   line-height: 150%;
94   color: #FFFFFF;
95   margin-top: 8px;
96   max-width: 410px;
97 }
98
99 .l-checkout__box__header__content {
100   padding: 32px 45px;
101 }
102
103 //Steps
104 .l-checkout__steps {
105   display: flex;
106   margin-top: -24px;
107   justify-content: space-around;
108
109   @include rwd($break-flow) {
110       padding: 0 125px;
111       justify-content: space-between;
112   }
113
114   div {
115     width: 145px;
116     display: flex;
117     flex-direction: column;
118     align-items: center;
119     justify-content: center;
120
121     span {
122       width: 46px;
123       height: 46px;
124       background: #86AD34;
125       color: white;
126       border-radius: 50%;
127       display: flex;
128       align-items: center;
129       justify-content: center;
130       font-weight: 600;
131       font-size: 21px;
132       line-height: 140%;
133       letter-spacing: -0.01em;
134     }
135
136     p {
137       margin-top: 4px;
138       font-weight: 600;
139       font-size: 21px;
140       line-height: 140%;
141       text-align: center;
142       letter-spacing: -0.01em;
143       color: #083F4D;
144       display: none;
145       @include rwd($break-flow) {
146           display: block;
147       }
148     }
149
150     &.is-completed {
151       span {
152         overflow: hidden;
153         text-indent: -999px;
154         background: #86AD34 url(../images/check.svg) center no-repeat;
155       }
156     }
157
158     &.is-inactive {
159       span {
160         background: #ffffff;
161         color: #003C3C;
162       }
163       p {
164         color: #74BDC2;
165         font-weight: normal;
166       }
167     }
168   }
169 }
170
171 //Switch
172 .l-switch__wrapper {
173   display: flex;
174   align-items: center;
175   justify-content: center;
176   margin-top: 35px;
177   width: 100%;
178 }
179
180 .l-switch {
181   background: #fff;
182   display: block;
183   position: relative;
184   height: 26px;
185   width: 77px;
186   border-radius: 4px;
187 }
188
189 .l-switch label {
190   color: #74BDC2;
191   font-weight: 600;
192   font-size: 18.5px;
193   line-height: 26px;
194   transition: color .2s ease;
195   width: 122px;
196   cursor: pointer;
197
198   @include rwd($break-flow) {
199       font-size: 21.5px;
200   }
201 }
202
203 .l-switch label:nth-of-type(1) {
204   left: -175%;
205   position: absolute;
206   text-align: right;
207 }
208
209 .l-switch label:nth-of-type(2) {
210   position: absolute;
211   right: -175%;
212   text-align: left;
213 }
214
215 .l-switch input {
216   left: 0;
217   opacity: 0;
218   position: absolute;
219   top: 0;
220   height: 26px;
221   width: 77px;
222   z-index: 2;
223 }
224
225 .toggle-input-left:checked ~ .l-switch__wrapper {
226     .toggle-for-left {
227         color: #003C3C;
228     }
229     .toggle {
230         left: 5px;
231     }
232 }
233 .toggle-input-right:checked ~ .l-switch__wrapper {
234     .toggle-for-right {
235         color: #003C3C;
236     }
237     .toggle {
238         left: 39px;
239     }
240 }
241 .l-switch input:checked~label:nth-of-type(1) { color: #003C3C; }
242 .l-switch input~:checked~label:nth-of-type(2) { color: #003C3C; }
243
244 .l-switch input:checked~.toggle {
245   left: 5px;
246 }
247
248 .l-switch input~:checked~.toggle {
249   left: 39px;
250 }
251
252 .l-switch input:checked {
253   z-index: 0;
254 }
255
256 .toggle {
257   background: #003C3C;
258   left: 0;
259   position: absolute;
260   top: 5px;
261   transition: left .2s ease;
262   height: 16px;
263   width: 33px;
264   z-index: 1;
265   border-radius: 2px;
266   cursor: pointer;
267 }
268
269 //Payments
270 .l-checkout__payments {
271     display: none;
272     padding: 0 16px;
273   margin-top: 34px;
274   margin-bottom: 0;
275   flex-wrap: wrap;
276   justify-content: flex-start;
277   flex-direction: row;
278   column-gap: 16px;
279
280   @include rwd($break-flow) {
281       //flex-direction: row;
282       padding: 0 30px;
283       column-gap: 30px;
284   }
285 }
286
287 .l-checkout__payments__box {
288   display: flex;
289   flex-direction: column;
290   background: #FFFFFF;
291   border-radius: 10px;
292   overflow: hidden;
293   transition: box-shadow $ease-out 250ms;
294   box-shadow: 0px 0px 0px rgba(55, 170, 156, 0);
295   margin-bottom: 30px;
296   width: 100%;
297
298   @include rwd($break-flow) {
299       width: calc(33.333% - 20px);
300   }
301   h3 {
302     margin: 0;
303     font-weight: bold;
304     font-size: 44px;
305     line-height: 130%;
306     letter-spacing: -0.01em;
307     color: #083F4D;
308     height: 90px;
309     display: flex;
310     align-items: center;
311     justify-content: center;
312     transition: all $ease-out 250ms;
313
314     span {
315       font-weight: 600;
316       font-size: 25px;
317       line-height: 140%;
318       letter-spacing: -0.01em;
319       color: #92BD39;
320       margin-left: 10px;
321       transition: opacity $ease-out 250ms;
322     }
323   }
324   .l-checkout__payments__box__btn-wrp {
325     padding: 0 20px 20px 20px;
326     margin-bottom: 0;
327     margin-top: auto;
328     @include rwd($break-flow) {
329         padding-top: 20px;
330     }
331   }
332   p {
333     margin-top: 0;
334     font-weight: normal;
335     font-size: 16px;
336     line-height: 150%;
337     color: #474747;
338     padding: 20px;
339     strong {
340       font-weight: 600;
341     }
342   }
343   button {
344     height: 56px;
345     background: #FFFFFF;
346     border: 1px solid #92BD39;
347     border-radius: 3px;
348     width: 100%;
349     outline: 0;
350     cursor: pointer;
351     font-weight: 600;
352     font-size: 16px;
353     line-height: 24px;
354     display: flex;
355     align-items: center;
356     justify-content: center;
357     text-align: center;
358     color: #083F4D;
359     transition: background $ease-out 250ms;
360
361     @include rwd($break-flow) {
362         font-size: 20px;
363         line-height: 25px;
364     }
365     
366     &:hover {
367       background: rgba(#92BD39, 0.75);
368     }
369   }
370   img {
371       display: none;
372       @include rwd($break-flow) {
373           display: block;
374       }
375   }
376
377   &.is-active {
378       box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35);
379       background: white;
380       color: black;
381
382     h3 {
383       color: white;
384       background: #083F4D;
385     }
386
387     button {
388       background: #92BD39;
389       &:hover {
390         background: #83AD2B;
391       }
392     }
393   }
394
395   &.l-checkout__payments__box--half {
396       width: calc(50% - 8px);
397       @include rwd($break-flow) {
398           width: calc(33.333% - 20px);
399       }
400
401       &.is-active {
402           background: #083F4D;
403           color: white;
404
405           @include rwd($break-flow) {
406               background: white;
407               color: black;
408           }
409       }
410   }
411   &.l-checkout__payments__box--bar {
412       flex-direction: row;
413       
414       @include rwd($break-flow) {
415           flex-direction: column;
416       }
417
418       &.is-active {
419           background: #083F4D;
420           color: white;
421
422           @include rwd($break-flow) {
423               background: white;
424               color: black;
425           }
426       }
427
428       h3, .l-checkout__payments__box__btn-wrp {
429           flex-grow: 1;
430       }
431   }
432   &.l-checkout__payments__box--card {
433   }
434   
435   &.l-checkout__payments__box--xl {
436       width: 100%;
437       justify-content: center;
438       min-height: 160px;
439
440       @include rwd($break-flow) {
441           width: calc(67.4% - 20px);
442           padding-left: calc(33.7% - 10px);
443           position: relative;
444
445           h3 {
446               position: absolute;
447               left: 0;
448               top: 0;
449               padding-right: 50%;
450           }
451           
452           .l-checkout__payments__box__btn-wrp {
453               margin: 0;
454
455               p {
456                   flex-wrap: wrap;
457                   max-width: 340px;
458                   margin-right: 20px;
459               }
460
461               button {
462                   position: absolute;
463                   bottom: 20px;
464                   left: 20px;
465                   width: calc(50% - 50px);
466                   align-items: center;
467                   justify-content: center;
468               }
469           }
470       }
471
472     h3 {
473       width: 100%;
474     }
475
476     .l-checkout__payments__box__btn-wrp {
477       width: 100%;
478     }
479
480     &.once {
481       h3 {
482         text-indent: 0;
483         padding-left: 0;
484       }
485     }
486   }
487   &.l-checkout__payments__box--special {
488     button {
489       border-color: #FFA500;
490       background-color: #FFA500;
491       &:hover {
492         background: darken(#FFA500, 5%);
493       }
494     }
495   }
496 }
497
498 //Amount
499 .l-checkout__amount {
500   display: flex;
501   flex-direction: column;
502   padding: 0 16px;
503   row-gap: 16px;
504
505   @include rwd($break-flow) {
506       flex-direction: row;
507       align-items: flex-end;
508       justify-content: flex-end;
509       padding-right: 30px;
510   }
511   
512   button {
513       border: none;
514     height: 56px;
515     background: #083F4D;
516     border-radius: 3px;
517     font-weight: 600;
518     font-size: 20px;
519     line-height: 25px;
520     display: flex;
521     align-items: center;
522     justify-content: center;
523     text-align: center;
524     color: #FFFFFF;
525
526     @include rwd($break-flow) {
527         margin-left: 32px;
528         width: 340px;
529     }
530
531   }
532
533   .l-checkout__input {
534       @include rwd($break-flow) {
535           width: 340px;
536       }
537   }
538 }
539
540
541
542 //Input
543 .l-checkout__input {
544   display: flex;
545   flex-direction: column;
546
547   label {
548     font-style: normal;
549     font-weight: 600;
550     font-size: 15px;
551     line-height: 160%;
552     color: #083F4D;
553     span { color: #FF4C54; }
554   }
555   input, select, textarea {
556       width: 100%;
557     height: 56px;
558     background: #FFFFFF;
559     border: 1px solid #D5ECED;
560     border-radius: 3px;
561     transition: all $ease-out 250ms;
562     padding: 10px;
563     outline: 0;
564
565     &:focus {
566       border: 1px solid #007880;
567     }
568   }
569
570   button {
571     height: 40px;
572     background: #083F4D;
573     border: none;
574     border-radius: 3px;
575     font-weight: 600;
576     font-size: 16px;
577     line-height: 25px;
578     display: flex;
579     align-items: center;
580     justify-content: center;
581     text-align: center;
582     color: #FFFFFF;
583
584     @include rwd($break-flow) {
585         height: 56px;
586         font-size: 20px;
587         width: 340px;
588         margin-left: 32px;
589     }
590   }
591 }
592
593 //Cols
594 .l-checkout__cols {
595   display: flex;
596   flex-direction: column;
597   margin-top: 50px;
598   padding: 0 16px;
599
600   @include rwd($break-flow) {
601       padding: 0 30px;
602       flex-direction: row;
603   }
604   
605   &.bt-w {
606     margin-top: 30px;
607     padding-top: 20px;
608     border-top: 1px solid white;
609   }
610 }
611
612 .l-checkout__col {
613   @include rwd($break-flow) {
614   &:nth-child(1) {
615     width: 402px;
616     padding-right: 62px;
617     .l-checkout__payments__box {
618       width: 100%;
619     }
620   }
621   &:nth-child(2) {
622     width: calc(100% - 402px);
623   }
624   &.full {
625     width: 100%;
626     padding-right: 0;
627
628     .l-checkout__form__row.full {
629       flex-direction: row;
630
631       & > h3 {
632         margin-top: 22px;
633       }
634
635       .l-checkout__info {
636         width: 100%;
637         padding-left: 100px;
638       }
639     }
640   }
641   }
642 }
643
644 .l-checkout__secure {
645     margin-top: 30px;
646     margin-right: 30px;
647     text-align: right;
648     font-size: 15px;
649     color: #888;
650
651     .l-checkout__secure__padlock {
652         margin-right: 5px;
653         vertical-align: baseline;
654     }
655     
656     .l-checkout__secure__img {
657         margin-left: 10px;
658         vertical-align: bottom;
659     }
660 }
661
662
663 //Form
664 .l-checkout__form {
665   display: flex;
666   width: 100%;
667   flex-direction: column;
668 }
669
670 .l-checkout__form__row {
671     display: flex;
672     flex-direction: column;
673     gap: 20px;
674   margin-bottom: 24px;
675
676   @include rwd($break-flow) {
677       flex-direction: row;
678   }
679   
680   &:nth-child(4) {
681     .l-checkout__input {
682       &:nth-child(1) { width: 172px; }
683       &:nth-child(2) { width: calc(100% - 172px); }
684     }
685   }
686
687   &.full {
688     flex-direction: column;
689     @include rwd($break-flow) {
690         flex-direction: column;
691     }
692   }
693
694   h3 {
695     margin-top: 0;
696     font-weight: 600;
697     font-size: 21.5px;
698     line-height: 140%;
699     letter-spacing: -0.01em;
700     color: #083F4D;
701   }
702
703   .iframe {
704     margin-top: 16px;
705   }
706
707   .l-checkout__input {
708     width: 100%;
709   }
710
711   & > a {
712     font-weight: 600;
713     font-size: 20px;
714     line-height: 25px;
715     color: #74BDC2;
716     transition: all $ease-out 250ms;
717
718     &:hover {
719       color: #007880;
720     }
721   }
722
723   &.confirm {
724       display: flex;
725       flex-direction: row;
726     align-items: center;
727     justify-content: stretch;
728     width: 100%;
729     gap: 50px;
730
731     @include rwd($break-flow) {
732         justify-content: space-between;
733     }
734     
735     .l-checkout__input {
736         flex-grow: 1;
737         @include rwd($break-flow) {
738             width: auto;
739             flex-grow: 0;
740         }
741     }
742   }
743   .errorlist {
744       padding: 0;
745       margin: 0;
746       list-style: none;
747       color: #FF4C54;
748       li:before {
749           content: 'âš  ';
750       }
751   }
752 }
753
754 //Info
755 .l-checkout__info__item {
756   position: relative;
757   display: flex;
758   align-items: center;
759   justify-content: space-between;
760   transition: all $ease-out 250ms;
761   width: 100%;
762   overflow: hidden;
763   margin-top: 15px;
764
765   &:hover {
766     background-color: darken(#E1F1F2, 2%);
767   }
768
769   div {
770     font-weight: normal;
771     font-size: 15px;
772     line-height: 150%;
773     color: #083F4D;
774     width: 100px;
775   }
776
777   h3 {
778     width: 426px;
779     font-weight: 500;
780     font-size: 18px;
781     line-height: 150%;
782     color: #083F4D;
783     padding-left: 30px;
784   }
785
786   button {
787     outline: 0;
788     background: transparent;
789     border: 0;
790     cursor: pointer;
791     display: flex;
792     align-items: center;
793     justify-content: center;
794     margin-right: 0;
795     margin-left: auto;
796     &:hover {
797       opacity: 0.75;
798     }
799   }
800   input {
801     top: 0;
802     left: 0;
803     position: absolute;
804     transform: translate(-100%,-100%);
805   }
806 }
807
808 //Completed
809 .l-checkout__completed {
810   display: flex;
811   align-items: center;
812   justify-content: center;
813   flex-direction: column;
814   margin: auto;
815   padding: 140px 0;
816   background: url(../images/checkout-bg.png) no-repeat center;
817
818   .l-checkout__completed__wrapper {
819     max-width: 580px;
820     display: flex;
821     align-items: center;
822     justify-content: center;
823     flex-direction: column;
824   }
825
826   h1 {
827     margin-top: 0;
828     font-style: italic;
829     font-weight: 300;
830     font-size: 58px;
831     line-height: 55px;
832     letter-spacing: -0.02em;
833     color: #083F4D;
834   }
835   p {
836     margin-top: 30px;
837     font-weight: normal;
838     font-size: 21.5px;
839     line-height: 140%;
840     text-align: center;
841     letter-spacing: -0.01em;
842     color: #007880;
843   }
844   a {
845     margin-top: 50px;
846     font-weight: 600;
847     font-size: 20px;
848     line-height: 25px;
849     display: flex;
850     align-items: center;
851     justify-content: center;
852     background: #083F4D;
853     border-radius: 3px;
854     height: 56px;
855     text-align: center;
856     color: #FFFFFF;
857     width: 340px;
858   }
859 }
860
861 //Footer
862 .l-checkout__footer {
863   display: flex;
864   flex-wrap: wrap;
865   margin-top: 12px;
866   margin-bottom: 52px;
867   margin-left: 16px;
868   margin-right: 16px;
869 }
870
871 .l-checkout__footer > img {
872   margin-right: 0;
873   margin-left: auto;
874 }
875
876 .l-checkout__footer__content {
877   display: flex;
878   flex-direction: column;
879 }
880
881 .l-checkout__footer__content__item {
882   display: flex;
883   flex-direction: column;
884
885   @include rwd($break-flow) {
886       flex-direction: row;
887   }
888   
889   &:not(:last-child) {
890     padding-bottom: 30px;
891     margin-bottom: 30px;
892     border-bottom: 1px solid #E1F1F2;
893   }
894 }
895
896 .l-checkout__footer__content h3 {
897   @include rwd($break-flow) {
898   font-weight: 600;
899   font-size: 21.5px;
900   line-height: 140%;
901   letter-spacing: -0.01em;
902   color: #083F4D;
903   width: 318px;
904   }
905 }
906
907 .l-checkout__footer__content__item > div {
908   @include rwd($break-flow) {
909   width: 100%;
910   padding-left: 120px;
911   }
912 }
913
914 .l-checkout__footer__content__item > div p {
915   font-weight: normal;
916   font-size: 15px;
917   line-height: 150%;
918   color: #808080;
919 }
920
921 .l-checkout__footer__content__item > div p a {
922   color: #007880;
923   &:hover {
924     text-decoration: underline;
925   }
926 }
927
928 .l-checkout__footer__content {
929   .l-article__read-more {
930     margin-top: 20px;
931     font-size: 15px;
932     &:after {
933       margin-left: 5px;
934       display: inline-block;
935       transform: rotate(180deg);
936       content: $icon-arrow-up;
937       font-family: '#{$icomoon-font-family}' !important;
938       font-size: 12px;
939       speak: never;
940       font-style: normal;
941       font-weight: normal;
942       font-variant: normal;
943       text-transform: none;
944       line-height: 1;
945
946       /* Better Font Rendering =========== */
947       -webkit-font-smoothing: antialiased;
948       -moz-osx-font-smoothing: grayscale;
949     }
950   }
951
952   .l-article__overlay {
953     &:after {
954       display: none;
955     }
956     &.is-clicked {
957       & + .l-article__read-more {
958         &:after {
959           transform: none;
960         }
961       }
962     }
963   }
964 }
965
966
967
968
969
970 .toggle-input{
971     &#switch-once:checked {
972         ~.l-switch__wrapper {
973             label {
974                 &:nth-of-type(1) { color: #003C3C; }
975                 &:nth-of-type(2) { color: #74BDC2; }
976             }
977             .toggle {
978                 left: 5px;
979             }
980         }
981         ~.payments-once {
982             display: flex;
983
984             &.wide-spot-1 ~.l-checkout__amount {
985                 @include rwd($break-flow) {
986                     margin-top: -110px;
987
988                     > div, > button {
989                         width: calc(33.333% - 20px);
990                     }
991                 }
992             }
993             &.wide-spot-2 ~.l-checkout__amount {
994                 @include rwd($break-flow) {
995                     flex-direction: column;
996                     margin-top: -182px;
997
998                     > div, > button {
999                         width: calc(33.333% - 20px);
1000                     }
1001                 }
1002             }
1003         }
1004     }
1005     &#switch-monthly:checked {
1006         ~.l-switch__wrapper {
1007             label {
1008                 &:nth-of-type(1) { color: #74BDC2; }
1009                 &:nth-of-type(2) { color: #003C3C; }
1010             }
1011             .toggle {
1012                 left: 39px;
1013             }
1014         }
1015         ~.payments-recurring {
1016             display: flex;
1017
1018             &.wide-spot-1 ~.l-checkout__amount {
1019                 @include rwd($break-flow) {
1020                     margin-top: -110px;
1021
1022                     > div, > button {
1023                         width: calc(33.333% - 20px);
1024                         margin-left: 24px;
1025                     }
1026                 }
1027             }
1028             &.wide-spot-2 ~.l-checkout__amount {
1029                 @include rwd($break-flow) {
1030                     flex-direction: column;
1031                     margin-top: -182px;
1032
1033                     > div, > button {
1034                         width: calc(33.333% - 20px);
1035                     }
1036                 }
1037             }
1038         }
1039     }
1040 }