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