290f142785606621483191a3e6ddfa9a8d64881f
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / pages / _homepage.scss
1 .p-homepage__info {
2   display: flex;
3   flex-wrap: wrap;
4   margin-top: 60px;
5   width: 100%;
6
7   flex-direction: column;
8   @include rwd($break-flow) {
9     flex-direction: row;
10   }
11
12   &.p-homepage__info--second {
13     margin-top: 10px;
14     flex-wrap: initial;
15
16     @include rwd($break-flow) {
17       margin-top: 30px;
18     }
19   }
20 }
21
22 .p-homepage__info__box__rows {
23   display: flex;
24   flex-direction: column;
25 }
26
27 .p-homepage__info__box {
28   border: 1px solid $color-light-gray;
29   border-radius: 10px;
30   overflow: hidden;
31
32   & > a {
33     display: block;
34     font-size: 0;
35   }
36
37   figure {
38     margin: 0;
39     display: block;
40     font-size: 0;
41   }
42
43   img {
44     max-width: 100%;
45   }
46
47   &.p-homepage__info__box--carousel {
48       width: 100%;
49       height: calc((100vw - 32px) * 315 / 975);
50       overflow: hidden;
51  
52       @include rwd($break-flow) {
53           height: 368px;
54       }
55
56       div {
57           background-position: 50%;
58           background-size: cover;
59           display: flex;
60           justify-content: stretch;
61           align-items: stretch;
62           height: calc((100vw - 32px) * 315 / 975);
63
64           @include rwd($break-flow) {
65               height: 368px;
66           }
67
68           a {
69               width: 100%;
70               height: 100%;
71           }
72       }
73
74       .slick-dots {
75           bottom: 10px;
76     li button:before {
77       border: 1px solid #007880;
78     }
79           
80       }
81       
82   }
83   
84   &.p-homepage__info__box--donate {
85       width: 100%;
86     display: flex;
87     padding: 21px;
88     color: $color-white;
89     margin-top: 20px;
90     margin-right: 0;
91     background-color: $color-darker-primary;
92     border-color: $color-darker-primary;
93
94     @include rwd($break-flow) {
95         width: calc(50% - 10px);
96       margin-right: 10px;
97     }
98   }
99
100   &.p-homepage__info__box--newsletter {
101       width: 100%;
102     display: flex;
103     padding: 21px;
104     margin-top: 20px;
105       margin-right: 0;
106       margin-left: 0;
107     color: $color-darker-primary;
108     background-color: $color-lighter-primary;
109     border-color: $color-lighter-primary;
110     position: relative;
111     overflow: visible;
112
113     @include rwd($break-flow) {
114         width: calc(50% - 10px);
115         margin-left: 10px;
116     }
117
118     &:after {
119       content: "";
120       display: none;
121       width: 555px;
122       height: 233px;
123       bottom: 0;
124       left: 0;
125       background: url("../images/book-donate-bg.svg") center no-repeat;
126       position: absolute;
127       pointer-events: none;
128
129
130       @include rwd($break-flow) {
131         display: block;
132       }
133     }
134   }
135
136   &.p-homepage__info__box--full {
137     width: 100%;
138     max-width: 705px;
139     padding: 0;
140     color: $color-white;
141     margin-right: 0;
142       margin-bottom: 20px;
143     background: $color-darker-primary;
144     border: 0;
145     display: flex;
146       flex-direction: column;
147
148       @include rwd($break-flow) {
149           flex-direction: row;
150           margin-right: 20px;
151           margin-bottom: 0;
152     }
153
154     img {
155       border-radius: 0;
156
157       min-width: 100%;
158       height: 250px;
159       object-fit: cover;
160       @include rwd($break-flow) {
161           min-width: 270px;
162           height: unset;
163           object-fit: unset;
164       }
165     }
166
167     .p-homepage__info__box__content {
168       max-width: 100%;
169       justify-content: flex-start;
170       padding: 32px;
171       background: url("../images/plant.png") center no-repeat;
172       p {
173         @include font-size(18px);
174
175         @include rwd($break-flow) {
176           @include font-size(24px);
177         }
178
179         & + p {
180           margin-top: 16px;
181           @include font-size(14px);
182           line-height: 150%;
183
184           @include rwd($break-flow) {
185             @include font-size(18px);
186           }
187         }
188       }
189     }
190
191     .l-button {
192       margin-top: 20px;
193       margin-bottom: 0;
194
195       @include rwd($break-flow) {
196         margin-top: auto;
197       }
198     }
199   }
200
201   &.p-homepage__info__box--full--sm {
202     border: 0;
203     display: flex;
204
205     img {
206       min-width: 125px;
207     }
208
209     .p-homepage__info__box__content {
210       max-width: 100%;
211       justify-content: flex-start;
212       padding: 15px;
213       p {
214         @include font-size(18px);
215
216         @include rwd($break-flow) {
217           @include font-size(24px);
218         }
219
220         strong {
221           color: inherit;
222           font-weight: $semibold;
223         }
224
225         & + p {
226           margin-top: 16px;
227           @include font-size(18px);
228           line-height: 150%;
229         }
230       }
231
232       .l-button {
233         margin-top: auto;
234         margin-bottom: 0;
235         @include font-size(18px);
236         padding: 3px 10px;
237       }
238     }
239
240     &:nth-child(1) {
241       background-color: #92BD39;
242       margin-bottom: 20px;
243       .p-homepage__info__box__content {
244         background: url("../images/flower.png") center no-repeat;
245       }
246     }
247
248     &:nth-child(2) {
249       background-color: #FFA500;
250       .p-homepage__info__box__content {
251         background: url("../images/flower-2.png") center no-repeat;
252       }
253     }
254   }
255 }
256
257 .p-homepage__info__box__content {
258   width: 100%;
259   max-width: 320px;
260   position: relative;
261   display: flex;
262   flex-direction: column;
263   justify-content: space-between;
264   z-index: $middle-layer;
265
266   h3 {
267     font-weight: $semibold;
268     line-height: 100%;
269     letter-spacing: -0.01em;
270
271     margin-top: 0;
272     @include font-size(19px);
273     @include rwd($break-flow) {
274         // margin-top??
275         @include font-size(31px);
276         line-height: 100%;
277     }
278
279     strong {
280       display: block;
281       font-weight: $bold;
282       margin-top: 4px;
283       @include font-size(28px);
284
285       @include rwd($break-flow) {
286         @include font-size(46px);
287         margin-top: 6px;
288       }
289     }
290   }
291
292   p {
293     margin-top: 0;
294     font-style: italic;
295     font-weight: $regular;
296     @include font-size(13px);
297     line-height: 140%;
298     letter-spacing: -0.01em;
299     @include rwd($break-flow) {
300       @include font-size(21px);
301       line-height: 140%;
302     }
303     strong {
304       color: #92BD39;
305       font-weight: $regular;
306     }
307   }
308   
309   .l-button {
310     display: block;
311   }
312 }
313
314 .p-homepage-prapremiera {
315   //  width: calc(100% + 32px);
316   //background-color: #F2F2F2;
317   padding: 25px 0 40px 0;
318   //margin-top: 48px;
319   //margin-left: -16px;
320   margin-left: 16px;
321
322   @include rwd($break-flow) {
323       width: 100%;
324       margin-left: 0;
325   }
326
327   .l-container {
328     & > h3 {
329       margin-top: 0;
330       font-weight: $semibold;
331       @include font-size(25px);
332       line-height: 140%;
333       letter-spacing: -0.01em;
334       color: #92BD39;
335
336       @include rwd($break-flow) {
337         @include font-size(31px);
338       }
339     }
340   }
341 }
342
343 .p-homepage-prapremiera__box {
344   margin-top: 16px;
345   background-color: $color-white;
346   border: 1px solid #D9D9D9;
347   border-radius: 10px;
348   display: flex;
349   flex-direction: column;
350   justify-content: space-between;
351   padding: 16px;
352
353   @include rwd($break-flow) {
354       padding: 21px;
355   }
356
357   .p-homepage-prapremiera__box__item {
358       display: flex;
359       flex-direction: row;
360       gap: 16px;
361   }
362   
363   figure {
364     margin: 0;
365     font-size: 0;
366
367     display: flex;
368     align-items: center;
369     justify-content: center;
370     @include rwd($break-flow) {
371         display: block;
372     }
373
374     a {
375       display: block;
376       img {
377         min-width: 240px;
378         max-width: 100%;
379       }
380     }
381   }
382 }
383
384 .p-homepage-prapremiera__box__content {
385
386     width: 100%;
387     margin-top: 25px;
388     @include rwd($break-flow) {
389         //width: 385px;
390         margin-top: 0; // ?
391     }
392
393   h4 {
394     margin-top: 0;
395     font-weight: $regular;
396     @include font-size(18px);
397     line-height: 100%;
398     @include rwd($break-flow) {
399       @include font-size(21px);
400     }
401     a {
402       color: #007880;
403     }
404   }
405
406   h3 {
407     margin-top: 10px;
408     font-weight: $regular;
409     @include font-size(24px);
410     line-height: 120%;
411     @include rwd($break-flow) {
412       margin-top: 0;
413       @include font-size(37px);
414     }
415     a {
416       color: #083F4D;
417     }
418   }
419
420   p {
421     margin-top: 10px;
422     font-weight: $regular;
423     @include font-size(18px);
424     line-height: 150%;
425     color: #333333;
426
427     @include rwd($break-flow) {
428       margin-top: 22px;
429     }
430   }
431 }
432
433 .p-homepage-prapremiera__box__donate {
434   background: #083F4D;
435   border-radius: 7px;
436   color: $color-white;
437   display: flex;
438   flex-direction: column;
439   justify-content: space-between;
440
441     width: 100%;
442     padding: 18px;
443     margin-top: 20px;
444     @include rwd($break-flow) {
445         //width: 390px;
446         padding: 34px;
447         //margin-top: 0;
448     }
449
450   p {
451     margin-top: 0;
452     font-style: italic;
453     font-weight: $regular;
454     @include font-size(20px);
455     line-height: 150%;
456
457       margin-bottom: 20px;
458       @include rwd($break-flow) {
459           margin-bottom: 0;
460           @include font-size(24px);
461       }
462
463     strong {
464       color: #92BD39;
465       font-weight: $regular;
466     }
467   }
468 }
469
470 .p-homepage__uptodate {
471     margin-top: 30px;
472     width: calc(100% + 32px);
473     margin-left: -16px;
474     @include rwd($break-flow) {
475         width: 100%;
476         margin-top: 60px;
477         margin-bottom: 50px;
478     }
479 }
480
481 .p-homepage__uptodate__header {
482   display: flex;
483   justify-content: space-between;
484   align-items: center;
485   padding-bottom: 16px;
486   border-bottom: 1px solid #007880;
487   h3 {
488     margin-top: 0;
489     font-weight: $semibold;
490     @include font-size(25px);
491     line-height: 140%;
492     letter-spacing: -0.01em;
493     color: #474747;
494
495     @include rwd($break-flow) {
496       @include font-size(31px);
497     }
498   }
499   ul {
500     margin: 0;
501     padding: 0;
502     list-style: none;
503     display: flex;
504     align-items: center;
505     justify-content: center;
506     li {
507       margin-left: 15px;
508       @include rwd($break-flow) {
509         margin-left: 35px;
510       }
511       a {
512         font-size: 0;
513         color: #083F4D;
514         display: flex;
515         align-items: center;
516         justify-content: center;
517         .icon {
518           @include font-size(40px);
519         }
520       }
521     }
522   }
523 }
524