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