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