checkout styles
[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 //Input
527 .l-checkout__input {
528   display: flex;
529   flex-direction: column;
530
531   label {
532     font-style: normal;
533     font-weight: 600;
534     font-size: 15px;
535     line-height: 160%;
536     color: #083F4D;
537     span { color: #FF4C54; }
538   }
539   input, select, textarea {
540       width: 100%;
541     height: 56px;
542     background: #FFFFFF;
543     border: 1px solid #D5ECED;
544     border-radius: 3px;
545     transition: all $ease-out 250ms;
546     padding: 10px;
547     outline: 0;
548
549     &:focus {
550       border: 1px solid #007880;
551     }
552   }
553
554   button {
555     height: 40px;
556     background: #083F4D;
557     border: none;
558     border-radius: 3px;
559     font-weight: 600;
560     font-size: 16px;
561     line-height: 25px;
562     display: flex;
563     align-items: center;
564     justify-content: center;
565     text-align: center;
566     color: #FFFFFF;
567
568     @include rwd($break-flow) {
569         height: 56px;
570         font-size: 20px;
571         width: 340px;
572         margin-left: 32px;
573     }
574   }
575 }
576
577 //Cols
578 .l-checkout__cols {
579   display: flex;
580   flex-direction: column;
581   margin-top: 50px;
582   padding: 0 16px;
583
584   @include rwd($break-flow) {
585       padding: 0 30px;
586       flex-direction: row;
587   }
588   
589   &.bt-w {
590     margin-top: 30px;
591     padding-top: 20px;
592     border-top: 1px solid white;
593   }
594 }
595
596 .l-checkout__col {
597   @include rwd($break-flow) {
598   &:nth-child(1) {
599     width: 402px;
600     padding-right: 62px;
601     .l-checkout__payments__box {
602       width: 100%;
603     }
604   }
605   &:nth-child(2) {
606     width: calc(100% - 402px);
607   }
608   &.full {
609     width: 100%;
610     padding-right: 0;
611
612     .l-checkout__form__row.full {
613       flex-direction: row;
614
615       & > h3 {
616         margin-top: 22px;
617       }
618
619       .l-checkout__info {
620         width: 100%;
621         padding-left: 100px;
622       }
623     }
624   }
625   }
626 }
627
628 .l-checkout__secure {
629     margin-top: 30px;
630     margin-right: 30px;
631     text-align: right;
632     font-size: 15px;
633     color: #888;
634
635     .l-checkout__secure__padlock {
636         margin-right: 5px;
637         vertical-align: baseline;
638     }
639     
640     .l-checkout__secure__img {
641         margin-left: 10px;
642         vertical-align: bottom;
643     }
644 }
645
646
647 //Form
648 .l-checkout__form {
649   display: flex;
650   width: 100%;
651   flex-direction: column;
652 }
653
654 .l-checkout__form__row {
655     display: flex;
656     flex-direction: column;
657     gap: 20px;
658   margin-bottom: 24px;
659
660   @include rwd($break-flow) {
661       flex-direction: row;
662   }
663   
664   &:nth-child(4) {
665     .l-checkout__input {
666       &:nth-child(1) { width: 172px; }
667       &:nth-child(2) { width: calc(100% - 172px); }
668     }
669   }
670
671   &.full {
672     flex-direction: column;
673     @include rwd($break-flow) {
674         flex-direction: column;
675     }
676   }
677
678   h3 {
679     margin-top: 0;
680     font-weight: 600;
681     font-size: 21.5px;
682     line-height: 140%;
683     letter-spacing: -0.01em;
684     color: #083F4D;
685   }
686
687   .iframe {
688     margin-top: 16px;
689   }
690
691   .l-checkout__input {
692     width: 100%;
693   }
694
695   & > a {
696     font-weight: 600;
697     font-size: 20px;
698     line-height: 25px;
699     color: #74BDC2;
700     transition: all $ease-out 250ms;
701
702     &:hover {
703       color: #007880;
704     }
705   }
706
707   &.confirm {
708       display: flex;
709       flex-direction: row;
710     align-items: center;
711     justify-content: stretch;
712     width: 100%;
713     gap: 50px;
714
715     @include rwd($break-flow) {
716         justify-content: space-between;
717     }
718     
719     .l-checkout__input {
720         flex-grow: 1;
721         @include rwd($break-flow) {
722             width: auto;
723             flex-grow: 0;
724         }
725     }
726   }
727   .errorlist {
728       padding: 0;
729       margin: 0;
730       list-style: none;
731       color: #FF4C54;
732       li:before {
733           content: '⚠ ';
734       }
735   }
736 }
737
738 //Info
739 .l-checkout__info__item {
740   position: relative;
741   display: flex;
742   align-items: center;
743   justify-content: space-between;
744   transition: all $ease-out 250ms;
745   width: 100%;
746   overflow: hidden;
747   margin-top: 15px;
748
749   &:hover {
750     background-color: darken(#E1F1F2, 2%);
751   }
752
753   div {
754     font-weight: normal;
755     font-size: 15px;
756     line-height: 150%;
757     color: #083F4D;
758     width: 100px;
759   }
760
761   h3 {
762     width: 426px;
763     font-weight: 500;
764     font-size: 18px;
765     line-height: 150%;
766     color: #083F4D;
767     padding-left: 30px;
768   }
769
770   button {
771     outline: 0;
772     background: transparent;
773     border: 0;
774     cursor: pointer;
775     display: flex;
776     align-items: center;
777     justify-content: center;
778     margin-right: 0;
779     margin-left: auto;
780     &:hover {
781       opacity: 0.75;
782     }
783   }
784   input {
785     top: 0;
786     left: 0;
787     position: absolute;
788     transform: translate(-100%,-100%);
789   }
790 }
791
792 //Completed
793 .l-checkout__completed {
794   display: flex;
795   align-items: center;
796   justify-content: center;
797   flex-direction: column;
798   margin: auto;
799   padding: 140px 0;
800   background: url(../images/checkout-bg.png) no-repeat center;
801
802   .l-checkout__completed__wrapper {
803     max-width: 580px;
804     display: flex;
805     align-items: center;
806     justify-content: center;
807     flex-direction: column;
808   }
809
810   h1 {
811     margin-top: 0;
812     font-style: italic;
813     font-weight: 300;
814     font-size: 58px;
815     line-height: 55px;
816     letter-spacing: -0.02em;
817     color: #083F4D;
818   }
819   p {
820     margin-top: 30px;
821     font-weight: normal;
822     font-size: 21.5px;
823     line-height: 140%;
824     text-align: center;
825     letter-spacing: -0.01em;
826     color: #007880;
827   }
828   a {
829     margin-top: 50px;
830     font-weight: 600;
831     font-size: 20px;
832     line-height: 25px;
833     display: flex;
834     align-items: center;
835     justify-content: center;
836     background: #083F4D;
837     border-radius: 3px;
838     height: 56px;
839     text-align: center;
840     color: #FFFFFF;
841     width: 340px;
842   }
843 }
844
845 //Footer
846 .l-checkout__footer {
847   display: flex;
848   flex-wrap: wrap;
849   margin-top: 12px;
850   margin-bottom: 52px;
851   margin-left: 16px;
852   margin-right: 16px;
853 }
854
855 .l-checkout__footer > img {
856   margin-right: 0;
857   margin-left: auto;
858 }
859
860 .l-checkout__footer__content {
861   display: flex;
862   flex-direction: column;
863 }
864
865 .l-checkout__footer__content__item {
866   display: flex;
867   flex-direction: column;
868
869   @include rwd($break-flow) {
870       flex-direction: row;
871   }
872   
873   &:not(:last-child) {
874     padding-bottom: 30px;
875     margin-bottom: 30px;
876     border-bottom: 1px solid #E1F1F2;
877   }
878 }
879
880 .l-checkout__footer__content h3 {
881   @include rwd($break-flow) {
882   font-weight: 600;
883   font-size: 21.5px;
884   line-height: 140%;
885   letter-spacing: -0.01em;
886   color: #083F4D;
887   width: 318px;
888   }
889 }
890
891 .l-checkout__footer__content__item > div {
892   @include rwd($break-flow) {
893   width: 100%;
894   padding-left: 120px;
895   }
896 }
897
898 .l-checkout__footer__content__item > div p {
899   font-weight: normal;
900   font-size: 15px;
901   line-height: 150%;
902   color: #808080;
903 }
904
905 .l-checkout__footer__content__item > div p a {
906   color: #007880;
907   &:hover {
908     text-decoration: underline;
909   }
910 }
911
912 .l-checkout__footer__content {
913   .l-article__read-more {
914     margin-top: 20px;
915     font-size: 15px;
916     &:after {
917       margin-left: 5px;
918       display: inline-block;
919       transform: rotate(180deg);
920       content: $icon-arrow-up;
921       font-family: '#{$icomoon-font-family}' !important;
922       font-size: 12px;
923       speak: never;
924       font-style: normal;
925       font-weight: normal;
926       font-variant: normal;
927       text-transform: none;
928       line-height: 1;
929
930       /* Better Font Rendering =========== */
931       -webkit-font-smoothing: antialiased;
932       -moz-osx-font-smoothing: grayscale;
933     }
934   }
935
936   .l-article__overlay {
937     &:after {
938       display: none;
939     }
940     &.is-clicked {
941       & + .l-article__read-more {
942         &:after {
943           transform: none;
944         }
945       }
946     }
947   }
948 }
949
950
951
952
953
954 .toggle-input{
955     &#switch-once:checked {
956         ~.l-switch__wrapper {
957             label {
958                 &:nth-of-type(1) { color: #003C3C; }
959                 &:nth-of-type(2) { color: #74BDC2; }
960             }
961             .toggle {
962                 left: 5px;
963             }
964         }
965         ~.payments-once {
966             display: flex;
967         }
968     }
969     &#switch-monthly:checked {
970         ~.l-switch__wrapper {
971             label {
972                 &:nth-of-type(1) { color: #74BDC2; }
973                 &:nth-of-type(2) { color: #003C3C; }
974             }
975             .toggle {
976                 left: 39px;
977             }
978         }
979         ~.payments-recurring {
980             display: flex;
981         }
982     }
983 }