Mercurial
comparison .cms/man/css/styles.css @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
1 body { | |
2 min-height: 100vh; | |
3 margin: 0; | |
4 font-size: 1rem; | |
5 font-family: var(--sans-serif); | |
6 font-weight: 400; | |
7 color: #111111; | |
8 text-align: left; | |
9 background-color: #f7f7f7; | |
10 } | |
11 | |
12 :root { | |
13 --sans-serif: system-ui, sans-serif; | |
14 --monospace: "consolas", monospace; | |
15 } | |
16 :root { | |
17 scroll-behavior: smooth | |
18 } | |
19 | |
20 *, | |
21 *::before, | |
22 *::after { | |
23 box-sizing: border-box; | |
24 } | |
25 | |
26 img, video { | |
27 max-width: 100%; | |
28 display: block; | |
29 height: auto; | |
30 } | |
31 | |
32 /* Template Mini */ | |
33 body { | |
34 display: grid; | |
35 grid-template-areas: | |
36 "header" | |
37 "nav" | |
38 "main" | |
39 "footer"; | |
40 grid-template-rows: 3.7rem auto 1fr auto; | |
41 } | |
42 | |
43 header { | |
44 grid-area: header; | |
45 display: grid; | |
46 grid-template-columns: 1fr minmax(auto,80rem) 1fr; | |
47 min-width: 100%; | |
48 background-color: #ffffff; | |
49 position: fixed; | |
50 left: 0; | |
51 right: 0; | |
52 z-index: 999; | |
53 box-shadow: 0 2px 6px 0 #0000001f, inset 0 -1px 0 0 #dadce0; | |
54 } | |
55 @media (max-width: 767px) { | |
56 header { | |
57 column-gap: 0; | |
58 } | |
59 } | |
60 @media (min-width: 768px) { | |
61 header { | |
62 column-gap: 0.5rem; | |
63 } | |
64 } | |
65 | |
66 .header-content { | |
67 grid-column: 2/3; | |
68 display: grid; | |
69 grid-auto-flow: column; | |
70 justify-content: space-between; | |
71 position: relative; | |
72 } | |
73 .lrtop { | |
74 display: grid; | |
75 align-items: center; | |
76 } | |
77 .logo { | |
78 position: absolute; | |
79 left: 50%; | |
80 top: 50%; | |
81 transform: translate(-50%, -50%); | |
82 } | |
83 .logo a { | |
84 text-decoration: none; | |
85 color: #222222; | |
86 font-size: 1.2rem; | |
87 line-height: 1; | |
88 } | |
89 | |
90 | |
91 | |
92 /* Icon */ | |
93 .icons-container { | |
94 display: grid; | |
95 grid-auto-flow: column; | |
96 justify-content: left; | |
97 align-items: center; | |
98 position: relative; | |
99 color: #111111; | |
100 } | |
101 @media (max-width: 767px) { | |
102 .icons-container { | |
103 margin-right: 0.3rem; | |
104 } | |
105 } | |
106 | |
107 .icon-box { | |
108 position: relative; | |
109 } | |
110 @media (max-width: 374px) { | |
111 .icon-box { | |
112 width: 37px; | |
113 height: 37px; | |
114 } | |
115 } | |
116 @media (min-width: 375px) { | |
117 .icon-box { | |
118 width: 44px; | |
119 height: 44px; | |
120 } | |
121 } | |
122 | |
123 .icon-box a { | |
124 position: absolute; | |
125 left: 0; | |
126 right: 0; | |
127 top: 0; | |
128 bottom: 0; | |
129 padding: 0.3125rem; | |
130 z-index: 7; | |
131 } | |
132 .icon-box a:hover { | |
133 background-color: #eaeaea; | |
134 border-radius: 50%; | |
135 color: green; | |
136 } | |
137 | |
138 | |
139 /*Icon Phone*/ | |
140 .phone-number-container { | |
141 position: relative; | |
142 color: #111111; | |
143 height: 2.75rem; | |
144 } | |
145 | |
146 .phone-number-container a { | |
147 padding: 0 3.5625rem 0 1rem; | |
148 height: 2.75rem; | |
149 margin-right: -2.75rem; | |
150 position: relative; | |
151 z-index: 10; | |
152 font-size: 1rem; | |
153 text-decoration: none; | |
154 color: #111111; | |
155 display: flex; | |
156 align-items: center; | |
157 } | |
158 .phone-number-container a:hover { | |
159 color: #1a73e8; | |
160 } | |
161 .phone-number-container:hover ~ .icon-box { | |
162 background-color: #f1f1f1; | |
163 border-radius: 50%; | |
164 } | |
165 | |
166 @media (max-width: 768px) { | |
167 .phone-number-container { | |
168 display: none; | |
169 } | |
170 } | |
171 | |
172 | |
173 .icon-tg-box { | |
174 position: relative; | |
175 } | |
176 @media (max-width: 374px) { | |
177 .icon-tg-box { | |
178 width: 37px; | |
179 height: 37px; | |
180 } | |
181 } | |
182 @media (min-width: 375px) { | |
183 .icon-tg-box { | |
184 width: 44px; | |
185 height: 44px; | |
186 } | |
187 } | |
188 | |
189 .icon-tg-box a { | |
190 position: absolute; | |
191 left: 0; | |
192 right: 0; | |
193 top: 0; | |
194 bottom: 0; | |
195 padding: 0.3125rem; | |
196 z-index: 7; | |
197 } | |
198 .icon-tg-box a:hover { | |
199 background-color: #dff1ff; | |
200 border-radius: 50%; | |
201 } | |
202 | |
203 | |
204 | |
205 | |
206 .icon-whatsapp-box { | |
207 position: relative; | |
208 } | |
209 @media (max-width: 374px) { | |
210 .icon-whatsapp-box { | |
211 width: 37px; | |
212 height: 37px; | |
213 } | |
214 } | |
215 @media (min-width: 375px) { | |
216 .icon-whatsapp-box { | |
217 width: 44px; | |
218 height: 44px; | |
219 } | |
220 } | |
221 | |
222 .icon-whatsapp-box a { | |
223 position: absolute; | |
224 left: 0; | |
225 right: 0; | |
226 top: 0; | |
227 bottom: 0; | |
228 padding: 0.3125rem; | |
229 z-index: 7; | |
230 } | |
231 .icon-whatsapp-box a:hover { | |
232 background-color: #e0feff; | |
233 border-radius: 50%; | |
234 } | |
235 | |
236 | |
237 nav { | |
238 grid-area: nav; | |
239 display: grid; | |
240 background-color: #f7f7f7; | |
241 grid-template-areas: ". gnc ."; | |
242 grid-template-columns: 1fr minmax(auto,80rem) 1fr; | |
243 } | |
244 /*Header Container*/ | |
245 nav ul { | |
246 grid-column: gnc; | |
247 margin: 0; | |
248 padding: 0; | |
249 display: grid; | |
250 grid-auto-flow: column; | |
251 justify-content: space-evenly; | |
252 } | |
253 nav li { | |
254 list-style-type: none; | |
255 } | |
256 nav li a { | |
257 display: inline-block; | |
258 line-height: 0; | |
259 padding: 24px 10px 24px 10px; | |
260 font-size: 17px; | |
261 color: #000000; | |
262 text-decoration: none; | |
263 } | |
264 nav li a:hover { | |
265 color: #333333; | |
266 } | |
267 nav li.active a { | |
268 color: #1a73e8; | |
269 } | |
270 /* Active Mobile Display */ | |
271 @media (max-width: 768px) { | |
272 nav ul { | |
273 display: none; | |
274 } | |
275 } | |
276 | |
277 | |
278 | |
279 main { | |
280 grid-area: main; | |
281 display: grid; | |
282 grid-template-columns: 1fr minmax(auto,40rem) 1fr; | |
283 row-gap: 1.4rem; | |
284 column-gap: 0.5rem; | |
285 padding-bottom: 3rem; | |
286 align-content: start; | |
287 } | |
288 main > * { | |
289 grid-column: 2/3; | |
290 } | |
291 main .ignorgap { | |
292 grid-column: 1/-1; | |
293 justify-self: center; | |
294 max-width: 40rem; | |
295 margin: 0 auto; | |
296 } | |
297 | |
298 main .gap { | |
299 grid-column: 1/-1; | |
300 justify-self: center; | |
301 max-width: 40rem; | |
302 } | |
303 | |
304 main .banner { | |
305 max-height: 380px; | |
306 object-fit: cover; | |
307 grid-column: 1/-1; | |
308 justify-self: center; | |
309 } | |
310 main h1 { | |
311 margin: 0; | |
312 padding: 0; | |
313 font-weight: 500; | |
314 line-height: 1; | |
315 font-size: calc(1.7rem + 0.7vw); | |
316 position: relative; | |
317 display: block; | |
318 } | |
319 main > h1:first-child { | |
320 margin-top: 2rem; | |
321 } | |
322 | |
323 main h2, main h3, main h4, main h5, main h6 { | |
324 margin: 0; | |
325 padding: 0; | |
326 font-weight: 400; | |
327 line-height: 1; | |
328 position: relative; | |
329 } | |
330 main p { | |
331 margin: 0; | |
332 padding: 0; | |
333 display: block; | |
334 line-height: 1.4; | |
335 } | |
336 main a { | |
337 margin: 0; | |
338 padding: 0; | |
339 display: inline; | |
340 line-height: 1.4; | |
341 color: #007ce7; | |
342 } | |
343 main pre { | |
344 margin: 0; | |
345 width: 100%; | |
346 word-break: break-all; | |
347 line-height: 1.4em; | |
348 display: block; | |
349 padding: 0.7rem; | |
350 background-color: #eaeaea; | |
351 } | |
352 main code { | |
353 background-color: #eaeaea; | |
354 font-family: var(--monospace); | |
355 white-space: pre-wrap; | |
356 } | |
357 main code p { | |
358 padding: 0.3rem 0.7rem 0.3rem 0.7rem; | |
359 margin: -0.7rem -0.7rem 0.3rem -0.7rem; | |
360 background-color: lightgrey; | |
361 } | |
362 | |
363 main img, main svg, main video, main audio, main source, main blockquote, main figure, main div, main iframe { | |
364 margin: 0; | |
365 padding: 0; | |
366 position: relative; | |
367 } | |
368 figcaption { | |
369 text-align: center; | |
370 background-color: #0000003d; | |
371 padding: 0.1rem 0.7rem; | |
372 } | |
373 main .wide { | |
374 grid-column: 1/-1; | |
375 justify-self: center; | |
376 } | |
377 | |
378 main ul { | |
379 margin: 0; | |
380 padding: 0 0 0 1.2rem; | |
381 display: block; | |
382 line-height: 1.4; | |
383 } | |
384 main ol { | |
385 margin: 0; | |
386 padding: 0 0 0 1.2rem; | |
387 display: block; | |
388 line-height: 1.4; | |
389 } | |
390 | |
391 main blockquote { | |
392 margin: 0; | |
393 padding: 0.5rem 0.7rem 0.5rem 0.7rem; | |
394 background-color: #eaeaea; | |
395 border-left: 2px solid #acacac; | |
396 } | |
397 main blockquote p { | |
398 margin-bottom: 0.7rem; | |
399 } | |
400 main blockquote p.author { | |
401 text-align: right; | |
402 padding-right: 1rem; | |
403 } | |
404 main blockquote p:last-child { | |
405 margin-bottom: 0; | |
406 } | |
407 | |
408 main > video { | |
409 grid-column: 1/-1; | |
410 margin: 0 auto; | |
411 max-width: 100%; | |
412 height: auto; | |
413 } | |
414 | |
415 footer { | |
416 grid-area: footer; | |
417 background-color: #111111; | |
418 display: grid; | |
419 grid-template-columns: 1fr minmax(auto,80rem) 1fr; | |
420 column-gap: 0.5rem; | |
421 } | |
422 | |
423 | |
424 .footer-content { | |
425 grid-column: 2/3; | |
426 padding: 1rem 0rem; | |
427 min-height: 3rem; | |
428 display: grid; | |
429 gap: 1rem; | |
430 } | |
431 @media (max-width: 374px) { | |
432 .footer-content { | |
433 grid-template-columns: 1fr; | |
434 grid-template-areas: | |
435 "left-footer" | |
436 "right-footer"; | |
437 } | |
438 } | |
439 @media (min-width: 375px) { | |
440 .footer-content { | |
441 grid-template-columns: 1fr 0.4fr; | |
442 grid-template-areas:"left-footer right-footer"; | |
443 } | |
444 } | |
445 .left-footer { | |
446 grid-area: left-footer; | |
447 display: grid; | |
448 row-gap: 0.7rem; | |
449 } | |
450 .right-footer { | |
451 grid-area: right-footer; | |
452 display: flex; | |
453 width: 100%; | |
454 padding: 0.3rem 0; | |
455 justify-content: center; | |
456 color: #eeeeee; | |
457 } | |
458 .right-footer div { | |
459 color: #eeeeee; | |
460 } | |
461 @media (min-width: 375px) { | |
462 .right-footer { | |
463 justify-content: flex-end; | |
464 padding: 0; | |
465 } | |
466 } | |
467 | |
468 | |
469 | |
470 /*Footer Container*/ | |
471 footer ul { | |
472 display: grid; | |
473 margin: 0; | |
474 padding: 0; | |
475 row-gap: 0.4375rem; | |
476 } | |
477 footer li { | |
478 list-style-type: none; | |
479 margin: 0; | |
480 display: block; | |
481 } | |
482 footer li a { | |
483 line-height: 1.3; | |
484 color: #ffffff; | |
485 text-decoration: none; | |
486 } | |
487 footer li a:hover { | |
488 color: #ddeeff; | |
489 } | |
490 footer li.active a { | |
491 color: #ddeeff; | |
492 } | |
493 | |
494 @media (min-width: 768px) { | |
495 footer ul { | |
496 display: flex; | |
497 flex-wrap: wrap; | |
498 justify-content: left; | |
499 column-gap: 0.9375rem; | |
500 } | |
501 } | |
502 | |
503 .copyright { | |
504 margin: 0; | |
505 font-size: 0.93rem; | |
506 color: #cccccc; | |
507 } | |
508 .copyright a { | |
509 color: #00b8ff; | |
510 text-decoration: none; | |
511 } | |
512 .copyright a:hover { | |
513 color: #39c7ff; | |
514 text-decoration: none; | |
515 } | |
516 | |
517 | |
518 /* Mobile Menu */ | |
519 /* Icon Line */ | |
520 .button-mobimenu-container { | |
521 display: grid; | |
522 justify-content: center; | |
523 align-content: center; | |
524 position: relative; | |
525 width: 3.7rem; | |
526 height: 3.7rem; | |
527 cursor: pointer; | |
528 } | |
529 /* Active Mobile Display */ | |
530 | |
531 .menu-icon { | |
532 width: 30px; | |
533 height: 14px; | |
534 position: relative; | |
535 z-index:7; | |
536 } | |
537 | |
538 .menu-icon span { | |
539 display: block; | |
540 position: absolute; | |
541 left: 0; | |
542 width: 100%; | |
543 height: 3px; | |
544 transform: rotate(0); | |
545 transition: transform 0.1s ease; | |
546 } | |
547 .menu-icon span { | |
548 background-color: #0d93ff; | |
549 } | |
550 .menu-icon span.line-1 { | |
551 top: 0; | |
552 } | |
553 .menu-icon span.line-2 { | |
554 bottom: 0; | |
555 } | |
556 | |
557 .mobile-menu-open .menu-icon span.line-1 { | |
558 top: 5px; | |
559 transform: rotate(45deg); | |
560 | |
561 } | |
562 .mobile-menu-open .menu-icon span.line-2 { | |
563 top: 5px; | |
564 transform: rotate(-45deg); | |
565 } | |
566 | |
567 /*Mobile Menu Container*/ | |
568 | |
569 aside { | |
570 position: fixed; | |
571 top: 0; | |
572 bottom: 0; | |
573 left: 0; | |
574 width: calc(100% - 4rem); | |
575 min-width: 16.875rem; | |
576 background-color: #ffffff; | |
577 z-index: 777; | |
578 transform: translate3d(-100%, 0, 0); | |
579 transition: opacity 0.25s ease, transform 0.25s ease; | |
580 padding: 3.7rem 0 0 0; | |
581 overflow-y: auto; | |
582 scrollbar-width: none; /*FireFox*/ | |
583 } | |
584 .mobile-menu-open aside { | |
585 transform: translate3d(0, 0, 0); | |
586 transition: opacity 0.25s ease, transform 0.25s ease; | |
587 } | |
588 | |
589 @media (min-width: 1024px) { | |
590 aside { | |
591 width: fit-content; | |
592 max-width: calc(100% - 4rem); | |
593 } | |
594 } | |
595 | |
596 aside ul { | |
597 margin: 0; | |
598 padding: 0; | |
599 } | |
600 aside > ul { | |
601 padding-bottom: 1rem; | |
602 } | |
603 aside > ul:not(:first-child) { | |
604 padding-top: 1rem; | |
605 } | |
606 aside > ul:not(:last-child) { | |
607 border-bottom: 1px solid #ccc; | |
608 } | |
609 aside li { | |
610 list-style-type: none; | |
611 position: relative; | |
612 } | |
613 aside li a { | |
614 width: 100%; | |
615 display: block; | |
616 padding: 13px 17px; | |
617 color: #111111; | |
618 text-decoration: none; | |
619 } | |
620 aside li a:hover { | |
621 color: #1a73e8; | |
622 background-color: #f7f7f7; | |
623 } | |
624 aside li.active > a { | |
625 color: #1a73e8; | |
626 background-color: #f7f7f7; | |
627 } | |
628 | |
629 ul.sub-menu { | |
630 margin: 0; | |
631 padding: 0; | |
632 } | |
633 | |
634 aside ul > li > ul > li > a { | |
635 padding-left: 34px; | |
636 } | |
637 aside ul > li > ul > li > ul > li > a { | |
638 padding-left: 51px; | |
639 } | |
640 | |
641 | |
642 /*Mobile Menu Reset*/ | |
643 .bg-reset { | |
644 display: none; | |
645 width: 100%; | |
646 height: 100%; | |
647 visibility: visible; | |
648 position: fixed; | |
649 left: 0; | |
650 right: 0; | |
651 top: 0; | |
652 bottom: 0; | |
653 z-index: 700; | |
654 opacity: 0.7; | |
655 background-color: #eeeeee; | |
656 } | |
657 .mobile-menu-open .bg-reset { | |
658 display: block; | |
659 } | |
660 | |
661 | |
662 /*Hot Info*/ | |
663 main .hot-scroll { | |
664 overflow: hidden; | |
665 grid-column: 1/-1; | |
666 background-color: #f1f1f1; | |
667 padding: 2rem 0; | |
668 } | |
669 | |
670 main .hot-scroll ul { | |
671 display: flex; | |
672 gap: 1rem; | |
673 overflow-x: auto; | |
674 margin: 0; | |
675 padding: 1rem 0; | |
676 scroll-behavior: smooth; | |
677 } | |
678 main .hot-scroll ul li { | |
679 display: block; | |
680 flex: 0 0 240px; | |
681 background-color: #ffffff; | |
682 min-height: 12rem; | |
683 transition: all .5s ease; | |
684 border-radius: 0.3rem; | |
685 overflow: hidden; | |
686 border: 1px solid #dadada; | |
687 user-select: none; | |
688 } | |
689 | |
690 main .hot-scroll ul li:hover { | |
691 box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%); | |
692 } | |
693 | |
694 main .hot-scroll ul li:first-child { | |
695 margin-left: calc(50% - 140px); | |
696 } | |
697 @media (min-width: 375px) { | |
698 main .hot-scroll ul li { | |
699 flex: 0 0 280px; | |
700 } | |
701 } | |
702 @media (min-width: 600px) { | |
703 main .hot-scroll ul li:first-child { | |
704 margin-left: calc(50% - 290px); | |
705 } | |
706 } | |
707 @media (min-width: 1024px) { | |
708 main .hot-scroll ul li { | |
709 flex: 0 0 440px; | |
710 } | |
711 main .hot-scroll ul li:first-child { | |
712 margin-left: calc(50% - 470px); | |
713 } | |
714 } | |
715 | |
716 | |
717 main .hot-scroll img { | |
718 overflow: hidden; | |
719 max-height: 10rem; | |
720 object-fit: cover; | |
721 margin: 0; | |
722 } | |
723 main .hot-scroll .hot-news { | |
724 padding: 0.6rem 1rem 1.6rem 1rem; | |
725 } | |
726 main .hot-scroll .hot-news h2 { | |
727 padding: 0; | |
728 margin: 0 0 0.7rem 0; | |
729 font-weight: 400; | |
730 font-size: 1.4rem; | |
731 color: #111111; | |
732 display: block; | |
733 text-decoration: none; | |
734 } | |
735 main .hot-scroll .hot-news p { | |
736 font-weight: 400; | |
737 color: #111111; | |
738 display: block; | |
739 text-decoration: none; | |
740 } | |
741 main .hot-scroll ul li a { | |
742 text-decoration: none; | |
743 } | |
744 | |
745 @media (min-width: 1024px) { | |
746 main .hot-scroll img { | |
747 max-height: 14rem; | |
748 } | |
749 main .hot-scroll .hot-news { | |
750 padding: 1rem 1.4rem 2rem 1.4rem; | |
751 } | |
752 main .hot-scroll .hot-news h2 { | |
753 font-size: 1.6rem; | |
754 } | |
755 } | |
756 | |
757 /*ЮMoney*/ | |
758 .yoomoney-pay { | |
759 padding: 0.7rem 1.7rem; | |
760 border-radius: 0.3rem; | |
761 border: 0; | |
762 cursor: pointer; | |
763 background-color: #8b3ffd; | |
764 font-size: 0.9rem; | |
765 transition: 0.3s; | |
766 color: #ffffff; | |
767 } | |
768 .yoomoney-pay:hover { | |
769 background: #8b3ffd; | |
770 box-shadow: 0 0 0 0.2em #c3a4ff; | |
771 } | |
772 .yoomoney-form { | |
773 display: grid; | |
774 padding: 0.7rem 0.7rem; | |
775 border-radius: 0.3rem; | |
776 background-color: white; | |
777 box-shadow: 0px 3px 7px 0px #00000033; | |
778 column-gap: 0.7rem; | |
779 } | |
780 .yoomoney-form input[type='email'] { | |
781 width: 100%; | |
782 border: 1px solid #777777; | |
783 border-radius: 0.3rem; | |
784 padding: 0 0 0 0.5rem; | |
785 font-size: 1rem; | |
786 font-weight: 600; | |
787 } | |
788 @media (max-width: 375px) { | |
789 .yoomoney-form { | |
790 width: 100%; | |
791 grid-template-columns: auto; | |
792 row-gap: 1rem; | |
793 } | |
794 .yoomoney-form input[type='email'] { | |
795 height: 2.4rem; | |
796 } | |
797 } | |
798 @media (min-width: 376px) { | |
799 .yoomoney-form { | |
800 width: fit-content; | |
801 grid-template-columns: auto auto; | |
802 } | |
803 } | |
804 /* | |
805 ul a:not([href]) { | |
806 display: none; | |
807 } | |
808 ul a:not([href]) + ul { | |
809 display: none; | |
810 } | |
811 */ |