@font-face { font-family: "Golos"; src: url("shrifty/golos-cyr.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos"; src: url("shrifty/golos-lat.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PT Serif"; src: url("shrifty/pt-serif-400-cyrillic.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "PT Serif"; src: url("shrifty/pt-serif-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212; } @font-face { font-family: "PT Serif"; src: url("shrifty/pt-serif-700-cyrillic.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "PT Serif"; src: url("shrifty/pt-serif-400-it-cyrillic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* арабская вязь — Lotus Shamy (слово владельца 20.10, № 771); знак ﷺ — 100% (№ 1460-е правки, zhivoe.css) */ @font-face { font-family: "PZ Arabic"; src: url("/pz-svoy/shrifty/lotus-shamy-light.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 130%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088F, U+08A0-08FF, U+FB50-FDF9, U+FDFB-FDFF, U+FE70-FEFF; } @font-face { font-family: "PZ Arabic"; src: url("/pz-svoy/shrifty/lotus-shamy-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; size-adjust: 130%; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088F, U+08A0-08FF, U+FB50-FDF9, U+FDFB-FDFF, U+FE70-FEFF; } @font-face { font-family: "PZ Arabic"; src: url("/pz-svoy/shrifty/lotus-shamy-light.woff2") format("woff2"); font-weight: 400; font-display: swap; size-adjust: 100%; unicode-range: U+FDFA; } @font-face { font-family: "PZ Arabic"; src: url("/pz-svoy/shrifty/lotus-shamy-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; size-adjust: 100%; unicode-range: U+FDFA; } /* ---------- цвета: светлая страница ---------- */ :root, [data-tema="svet"] { --fon: #F2F1ED; /* поле страницы */ --list: #FFFFFF; /* лист для чтения, карточки */ --tint: #FCF4EB; /* тёплая подложка */ --tint-2: #EDEBE4; /* шаг тона для полей и кнопок */ --chernila: #242320; --chernila-2: #3D3B36; --vtor: #66625A; /* вторичный текст, 5.9:1 на белом */ --liniya: #D1CFC9; --akcent: #D77B23; /* оранжевый ПЗ: крыша знака, полосы, отметки */ --akcent-t: #9A5512; /* оранжевый для текста и кнопок: 5,05:1 на поле #F2F1ED, 5,7:1 на белом (№ 1582, Контролёр) */ --akcent-na: #FFFFFF; --med: #F6C453; /* медовый жёлтый — «Цитата дня» */ --med-fon: #FBE7B5; --med-chernila: #2B2414; --ten: rgba(36, 35, 32, .16); --zatemnenie: rgba(36, 35, 32, .42); --veil: rgba(242, 241, 237, 1); --kartinka-filtr: none; color-scheme: light; } /* ---------- ночная страница: тёплый уголь, без синего ---------- */ [data-tema="noch"] { --fon: #161310; --list: #1F1B17; --tint: #29221B; --tint-2: #2C2722; --chernila: #EFE8DE; --chernila-2: #D9D1C5; --vtor: #A99F92; --liniya: #3D362F; --akcent: #EE9640; --akcent-t: #F3A85C; --akcent-na: #1A130C; --med: #E7AE3E; --med-fon: #3A2F18; --med-chernila: #F6E9CC; --ten: rgba(0, 0, 0, .5); --zatemnenie: rgba(0, 0, 0, .6); --veil: rgba(22, 19, 16, 1); --kartinka-filtr: brightness(.72) saturate(.9); color-scheme: dark; } :root { --shrift-ui: "PZ Arabic", "Golos", system-ui, -apple-system, "Segoe UI", sans-serif; --shrift-tekst: "PZ Arabic", "PT Serif", Georgia, serif; --shapka-v: 64px; --kolonka: 40rem; --shirina: 1240px; --pole: clamp(16px, 4vw, 32px); --masht: 1; /* «Аа»: размер текста статьи */ --ease: cubic-bezier(.22, .8, .24, 1); --r: 14px; } [data-shrift="bez"] { --shrift-tekst: "PZ Arabic", "Golos", system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--shapka-v) + 20px); } body { margin: 0; min-height: 100vh; font-family: var(--shrift-ui); font-size: 1rem; line-height: 1.5; color: var(--chernila); background: var(--fon); -webkit-tap-highlight-color: rgba(215, 123, 35, .18); touch-action: manipulation; overflow-wrap: break-word; transition: background-color .3s ease, color .3s ease; } img, svg { display: block; max-width: 100%; } svg { width: 22px; height: 22px; flex: none; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input { font: inherit; color: inherit; } h1, h2 { text-wrap: balance; } h3 { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--akcent-t); outline-offset: 3px; border-radius: 8px; } [hidden] { display: none !important; } .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .propusk { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--akcent-t); color: var(--akcent-na); padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; } .propusk:focus { top: 12px; } .ramka { width: 100%; max-width: var(--shirina); margin-inline: auto; padding-inline: var(--pole); } /* кнопка-значок */ .kz { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 22px; color: var(--chernila); transition: background-color .2s ease, transform .1s ease; } .kz:hover { background: var(--tint-2); } .kz:active { transform: scale(.94); } .kz-aa { font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; padding: 0 6px; } /* кнопки */ .knopka { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 23px; background: var(--akcent-t); color: var(--akcent-na); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, transform .1s ease; } .knopka:hover { background: color-mix(in srgb, var(--akcent-t) 86%, #000); } .knopka:active { transform: scale(.97); } .knopka svg { width: 18px; height: 18px; } .knopka-2 { background: var(--tint-2); color: var(--chernila); } .knopka-2:hover { background: color-mix(in srgb, var(--tint-2) 85%, var(--chernila)); } /* знак-крыша: уголок оранжевой крыши из знака ПЗ — метка раздела */ .krysha { position: relative; padding-left: 22px; } .krysha::before { content: ""; position: absolute; left: 0; top: .32em; width: 12px; height: 12px; border-left: 3px solid var(--akcent); border-top: 3px solid var(--akcent); transform: rotate(45deg) translate(2px, 2px); } .metka { display: inline-block; font-size: .875rem; font-weight: 600; color: var(--akcent-t); text-decoration: none; } /* ================= шапка ================= */ .shapka { position: sticky; top: 0; z-index: 30; height: calc(var(--shapka-v) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--list); box-shadow: 0 1px 0 var(--liniya); transition: background-color .3s ease, box-shadow .3s ease; } .shapka-ryad { height: var(--shapka-v); display: flex; align-items: center; gap: 4px; max-width: 1400px; margin-inline: auto; padding-inline: 8px; } .gamburger { margin-right: 2px; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-width: 0; padding: 4px; border-radius: 10px; } .logo-znak { width: 34px; height: 44px; flex: none; position: relative; } .logo-znak img { position: absolute; inset: 0; width: 100%; height: 100%; } .logo-znak .z-noch { opacity: 0; } [data-tema="noch"] .logo-znak .z-den { opacity: 0; } [data-tema="noch"] .logo-znak .z-noch { opacity: 1; } .logo-t { display: grid; line-height: 1.05; min-width: 0; } .logo-t b { font-weight: 700; font-size: 1.125rem; letter-spacing: -.015em; white-space: nowrap; } .logo-t small { font-size: .75rem; color: var(--akcent-t); font-weight: 500; white-space: nowrap; margin-top: 3px; } .menyu { display: none; } .menyu-sp { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; } .menyu-sp > li { position: relative; } .menyu-sp > li > a, .m-knopka { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border-radius: 22px; font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; } .menyu-sp > li > a:hover, .m-knopka:hover, .m-knopka[aria-expanded="true"] { background: var(--tint-2); } .menyu-sp a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--akcent); border-radius: 22px 22px 6px 6px; } .m-knopka svg { width: 16px; height: 16px; transition: transform .25s var(--ease); } .m-knopka[aria-expanded="true"] svg { transform: rotate(180deg); } .vyp { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 35; width: 340px; list-style: none; margin: 0; padding: 8px; border-radius: var(--r); background: var(--list); box-shadow: 0 0 0 1px var(--liniya), 0 18px 48px var(--ten); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; transform-origin: top left; animation: poyav .2s var(--ease); } @keyframes poyav { from { opacity: 0; transform: translateY(-6px) scale(.98); } } .vyp a { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-size: .9375rem; font-weight: 500; } .vyp a span { font-size: .8125rem; color: var(--vtor); font-weight: 400; font-variant-numeric: tabular-nums; } .vyp a:hover { background: var(--tint); } .vyp .vyp-vse { grid-column: 1 / -1; } .vyp .vyp-vse a { color: var(--akcent-t); } .shapka-pravo { display: flex; align-items: center; gap: 2px; } .shapka-poisk { display: none; } /* главная: шапка прозрачная над обложкой */ .na-oblozhke .shapka { background: transparent; box-shadow: none; } .na-oblozhke.uzhe-nizhe .shapka { background: var(--list); box-shadow: 0 1px 0 var(--liniya); } @media (min-width: 1100px) { .menyu { display: block; margin-right: 8px; } .gamburger { display: none; } .logo { margin-right: 18px; } .shapka-ryad { padding-inline: 20px; } .shapka-pravo { margin-left: auto; } .shapka-poisk { display: inline-flex; align-items: center; gap: 10px; height: 44px; width: 200px; padding: 0 14px; margin-right: 6px; border-radius: 22px; background: var(--tint-2); color: var(--vtor); font-size: .9375rem; transition: background-color .2s ease; } .shapka-poisk:hover { background: color-mix(in srgb, var(--tint-2) 85%, var(--chernila)); } .shapka-poisk svg { width: 18px; height: 18px; } .shapka-poisk kbd { margin-left: auto; font: inherit; font-size: .75rem; padding: 1px 7px; border-radius: 6px; background: var(--list); } .kz-lupa { display: none; } } @media (max-width: 420px) { .logo-t small { display: none; } .logo-t b { font-size: 1rem; } .logo-znak { width: 28px; height: 36px; } } /* полоса прочтения — под шапкой */ .polosa { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none; } .polosa i { display: block; height: 100%; width: 100%; background: var(--akcent); transform-origin: left; transform: scaleX(0); } /* ================= левая панель (телефон, планшет) ================= */ .panel { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); overflow-y: auto; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top) + 10px) 18px 32px; background: var(--list); box-shadow: 0 0 60px var(--ten); transform: translateX(-104%); visibility: hidden; transition: transform .32s var(--ease), visibility 0s .32s; } .panel.otkryta { transform: none; visibility: visible; transition: transform .32s var(--ease), visibility 0s; } .panel-fon { position: fixed; inset: 0; z-index: 39; background: var(--zatemnenie); animation: fon .25s ease; } @keyframes fon { from { opacity: 0; } } .panel-verh { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 8px; } .panel-z { margin: 22px 0 8px; font-size: .875rem; font-weight: 600; color: var(--vtor); } .panel-sp { list-style: none; margin: 0; padding: 0; } .panel-sp a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px; text-decoration: none; font-size: 1.0625rem; font-weight: 500; } .panel-sp a span { color: var(--vtor); font-size: .875rem; font-weight: 400; } .panel-sp a:hover { background: var(--tint); } .panel-poisk { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; background: var(--tint-2); color: var(--vtor); font-size: 1rem; } /* ================= главная: обложка ================= */ .oblozhka { position: relative; margin-top: calc(-1 * (var(--shapka-v) + env(safe-area-inset-top))); min-height: min(92svh, 820px); display: flex; align-items: center; overflow: hidden; background: var(--tint); } .oblozhka-kartinka { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; filter: var(--kartinka-filtr); animation: oblozhka-svet 1.6s var(--ease) both; } @keyframes oblozhka-svet { from { opacity: 0; transform: scale(1.04); } } .oblozhka::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--veil) 70%, transparent) 0%, transparent 62%); pointer-events: none; } .oblozhka-tekst { position: relative; z-index: 1; padding-top: calc(var(--shapka-v) + 40px); padding-bottom: 72px; } .oblozhka-znak { width: 92px; height: auto; margin-bottom: 26px; } .oblozhka-znak .z-noch { display: none; } [data-tema="noch"] .oblozhka-znak .z-den { display: none; } [data-tema="noch"] .oblozhka-znak .z-noch { display: block; } .oblozhka h1 { margin: 0; font-size: clamp(2.75rem, 7.4vw, 6rem); line-height: .96; letter-spacing: -.035em; font-weight: 750; max-width: 9ch; } .oblozhka-pod { margin: 18px 0 30px; font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--chernila-2); max-width: 26ch; } .oblozhka-poisk { display: flex; align-items: center; gap: 12px; width: min(100%, 520px); min-height: 60px; padding: 0 10px 0 20px; border-radius: 30px; background: var(--list); color: var(--vtor); font-size: 1.0625rem; text-align: left; box-shadow: 0 10px 40px var(--ten); transition: transform .15s ease; } .oblozhka-poisk:hover { transform: translateY(-1px); } .oblozhka-poisk span { flex: 1; } .oblozhka-poisk b { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--akcent-t); color: var(--akcent-na); } .oblozhka-poisk b svg { width: 20px; height: 20px; } .chasto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-width: 520px; } .chasto span { width: 100%; font-size: .875rem; color: var(--chernila-2); margin-bottom: 2px; } .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; background: color-mix(in srgb, var(--list) 82%, transparent); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: background-color .2s ease; } .chip:hover { background: var(--list); } .chip[aria-pressed="true"] { background: var(--akcent-t); color: var(--akcent-na); } @media (max-width: 719px) { .oblozhka { min-height: 88svh; align-items: flex-end; } .oblozhka-kartinka { object-position: 86% 50%; } .oblozhka::after { background: linear-gradient(0deg, color-mix(in srgb, var(--veil) 92%, transparent) 0%, color-mix(in srgb, var(--veil) 55%, transparent) 55%, transparent 85%); } .oblozhka-znak { width: 64px; margin-bottom: 18px; } .oblozhka-tekst { padding-bottom: 36px; } } /* ================= разделы главной ================= */ .razdel { padding-top: clamp(52px, 7vw, 96px); } main > .razdel:last-child { padding-bottom: clamp(52px, 7vw, 96px); } .razdel-z { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .razdel-z h2 { margin: 0; font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -.025em; line-height: 1.1; font-weight: 700; } .razdel-z a { font-weight: 600; color: var(--akcent-t); text-decoration: none; white-space: nowrap; } .razdel-z a:hover { text-decoration: underline; text-underline-offset: 4px; } /* день: цитата + польза */ .den { display: grid; gap: 20px; grid-template-columns: 1fr; padding-top: clamp(40px, 6vw, 72px); } @media (min-width: 900px) { .den { grid-template-columns: 1.55fr 1fr; } } .citata-dnya { position: relative; margin: 0; padding: clamp(28px, 4.5vw, 56px); border-radius: 24px; background: var(--med-fon); color: var(--med-chernila); display: flex; flex-direction: column; overflow: hidden; } .citata-dnya::after { /* крыша знака, крупно, в углу */ content: ""; position: absolute; right: clamp(28px, 4vw, 52px); top: clamp(40px, 5vw, 64px); width: 58px; height: 58px; border-left: 11px solid var(--akcent); border-top: 11px solid var(--akcent); transform: rotate(45deg); opacity: .9; pointer-events: none; } .citata-dnya .metka { color: inherit; opacity: .78; } .citata-dnya blockquote { margin: 18px 0 22px; font-family: var(--shrift-tekst); font-size: clamp(1.375rem, 2.5vw, 2rem); line-height: 1.38; letter-spacing: -.005em; max-width: 30ch; position: relative; z-index: 1; } .citata-dnya figcaption { font-size: .9375rem; line-height: 1.45; } .citata-dnya figcaption b { display: block; font-size: 1rem; } .citata-dnya .deystviya { margin-top: auto; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; } .citata-dnya .knopka-2 { background: color-mix(in srgb, var(--med-chernila) 9%, transparent); color: var(--med-chernila); } .citata-dnya .knopka-2:hover { background: color-mix(in srgb, var(--med-chernila) 16%, transparent); } .polza-dnya { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px; border-radius: 24px; overflow: hidden; text-decoration: none; color: #FFF8EE; background: #6b5136; } .polza-dnya img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .polza-dnya:hover img { transform: scale(1.03); } .polza-dnya::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(40, 26, 12, .82) 0%, rgba(40, 26, 12, .25) 55%, transparent 80%); z-index: 1; } .polza-dnya > div { position: relative; z-index: 2; padding: 28px; } .polza-dnya .metka { color: #FFD9A8; } .polza-dnya h3, .polza-dnya .polza-z { margin: 6px 0 6px; font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.1; } .polza-dnya p { margin: 0; opacity: .9; font-size: .9375rem; } /* вход по видам */ .vidy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .vidy a { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 20px 18px 18px; border-radius: 18px; background: var(--list); text-decoration: none; transition: background-color .2s ease, transform .15s ease; } .vidy a:hover { background: var(--tint); transform: translateY(-2px); } .vidy svg { width: 34px; height: 34px; color: var(--akcent); } .vidy b { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; } .vidy span { display: block; margin-top: 2px; font-size: .875rem; color: var(--vtor); line-height: 1.35; } @media (max-width: 719px) { .vidy { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--pole)); padding-inline: var(--pole); scroll-padding-inline: var(--pole); } .vidy::-webkit-scrollbar { display: none; } .vidy li { flex: 0 0 152px; scroll-snap-align: start; } } /* продолжить чтение */ .prodolzhit { display: flex; align-items: center; gap: 18px; padding: 14px; padding-right: 22px; border-radius: 18px; background: var(--list); text-decoration: none; max-width: 760px; } .prodolzhit img { width: 112px; height: 76px; object-fit: cover; border-radius: 12px; flex: none; filter: var(--kartinka-filtr); } .prodolzhit-t { flex: 1; min-width: 0; } .prodolzhit-t small { color: var(--akcent-t); font-weight: 600; font-size: .8125rem; } .prodolzhit-t b { display: block; font-size: 1.0625rem; line-height: 1.3; margin: 2px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prodolzhit-polosa { height: 5px; border-radius: 3px; background: var(--tint-2); overflow: hidden; } .prodolzhit-polosa i { display: block; height: 100%; background: var(--akcent); border-radius: 3px; } /* свежее: большая + список */ .svezhee { display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 900px) { .svezhee { grid-template-columns: 1.25fr 1fr; gap: 28px; } } .glavnaya-st { display: block; text-decoration: none; } .glavnaya-st figure { margin: 0 0 18px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--tint); } .glavnaya-st img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); filter: var(--kartinka-filtr); } .glavnaya-st:hover img { transform: scale(1.025); } .glavnaya-st h3 { margin: 6px 0 10px; font-size: clamp(1.375rem, 2.4vw, 1.875rem); letter-spacing: -.02em; line-height: 1.18; } .glavnaya-st:hover h3 { color: var(--akcent-t); } .glavnaya-st p { margin: 0 0 10px; font-family: var(--shrift-tekst); font-size: 1.0625rem; line-height: 1.6; color: var(--chernila-2); max-width: 54ch; } .meta { font-size: .875rem; color: var(--vtor); } .lenta { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; } .lenta a { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; padding: 10px; border-radius: 16px; text-decoration: none; transition: background-color .2s ease; } .lenta a:hover { background: var(--list); } .lenta img { width: 128px; height: 88px; object-fit: cover; border-radius: 12px; filter: var(--kartinka-filtr); } .lenta b { display: block; font-size: 1.0625rem; line-height: 1.28; letter-spacing: -.01em; margin: 3px 0 4px; } .lenta a:hover b { color: var(--akcent-t); } @media (max-width: 480px) { .lenta a { grid-template-columns: 96px 1fr; gap: 12px; } .lenta img { width: 96px; height: 72px; } .lenta b { font-size: 1rem; } } /* темы — карточки с картинками */ .temy { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .tema { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: var(--list); text-decoration: none; transition: transform .15s ease; } .tema:hover { transform: translateY(-3px); } .tema figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); } .tema img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); filter: var(--kartinka-filtr); } .tema:hover img { transform: scale(1.04); } .tema-n { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 12px; background: var(--list); color: var(--chernila); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; } .tema-t { padding: 16px 18px 20px; } .tema h3 { margin: 0 0 6px; font-size: 1.25rem; letter-spacing: -.015em; line-height: 1.2; } .tema:hover h3 { color: var(--akcent-t); } .tema p { margin: 0; font-size: .9375rem; color: var(--vtor); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .temy-lenta { list-style: none; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; margin-inline: calc(-1 * var(--pole)); padding: 4px var(--pole) 8px; scroll-padding-inline: var(--pole); } .temy-lenta::-webkit-scrollbar { display: none; } .temy-lenta > li { flex: 0 0 min(78vw, 290px); scroll-snap-align: start; } /* страница тем: первые две — крупно */ @media (min-width: 900px) { .temy-vse { grid-template-columns: repeat(3, 1fr); } .temy-vse > li:nth-child(-n+2) { grid-column: span 1; } .temy-vse > li:first-child { grid-column: span 2; grid-row: span 2; } .temy-vse > li:first-child figure { aspect-ratio: auto; flex: 1; min-height: 300px; } .temy-vse > li:first-child h3 { font-size: 1.75rem; } .temy-vse > li:first-child p { font-size: 1.0625rem; -webkit-line-clamp: 4; } } .temy-shapka { padding: clamp(36px, 6vw, 72px) 0 28px; } .temy-shapka h1 { margin: 6px 0 10px; font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -.03em; line-height: 1; } .temy-shapka p { margin: 0 0 22px; max-width: 52ch; color: var(--chernila-2); font-size: 1.0625rem; } .filtr { display: flex; align-items: center; gap: 10px; width: min(100%, 420px); min-height: 50px; padding: 0 16px; border-radius: 25px; background: var(--list); color: var(--vtor); box-shadow: 0 0 0 1px var(--liniya); } .filtr:focus-within { box-shadow: 0 0 0 2px var(--akcent); } .filtr input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; outline: none; font-size: 1rem; color: var(--chernila); } .filtr input::placeholder { color: var(--vtor); } .filtr-itog { margin: 12px 0 0; font-size: .875rem; color: var(--vtor); min-height: 1.3em; } .kroshki { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .875rem; color: var(--vtor); } .kroshki li + li::before { content: "›"; margin-right: 6px; } .kroshki a { color: var(--chernila-2); text-decoration: none; } .kroshki a:hover { color: var(--akcent-t); text-decoration: underline; } /* конструктор цитат — полоса */ .konstr { display: grid; gap: 28px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: var(--list); } @media (min-width: 900px) { .konstr { grid-template-columns: 1fr 1fr; } } .konstr h2 { margin: 6px 0 12px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.025em; line-height: 1.08; } .konstr p { margin: 0 0 22px; font-size: 1.0625rem; color: var(--chernila-2); max-width: 44ch; } .konstr-obrazec { position: relative; aspect-ratio: 1; max-width: 420px; justify-self: center; width: 100%; border-radius: 18px; overflow: hidden; background: #2b2118; color: #FFF6EA; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; box-shadow: 0 24px 60px var(--ten); } .konstr-obrazec img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; } .konstr-obrazec::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(34, 24, 14, .92) 0%, rgba(34, 24, 14, .7) 45%, rgba(34, 24, 14, .1) 80%); } .konstr-obrazec > * { position: relative; } .konstr-obrazec q { font-family: var(--shrift-tekst); font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height: 1.4; quotes: "«" "»"; } .konstr-obrazec small { display: block; margin-top: 16px; font-size: .875rem; opacity: .85; } .konstr-obrazec .k-znak { position: absolute; top: 28px; left: 34px; width: 34px; height: auto; } /* ================= статья ================= */ .st-oblozhka { position: relative; min-height: clamp(420px, 66vh, 640px); display: flex; align-items: flex-end; overflow: hidden; background: var(--tint); } .st-oblozhka > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: var(--kartinka-filtr); } .st-oblozhka::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--veil) 0%, color-mix(in srgb, var(--veil) 78%, transparent) 38%, transparent 78%); } .st-shapka { position: relative; z-index: 1; padding-bottom: 32px; padding-top: 80px; } .st-shapka-in { max-width: 52rem; } .st-rubriki { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; } .st-rubriki a { min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 16px; background: var(--akcent-t); color: var(--akcent-na); font-size: .875rem; font-weight: 600; text-decoration: none; } .st-rubriki a + a { background: var(--list); color: var(--chernila); } .st-z { margin: 0; font-size: clamp(1.625rem, 3.1vw, 2.625rem); line-height: 1.14; letter-spacing: -.024em; font-weight: 650; } .st-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 20px; font-size: .9375rem; color: var(--chernila-2); } .st-meta span { display: inline-flex; align-items: center; gap: 6px; } .st-meta svg { width: 17px; height: 17px; color: var(--akcent-t); } .st-knopki { display: flex; flex-wrap: wrap; gap: 8px; } .st-knopki .knopka-2 { background: var(--list); box-shadow: 0 0 0 1px var(--liniya); } .st-knopki [aria-pressed="true"] { background: var(--akcent-t); color: var(--akcent-na); } .chtenie { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); padding-block: 36px 72px; } .chtenie > * { min-width: 0; } @media (min-width: 1200px) { .chtenie { grid-template-columns: 15rem minmax(0, var(--kolonka)) 17rem; justify-content: space-between; gap: 48px; } } .statya { width: 100%; max-width: var(--kolonka); margin-inline: auto; } /* содержание */ .soderzhanie { align-self: start; } @media (min-width: 1200px) { .soderzhanie { position: sticky; top: calc(var(--shapka-v) + 28px); max-height: calc(100vh - var(--shapka-v) - 56px); overflow: auto; scrollbar-width: thin; } } .soderzhanie details { border-radius: 16px; background: var(--list); } .soderzhanie summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 0 18px; cursor: pointer; font-weight: 650; } .soderzhanie summary::-webkit-details-marker { display: none; } .soderzhanie summary svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } .soderzhanie details[open] summary svg { transform: rotate(180deg); } .soderzhanie summary small { margin-left: auto; font-weight: 500; color: var(--vtor); font-variant-numeric: tabular-nums; } .soderzhanie ol { list-style: none; margin: 0; padding: 0 10px 12px; counter-reset: g; } .soderzhanie li a { display: block; padding: 8px 10px 8px 14px; border-radius: 10px; font-size: .9rem; line-height: 1.35; text-decoration: none; color: var(--chernila-2); border-left: 2px solid transparent; } .soderzhanie li a:hover { background: var(--tint); } .soderzhanie li a.tut { color: var(--chernila); font-weight: 600; border-left-color: var(--akcent); background: var(--tint); border-radius: 2px 10px 10px 2px; } .dely-bok { display: none; } @media (min-width: 1200px) { .soderzhanie details { background: none; } .soderzhanie summary { padding: 0 10px; cursor: default; pointer-events: none; } .soderzhanie summary svg { display: none; } .soderzhanie ol { padding: 0; } .dely-bok { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding: 0 6px; } .dely-bok .kz { background: var(--list); } } /* текст */ .tekst { font-family: var(--shrift-tekst); font-size: calc(1.1875rem * var(--masht)); line-height: 1.72; color: var(--chernila); hyphens: auto; -webkit-hyphens: auto; } .tekst p { margin: 0 0 1.05em; } .tekst h2 { font-family: var(--shrift-ui); font-size: 1.5em; line-height: 1.2; letter-spacing: -.02em; margin: 2.1em 0 .7em; font-weight: 700; hyphens: manual; scroll-margin-top: calc(var(--shapka-v) + 24px); } .tekst h2:first-child { margin-top: 0; } .tekst h3 { font-family: var(--shrift-ui); font-size: 1.125em; line-height: 1.3; margin: 1.7em 0 .55em; font-weight: 650; hyphens: manual; } .tekst em { font-style: italic; } .tekst strong { font-weight: 700; } .tekst ol, .tekst ul { margin: 0 0 1.1em; padding-left: 1.4em; } .tekst li { margin-bottom: .55em; } .tekst ol li::marker { color: var(--akcent-t); font-family: var(--shrift-ui); font-weight: 650; } .tekst ul li::marker { color: var(--akcent); } .tekst blockquote { position: relative; margin: 1.6em 0; padding: 1.3em 1.4em 1.2em 1.5em; border-radius: 4px 18px 18px 4px; background: var(--tint); box-shadow: inset 4px 0 0 var(--akcent); } .tekst blockquote p { margin: 0; font-size: 1.06em; line-height: 1.62; } .tekst blockquote cite { display: block; margin-top: .8em; font-family: var(--shrift-ui); font-style: normal; font-size: .8em; color: var(--vtor); } .tekst ::selection, .tekst::selection { background: color-mix(in srgb, var(--med) 60%, transparent); } sup.snoska { font-family: var(--shrift-ui); font-size: .64em; line-height: 1; vertical-align: baseline; position: relative; top: -.6em; } sup.snoska a { display: inline-block; min-width: 1.6em; padding: .12em .32em; margin-left: 2px; line-height: 1.25; border-radius: 6px; text-align: center; text-decoration: none; font-weight: 650; color: var(--akcent-t); background: color-mix(in srgb, var(--akcent) 9%, transparent); } sup.snoska a:hover { background: var(--akcent-t); color: var(--akcent-na); } .snoski { margin-top: 2.6em; padding-top: 1.4em; border-top: 1px solid var(--liniya); font-family: var(--shrift-ui); } .snoski h2 { font-size: 1.25rem; margin: 0 0 .8em; } .snoski-sp { margin: 0; padding-left: 1.6em; font-size: .9375rem; line-height: 1.5; color: var(--chernila-2); } .snoski-sp li { margin-bottom: .5em; scroll-margin-top: calc(var(--shapka-v) + 24px); } .snoski-sp li:target { background: var(--med-fon); border-radius: 6px; } .snoski-sp a { color: var(--akcent-t); text-decoration: none; padding: 0 4px; } .metki { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; } .metki a { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 18px; background: var(--list); font-size: .875rem; text-decoration: none; color: var(--chernila-2); } .metki a:hover { color: var(--akcent-t); } .pred-sled { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 12px 0 0; } @media (min-width: 600px) { .pred-sled { grid-template-columns: 1fr 1fr; } } .ps { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--list); text-decoration: none; transition: background-color .2s ease; } .ps:hover { background: var(--tint); } .ps small { font-size: .8125rem; color: var(--akcent-t); font-weight: 600; } .ps b { font-size: 1rem; line-height: 1.3; font-weight: 600; } .ps-sled { text-align: right; } .dely-niz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; padding: 18px 20px; border-radius: 16px; background: var(--list); } .dely-niz p { margin: 0 auto 0 0; font-weight: 600; } .dely-niz .kz { background: var(--tint-2); } /* правая колонка */ .bok { display: grid; gap: 28px; align-content: start; align-self: start; } @media (min-width: 1200px) { .bok { position: sticky; top: calc(var(--shapka-v) + 28px); } } @media (min-width: 720px) and (max-width: 1199px) { .bok { grid-template-columns: 1fr 1fr; max-width: var(--kolonka); margin-inline: auto; width: 100%; } } .bok h2 { margin: 0 0 12px; font-size: 1.0625rem; font-weight: 700; } .bok-poisk { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--list); color: var(--vtor); box-shadow: 0 0 0 1px var(--liniya); } .bok-sp { list-style: none; margin: 0; padding: 0; } .bok-sp a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding: 8px 0; text-decoration: none; } .bok-sp img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; filter: var(--kartinka-filtr); } .bok-sp b { display: block; font-size: .9375rem; line-height: 1.3; font-weight: 600; } .bok-sp a:hover b { color: var(--akcent-t); } .bok-sp small { font-size: .8125rem; color: var(--vtor); } .bok-citata { margin: 0; padding: 20px; border-radius: 16px; background: var(--med-fon); color: var(--med-chernila); } .bok-citata blockquote { margin: 8px 0 10px; font-family: var(--shrift-tekst); font-size: 1.0625rem; line-height: 1.5; } .bok-citata figcaption { font-size: .8125rem; } .bok-citata .metka { color: inherit; opacity: .8; } /* читайте также */ .takzhe { padding-bottom: clamp(52px, 7vw, 96px); } .takzhe-sp { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } /* ================= подвал ================= */ .podval { position: relative; overflow: hidden; margin-top: 0; padding: clamp(48px, 7vw, 88px) 0 calc(36px + env(safe-area-inset-bottom)); background: var(--list); } .podval-setka { display: grid; gap: 36px; grid-template-columns: 1fr; position: relative; z-index: 1; } @media (min-width: 900px) { .podval-setka { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .podval-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; } .podval-logo img { width: 54px; height: auto; } .podval-logo b { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.05; } .podval-deviz { margin: 14px 0 0; color: var(--vtor); max-width: 30ch; } .podval h2 { margin: 0 0 10px; font-size: .9375rem; color: var(--vtor); font-weight: 600; } .podval ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .podval ul a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; text-decoration: none; font-weight: 500; } .podval ul a:hover { color: var(--akcent-t); } .podval ul svg { width: 18px; height: 18px; } .podval-prava { position: relative; z-index: 1; margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--liniya); font-size: .8125rem; line-height: 1.5; color: var(--vtor); max-width: 90ch; } .podval-uzor { position: absolute; right: -60px; bottom: -80px; width: 420px; opacity: .05; pointer-events: none; } [data-tema="noch"] .podval-uzor { opacity: .07; } /* ================= окна поверх: поиск, «Аа», сноска, цитата, выделение, тост ================= */ .okno-fon { position: fixed; inset: 0; z-index: 60; background: var(--zatemnenie); display: flex; justify-content: center; align-items: flex-start; padding: 0; animation: fon .2s ease; overscroll-behavior: contain; } .poisk-okno { width: 100%; max-width: 760px; height: 100%; display: flex; flex-direction: column; background: var(--list); padding: calc(env(safe-area-inset-top) + 12px) 0 0; animation: poisk-v .28s var(--ease); } @keyframes poisk-v { from { opacity: 0; transform: translateY(-14px); } } @media (min-width: 720px) { .okno-fon { padding: 7vh 20px; } .poisk-okno { height: auto; max-height: 82vh; border-radius: 22px; box-shadow: 0 30px 80px var(--ten); padding-top: 12px; } } .poisk-verh { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; } .poisk-verh svg.lupa { color: var(--akcent-t); } .poisk-verh input { flex: 1; min-width: 0; height: 56px; border: 0; background: none; outline: none; font-size: 1.25rem; color: var(--chernila); } .poisk-verh input::placeholder { color: var(--vtor); } .poisk-verh input::-webkit-search-cancel-button { display: none; } .poisk-filtry { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 20px 12px; border-bottom: 1px solid var(--liniya); } .poisk-filtry::-webkit-scrollbar { display: none; } .poisk-filtry .chip { flex: none; background: var(--tint-2); min-height: 36px; font-size: .875rem; } .poisk-filtry .chip[aria-pressed="true"] { background: var(--akcent-t); color: var(--akcent-na); } .poisk-telo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 24px; } .poisk-itog { margin: 0 8px 10px; font-size: .875rem; color: var(--vtor); } .poisk-podskazki { padding: 4px 8px; } .poisk-podskazki h3 { margin: 6px 0 10px; font-size: .9375rem; font-weight: 600; color: var(--vtor); } .poisk-podskazki .chip { background: var(--tint-2); margin: 0 4px 8px 0; } .poisk-sp { list-style: none; margin: 0; padding: 0; } .poisk-sp a { display: grid; gap: 3px; padding: 12px 10px; border-radius: 12px; text-decoration: none; } .poisk-sp a:hover, .poisk-sp a:focus-visible { background: var(--tint); } .poisk-sp .pz { font-weight: 650; line-height: 1.3; } .poisk-sp .pr { font-size: .8125rem; color: var(--akcent-t); font-weight: 600; } .poisk-sp .pt { font-family: var(--shrift-tekst); font-size: .9375rem; color: var(--chernila-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .poisk-sp mark { background: var(--med-fon); color: inherit; border-radius: 3px; padding: 0 1px; } .poisk-niz { display: none; } @media (min-width: 720px) { .poisk-niz { display: flex; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--liniya); font-size: .8125rem; color: var(--vtor); } .poisk-niz kbd { font: inherit; padding: 1px 6px; border-radius: 5px; background: var(--tint-2); } } .aa-okno { position: fixed; z-index: 55; top: calc(var(--shapka-v) + env(safe-area-inset-top) + 8px); right: 12px; width: min(320px, calc(100vw - 24px)); padding: 18px; border-radius: 18px; background: var(--list); box-shadow: 0 0 0 1px var(--liniya), 0 20px 50px var(--ten); animation: poyav .2s var(--ease); transform-origin: top right; } .aa-okno h2 { margin: 0 0 12px; font-size: .9375rem; font-weight: 650; } .aa-ryad { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .aa-ryad .kz { background: var(--tint-2); font-weight: 650; } .aa-shkala { flex: 1; display: flex; gap: 4px; } .aa-shkala i { flex: 1; height: 6px; border-radius: 3px; background: var(--tint-2); } .aa-shkala i.da { background: var(--akcent); } .aa-vybor { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: var(--tint-2); margin-bottom: 10px; } .aa-vybor button { min-height: 42px; border-radius: 10px; font-size: .9375rem; font-weight: 500; } .aa-vybor button[aria-pressed="true"] { background: var(--list); box-shadow: 0 1px 3px var(--ten); font-weight: 650; } .aa-vybor .s-zas { font-family: "PT Serif", serif; } .snoska-karta { position: fixed; z-index: 58; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 420px; margin-inline: auto; padding: 16px 18px 12px; border-radius: 16px; background: var(--list); box-shadow: 0 0 0 1px var(--liniya), 0 20px 50px var(--ten); animation: poyav .2s var(--ease); } @media (min-width: 720px) { .snoska-karta { right: auto; bottom: auto; width: 380px; margin: 0; } } .snoska-n { margin: 0 0 4px; font-size: .8125rem; font-weight: 650; color: var(--akcent-t); } .snoska-t { margin: 0; font-family: var(--shrift-tekst); font-size: 1rem; line-height: 1.5; } .snoska-niz { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: .875rem; } .snoska-niz a { color: var(--akcent-t); } .vydelenie { position: absolute; z-index: 50; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--chernila); color: var(--list); box-shadow: 0 12px 30px var(--ten); animation: poyav .16s var(--ease); transform: translateX(-50%); } .vydelenie button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: .875rem; font-weight: 600; white-space: nowrap; } .vydelenie button:hover { background: color-mix(in srgb, var(--list) 16%, transparent); } .vydelenie svg { width: 17px; height: 17px; } .vydelenie::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--chernila); transform: translateX(-50%) rotate(45deg); border-radius: 2px; } .vydelenie.snizu::after { bottom: auto; top: -6px; } .citata-okno { width: 100%; max-width: 560px; margin: auto; padding: 18px; border-radius: 22px; background: var(--list); box-shadow: 0 30px 80px var(--ten); animation: poisk-v .28s var(--ease); } .okno-fon.po-centru { align-items: center; padding: 16px; } .citata-okno-verh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .citata-okno-verh h2 { margin: 0 0 0 4px; font-size: 1.125rem; } .citata-okno canvas { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--tint); } .citata-fony { display: flex; gap: 8px; margin: 12px 0; } .citata-fony button { width: 44px; height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--liniya); } .citata-fony button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--list), 0 0 0 4px var(--akcent); } .citata-okno .deystviya { display: flex; flex-wrap: wrap; gap: 8px; } .citata-okno .deystviya .knopka { flex: 1; } .tost { position: fixed; z-index: 70; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 14px; background: var(--chernila); color: var(--list); font-weight: 500; font-size: .9375rem; transition: opacity .2s ease, transform .25s var(--ease); max-width: calc(100vw - 32px); } .tost.vidno { opacity: 1; transform: translate(-50%, 0); } /* наверх (телефон) */ .naverh { position: fixed; z-index: 25; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 50%; background: var(--list); box-shadow: 0 6px 24px var(--ten); display: grid; place-items: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .25s var(--ease); } .naverh.vidno { opacity: 1; transform: none; pointer-events: auto; } /* появление разделов при прокрутке — одно движение, содержимое видно и без скрипта */ .js .poyavl { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .poyavl.vidno { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .poyavl { opacity: 1; transform: none; } } @media print { .shapka, .panel, .bok, .soderzhanie, .st-knopki, .dely-niz, .pred-sled, .takzhe, .podval, .naverh, .tost { display: none !important; } .st-oblozhka { min-height: 0; } .st-oblozhka > img, .st-oblozhka::after { display: none; } body { background: #fff; color: #000; } .chtenie { display: block; padding: 0; } } /* телефон: крыша «Цитаты дня» меньше и не заходит на текст */ @media (max-width: 719px) { .citata-dnya::after { width: 30px; height: 30px; border-width: 7px; top: 34px; right: 26px; } .citata-dnya blockquote { padding-right: 8px; } } /* ===================================================================================================== № 1582 — то, чего не было в демо: живой сайт (WordPress-разметка статей, списки, страницы, подвал № 1461, «Поддержать проект» № 1332, карусель «Читайте также» № 1452, ИИ-ассистент, поиск, письмо). Ниже — поверх zhivoe.css. ===================================================================================================== */ html body.pz-oblik { font-family: var(--shrift-ui); background: var(--fon); color: var(--chernila); } body.pz-oblik main { display: block; } /* «Поддержать проект» — яркая кнопка первой в шапке и панели (№ 1332) */ .podderzhat { display: none; align-items: center; min-height: 40px; padding: 0 16px; margin-right: 8px; border-radius: 20px; background: var(--akcent); color: #1B1A17 !important; font-weight: 650; font-size: .9375rem; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; } .podderzhat:hover { background: #E8912D; } .podderzhat-panel { display: flex; justify-content: center; min-height: 48px; margin: 0 0 12px; font-size: 1rem; } /* № 2456: кнопка видна в шапке и на планшете (с 640 точек); на телефоне — первой в меню-гамбургере и в подвале */ @media (min-width: 640px) { .shapka .podderzhat { display: inline-flex; } } @media (min-width: 1100px) and (max-width: 1399px) { .shapka-poisk { width: 44px !important; padding: 0 !important; justify-content: center; margin-right: 2px !important; } .shapka-poisk span, .shapka-poisk kbd { display: none; } .menyu-sp > li > a, .m-knopka { padding: 0 10px; } } @media (min-width: 1100px) and (max-width: 1279px) { .menyu-sp .m-o-proekte { display: none; } .logo-t small { display: none; } } /* ---------- текст статьи: разметка WordPress ---------- */ .tekst a { color: var(--akcent-t); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .tekst a:hover { text-decoration-thickness: 2px; } .tekst h2 a, .tekst h3 a { color: inherit; text-decoration: none; } .tekst h4, .tekst h5 { font-family: var(--shrift-ui); font-size: 1em; margin: 1.5em 0 .5em; font-weight: 650; } .tekst img { height: auto; border-radius: 12px; } .tekst figure { margin: 1.6em 0; } .tekst figcaption { font-family: var(--shrift-ui); font-size: .8em; color: var(--vtor); margin-top: .5em; text-align: center; } .tekst audio { width: 100%; margin: .6em 0 1.2em; } .tekst table { width: 100%; border-collapse: collapse; font-size: .9em; margin: 1.4em 0; display: block; overflow-x: auto; } .tekst th, .tekst td { padding: .55em .7em; border: 1px solid var(--liniya); text-align: left; vertical-align: top; } .tekst code { font-size: .88em; background: var(--tint-2); padding: .1em .35em; border-radius: 5px; } .tekst hr, .tekst .wp-block-separator { border: 0; height: 1px; background: var(--liniya); margin: 2.2em 0; opacity: 1; } .tekst .has-text-align-center { text-align: center; } .tekst .has-text-align-right { text-align: right; } .tekst blockquote > p + p { margin-top: .8em; } .tekst blockquote cite, .tekst blockquote footer { display: block; margin-top: .8em; font-family: var(--shrift-ui); font-style: normal; font-size: .8em; color: var(--vtor); } /* прежнее содержание (Kadence) и кнопки «Поделиться» из тела статьи — их место заняли содержание сбоку и свои кнопки */ .tekst .wp-block-kadence-tableofcontents, .tekst .kb-table-of-content-nav, .tekst .ct-share-wrapper, .tekst .custom-post-end-button-wrapper, .tekst .custom-post-end-button, .tekst .ct-share-container { display: none !important; } .tekst > p:empty { display: none; } /* сноски: номер в тексте и список внизу */ .tekst sup.fn, sup.snoska { font-family: var(--shrift-ui); font-size: .64em; line-height: 1; vertical-align: baseline; position: relative; top: -.6em; } .tekst sup.fn a { display: inline-block; min-width: 1.6em; padding: .12em .32em; margin-left: 2px; line-height: 1.25; border-radius: 6px; text-align: center; text-decoration: none; font-weight: 650; color: var(--akcent-t); background: color-mix(in srgb, var(--akcent) 9%, transparent); } .tekst sup.fn a:hover { background: var(--akcent-t); color: var(--akcent-na); } html body:not(.pz-net) .tekst h2.pz-primechaniya { font-family: var(--shrift-ui) !important; font-size: 1.25rem !important; line-height: 1.3 !important; margin: 2.4em 0 .8em !important; padding-top: 1.2em; border-top: 1px solid var(--liniya); color: var(--chernila) !important; } html body .tekst ol.wp-block-footnotes { font-family: var(--shrift-ui); font-size: .9375rem !important; line-height: 1.55; color: var(--chernila-2); padding-left: 2.6em !important; } html body .tekst ol.wp-block-footnotes > li { margin-bottom: .55em; scroll-margin-top: calc(var(--shapka-v) + 24px); } html body .tekst ol.wp-block-footnotes > li::before { color: var(--akcent-t); } html body .tekst ol.wp-block-footnotes > li:target { background: var(--med-fon); border-radius: 6px; } .tekst ol.wp-block-footnotes a { text-decoration: underline; text-underline-offset: 2px; padding: 0 4px; } /* № 2004: ссылка видна не только цветом */ /* арабский оригинал, вынос, раскрывающийся оригинал */ .tekst .pz-arabic-line, .tekst [lang="ar"] { font-family: "PZ Arabic", var(--shrift-tekst); } /* № 2223: Лотус Шами — основной арабский шрифт («PZ Arabic» первым в --shrift-ui и --shrift-tekst); арабский абзац — справа налево: размеченный lang="ar" / dir="rtl" — прижат вправо; неразмеченный абзац, начатый арабским, сам идёт справа налево, русский — как был */ .tekst :lang(ar), .tekst [dir="rtl"] { unicode-bidi: isolate; } .tekst p:lang(ar), .tekst div:lang(ar), .tekst blockquote:lang(ar), .tekst li:lang(ar) { direction: rtl; text-align: right; } .tekst p, .tekst blockquote, .tekst li { unicode-bidi: plaintext; } html body .tekst p.pz-ar { font-family: "PZ Lotus", "PZ Arabic", serif !important; direction: rtl !important; text-align: right !important; font-size: 1.55em !important; line-height: 1.8 !important; margin: 1em 0 .4em !important; } .tekst details { margin: 1em 0 1.4em; border-radius: 14px; background: var(--list); box-shadow: 0 0 0 1px var(--liniya); } .tekst details > summary { cursor: pointer; padding: .7em 1em; font-family: var(--shrift-ui); font-size: .85em; font-weight: 600; color: var(--akcent-t); list-style: none; } .tekst details > summary::-webkit-details-marker { display: none; } .tekst details > summary::before { content: "▸ "; } .tekst details[open] > summary::before { content: "▾ "; } .tekst details > :not(summary) { padding: 0 1.1em; } .tekst details[open] { padding-bottom: .4em; } .tekst .pz-vynoska { margin: 1.6em 0; padding: 1.2em 1.4em; border-radius: 18px; background: var(--med-fon); color: var(--med-chernila); } .tekst .pz-vynoska p:last-child { margin-bottom: 0; } .tekst .kb-row-layout-wrap, .tekst .kt-row-column-wrap, .tekst .wp-block-kadence-column { display: block; padding: 0 !important; margin: 0; background: none !important; } .tekst .pz-podpis { font-family: var(--shrift-ui); } .pz-podpis .pz-pero { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -.25em; } /* «Об авторе» (№ 1443) */ .tekst .pz-ob-avtore { margin: 2.4em 0 0; padding: 1.2em 1.4em; border: 0; border-radius: 18px; background: var(--list); box-shadow: inset 4px 0 0 var(--akcent); font-family: var(--shrift-ui); font-size: .82em; line-height: 1.6; color: var(--chernila-2); } .tekst .pz-ob-avtore-zag { font-size: 1.05em; color: var(--chernila); } .st-meta a { text-decoration: none; } .st-meta a:hover { color: var(--akcent-t); text-decoration: underline; } .soderzhanie-net { display: none; } /* ---------- карточки записей (списки, «Читайте также») ---------- */ .kartochki { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 32px; } .kart .tema-t { display: flex; flex-direction: column; gap: 4px; flex: 1; } .kart .tema-t .metka { font-size: .8125rem; } .kart h3, .kart h2 { margin: 0 0 4px; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -.012em; } .kart p { font-family: var(--shrift-tekst); font-size: .96rem; line-height: 1.55; color: var(--chernila-2); } .kart .meta { margin-top: auto; padding-top: 8px; font-size: .8125rem; } .kart:hover h3, .kart:hover h2 { color: var(--akcent-t); } /* ---------- списки: шапка, фишки тем, листание ---------- */ .arhiv { padding-bottom: clamp(48px, 7vw, 88px); } .archive-description { max-width: 60ch; } .temy-shapka .pz-chipy { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; font-family: var(--shrift-ui); } html body .pz-oblik .pz-chip, body.pz-oblik .pz-chipy .pz-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border: 0; border-radius: 19px; background: var(--list); color: var(--chernila) !important; font-size: .9rem; font-weight: 500; text-decoration: none !important; box-shadow: 0 0 0 1px var(--liniya); } body.pz-oblik .pz-chip:hover { box-shadow: 0 0 0 1px var(--akcent); color: var(--akcent-t) !important; } body.pz-oblik .pz-chip.pz-chip-aktiv { background: var(--akcent-t); color: var(--akcent-na) !important; box-shadow: none; } .pz-pusto { margin: 8px 0 24px; padding: 22px 24px; border-radius: 18px; background: var(--list); font-size: 1.0625rem; max-width: 60ch; } .pz-pusto a { color: var(--akcent-t); } body.pz-oblik .pz-knopka { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 23px; background: var(--akcent-t); color: var(--akcent-na) !important; font-family: var(--shrift-ui); font-weight: 600; text-decoration: none !important; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; background: var(--list); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; } .pagination a.page-numbers:hover { color: var(--akcent-t); box-shadow: 0 0 0 1px var(--akcent); } .pagination .page-numbers.current { background: var(--akcent-t); color: var(--akcent-na); } /* ---------- «Читайте также»: карусель 5 из 10 (zhivoe.js, № 1452) ---------- */ .pz-karusel { --pzk-shag: 16px; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; column-gap: 8px; } .pz-karusel > .pz-kar-nazad { grid-column: 1; grid-row: 1; } .pz-karusel > .pz-kar-lenta { grid-column: 2; grid-row: 1; } .pz-karusel > .pz-kar-vpered { grid-column: 3; grid-row: 1; } .pz-kar-lenta { display: flex; gap: var(--pzk-shag); margin: 0; padding: 6px 0 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .pz-kar-lenta::-webkit-scrollbar { display: none; } .pz-kar-lenta.pz-kar-krug { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; } .pz-kar-lenta.pz-kar-krug > li { transform: translateX(var(--pzk-x, 0px)); } .pz-kar-lenta.pz-kar-krug.pz-kar-edet > li { transition: transform .6s cubic-bezier(.25, .8, .25, 1); } .pz-kar-lenta > li { flex: 0 0 calc((100% - 2 * var(--pzk-shag)) / 3); min-width: 0; display: flex; scroll-snap-align: start; } .pz-kar-lenta > li > .kart { width: 100%; } .pz-kar-str { display: inline-grid; place-items: center; width: 44px; height: 64px; border-radius: 22px; color: var(--akcent-t); transition: background-color .2s ease; } .pz-kar-str:hover { background: var(--tint-2); } .pz-kar-str svg { width: 20px; height: 40px; } @media (max-width: 1024px) { .pz-kar-lenta > li { flex-basis: calc((100% - var(--pzk-shag)) / 2); } } @media (max-width: 719px) { .pz-karusel { display: block; } .pz-kar-lenta > li { flex-basis: 100%; } .pz-kar-str { position: absolute; z-index: 2; top: 32%; width: 40px; height: 56px; background: var(--list); box-shadow: 0 4px 16px var(--ten); } .pz-kar-nazad { left: -6px; } .pz-kar-vpered { right: -6px; } .pz-kar-str svg { width: 14px; height: 28px; } } /* ---------- главная: ИИ-ассистент (встроенный чат zhivoe.js) ---------- */ .ii { display: grid; gap: 24px; padding: clamp(24px, 4.5vw, 52px); border-radius: 28px; background: var(--list); } @media (min-width: 1000px) { .ii { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 40px; } } .ii h2 { margin: 6px 0 10px; font-size: clamp(1.625rem, 3vw, 2.25rem); letter-spacing: -.025em; line-height: 1.1; } .ii p { margin: 0 0 18px; color: var(--chernila-2); font-size: 1.0625rem; max-width: 44ch; } .ii-chipy { display: flex; flex-wrap: wrap; gap: 8px; } .ii-chipy .chip.pz-chip { background: var(--tint-2) !important; box-shadow: none; border: 0; text-align: left; line-height: 1.3; padding-block: 8px; } .ii-chipy .chip.pz-chip:hover { background: var(--akcent-t) !important; color: var(--akcent-na) !important; } .ii .pz-chat-mesto { min-width: 0; min-height: 160px; } /* ---------- ИИ-ассистент: круглая кнопка окна на всех страницах (была во встроенном