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