/* ═══════════════════════════════════════════════════════════════════════ Шаблон статьи 2.0 — ТОЛЬКО новые классы (стиль «Студия»). Дополняет style.studio.css, не переопределяет его. Переменные берутся из :root боевого style.studio.css (--ink, --ink-soft, --line, --paper, --pop/--accent, --link, --font). Залить на сервер как /css/article-2.0.css и подключить в . ═══════════════════════════════════════════════════════════════════════ */ /* ── Строка автора + дата (E-E-A-T), mono-подпись ── */ .article-byline{ display:flex;flex-wrap:wrap;align-items:center;gap:.55rem; font-size:.78rem;letter-spacing:.04em;color:var(--ink-soft); margin:.2rem 0 2rem;font-weight:500;line-height:1.5; font-variant-numeric:tabular-nums; } .article-byline strong{color:var(--ink);font-weight:600} .article-byline time{color:var(--ink-soft)} .article-byline-author{color:var(--ink-soft)} .article-byline-dot{color:var(--line)} /* ── Оглавление (TOC) — блок на линиях, без теней ── */ .article-toc{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.4rem 0;margin:2.2rem 0 2.6rem; } .article-toc-label{ font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft);font-weight:500;margin-bottom:1rem; display:inline-flex;align-items:center;gap:.6em; } .article-toc-label::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--pop); } .article-toc-list{ list-style:none;margin:0;padding:0; columns:2;column-gap:2.5rem; } .article-toc-list li{ margin:0 0 .55rem;break-inside:avoid;counter-increment:toc; position:relative;padding-left:1.9rem;font-size:1rem;line-height:1.5; } .article-toc-list li::before{ content:counter(toc,decimal-leading-zero); position:absolute;left:0;top:.05rem; font-size:.72rem;color:var(--pop);font-weight:600; font-variant-numeric:tabular-nums;letter-spacing:.02em; } .article-toc-list{counter-reset:toc} .article-toc-list a{ color:var(--ink-soft);text-decoration:none; border-bottom:1px solid transparent;transition:color .2s,border-color .2s; } .article-toc-list a:hover{color:var(--ink);border-color:var(--line)} /* ── Цитата / сильный вывод внутри текста ── */ .article .article-quote{ margin:2.2rem 0;padding:.4rem 0 .4rem 1.6rem; border-left:2px solid var(--pop); font-size:1.28rem;line-height:1.5;font-weight:300; letter-spacing:-.01em;color:var(--ink);font-style:normal; } .article .article-quote cite{ display:block;margin-top:.8rem;font-size:.82rem;font-style:normal; letter-spacing:.04em;color:var(--ink-soft);font-weight:500; } /* ── Блок автора / экспертизы (E-E-A-T) ── */ .article-author{ display:flex;gap:1.4rem;align-items:flex-start; border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:2rem 0;margin:3rem 0 1rem; } .article-author-avatar{ flex:0 0 auto;width:56px;height:56px;border-radius:12px; background:var(--paper);border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-weight:600;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink); } .article-author-body{flex:1;min-width:0} .article-author-name{ font-size:1.05rem;font-weight:600;letter-spacing:-.01em; color:var(--ink);margin-bottom:.5rem; } .article-author-bio{ font-size:1rem;line-height:1.65;color:var(--ink-soft); font-weight:400;margin:0 0 1rem; } .article-author-bio strong{color:var(--ink);font-weight:600} .article-author-links{display:flex;flex-wrap:wrap;gap:1.4rem} .article-author-links a{ font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; font-weight:500;color:var(--ink-soft);text-decoration:none; border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s; } .article-author-links a:hover{color:var(--ink);border-color:var(--ink)} /* ── FAQ (нативный
, блоки на линиях) ── */ .article-faq{margin:2.6rem 0 0} .article-faq h2{margin-bottom:1rem} .faq-item{ border-bottom:1px solid var(--line); } .faq-item:first-of-type{border-top:1px solid var(--line)} .faq-item summary{ list-style:none;cursor:pointer; padding:1.15rem 2.2rem 1.15rem 0;position:relative; font-size:1.12rem;font-weight:500;letter-spacing:-.01em;color:var(--ink); line-height:1.4;transition:color .2s; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--link)} .faq-item summary::after{ content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%); font-size:1.4rem;font-weight:200;color:var(--pop);line-height:1;transition:transform .25s; } .faq-item[open] summary::after{content:"–";transform:translateY(-50%)} .faq-answer{padding:0 0 1.3rem} .faq-answer p{margin:0 0 .8rem;color:#2b2a26;font-size:1.06rem;line-height:1.75} .faq-answer p:last-child{margin-bottom:0} .faq-answer a{color:var(--link);text-decoration:underline;text-underline-offset:3px} /* ── «Читайте также» — 3 карточки на линиях (сетка как .cards) ── */ .article-related{margin:3rem 0 0} .article-related .section-label{margin-bottom:1.4rem} .related-cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid var(--line);border-left:1px solid var(--line); } .related-card{ display:flex;flex-direction:column;gap:.55rem; padding:26px 24px;text-decoration:none; border-right:1px solid var(--line);border-bottom:1px solid var(--line); transition:background .2s; } .related-card:hover{background:var(--paper)} .related-card-tag{ font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--accent);font-weight:600; } .related-card-title{ font-size:1.16rem;font-weight:500;letter-spacing:-.015em; color:var(--ink);line-height:1.3; } .related-card-text{ font-size:.95rem;color:var(--ink-soft);line-height:1.55;font-weight:400;flex:1; } .related-card-more{ font-size:.74rem;letter-spacing:.06em;font-weight:500;color:var(--ink);margin-top:.3rem; } .related-card:hover .related-card-more{color:var(--link)} /* ── Мобильные ── */ @media(max-width:768px){ .article-toc-list{columns:1} .related-cards{grid-template-columns:1fr} .article-author{flex-direction:column;gap:1rem} .article .article-quote{font-size:1.15rem} }