/* «Как пар» — цвет. Светлая тема = бумага и красная нить (лубок), тёмная тема = копчёная изба и латунь. Тема переключается атрибутом data-theme="dark" на или любом контейнере. */ :root { /* ── базовая палитра ── */ --paper: #F2E9D8; /* бумага, фон страницы */ --paper-warm: #EADDC4; /* тёплая бумага, плашки */ --paper-bright: #F9F2E4; /* светлая карточка */ --birch: #E8DCC3; /* берёста, текст на тёмном */ --ink: #1C1611; /* чернила */ --ink-soft: #4C4238; --ink-mute: #7C6F5F; --red: #8C2A1E; /* красная нить, главный акцент */ --red-deep: #71241A; --red-bright: #C04B36; /* красный для тёмной темы */ --blush: #D08770; /* обожжённая глина, ссылки на тёмном */ --brass: #C1A05E; /* латунь */ --brass-deep: #8A6A2F; --smoke: #14100C; /* копоть, инверсные блоки */ /* ── семантические роли ── */ --surface-page: var(--paper); --surface-card: var(--paper-bright); --surface-tint: var(--paper-warm); --surface-inverse: var(--smoke); --text-display: var(--ink); --text-body: var(--ink); --text-soft: var(--ink-soft); --text-muted: var(--ink-mute); --text-inverse: var(--birch); --accent: var(--red); --accent-hover: var(--red-deep); --accent-warm: var(--brass); --accent-warm-deep: var(--brass-deep); --link: var(--red); --link-underline: rgba(140, 42, 30, .4); --rule: #CDBFA5; /* волосяная линейка */ --rule-strong: var(--ink);/* жирная журнальная линейка */ --selection-bg: var(--red); --selection-text: var(--paper); /* ── орнаментальные ленты (data-URI, повторяются по X) ── */ --band-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Cpath d='M0 0h20L10 14Z' fill='%238C2A1E'/%3E%3C/svg%3E"); --band-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='26' viewBox='0 0 24 26'%3E%3Cpath d='M12 4l9 9-9 9-9-9z' fill='none' stroke='%23C1A05E' stroke-width='1.2'/%3E%3Ccircle cx='12' cy='13' r='1.3' fill='%23C1A05E'/%3E%3C/svg%3E"); --band-stitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M6 6l14 14M20 6L6 20' stroke='%238C2A1E' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E"); } [data-theme="dark"] { --surface-page: #1A1410; --surface-card: #241C15; --surface-tint: #211A14; --surface-inverse: #0F0B08; --text-display: #F2E9D8; --text-body: #EDE3CF; --text-soft: #C9BCA6; --text-muted: #9A8C77; --text-inverse: #EDE3CF; --accent: var(--red-bright); --accent-hover: #D05B44; --accent-warm: var(--brass); --accent-warm-deep: #D8B876; --link: var(--blush); --link-underline: rgba(208, 135, 112, .45); --rule: #3E342A; --rule-strong: #EDE3CF; --selection-bg: var(--red); --selection-text: #F2E9D8; --band-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Cpath d='M0 0h20L10 14Z' fill='%23C04B36'/%3E%3C/svg%3E"); --band-stitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M6 6l14 14M20 6L6 20' stroke='%23C04B36' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E"); } /* «Как пар» — типографика. Журнальный набор: модульная шкала ~1.28, старостильные цифры в мете, висячая пунктуация, буквицы, выключка с переносами. */ :root { /* ── гарнитуры ── */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Lora', Georgia, serif; --font-folk: 'Ruslan Display', 'Playfair Display', serif; --font-mono: 'PT Mono', 'Courier New', monospace; /* ── кегли ── */ --fs-hero: 76px; /* шапка-плакат, первая полоса */ --fs-display: 64px; /* заголовок статьи на её странице */ --fs-title: 44px; /* заголовок в ленте, h1 карточек */ --fs-h2: 31px; --fs-h3: 23px; --fs-pull: 26px; /* выносная цитата */ --fs-lede: 22px; /* лид, подзаголовок-курсив */ --fs-body: 17px; --fs-sm: 15px; --fs-caption: 13.5px; --fs-meta: 12.5px; /* автор · дата · время чтения */ --fs-overline: 11.5px; /* рубрика капителью */ /* ── интерлиньяж ── */ --lh-hero: .98; --lh-title: 1.06; --lh-heading: 1.18; --lh-lede: 1.4; --lh-pull: 1.3; --lh-body: 1.64; --lh-caption: 1.5; /* ── трекинг ── */ --ls-display: -0.015em; /* крупные кегли слегка сжать */ --ls-caps: 0.26em; /* рубрики, оверлайны */ --ls-caps-wide: 0.34em; /* шапка сайта */ --ls-meta: 0.15em; /* ── мера набора ── */ --measure: 680px; /* колонка статьи */ --measure-wide: 920px; /* широкие карточки (kg-width-wide) */ --measure-full: 1200px; /* ── журнальные детали ── */ --indent-hang: -0.44em; /* висячая « у цитат */ --dropcap-size: 78px; --ff-oldstyle: 'onum' 1, 'pnum' 1; /* старостильные цифры */ } /* «Как пар» — пространство, линейки, тени. Углы всегда прямые: лубок не знает скруглений. */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --radius: 0px; /* прямые углы — принципиально */ --border-hair: 1px; --border-bold: 3px; /* жирная журнальная линейка под шапкой */ --band-h: 14px; /* лента треугольников */ --band-h-lg: 26px; /* лента вышивки */ --shadow-card: 0 2px 16px rgba(28, 22, 17, .12); --shadow-float: 0 8px 32px rgba(28, 22, 17, .18); --page-max: 1200px; --gutter: 24px; } /* «Как пар» — база и журнальные утилиты (.kp-*). */ body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } ::selection { background: var(--selection-bg); color: var(--selection-text); } a { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-underline); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s ease; } a:hover { text-decoration-color: var(--link); } /* ───────── заголовочные роли ───────── */ .kp-hero { font: 800 var(--fs-hero)/var(--lh-hero) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); text-wrap: balance; } .kp-display { font: 800 var(--fs-display)/var(--lh-hero) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); text-wrap: balance; } .kp-title { font: 700 var(--fs-title)/var(--lh-title) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); text-wrap: balance; } .kp-lede { font: italic 400 var(--fs-lede)/var(--lh-lede) var(--font-body); color: var(--text-soft); text-wrap: pretty; } .kp-overline { font: 500 var(--fs-overline)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); } .kp-meta { font: 500 var(--fs-meta)/1.4 var(--font-body); letter-spacing: var(--ls-meta); color: var(--text-muted); font-feature-settings: var(--ff-oldstyle); } .kp-folk { font: 400 1em/1 var(--font-folk); color: var(--accent); } /* ───────── проза статьи ───────── */ .kp-prose { max-width: var(--measure); font-feature-settings: var(--ff-oldstyle); } .kp-prose p { margin: 0 0 1.35em; text-align: justify; hyphens: auto; text-wrap: pretty; } .kp-prose h2 { font: 700 var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); margin: 2em 0 .7em; text-wrap: balance; } .kp-prose h3 { font: italic 600 var(--fs-h3)/var(--lh-heading) var(--font-display); color: var(--text-display); margin: 1.8em 0 .6em; } .kp-prose ul { padding-left: 1.3em; margin: 0 0 1.35em; } .kp-prose ul li { margin-bottom: .45em; padding-left: .3em; } .kp-prose ul li::marker { content: '◆ '; color: var(--accent); font-size: .62em; } .kp-prose ol { padding-left: 1.4em; margin: 0 0 1.35em; } .kp-prose ol li { margin-bottom: .45em; padding-left: .3em; } .kp-prose ol li::marker { font-feature-settings: var(--ff-oldstyle); font-weight: 600; color: var(--accent); } .kp-prose strong { font-weight: 600; } .kp-prose em { font-style: italic; } /* Буквица — первый абзац статьи или раздела */ .kp-dropcap::first-letter { float: left; font-family: var(--font-folk); font-size: var(--dropcap-size); line-height: .84; color: var(--accent); padding: 5px 14px 0 0; font-weight: 400; } /* Висячая пунктуация: строка, начинающаяся с « */ .kp-hang { text-indent: var(--indent-hang); } /* Сноска */ .kp-footnote { margin-top: var(--sp-7); padding-top: var(--sp-3); border-top: var(--border-hair) solid var(--rule); font: italic 400 var(--fs-caption)/var(--lh-caption) var(--font-body); color: var(--text-muted); } .kp-footnote-mark { color: var(--accent); font-style: normal; } /* ───────── линейки и орнамент ───────── */ .kp-rule { border: none; height: var(--border-hair); background: var(--rule); margin: 0; } .kp-rule-strong { border: none; height: var(--border-bold); background: var(--rule-strong); margin: 0; } .kp-band-triangle { height: var(--band-h); background: var(--band-triangle) repeat-x; } .kp-band-diamond { height: var(--band-h-lg); background: var(--band-diamond) repeat-x; } .kp-band-stitch { height: var(--band-h-lg); background: var(--band-stitch) repeat-x; } /* ромб-разделитель: ‹линия ◆ линия› */ .kp-divider { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-6) 0; } .kp-divider::before, .kp-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); } /* ───────── формы ───────── */ .kp-input { box-sizing: border-box; background: var(--surface-card); border: var(--border-hair) solid var(--rule-strong); border-radius: var(--radius); color: var(--text-body); font: 400 var(--fs-sm)/1.4 var(--font-body); padding: 13px 16px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .kp-input::placeholder { color: var(--text-muted); font-style: italic; } .kp-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* «Как пар» — стили карточек редактора Ghost (Koenig). Классы .kg-* — родные классы Ghost: перенесите этот файл в тему как есть. Демонстрации — в компонентах content/ и в UI-ките. */ /* ── ширины полотна ── */ .kg-canvas > * { max-width: var(--measure); margin-left: auto; margin-right: auto; } .kg-canvas > .kg-width-wide { max-width: var(--measure-wide); } .kg-canvas > .kg-width-full { max-width: none; } /* ── изображение с подписью ── */ figure.kg-card { margin: var(--sp-7) auto; } figure.kg-card img { display: block; width: 100%; height: auto; } figure.kg-card figcaption { margin-top: var(--sp-3); font: italic 400 var(--fs-caption)/var(--lh-caption) var(--font-body); color: var(--text-muted); text-align: center; } figure.kg-card figcaption::before { content: '◆'; color: var(--accent); font-size: .7em; margin-right: 10px; font-style: normal; } /* ── галерея ── */ .kg-gallery-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); } .kg-gallery-image { flex: 1; } .kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── обычная цитата: висячая « на полях ── */ .kg-canvas blockquote:not(.kg-blockquote-alt), blockquote.kg-blockquote { margin: var(--sp-6) 0; padding: 0 0 0 var(--sp-6); position: relative; font: italic 400 1.06em/1.55 var(--font-body); color: var(--text-soft); } .kg-canvas blockquote:not(.kg-blockquote-alt)::before, blockquote.kg-blockquote::before { content: '«'; position: absolute; left: -6px; top: -14px; font: 700 52px/1 var(--font-display); color: var(--accent); } /* ── выносная цитата (quote alt) ── */ .kg-blockquote-alt { margin: var(--sp-8) 0; padding: 0 var(--sp-6); border: none; font: italic 700 var(--fs-pull)/var(--lh-pull) var(--font-display); color: var(--text-display); text-align: center; text-indent: var(--indent-hang); text-wrap: balance; } /* ── разделитель ── */ .kg-canvas hr, hr.kg-card { border: none; margin: var(--sp-8) auto; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='11' viewBox='0 0 74 11'%3E%3Cpath d='M37 0l5.5 5.5L37 11l-5.5-5.5z' fill='%238C2A1E'/%3E%3Cpath d='M14 2.5l3 3-3 3-3-3zM60 2.5l3 3-3 3-3-3z' fill='%23C1A05E'/%3E%3C/svg%3E") no-repeat center; } /* ── колаут ── */ .kg-callout-card { display: flex; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5); margin: var(--sp-6) 0; background: var(--surface-tint); border: var(--border-hair) solid var(--rule); border-radius: var(--radius); } .kg-callout-emoji { flex: none; font-size: 20px; line-height: 1.5; } .kg-callout-text { font: 400 var(--fs-sm)/1.6 var(--font-body); color: var(--text-body); } .kg-callout-card-accent { background: var(--accent); border-color: var(--accent); } .kg-callout-card-accent .kg-callout-text { color: #F2E9D8; } .kg-callout-card-grey { background: var(--surface-tint); } .kg-callout-card-white { background: var(--surface-card); } /* ── букмарк (превью ссылки) ── */ .kg-bookmark-card { margin: var(--sp-6) 0; } .kg-bookmark-container { display: flex; border: var(--border-hair) solid var(--rule-strong); border-radius: var(--radius); background: var(--surface-card); color: var(--text-body); text-decoration: none; transition: box-shadow .15s ease; } .kg-bookmark-container:hover { box-shadow: var(--shadow-card); } .kg-bookmark-content { flex: 1; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .kg-bookmark-title { font: 700 var(--fs-h3)/1.25 var(--font-display); color: var(--text-display); } .kg-bookmark-description { font: 400 var(--fs-sm)/1.5 var(--font-body); color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kg-bookmark-metadata { display: flex; align-items: center; gap: var(--sp-3); font: 500 var(--fs-meta)/1.3 var(--font-body); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--text-muted); font-feature-settings: var(--ff-oldstyle); } .kg-bookmark-icon { width: 16px; height: 16px; } .kg-bookmark-thumbnail { flex: none; width: 200px; position: relative; } .kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ── кнопка ── */ .kg-button-card { display: flex; margin: var(--sp-6) 0; } .kg-button-card.kg-align-center { justify-content: center; } .kg-btn, a.kg-btn { display: inline-block; background: var(--accent); color: #F2E9D8; font: 600 var(--fs-meta)/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; padding: 15px 30px 14px 32px; border-radius: var(--radius); transition: background .15s ease; } .kg-btn:hover, a.kg-btn:hover { background: var(--accent-hover); } /* ── тоггл (аккордеон) ── */ .kg-toggle-card { border-top: var(--border-hair) solid var(--rule-strong); border-bottom: var(--border-hair) solid var(--rule-strong); padding: var(--sp-4) 0; margin: var(--sp-6) 0; } .kg-toggle-heading { display: flex; align-items: baseline; gap: var(--sp-3); cursor: pointer; font: 700 19px/1.3 var(--font-display); color: var(--text-display); } .kg-toggle-heading::before { content: '◆'; color: var(--accent); font-size: 11px; transition: transform .2s ease; } .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-heading::before { transform: rotate(45deg); } .kg-toggle-content { padding: var(--sp-3) 0 var(--sp-2) 23px; font-size: var(--fs-sm); color: var(--text-soft); } /* ── код ── */ .kg-code-card, .kg-canvas pre { background: var(--surface-inverse); color: var(--birch); font: 400 14px/1.6 var(--font-mono); padding: var(--sp-5); margin: var(--sp-6) 0; overflow-x: auto; border-top: 3px solid var(--accent-warm); } .kp-prose code, .kg-canvas p code { font: 400 .88em/1 var(--font-mono); background: var(--surface-tint); padding: 2px 6px; border: 1px solid var(--rule); } /* ── хедер-карточка (CTA-секция) ── */ .kg-header-card { background: var(--surface-inverse); padding: var(--sp-8) var(--sp-6) var(--sp-8); margin: var(--sp-8) 0; text-align: center; position: relative; } .kg-header-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--band-h); background: var(--band-triangle) repeat-x; } .kg-header-card h2 { font: 800 var(--fs-title)/var(--lh-title) var(--font-display); letter-spacing: var(--ls-display); color: var(--birch); margin: var(--sp-3) 0 var(--sp-3); text-wrap: balance; } .kg-header-card p { font: italic 400 var(--fs-lede)/var(--lh-lede) var(--font-body); color: rgba(232,220,195,.72); margin: 0 0 var(--sp-5); } /* ── подписка (signup) ── */ .kg-signup-card { background: var(--surface-tint); border: var(--border-hair) solid var(--rule); padding: var(--sp-7) var(--sp-6); margin: var(--sp-8) 0; text-align: center; } .kg-signup-card h2 { font: 700 var(--fs-h2)/var(--lh-heading) var(--font-display); margin: 0 0 var(--sp-2); color: var(--text-display); } .kg-signup-card p { font: italic 400 var(--fs-sm)/1.5 var(--font-body); color: var(--text-soft); margin: 0 0 var(--sp-5); } /* ── файл ── */ .kg-file-card a { display: flex; align-items: center; gap: var(--sp-4); border: var(--border-hair) solid var(--rule-strong); background: var(--surface-card); padding: var(--sp-4) var(--sp-5); margin: var(--sp-6) 0; text-decoration: none; color: var(--text-body); } .kg-file-card-title { font: 700 16px/1.3 var(--font-display); color: var(--text-display); } .kg-file-card-metadata { font: 500 var(--fs-meta)/1.3 var(--font-body); letter-spacing: var(--ls-meta); color: var(--text-muted); text-transform: uppercase; } /* ── пейвол (Ghost members) ── */ .gh-post-upgrade-cta { background: var(--surface-inverse); text-align: center; padding: var(--sp-8) var(--sp-6); margin: var(--sp-8) 0; position: relative; } .gh-post-upgrade-cta::before, .gh-post-upgrade-cta::after { content: ''; position: absolute; left: 0; right: 0; height: var(--band-h-lg); background: var(--band-diamond) repeat-x; } .gh-post-upgrade-cta::before { top: 0; } .gh-post-upgrade-cta::after { bottom: 0; } /* ============================================================ Слой компонентов темы kakteplo (hbs-разметка) поверх дизайн-системы «Как пар». Перевод JSX-компонентов в классы. ============================================================ */ * { box-sizing: border-box; } img { max-width: 100%; } .kp-container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } /* ───────── шапка (SiteNav) ───────── */ .site-head { background: var(--surface-page); } .masthead-row { display: flex; align-items: baseline; justify-content: space-between; padding: var(--sp-5) 0 var(--sp-4); } .masthead { font: 400 34px/1 var(--font-folk); color: var(--accent); text-decoration: none; } .issue-line { font: 500 var(--fs-meta)/1 var(--font-body); letter-spacing: var(--ls-meta); color: var(--text-muted); font-feature-settings: var(--ff-oldstyle); } .head-nav { display: flex; align-items: center; gap: var(--sp-6); border-top: var(--border-bold) solid var(--rule-strong); padding: 12px 0; overflow-x: auto; } .head-nav a { font: 600 var(--fs-overline)/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; color: var(--text-soft); border-bottom: 2px solid transparent; padding-bottom: 4px; white-space: nowrap; transition: color .15s ease; } .head-nav a:hover { color: var(--accent); } .head-nav .nav-current a, .head-nav a.active { color: var(--accent); border-bottom-color: var(--accent); } .head-nav ul { display: contents; list-style: none; margin: 0; padding: 0; } .head-nav li { display: contents; } .nav-cta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); } .nav-cta .kg-btn { padding: 9px 16px 8px 18px; font-size: 10.5px; } .theme-toggle { background: none; border: 1px solid var(--rule); color: var(--text-soft); cursor: pointer; padding: 6px 12px 5px; font: 600 10.5px/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; } /* ───────── первая полоса (FeaturedPost) ───────── */ .kp-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-7); align-items: center; text-decoration: none; color: var(--text-body); padding: var(--sp-7) 0; } .kp-featured .f-overline { font: 500 var(--fs-overline)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-4); } .kp-featured .f-title { font: 800 var(--fs-title)/var(--lh-title) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); transition: color .15s ease; margin: 0 0 var(--sp-4); text-wrap: balance; } .kp-featured:hover .f-title { color: var(--accent); } .kp-featured .f-lede { font: italic 400 19px/var(--lh-lede) var(--font-body); color: var(--text-soft); margin-bottom: var(--sp-4); text-wrap: pretty; } .kp-imgbox { background: var(--surface-tint); border: 1px solid var(--rule); overflow: hidden; display: flex; align-items: center; justify-content: center; } .kp-featured .kp-imgbox { height: 380px; } .kp-imgbox img { width: 100%; height: 100%; object-fit: cover; } .kp-imgbox svg { flex: none; } /* ───────── мета-строка (Byline) ───────── */ .kp-byline { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding: 9px 2px; display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font: 500 var(--fs-meta)/1.4 var(--font-body); letter-spacing: var(--ls-meta); color: var(--text-muted); font-feature-settings: var(--ff-oldstyle); } .kp-byline .b-author { color: var(--accent); text-transform: uppercase; } .kp-meta-row { font: 500 var(--fs-meta)/1.4 var(--font-body); letter-spacing: var(--ls-meta); color: var(--text-muted); font-feature-settings: var(--ff-oldstyle); display: flex; gap: 10px; align-items: baseline; } .kp-meta-row .dot { color: var(--accent); font-size: 8px; } /* ───────── рубрики (TagPill) ───────── */ .rubric-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; } .kp-pill { display: inline-block; font: 600 var(--fs-overline)/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; color: var(--text-soft); background: transparent; border: 1px solid var(--rule); padding: 8px 13px 7px 15px; transition: color .15s ease, border-color .15s ease; } .kp-pill:hover { color: var(--accent); border-color: var(--accent); } .kp-pill.active { color: #F2E9D8; background: var(--accent); border-color: var(--accent); } /* ───────── сетка и карточка (PostCard) ───────── */ .kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8) var(--sp-6); padding: var(--sp-7) 0; } .kp-card { display: block; text-decoration: none; color: var(--text-body); } .kp-card .kp-imgbox { height: 210px; margin-bottom: var(--sp-4); } .kp-card .c-overline { font: 500 var(--fs-overline)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .kp-card .c-title { font: 700 var(--fs-h3)/1.22 var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); transition: color .15s ease; margin: 0 0 10px; text-wrap: balance; } .kp-card:hover .c-title { color: var(--accent); } .kp-card .c-excerpt { font: 400 var(--fs-sm)/1.55 var(--font-body); color: var(--text-soft); margin-bottom: 12px; text-wrap: pretty; } /* ───────── страница статьи ───────── */ .post-hero { max-width: var(--measure); margin: 0 auto; padding: var(--sp-8) 0 var(--sp-5); text-align: center; } .post-hero .f-overline { font: 500 var(--fs-overline)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-4); } .post-hero h1 { font: 800 clamp(34px, 5.5vw, var(--fs-display))/var(--lh-hero) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); margin: 0 0 var(--sp-4); text-wrap: balance; } .post-hero .kp-lede { margin-bottom: var(--sp-5); } .post-cover { max-width: var(--measure-wide); margin: var(--sp-6) auto; } .post-cover img { display: block; width: 100%; border: 1px solid var(--rule); } .post-body { padding-bottom: var(--sp-6); } .post-body > .kg-canvas, .post-body.kp-prose { margin: 0 auto; } .post-body p:first-of-type::first-letter { float: left; font-family: var(--font-folk); font-size: var(--dropcap-size); line-height: .84; color: var(--accent); padding: 5px 14px 0 0; font-weight: 400; } /* ───────── автор (AuthorCard) ───────── */ .kp-author { max-width: var(--measure); margin: var(--sp-7) auto; display: flex; gap: var(--sp-5); align-items: flex-start; border-top: var(--border-bold) solid var(--rule-strong); border-bottom: 1px solid var(--rule); padding: var(--sp-5) 0; } .kp-author .a-avatar { flex: none; width: 72px; height: 72px; background: var(--surface-tint); border: 1px solid var(--rule); overflow: hidden; display: flex; align-items: center; justify-content: center; } .kp-author .a-avatar img { width: 100%; height: 100%; object-fit: cover; } .kp-author .a-initial { font: 400 30px/1 var(--font-folk); color: var(--accent); } .kp-author .a-name { font: 700 20px/1.2 var(--font-display); color: var(--text-display); } .kp-author .a-role { font: 500 var(--fs-overline)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent-warm-deep); margin-left: 12px; } .kp-author .a-bio { font: italic 400 var(--fs-sm)/1.55 var(--font-body); color: var(--text-soft); margin: 8px 0 10px; } /* ───────── «читать дальше» ───────── */ .read-next { padding: var(--sp-7) 0 0; } .read-next .section-title { font: 700 var(--fs-h2)/var(--lh-heading) var(--font-display); color: var(--text-display); margin: 0 0 var(--sp-2); } /* ───────── секции главной ───────── */ .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding-top: var(--sp-6); } .section-head .section-title { font: 700 var(--fs-h2)/var(--lh-heading) var(--font-display); color: var(--text-display); margin: 0; } .section-head .all-link { font: 600 var(--fs-overline)/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; color: var(--accent); } /* ───────── пагинация ───────── */ .kp-pagination { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-6) 0 var(--sp-7); font: 600 var(--fs-overline)/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; } .kp-pagination a { text-decoration: none; color: var(--accent); } .kp-pagination .page-number { font: 500 var(--fs-meta)/1 var(--font-body); letter-spacing: var(--ls-meta); color: var(--text-muted); font-feature-settings: var(--ff-oldstyle); } /* ───────── герой страниц и рубрик ───────── */ .page-hero { padding: var(--sp-8) 0 var(--sp-5); max-width: var(--measure); margin: 0 auto; } .page-hero .f-overline { font: 500 var(--fs-overline)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3); } .page-hero h1 { font: 800 clamp(32px, 5vw, 52px)/var(--lh-title) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); margin: 0 0 var(--sp-3); text-wrap: balance; } .page-hero .kp-lede { margin: 0; } /* ───────── подвал (SiteFooter) ───────── */ .site-foot { background: var(--smoke); margin-top: var(--sp-9); } .site-foot .kp-band-diamond { background-color: var(--smoke); } .foot-inner { padding: var(--sp-7) 0 var(--sp-6); } .foot-cols { display: flex; gap: var(--sp-8); flex-wrap: wrap; align-items: flex-start; } .foot-brand { flex: 1 1 260px; } .foot-brand .foot-masthead { font: 400 30px/1 var(--font-folk); color: var(--brass); margin-bottom: 10px; } .foot-brand .foot-desc { font: italic 400 14px/1.55 var(--font-body); color: rgba(232,220,195,.6); max-width: 300px; } .foot-nav { flex: none; display: flex; flex-direction: column; gap: 10px; } .foot-nav a { font: 600 var(--fs-overline)/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; color: rgba(232,220,195,.75); } .foot-nav a:hover { color: var(--brass); } .foot-contact { flex: 1 1 300px; } .foot-contact .foot-label { font: 600 var(--fs-overline)/1 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--brass); margin-bottom: 14px; } .foot-contact p { font: italic 400 14px/1.55 var(--font-body); color: rgba(232,220,195,.6); margin: 0 0 var(--sp-4); } .colophon { border-top: 1px solid rgba(193,160,94,.35); margin-top: var(--sp-6); padding-top: var(--sp-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 500 11.5px/1.4 var(--font-body); letter-spacing: var(--ls-meta); color: rgba(232,220,195,.45); font-feature-settings: var(--ff-oldstyle); } .colophon a { color: rgba(232,220,195,.45); } /* ───────── контент Ghost на страницах ───────── */ .gh-content { max-width: var(--measure); margin: 0 auto; font-feature-settings: var(--ff-oldstyle); } .gh-content p { margin: 0 0 1.35em; text-align: justify; hyphens: auto; text-wrap: pretty; } .gh-content h2 { font: 700 var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-display); margin: 2em 0 .7em; text-wrap: balance; } .gh-content h3 { font: italic 600 var(--fs-h3)/var(--lh-heading) var(--font-display); color: var(--text-display); margin: 1.8em 0 .6em; } .gh-content ul { padding-left: 1.3em; margin: 0 0 1.35em; } .gh-content ul li { margin-bottom: .45em; padding-left: .3em; } .gh-content ul li::marker { content: '◆ '; color: var(--accent); font-size: .62em; } .gh-content ol { padding-left: 1.4em; margin: 0 0 1.35em; } .gh-content ol li { margin-bottom: .45em; padding-left: .3em; } .gh-content ol li::marker { font-feature-settings: var(--ff-oldstyle); font-weight: 600; color: var(--accent); } .gh-content strong { font-weight: 600; } .gh-content blockquote { margin: var(--sp-6) 0; padding: 0 0 0 var(--sp-6); position: relative; font: italic 400 1.06em/1.55 var(--font-body); color: var(--text-soft); border: none; } .gh-content blockquote::before { content: '«'; position: absolute; left: -6px; top: -14px; font: 700 52px/1 var(--font-display); color: var(--accent); } .gh-content hr { border: none; margin: var(--sp-8) auto; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='11' viewBox='0 0 74 11'%3E%3Cpath d='M37 0l5.5 5.5L37 11l-5.5-5.5z' fill='%238C2A1E'/%3E%3Cpath d='M14 2.5l3 3-3 3-3-3zM60 2.5l3 3-3 3-3-3z' fill='%23C1A05E'/%3E%3C/svg%3E") no-repeat center; } /* ───────── мобильная версия ───────── */ @media (max-width: 860px) { .kp-grid { grid-template-columns: repeat(2, 1fr); } .kp-featured { grid-template-columns: 1fr; gap: var(--sp-5); } .kp-featured .kp-imgbox { height: 240px; order: -1; } } @media (max-width: 600px) { .kp-grid { grid-template-columns: 1fr; gap: var(--sp-7); } .masthead { font-size: 26px; } .masthead-row { flex-wrap: wrap; gap: 8px; } .head-nav { gap: var(--sp-4); } .nav-cta { margin-left: 0; } .foot-cols { gap: var(--sp-6); } .kp-featured .f-title { font-size: 32px; } .gh-content p { text-align: left; } } /* CTA-кнопка в шапке: не наследовать стили ссылок навигации */ .head-nav a.kg-btn { color: #F2E9D8; border-bottom: none; padding-bottom: 9px; } .head-nav a.kg-btn:hover { color: #F2E9D8; } /* контурная кнопка (латунь) и телефон в подвале */ .kg-btn-outline, a.kg-btn-outline { background: transparent; border: 1px solid var(--brass); color: var(--brass); } .kg-btn-outline:hover, a.kg-btn-outline:hover { background: var(--brass); color: var(--smoke); } .foot-contact .kg-btn { margin-right: 10px; } .foot-phone { margin-top: 12px; } .foot-phone a { font: 500 15px/1 var(--font-body); letter-spacing: var(--ls-meta); color: rgba(232,220,195,.75); font-feature-settings: var(--ff-oldstyle); }