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