/* ───── БЛОГ ПО ПСИХОАНАЛИЗУ — сетка карточек с картинками ───── Опирается на переменные и типографику articles/style-v10.css. Здесь только то, чего там нет: обложки и трёхколоночная раскладка. */ .blog-hero{max-width:1200px;margin:0 auto;padding:72px 40px 34px;text-align:center} .blog-eyebrow{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);margin:0 0 18px} .blog-h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(34px,4.4vw,54px); line-height:1.1;color:var(--ink);margin:0 0 20px;letter-spacing:-.01em} .blog-h1 em{font-style:italic;color:var(--mid)} .blog-lead{font-family:'Inter',sans-serif;font-weight:300;font-size:18px;line-height:1.7; color:var(--text);max-width:640px;margin:0 auto} .blog-meta{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:26px; font-family:'Inter',sans-serif;font-size:13px;color:var(--light)} .blog-meta span{position:relative} .blog-meta span+span::before{content:'·';position:absolute;left:-15px;color:var(--clay)} /* ── сетка: три в ряд ── */ .blog-wrap{max-width:1200px;margin:0 auto;padding:0 40px 90px} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px} .blog-card{display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--border); border-radius:3px;overflow:hidden;text-decoration:none;color:inherit; transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease} a.blog-card:hover{border-color:var(--accent);transform:translateY(-3px); box-shadow:0 14px 34px rgba(44,44,44,.09)} .blog-cover{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--clay)} .blog-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1} .blog-tag{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--accent)} .blog-t{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:23px;line-height:1.25; color:var(--ink);margin:0;letter-spacing:-.005em} .blog-d{font-family:'Inter',sans-serif;font-weight:300;font-size:15px;line-height:1.65; color:var(--text);margin:0} .blog-foot{margin-top:auto;padding-top:14px;font-family:'Inter',sans-serif;font-size:13px; color:var(--light);display:flex;gap:14px} /* ── карточка без обложки (с 02.09.2026 картинок к статьям сайта не делают) ── Картинки нет вовсе, поэтому текстовый блок занимает её место. Верхняя полоса в цвете глины сохраняет ритм сетки: без неё карточка в ряду с обложечными визуально «проваливается». Замер на 320 и 1280 сделан до выкладки. */ .blog-card.is-bez-oblozhki .blog-body{padding-top:26px} .blog-card.is-bez-oblozhki .blog-body::before{content:"";display:block;height:4px; width:44px;background:var(--accent);opacity:.5;margin-bottom:6px} .blog-card.is-bez-oblozhki .blog-t{font-size:25px} /* ── карточка готовящейся статьи: без ссылки, приглушённая ── */ .blog-card.is-soon{opacity:.62;cursor:default} .blog-card.is-soon .blog-cover{filter:grayscale(.35)} .blog-card.is-soon .blog-tag{color:var(--light)} @media(max-width:1000px){ .blog-grid{grid-template-columns:repeat(2,1fr);gap:32px 24px} .blog-hero{padding:60px 28px 30px} .blog-wrap{padding:0 28px 70px} } @media(max-width:640px){ .blog-grid{grid-template-columns:1fr;gap:26px} .blog-hero{padding:48px 24px 26px} .blog-wrap{padding:0 24px 60px} .blog-lead{font-size:16px} .blog-body{padding:18px 20px 22px} .blog-meta{gap:18px} .blog-meta span+span::before{left:-11px} } /* ═══════════════════════════════════════════════════════════════ СТАТЬЯ БЛОГА — оформление Разметка статей (cover, dropcap, numbered, takeaway, pullquote, marks, faq-h, cta) пришла из завода статей, а правил под неё не было ни в style-v10.css, ни здесь: обложка, буквица, врезки и карточки выводились голым текстом. Ниже — этот слой. Задача Сергея 26.08: читаться живее прежних статей — поэтому ритм строится на смене плотности (текст → врезка → карточки), а не на добавлении украшений. ═══════════════════════════════════════════════════════════════ */ /* ── полоса прочитанного: только там, где браузер умеет скролл-анимации ── */ @supports (animation-timeline: scroll()){ .read-bar{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%; background:var(--accent);z-index:80;transform:scaleX(0); animation:read-grow linear both;animation-timeline:scroll(root block)} @keyframes read-grow{to{transform:scaleX(1)}} } /* ── шапка статьи ── */ .article-wrap>article{position:relative} figure.cover{margin:0 0 34px;border-radius:4px;overflow:hidden;background:var(--clay); box-shadow:0 18px 44px rgba(44,44,44,.10)} figure.cover img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} @media(prefers-reduced-motion:no-preference){ figure.cover img{animation:cover-in .7s cubic-bezier(.2,.7,.3,1) both} @keyframes cover-in{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}} } figure.cover figcaption{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--light); padding:10px 2px 0} /* Подпись автора с датой снята 26.08 (Сергей: наполняем быстро, одинаковые даты будут смущать читателя; авторство осталось в машинной разметке). Волосяная линия под заголовком сохраняет ту же паузу перед текстом. */ .article-wrap article>.article-h1{padding-bottom:24px;border-bottom:1px solid var(--border); margin-bottom:30px} /* первый абзац крупнее — вход в текст */ .article-lead.dropcap{font-size:19px;color:var(--text)} .article-lead.dropcap::first-letter{font-family:'Cormorant Garamond',serif;float:left; font-size:66px;line-height:.86;font-weight:400;color:var(--accent); padding:6px 12px 0 0;margin-top:2px} /* ── нумерация разделов: цифра уходит на поле, а не в строку ── */ article.numbered{counter-reset:sec} article.numbered>section{counter-increment:sec;position:relative; padding-top:34px;margin-top:34px;border-top:1px solid var(--border-soft)} article.numbered>section:first-of-type{border-top:none} article.numbered>section>h2::before{content:counter(sec); font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--light); display:block;margin-bottom:6px;letter-spacing:.06em} @media(min-width:1180px){ article.numbered>section>h2{position:relative} article.numbered>section>h2::before{position:absolute;left:-58px;top:12px; margin:0;font-size:15px;color:var(--clay)} } article.numbered>section>h2{margin-top:0} /* служебные секции — без номера и без линии */ article.numbered>section.cta,article.numbered>section.faq-h, article.numbered>section.sources,article.numbered>section.related{counter-increment:none} article.numbered>section.cta>h2::before,article.numbered>section.faq-h>h2::before, article.numbered>section.sources>h2::before,article.numbered>section.related>h2::before{content:none} /* ── врезка-вывод: смена плотности посреди текста ── */ .takeaway{position:relative;margin:34px 0;padding:22px 26px 22px 30px; background:var(--sage-pale);border-left:3px solid var(--sage);border-radius:0 4px 4px 0; font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;line-height:1.5; color:var(--ink);font-weight:400} /* ── крупная цитата: воздух вокруг ── */ .pullquote{margin:56px 0;padding:0 8px;text-align:center;border:none;position:relative} .pullquote::before{content:'«';font-family:'Cormorant Garamond',serif;font-size:64px; color:var(--clay);line-height:.6;display:block;margin-bottom:10px} .pullquote p,.pullquote{font-family:'Cormorant Garamond',serif;font-size:clamp(23px,2.6vw,30px); line-height:1.4;font-style:italic;color:var(--ink);font-weight:400;margin:0} /* ── карточки-признаки ── */ .marks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0 34px;counter-reset:mk} /* [31.08.2026] Нечётное число марок. Сетка в две колонки, и последняя карточка при нечётном числе оставалась одна в ряду — приёмка поэтому допускала только 2 или 4, а чат статей присылал 5 и 6. Теперь одинокая последняя карточка занимает обе колонки: число карточек перестаёт быть вопросом вёрстки и остаётся вопросом состава блока. */ .marks>.mark:last-child:nth-child(odd){grid-column:1 / -1} .mark{counter-increment:mk;background:#fff;border:1px solid var(--border);border-radius:4px; padding:20px 22px 18px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease} .mark:hover{border-color:var(--accent);transform:translateY(-2px); box-shadow:0 12px 28px rgba(44,44,44,.07)} .mark b{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500; color:var(--ink);margin-bottom:8px;line-height:1.25} .mark b::before{content:'0' counter(mk);font-family:'Inter',sans-serif;font-size:12px; font-weight:500;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:7px} .mark p{margin:0;font-size:15.5px;line-height:1.65;color:var(--mid)} /* ── FAQ: разметка faq-h, стилей под неё не было ── */ .faq-h{margin-top:56px} .faq-h details{border-top:1px solid var(--border);padding:16px 0} .faq-h details:last-of-type{border-bottom:1px solid var(--border)} .faq-h summary{cursor:pointer;list-style:none;position:relative;padding-right:34px; font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--ink); line-height:1.35} .faq-h summary::-webkit-details-marker{display:none} .faq-h summary::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%); font-family:'Inter',sans-serif;font-size:20px;font-weight:300;color:var(--accent); transition:transform .2s ease} .faq-h details[open] summary::after{content:'−'} .faq-h details[open] summary{margin-bottom:10px} .faq-h details p{margin:0;font-size:15.5px;color:var(--mid);line-height:1.75} /* ── блок записи ── */ section.cta{background:var(--clay);border-radius:6px;padding:38px 34px 34px;margin:56px 0 0} section.cta .cta-note{font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.7; color:var(--text);margin:0 0 22px;text-align:center} section.cta .cta-form{max-width:480px;margin:0 auto} /* ── читайте также ── */ .related ul{list-style:none;margin:0;padding:0} .related li{border-top:1px solid var(--border-soft)} .related li:last-child{border-bottom:1px solid var(--border-soft)} .related li a{display:block;padding:14px 30px 14px 0;position:relative; font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:var(--ink); transition:color .2s ease,padding-left .2s ease} .related li a::after{content:'→';position:absolute;right:6px;top:50%;transform:translateY(-50%); font-family:'Inter',sans-serif;font-size:15px;color:var(--clay);transition:color .2s ease} .related li a:hover{color:var(--accent);padding-left:6px} .related li a:hover::after{color:var(--accent)} /* ── мобильная раскладка ── */ @media(max-width:760px){ /* вынос к краям экрана: жёсткий зажим в