*, :after, :before { box-sizing: border-box } body, html { height: 100% } blockquote, body, dd, dl, figcaption, figure, h1, h2, h3, h4, li, ol, p, ul { margin: 0; padding: 0 } canvas, img, svg, video { display: block; height: auto; max-width: 100% } a { color: inherit; text-decoration: none } button, input, select, textarea { border: 0; cursor: pointer; font: inherit; padding: 0 } ul { list-style: none } @font-face{ font-family: "Noto Serif Var"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../fonts/NotoSerif-Var.woff2") format("woff2-variations"), url("../fonts/NotoSerif-Var.ttf") format("truetype-variations"); } @font-face{ font-family: "Noto Serif Var"; font-style: italic; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("../fonts/NotoSerif-Var-Italic.woff2") format("woff2-variations"), url("../fonts/NotoSerif-Var-Italic.ttf") format("truetype-variations"); } .container { margin: 0 auto; max-width: 1260px; width: min(1260px, 100% - 48px) } body { font-family: "Noto Serif Var", "Noto Serif", Georgia, serif; font-size: 24px; line-height: 1.2; margin: 0 } .article-title, h1 { font-size: 32px; line-height: 1.2; margin: 0 0 16px } /* Чб изображения */ img:not([data-color="always"]):not(.no-bw), .wp-post-image:not([data-color="always"]):not(.no-bw), figure img:not([data-color="always"]):not(.no-bw), picture img:not([data-color="always"]):not(.no-bw) { filter: grayscale(100%); transition: filter .5s ease; will-change: filter; } /* десктопы с hover — цвет по наведению */ @media (hover: hover) and (pointer: fine) { img:not([data-color="always"]):not(.no-bw):hover, .wp-post-image:not([data-color="always"]):not(.no-bw):hover, figure img:not([data-color="always"]):not(.no-bw):hover, picture img:not([data-color="always"]):not(.no-bw):hover { filter: none; } } /* цвет по полной видимости — только на тач (класс вешает JS на ) */ .is-touch .img--in-view { filter: none !important; } /* исключения */ .header__logo-img, img.no-bw, svg image, img[aria-hidden="true"], img[data-color="always"] { filter: none !important; }