/* Стили статей и историй блога. Вынесены из шаблона templates/post.php: там они мешали свести двойной на 292 страницах. Содержимое перенесено дословно. */ .material-symbols-outlined { vertical-align: middle; } /* Article content styles */ .article-content h2 { font-size: 2rem; font-weight: 800; margin-top: 3rem; margin-bottom: 1.5rem; color: #1e293b; line-height: 1.3; } .article-content h3 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: #334155; } .article-content p { font-size: 1.125rem; line-height: 1.8; margin-bottom: 1.5rem; color: #475569; } .article-content strong { font-weight: 700; color: #1e293b; } .article-content em { font-style: italic; color: #64748b; } /* Beautiful ordered lists */ .article-content ol { counter-reset: custom-counter; list-style: none; margin: 2rem 0; padding-left: 0; } .article-content ol li { counter-increment: custom-counter; position: relative; padding-left: 4rem; margin-bottom: 1.5rem; font-size: 1.125rem; line-height: 1.8; color: #475569; } .article-content ol li::before { content: counter(custom-counter); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #D4F232 0%, #a8c929 100%); color: #0F1115; font-weight: 800; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } /* Beautiful unordered lists */ .article-content ul { list-style: none; margin: 2rem 0; padding-left: 0; } .article-content ul li { position: relative; padding-left: 3rem; margin-bottom: 1rem; font-size: 1.125rem; line-height: 1.8; color: #475569; } .article-content ul li::before { content: ''; position: absolute; left: 0; top: 0.3rem; width: 1.5rem; height: 1.5rem; background: linear-gradient(135deg, #D4F232 0%, #a8c929 100%); border-radius: 6px; box-shadow: 0 2px 4px rgb(0 0 0 / 0.1); } .article-content blockquote { border-left: 4px solid #D4F232; background: #f8fafc; padding: 1.5rem 2rem; margin: 2rem 0; border-radius: 0 12px 12px 0; font-style: italic; color: #64748b; } .article-content code { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.9em; color: #0EA5E9; } /* Крошки: длинный заголовок статьи режем в одну строку с многоточием */ .crumbs { flex-wrap: nowrap; min-width: 0; } .crumb-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Подводка под обложкой: карточка, приподнятая на картинку */ .post-lead { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 5; } .post-lead-card { position: relative; margin-top: -46px; background: #fff; border-radius: 22px; padding: 26px 30px 24px; box-shadow: 0 22px 50px -30px rgba(15,17,21,.45), 0 0 0 1px rgba(15,17,21,.04); } .post-lead-tag { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #93a3b6; margin-bottom: 9px; } .post-lead-card p { margin: 0; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.55; color: #26313f; font-weight: 500; } @media (max-width: 767px) { .post-lead { padding: 0 1rem; } .post-lead-card { margin-top: -30px; padding: 20px 20px 18px; border-radius: 18px; } } /* ─── Шапка статьи ─── */ .post-hero { min-height: 340px; padding: 0; } .post-hero-title { font-size: clamp(24px, 6vw, 60px); letter-spacing: -0.02em; } .post-hero-lead { font-size: clamp(15px, 2.2vw, 20px); line-height: 1.5; } /* высота идёт от ширины экрана: обложка 16:9, и на широком мониторе фиксированные 60vh срезали верх картинки — головы людей */ @media (min-width: 768px) { .post-hero { height: clamp(460px, 40vw, 660px); max-height: 82vh; } } @media (max-width: 767px) { /* на телефоне высоту задаёт текст: фиксированная не вмещает длинный заголовок */ .post-hero { min-height: 300px; } .post-hero-title { line-height: 1.2; } } /* Подводка под обложкой */ .post-lead { max-width: 56rem; margin: 0 auto; padding: 34px 1.5rem 0; } .post-lead p { margin: 0; font-size: clamp(17px, 2.1vw, 21px); line-height: 1.6; color: #3f4d5f; font-weight: 500; border-left: 5px solid #D4F232; padding: 4px 0 4px 18px; } @media (max-width: 767px) { .post-lead { padding: 24px 1.25rem 0; } .post-lead p { padding-left: 14px; border-left-width: 4px; } } /* ─── Истории диалогов ─────────────────────────────────────── */ .story-article { --lime:#D4F232; --ink:#0F1115; --line:#e6ebf2; } /* заголовки внутри истории — крупнее и с меткой */ .story-article h2 { position:relative; font-size:1.9rem; font-weight:900; color:#0F1115; line-height:1.22; margin:3.5rem 0 1.4rem; padding-left:18px; letter-spacing:-.02em; } .story-article h2::before { content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:6px; border-radius:6px; background:var(--lime); } .story-article h3 { font-size:1.35rem; font-weight:800; color:#1e293b; margin:2.2rem 0 .9rem; } .story-article p { font-size:1.14rem; line-height:1.78; color:#3f4d5f; margin-bottom:1.35rem; } .story-article strong { font-weight:800; color:#0F1115; background:linear-gradient(transparent 62%, rgba(212,242,50,.55) 62%); } /* ключевая фраза во вводном блоке — ссылка на страницу модуля */ .story-article .story-key { color:inherit; text-decoration:none; border-bottom:2px solid rgba(212,242,50,.55); transition:border-color .2s; } .story-article .story-key:hover { border-bottom-color:#D4F232; } /* перелинковка: соседние разговоры */ .story-links { display:flex; flex-direction:column; gap:8px; margin:2.6rem 0 0; padding:18px 22px; border-radius:16px; background:#f6f8fb; border:1px solid var(--line); } .story-links > span { font-size:11.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#93a3b6; } .story-links a { color:#0F1115; font-weight:700; font-size:15.5px; line-height:1.45; text-decoration:none; border-bottom:2px solid rgba(212,242,50,.5); align-self:flex-start; } .story-links a:hover { border-bottom-color:#D4F232; } /* мостик к предложению */ .story-bridge { margin:1.8rem 0 0; padding:20px 24px; border-radius:16px; background:linear-gradient(180deg, rgba(212,242,50,.16), rgba(212,242,50,.06)); border:1px solid rgba(212,242,50,.45); font-size:1.06rem; line-height:1.7; color:#26313f; } .story-bridge a { color:#0F1115; font-weight:800; text-decoration:none; border-bottom:2px solid #D4F232; } /* 1. О чём история: что продают и кому */ .story-about { position:relative; overflow:hidden; border-radius:22px; padding:26px 28px 24px; margin:0 0 2rem; color:#e8edf5; background:radial-gradient(120% 140% at 0% 0%, #1c2430 0%, #0F1115 58%); box-shadow:0 18px 40px -28px rgba(15,17,21,.75); } .story-about::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--lime), rgba(212,242,50,.15)); } .story-about::after { content:""; position:absolute; right:-70px; top:-70px; width:200px; height:200px; border-radius:50%; background:rgba(212,242,50,.07); } .story-about .lbl { position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; color:#D4F232; font-size:11.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; } .story-about .lbl::before { content:""; width:16px; height:2px; background:#D4F232; border-radius:2px; } .story-about p { position:relative; z-index:1; color:#bcc7d6; font-size:16px; line-height:1.62; margin:0 0 .6rem; } .story-about p:first-of-type { color:#e8edf5; font-size:16.5px; } .story-about p:last-child { margin-bottom:0; } .story-about strong { color:#fff; background:none; font-weight:700; border-bottom:2px solid rgba(212,242,50,.6); padding-bottom:1px; } .story-about .facts { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.09); } .story-about .facts span { color:#8e9bad; font-size:12.5px; font-weight:600; letter-spacing:.02em; } .story-about .facts span + span::before { content:"·"; margin-right:7px; color:#4a5563; } /* 2. Кто вёл разговор */ .story-article .agent-lbl { font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; margin:0 0 12px; } .story-article .agent-box { display:flex; gap:20px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:22px; padding:18px 24px; margin:0 0 2.4rem; box-shadow:0 8px 24px -20px rgba(15,17,21,.28); } .story-article .agent-box .ava { position:relative; flex:none; } .story-article .agent-box .ava img { width:86px; height:86px; border-radius:50%; object-fit:cover; display:block; border:3px solid var(--lime); } .story-article .agent-box .dot { position:absolute; right:4px; bottom:6px; width:17px; height:17px; border-radius:50%; background:#16a34a; border:4px solid #fff; } .story-article .agent-box .name { font-size:20px; font-weight:900; color:#0F1115; letter-spacing:-.01em; } .story-article .agent-box .role { color:#64748b; font-size:15.5px; margin-top:3px; } .story-article .agent-box .online { color:#16a34a; font-weight:700; white-space:nowrap; } /* 3. Диалог — как в мессенджере */ .story-article .chat { background:#f4f7fb; border:1px solid var(--line); border-radius:26px; padding:0 0 22px; margin:2.2rem 0; overflow:hidden; box-shadow:0 14px 34px -22px rgba(15,17,21,.35); } .story-article .chat-head { display:flex; align-items:center; gap:12px; background:#fff; border-bottom:1px solid var(--line); padding:14px 22px; } .story-article .chat-head img { width:38px; height:38px; border-radius:50%; object-fit:cover; } .story-article .chat-head .nm { font-weight:800; color:#0F1115; font-size:15.5px; line-height:1.2; } .story-article .chat-head .st { font-size:12.5px; color:#16a34a; font-weight:700; } .story-article .chat-head .st i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#16a34a; margin-right:5px; vertical-align:middle; } .story-article .chat .time { text-align:center; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8fa0b5; font-weight:800; margin:20px 22px 4px; } .story-article .msg { position:relative; max-width:78%; padding:14px 18px; border-radius:20px; font-size:16.5px; line-height:1.55; margin:10px 22px 0; width:fit-content; box-shadow:0 2px 6px rgba(15,17,21,.06); } .story-article .msg .t { display:block; font-size:11.5px; color:#93a3b6; margin-top:7px; text-align:right; font-weight:600; } .story-article .msg.in { background:#fff; border-bottom-left-radius:6px; color:#26313f; margin-right:auto; } .story-article .msg.out { background:#0F1115; border-bottom-right-radius:6px; color:#eef3f9; margin-left:auto; } .story-article .msg.out .t { color:#7e8b9c; } /* ─── Переписка на Авито ─────────────────────────────── Отличий от сайтового чата два: в шапке стоит ОБЪЯВЛЕНИЕ, а не консультант (аватарки у продавца на Авито нет), и пузыри продавца светлые, а не чёрные. */ .story-article .chat-avito { background:#eef4fb; } .story-article .ad-head { display:flex; align-items:center; gap:13px; background:#fff; border-bottom:1px solid var(--line); padding:13px 20px; } .story-article .ad-head .ad-ico { flex:0 0 44px; width:44px; height:44px; border-radius:12px; background:linear-gradient(140deg, #dfe9f5, #c7d8ea); display:flex; align-items:center; justify-content:center; } .story-article .ad-head .ad-ico span { width:18px; height:14px; border-radius:3px; border:2.5px solid #7d93ad; } .story-article .ad-head .ad-txt { min-width:0; flex:1; } .story-article .ad-head .ad-nm { font-weight:800; color:#0F1115; font-size:15.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .story-article .ad-head .ad-st { font-size:12.5px; color:#8fa0b5; font-weight:700; margin-top:2px; } .story-article .ad-head .ad-tag { flex:0 0 auto; font-size:11.5px; font-weight:900; color:#0aa2ff; background:#e8f5ff; border-radius:999px; padding:5px 11px; letter-spacing:.02em; } .story-article .chat-avito .msg.out { background:#d9ecff; color:#12324d; border-bottom-right-radius:6px; } .story-article .chat-avito .msg.out .t { color:#6f93b3; } .story-article .chat-avito .msg.in { background:#fff; color:#26313f; } @media (max-width: 767px) { .story-article .ad-head { padding:11px 14px; gap:10px; } .story-article .ad-head .ad-ico { flex-basis:38px; width:38px; height:38px; } .story-article .ad-head .ad-nm { font-size:14.5px; } } /* Комментарий к разговору — обычный абзац, без рамки и без ярлыка: коробка с подписью «примечание редакции» выглядела лишним усложнением. */ .story-article .fork { margin:-2px 0 2rem; padding:0 0 0 18px; border-left:3px solid var(--lime); font-size:1.06rem; line-height:1.7; color:#55637a; } /* 4. Что получил менеджер */ .story-article .lead-card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 28px; margin:2.2rem 0; box-shadow:0 10px 30px -22px rgba(15,17,21,.3); } .story-article .lead-card b { display:block; font-size:12px; color:#0F1115; margin-bottom:18px; text-transform:uppercase; letter-spacing:.1em; font-weight:900; } .story-article .lead-card b::before { content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--lime); margin-right:9px; vertical-align:middle; } .story-article .lead-card dl { display:grid; grid-template-columns:210px 1fr; gap:0; margin:0; font-size:16px; } .story-article .lead-card dt { color:#8fa0b5; padding:11px 0; border-top:1px solid #eef2f7; } .story-article .lead-card dd { margin:0; color:#0F1115; font-weight:600; padding:11px 0; border-top:1px solid #eef2f7; } .story-article .lead-card dl dt:first-of-type, .story-article .lead-card dl dd:first-of-type { border-top:0; } /* 5. Цифры — одной строкой, без плашек и полос */ .story-article .stats { display:flex; flex-wrap:wrap; margin:2.4rem 0; padding:6px 0; border-top:2px solid #0F1115; border-bottom:1px solid var(--line); } .story-article .stat { flex:1 1 150px; padding:22px 26px; position:relative; } .story-article .stat + .stat::before { content:""; position:absolute; left:0; top:26px; bottom:26px; width:1px; background:var(--line); } .story-article .stat b { display:block; font-size:44px; font-weight:900; color:#0F1115; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; } .story-article .stat span { font-size:14.5px; color:#7a879a; display:block; margin-top:8px; line-height:1.35; } /* ─── Два блока под историей ───────────────────────────────── */ .story-cta { max-width:56rem; margin:0 auto; padding:0 1.25rem 4.5rem; display:grid; gap:20px; overflow-x:hidden; } .story-cta * { min-width:0; } .story-offer { background:#0F1115; border-radius:28px; padding:34px 36px; color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; } /* «Бесплатно» и «разработка и пилот» — В ДВЕ СТРОКИ: в одну на телефоне не влезает */ .story-offer .price { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:18px; } .story-offer .price b { font-size:34px; font-weight:900; color:#D4F232; letter-spacing:-.03em; line-height:1.05; } .story-offer .price span { font-size:16px; color:#9aa6b6; font-weight:600; line-height:1.3; } @media (max-width: 767px) { .story-offer .price b { font-size:30px; } } .story-offer h2 { font-size:26px; font-weight:900; margin:0 0 12px; line-height:1.2; letter-spacing:-.02em; color:#fff; padding:0; } .story-offer h2::before { display:none; } .story-offer p { color:#b6c1d0; font-size:16.5px; line-height:1.65; margin:0; } .story-offer ul { list-style:none; margin:20px 0 0; padding:0; } .story-offer ul li { position:relative; padding-left:26px; color:#c8d2e0; font-size:16px; margin-bottom:10px; line-height:1.5; } .story-offer ul li::before { content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:#D4F232; } .story-offer .offer-form { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:24px; min-width:0; } .story-offer .offer-form input { max-width:100%; box-sizing:border-box; } .story-offer .ff-t { font-size:16.5px; font-weight:800; margin-bottom:14px; color:#fff; } /* капча стоит ПОД номером, а не рядом: рядом она жмёт поле телефона */ .story-offer .ff-row { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; } .story-offer .ff-row input[type=tel] { width:100%; min-width:0; padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#fff; font-size:16px; } .story-offer .ff-row input::placeholder { color:#7e8b9c; } .story-offer .ff-cap { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#a9b5c4; font-size:14px; font-weight:700; white-space:nowrap; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:8px 8px 8px 14px; } .story-offer .ff-cap input { width:74px; padding:10px 8px; border-radius:9px; text-align:center; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#fff; font-size:16px; font-weight:700; } .story-offer .offer-form button { width:100%; border:0; cursor:pointer; background:#D4F232; color:#0F1115; font-weight:900; font-size:16.5px; padding:15px 24px; border-radius:12px; transition:all .2s; } .story-offer .offer-form button:hover { box-shadow:0 12px 26px -10px rgba(212,242,50,.5); } .story-offer .ff-ok { display:flex; gap:10px; align-items:flex-start; margin:0 0 14px; color:#9aa6b6; font-size:12.5px; line-height:1.5; cursor:pointer; } .story-offer .ff-ok input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:#D4F232; cursor:pointer; } .story-offer .ff-ok a { color:#c8d2e0; text-decoration:underline; } .story-more { background:#fff; border:1px solid #e6ebf2; border-radius:30px; padding:34px 40px; display:flex; align-items:center; gap:28px; justify-content:space-between; } .story-more h3 { font-size:23px; font-weight:900; color:#0F1115; margin:0 0 8px; letter-spacing:-.01em; } .story-more p { color:#64748b; font-size:16px; line-height:1.6; margin:0; } .story-more a { flex:none; display:inline-flex; align-items:center; gap:9px; background:#0F1115; color:#fff; font-weight:800; font-size:16px; padding:16px 28px; border-radius:999px; text-decoration:none; transition:all .2s; } .story-more a:hover { transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(15,17,21,.5); } .story-cta .seo { color:#9aa6b6; font-size:13.5px; line-height:1.65; margin:8px 0 0; padding-top:22px; border-top:1px solid #e6ebf2; } @media (max-width:860px) { .story-offer { grid-template-columns:1fr; gap:28px; padding:28px 20px; } .story-offer .offer-form { padding:20px 18px; } .story-offer .ff-cap input { width:68px; } .story-more { flex-direction:column; align-items:flex-start; padding:28px 26px; } } @media (max-width:640px) { .story-article h2 { font-size:1.6rem; } .story-article .lead-card dl { grid-template-columns:1fr; } .story-article .lead-card dt { padding-bottom:0; border-top:1px solid #eef2f7; } .story-article .lead-card dd { padding-top:2px; border-top:0; } .story-article .stats { display:block; } .story-article .stat { display:flex; align-items:baseline; gap:14px; padding:14px 0; border-top:1px solid var(--line); } .story-article .stat:first-child { border-top:0; } .story-article .stat + .stat::before { display:none; } .story-article .stat b { font-size:34px; min-width:74px; } .story-article .stat span { margin-top:0; } .story-article .agent-box { flex-direction:column; align-items:flex-start; gap:18px; } .story-article .agent-box .ava img { width:72px; height:72px; } .story-article .msg { max-width:88%; margin-left:16px; margin-right:16px; } .story-about { padding:20px 20px 18px; } }