Mercurial
diff .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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.cms/man/css/styles.css Fri Oct 11 22:40:23 2024 +0000 @@ -0,0 +1,811 @@ +body { + min-height: 100vh; + margin: 0; + font-size: 1rem; + font-family: var(--sans-serif); + font-weight: 400; + color: #111111; + text-align: left; + background-color: #f7f7f7; +} + +:root { + --sans-serif: system-ui, sans-serif; + --monospace: "consolas", monospace; +} +:root { + scroll-behavior: smooth +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +img, video { + max-width: 100%; + display: block; + height: auto; +} + +/* Template Mini */ +body { + display: grid; + grid-template-areas: + "header" + "nav" + "main" + "footer"; + grid-template-rows: 3.7rem auto 1fr auto; +} + +header { + grid-area: header; + display: grid; + grid-template-columns: 1fr minmax(auto,80rem) 1fr; + min-width: 100%; + background-color: #ffffff; + position: fixed; + left: 0; + right: 0; + z-index: 999; + box-shadow: 0 2px 6px 0 #0000001f, inset 0 -1px 0 0 #dadce0; +} +@media (max-width: 767px) { + header { + column-gap: 0; + } +} +@media (min-width: 768px) { + header { + column-gap: 0.5rem; + } +} + +.header-content { + grid-column: 2/3; + display: grid; + grid-auto-flow: column; + justify-content: space-between; + position: relative; +} +.lrtop { + display: grid; + align-items: center; +} +.logo { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.logo a { + text-decoration: none; + color: #222222; + font-size: 1.2rem; + line-height: 1; +} + + + +/* Icon */ +.icons-container { + display: grid; + grid-auto-flow: column; + justify-content: left; + align-items: center; + position: relative; + color: #111111; +} +@media (max-width: 767px) { + .icons-container { + margin-right: 0.3rem; + } +} + +.icon-box { + position: relative; +} +@media (max-width: 374px) { + .icon-box { + width: 37px; + height: 37px; + } +} +@media (min-width: 375px) { + .icon-box { + width: 44px; + height: 44px; + } +} + +.icon-box a { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + padding: 0.3125rem; + z-index: 7; +} +.icon-box a:hover { + background-color: #eaeaea; + border-radius: 50%; + color: green; +} + + +/*Icon Phone*/ +.phone-number-container { + position: relative; + color: #111111; + height: 2.75rem; +} + +.phone-number-container a { + padding: 0 3.5625rem 0 1rem; + height: 2.75rem; + margin-right: -2.75rem; + position: relative; + z-index: 10; + font-size: 1rem; + text-decoration: none; + color: #111111; + display: flex; + align-items: center; +} +.phone-number-container a:hover { + color: #1a73e8; +} +.phone-number-container:hover ~ .icon-box { + background-color: #f1f1f1; + border-radius: 50%; +} + +@media (max-width: 768px) { + .phone-number-container { + display: none; + } +} + + +.icon-tg-box { + position: relative; +} +@media (max-width: 374px) { + .icon-tg-box { + width: 37px; + height: 37px; + } +} +@media (min-width: 375px) { + .icon-tg-box { + width: 44px; + height: 44px; + } +} + +.icon-tg-box a { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + padding: 0.3125rem; + z-index: 7; +} +.icon-tg-box a:hover { + background-color: #dff1ff; + border-radius: 50%; +} + + + + +.icon-whatsapp-box { + position: relative; +} +@media (max-width: 374px) { + .icon-whatsapp-box { + width: 37px; + height: 37px; + } +} +@media (min-width: 375px) { + .icon-whatsapp-box { + width: 44px; + height: 44px; + } +} + +.icon-whatsapp-box a { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + padding: 0.3125rem; + z-index: 7; +} +.icon-whatsapp-box a:hover { + background-color: #e0feff; + border-radius: 50%; +} + + +nav { + grid-area: nav; + display: grid; + background-color: #f7f7f7; + grid-template-areas: ". gnc ."; + grid-template-columns: 1fr minmax(auto,80rem) 1fr; +} +/*Header Container*/ +nav ul { + grid-column: gnc; + margin: 0; + padding: 0; + display: grid; + grid-auto-flow: column; + justify-content: space-evenly; +} +nav li { + list-style-type: none; +} +nav li a { + display: inline-block; + line-height: 0; + padding: 24px 10px 24px 10px; + font-size: 17px; + color: #000000; + text-decoration: none; +} +nav li a:hover { + color: #333333; +} +nav li.active a { + color: #1a73e8; +} +/* Active Mobile Display */ +@media (max-width: 768px) { + nav ul { + display: none; + } +} + + + +main { + grid-area: main; + display: grid; + grid-template-columns: 1fr minmax(auto,40rem) 1fr; + row-gap: 1.4rem; + column-gap: 0.5rem; + padding-bottom: 3rem; + align-content: start; +} +main > * { + grid-column: 2/3; +} +main .ignorgap { + grid-column: 1/-1; + justify-self: center; + max-width: 40rem; + margin: 0 auto; +} + +main .gap { + grid-column: 1/-1; + justify-self: center; + max-width: 40rem; +} + +main .banner { + max-height: 380px; + object-fit: cover; + grid-column: 1/-1; + justify-self: center; +} +main h1 { + margin: 0; + padding: 0; + font-weight: 500; + line-height: 1; + font-size: calc(1.7rem + 0.7vw); + position: relative; + display: block; +} +main > h1:first-child { + margin-top: 2rem; +} + +main h2, main h3, main h4, main h5, main h6 { + margin: 0; + padding: 0; + font-weight: 400; + line-height: 1; + position: relative; +} +main p { + margin: 0; + padding: 0; + display: block; + line-height: 1.4; +} +main a { + margin: 0; + padding: 0; + display: inline; + line-height: 1.4; + color: #007ce7; +} +main pre { + margin: 0; + width: 100%; + word-break: break-all; + line-height: 1.4em; + display: block; + padding: 0.7rem; + background-color: #eaeaea; +} +main code { + background-color: #eaeaea; + font-family: var(--monospace); + white-space: pre-wrap; +} +main code p { + padding: 0.3rem 0.7rem 0.3rem 0.7rem; + margin: -0.7rem -0.7rem 0.3rem -0.7rem; + background-color: lightgrey; +} + +main img, main svg, main video, main audio, main source, main blockquote, main figure, main div, main iframe { + margin: 0; + padding: 0; + position: relative; +} +figcaption { + text-align: center; + background-color: #0000003d; + padding: 0.1rem 0.7rem; +} +main .wide { + grid-column: 1/-1; + justify-self: center; +} + +main ul { + margin: 0; + padding: 0 0 0 1.2rem; + display: block; + line-height: 1.4; +} +main ol { + margin: 0; + padding: 0 0 0 1.2rem; + display: block; + line-height: 1.4; +} + +main blockquote { + margin: 0; + padding: 0.5rem 0.7rem 0.5rem 0.7rem; + background-color: #eaeaea; + border-left: 2px solid #acacac; +} +main blockquote p { + margin-bottom: 0.7rem; +} +main blockquote p.author { + text-align: right; + padding-right: 1rem; +} +main blockquote p:last-child { + margin-bottom: 0; +} + +main > video { + grid-column: 1/-1; + margin: 0 auto; + max-width: 100%; + height: auto; +} + +footer { + grid-area: footer; + background-color: #111111; + display: grid; + grid-template-columns: 1fr minmax(auto,80rem) 1fr; + column-gap: 0.5rem; +} + + +.footer-content { + grid-column: 2/3; + padding: 1rem 0rem; + min-height: 3rem; + display: grid; + gap: 1rem; +} +@media (max-width: 374px) { + .footer-content { + grid-template-columns: 1fr; + grid-template-areas: + "left-footer" + "right-footer"; + } +} +@media (min-width: 375px) { + .footer-content { + grid-template-columns: 1fr 0.4fr; + grid-template-areas:"left-footer right-footer"; + } +} +.left-footer { + grid-area: left-footer; + display: grid; + row-gap: 0.7rem; +} +.right-footer { + grid-area: right-footer; + display: flex; + width: 100%; + padding: 0.3rem 0; + justify-content: center; + color: #eeeeee; +} +.right-footer div { + color: #eeeeee; +} +@media (min-width: 375px) { + .right-footer { + justify-content: flex-end; + padding: 0; + } +} + + + +/*Footer Container*/ +footer ul { + display: grid; + margin: 0; + padding: 0; + row-gap: 0.4375rem; +} +footer li { + list-style-type: none; + margin: 0; + display: block; +} +footer li a { + line-height: 1.3; + color: #ffffff; + text-decoration: none; +} +footer li a:hover { + color: #ddeeff; +} +footer li.active a { + color: #ddeeff; +} + +@media (min-width: 768px) { + footer ul { + display: flex; + flex-wrap: wrap; + justify-content: left; + column-gap: 0.9375rem; + } +} + +.copyright { + margin: 0; + font-size: 0.93rem; + color: #cccccc; +} +.copyright a { + color: #00b8ff; + text-decoration: none; +} +.copyright a:hover { + color: #39c7ff; + text-decoration: none; +} + + +/* Mobile Menu */ +/* Icon Line */ +.button-mobimenu-container { + display: grid; + justify-content: center; + align-content: center; + position: relative; + width: 3.7rem; + height: 3.7rem; + cursor: pointer; +} +/* Active Mobile Display */ + +.menu-icon { + width: 30px; + height: 14px; + position: relative; + z-index:7; +} + +.menu-icon span { + display: block; + position: absolute; + left: 0; + width: 100%; + height: 3px; + transform: rotate(0); + transition: transform 0.1s ease; +} +.menu-icon span { + background-color: #0d93ff; +} +.menu-icon span.line-1 { + top: 0; +} +.menu-icon span.line-2 { + bottom: 0; +} + +.mobile-menu-open .menu-icon span.line-1 { + top: 5px; + transform: rotate(45deg); + +} +.mobile-menu-open .menu-icon span.line-2 { + top: 5px; + transform: rotate(-45deg); +} + +/*Mobile Menu Container*/ + +aside { + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: calc(100% - 4rem); + min-width: 16.875rem; + background-color: #ffffff; + z-index: 777; + transform: translate3d(-100%, 0, 0); + transition: opacity 0.25s ease, transform 0.25s ease; + padding: 3.7rem 0 0 0; + overflow-y: auto; + scrollbar-width: none; /*FireFox*/ +} +.mobile-menu-open aside { + transform: translate3d(0, 0, 0); + transition: opacity 0.25s ease, transform 0.25s ease; +} + +@media (min-width: 1024px) { + aside { + width: fit-content; + max-width: calc(100% - 4rem); + } +} + +aside ul { + margin: 0; + padding: 0; +} +aside > ul { + padding-bottom: 1rem; +} +aside > ul:not(:first-child) { + padding-top: 1rem; +} +aside > ul:not(:last-child) { + border-bottom: 1px solid #ccc; +} +aside li { + list-style-type: none; + position: relative; +} +aside li a { + width: 100%; + display: block; + padding: 13px 17px; + color: #111111; + text-decoration: none; +} +aside li a:hover { + color: #1a73e8; + background-color: #f7f7f7; +} +aside li.active > a { + color: #1a73e8; + background-color: #f7f7f7; +} + +ul.sub-menu { + margin: 0; + padding: 0; +} + +aside ul > li > ul > li > a { + padding-left: 34px; +} +aside ul > li > ul > li > ul > li > a { + padding-left: 51px; +} + + +/*Mobile Menu Reset*/ +.bg-reset { + display: none; + width: 100%; + height: 100%; + visibility: visible; + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 700; + opacity: 0.7; + background-color: #eeeeee; +} +.mobile-menu-open .bg-reset { + display: block; +} + + +/*Hot Info*/ +main .hot-scroll { + overflow: hidden; + grid-column: 1/-1; + background-color: #f1f1f1; + padding: 2rem 0; +} + +main .hot-scroll ul { + display: flex; + gap: 1rem; + overflow-x: auto; + margin: 0; + padding: 1rem 0; + scroll-behavior: smooth; +} +main .hot-scroll ul li { + display: block; + flex: 0 0 240px; + background-color: #ffffff; + min-height: 12rem; + transition: all .5s ease; + border-radius: 0.3rem; + overflow: hidden; + border: 1px solid #dadada; + user-select: none; +} + +main .hot-scroll ul li:hover { + box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%); +} + +main .hot-scroll ul li:first-child { + margin-left: calc(50% - 140px); +} +@media (min-width: 375px) { + main .hot-scroll ul li { + flex: 0 0 280px; + } +} +@media (min-width: 600px) { + main .hot-scroll ul li:first-child { + margin-left: calc(50% - 290px); + } +} +@media (min-width: 1024px) { + main .hot-scroll ul li { + flex: 0 0 440px; + } + main .hot-scroll ul li:first-child { + margin-left: calc(50% - 470px); + } +} + + +main .hot-scroll img { + overflow: hidden; + max-height: 10rem; + object-fit: cover; + margin: 0; +} +main .hot-scroll .hot-news { + padding: 0.6rem 1rem 1.6rem 1rem; +} +main .hot-scroll .hot-news h2 { + padding: 0; + margin: 0 0 0.7rem 0; + font-weight: 400; + font-size: 1.4rem; + color: #111111; + display: block; + text-decoration: none; +} +main .hot-scroll .hot-news p { + font-weight: 400; + color: #111111; + display: block; + text-decoration: none; +} +main .hot-scroll ul li a { + text-decoration: none; +} + +@media (min-width: 1024px) { + main .hot-scroll img { + max-height: 14rem; + } + main .hot-scroll .hot-news { + padding: 1rem 1.4rem 2rem 1.4rem; + } + main .hot-scroll .hot-news h2 { + font-size: 1.6rem; + } +} + +/*ЮMoney*/ +.yoomoney-pay { + padding: 0.7rem 1.7rem; + border-radius: 0.3rem; + border: 0; + cursor: pointer; + background-color: #8b3ffd; + font-size: 0.9rem; + transition: 0.3s; + color: #ffffff; +} +.yoomoney-pay:hover { + background: #8b3ffd; + box-shadow: 0 0 0 0.2em #c3a4ff; +} +.yoomoney-form { + display: grid; + padding: 0.7rem 0.7rem; + border-radius: 0.3rem; + background-color: white; + box-shadow: 0px 3px 7px 0px #00000033; + column-gap: 0.7rem; +} +.yoomoney-form input[type='email'] { + width: 100%; + border: 1px solid #777777; + border-radius: 0.3rem; + padding: 0 0 0 0.5rem; + font-size: 1rem; + font-weight: 600; +} +@media (max-width: 375px) { + .yoomoney-form { + width: 100%; + grid-template-columns: auto; + row-gap: 1rem; + } + .yoomoney-form input[type='email'] { + height: 2.4rem; + } +} +@media (min-width: 376px) { + .yoomoney-form { + width: fit-content; + grid-template-columns: auto auto; + } +} +/* +ul a:not([href]) { + display: none; +} +ul a:not([href]) + ul { + display: none; +} +*/ \ No newline at end of file