fix
[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     justify-content: center;
369     @include rwd($break-flow) {
370         display: block;
371     }
372
373     a {
374       display: block;
375       img {
376           width: 100%;
377           @include rwd($break-flow) {
378               width: 240px;
379           }
380       }
381     }
382   }
383 }
384
385 .p-homepage-prapremiera__box__content {
386
387     width: 100%;
388     margin-top: 0;
389
390   h4 {
391     margin-top: 0;
392     font-weight: $regular;
393     @include font-size(18px);
394     line-height: 100%;
395     @include rwd($break-flow) {
396       @include font-size(21px);
397     }
398     a {
399       color: #007880;
400     }
401   }
402
403   h3 {
404     margin-top: 10px;
405     font-weight: $regular;
406     @include font-size(24px);
407     line-height: 120%;
408     @include rwd($break-flow) {
409       margin-top: 0;
410       @include font-size(37px);
411     }
412     a {
413       color: #083F4D;
414     }
415   }
416
417   p {
418     margin-top: 10px;
419     font-weight: $regular;
420     @include font-size(18px);
421     line-height: 150%;
422     color: #333333;
423
424     @include rwd($break-flow) {
425       margin-top: 22px;
426     }
427   }
428 }
429
430 .p-homepage-prapremiera__box__donate {
431   background: #083F4D;
432   border-radius: 7px;
433   color: $color-white;
434   display: flex;
435   flex-direction: column;
436   justify-content: space-between;
437
438     width: 100%;
439     padding: 18px;
440     margin-top: 20px;
441     @include rwd($break-flow) {
442         //width: 390px;
443         padding: 34px;
444         //margin-top: 0;
445     }
446
447   p {
448     margin-top: 0;
449     font-style: italic;
450     font-weight: $regular;
451     @include font-size(20px);
452     line-height: 150%;
453
454       margin-bottom: 20px;
455       @include rwd($break-flow) {
456           margin-bottom: 0;
457           @include font-size(24px);
458       }
459
460     strong {
461       color: #92BD39;
462       font-weight: $regular;
463     }
464   }
465 }
466
467 .p-homepage__uptodate {
468     margin-top: 30px;
469     width: calc(100% + 32px);
470     margin-left: -16px;
471     @include rwd($break-flow) {
472         width: 100%;
473         margin-top: 60px;
474         margin-bottom: 50px;
475     }
476 }
477
478 .p-homepage__uptodate__header {
479   display: flex;
480   justify-content: space-between;
481   align-items: center;
482   padding-bottom: 16px;
483   border-bottom: 1px solid #007880;
484   h3 {
485     margin-top: 0;
486     font-weight: $semibold;
487     @include font-size(25px);
488     line-height: 140%;
489     letter-spacing: -0.01em;
490     color: #474747;
491
492     @include rwd($break-flow) {
493       @include font-size(31px);
494     }
495   }
496   ul {
497     margin: 0;
498     padding: 0;
499     list-style: none;
500     display: flex;
501     align-items: center;
502     justify-content: center;
503     li {
504       margin-left: 15px;
505       @include rwd($break-flow) {
506         margin-left: 35px;
507       }
508       a {
509         font-size: 0;
510         color: #083F4D;
511         display: flex;
512         align-items: center;
513         justify-content: center;
514         .icon {
515           @include font-size(40px);
516         }
517       }
518     }
519   }
520 }
521