/* CTD Blog — layout inspired by agentoora.ru/blog (content + sidebar) */ .ctd-blog { --ctd-blog-ink: #1c1410; --ctd-blog-muted: #6b5a4d; --ctd-blog-line: #e8ddd2; --ctd-blog-bg: #f7f2ec; --ctd-blog-card: #ffffff; --ctd-blog-accent: #b8743d; --ctd-blog-accent-2: #dca074; --ctd-blog-font-display: 'Manrope', 'IBM Plex Sans', sans-serif; --ctd-blog-font-body: 'IBM Plex Sans', sans-serif; /* Высота липкой шапки темы в прокрученном состоянии: 76px десктоп, 57px мобилка. */ --ctd-header-h: 76px; background: var(--ctd-blog-bg); color: var(--ctd-blog-ink); font-family: var(--ctd-blog-font-body); /* Theme .main margin-top clears fixed header; keep our own breathing room */ padding: 28px 0 72px; box-sizing: border-box; } /* Theme styles the bare `.category` selector, which WP puts on of archives: 95px top / 135px bottom padding leak onto every blog category. */ body.ctd-blog-body { padding-top: 0 !important; padding-bottom: 0 !important; background-color: #f7f2ec !important; } /* Same top offset for /blog/ and /category/ — theme media queries change .main */ .ctd-blog.main { margin-top: 150px; } @media only screen and (max-width: 1200px) { .ctd-blog.main { margin-top: 90px; } } @media only screen and (max-width: 768px) { .ctd-blog.main { margin-top: 80px; } } @media only screen and (max-width: 480px) { .ctd-blog.main { margin-top: 72px; } } /* Kill theme heading letter-spacing (3px) and bootstrap blue hovers */ .ctd-blog h1, .ctd-blog h2, .ctd-blog h3, .ctd-blog h4, .ctd-blog h5, .ctd-blog h6, .ctd-blog .ctd-blog-hero__title, .ctd-blog .ctd-blog-card__title, .ctd-blog .ctd-article__title, .ctd-blog .ctd-article__section-title { letter-spacing: normal !important; text-transform: none; } .ctd-blog a, .ctd-blog a:visited { color: inherit; text-decoration: none; } .ctd-blog a:hover, .ctd-blog a:focus, .ctd-blog a:active { color: var(--ctd-blog-accent); text-decoration: none; } .ctd-blog-hero { margin: 0 0 28px; padding: 0; } .ctd-blog-hero .ctd-article-breadcrumb { margin: 0 0 10px; line-height: 1.3; } .ctd-blog-hero__eyebrow { margin: 0 0 8px; font-family: var(--ctd-blog-font-body); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ctd-blog-accent); font-weight: 500; } .ctd-blog-hero__title { margin: 0 0 10px; font-family: var(--ctd-blog-font-display); font-size: clamp(28px, 4vw, 40px) !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--ctd-blog-ink); } .ctd-blog-hero__lead { margin: 0 0 18px; max-width: 720px; color: var(--ctd-blog-muted); font-size: 17px; line-height: 1.5; } .ctd-blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; } .ctd-blog-cats__item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ctd-blog-line); background: var(--ctd-blog-card); color: var(--ctd-blog-ink) !important; text-decoration: none; font-family: var(--ctd-blog-font-body); font-size: 14px; border-radius: 4px; transition: border-color .2s, color .2s, background .2s; } .ctd-blog-cats__item span { color: var(--ctd-blog-muted); font-size: 12px; } .ctd-blog-cats__item:hover, .ctd-blog-cats__item:focus, .ctd-blog-cats__item.is-active { border-color: var(--ctd-blog-accent); color: var(--ctd-blog-accent) !important; background: #fffaf5; } /* Hairlines come from card outlines, not a grid background: rows with fewer cards than columns must not leave a filled block. */ .ctd-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; } .ctd-blog-card { background: var(--ctd-blog-card); outline: 1px solid var(--ctd-blog-line); display: flex; flex-direction: column; text-decoration: none; color: var(--ctd-blog-ink) !important; position: relative; overflow: hidden; transition: background .2s; } .ctd-blog-card:hover, .ctd-blog-card:focus { background: #fffaf5; color: var(--ctd-blog-ink) !important; } .ctd-blog-card__arrow { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; font-size: 14px; color: var(--ctd-blog-accent); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; } .ctd-blog-card:hover .ctd-blog-card__arrow { opacity: 1; transform: none; } .ctd-blog-card__media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #ebcc9d, #dca074 55%, #c18253); overflow: hidden; } .ctd-blog-card__image { width: 100%; height: 100%; object-fit: cover; display: block; } .ctd-blog-card__placeholder { width: 100%; height: 100%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%), linear-gradient(135deg, #ebcc9d, #dca074 55%, #c18253); } .ctd-blog-card__body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .ctd-blog-card__index { font-size: 12px; color: var(--ctd-blog-muted); letter-spacing: 0.06em; } .ctd-blog-card__cat { display: inline-block; font-family: var(--ctd-blog-font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ctd-blog-accent); } .ctd-blog-card__title { margin: 0; font-family: var(--ctd-blog-font-display); font-size: 19px !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; color: var(--ctd-blog-ink); } .ctd-blog-card:hover .ctd-blog-card__title, .ctd-blog-card:focus .ctd-blog-card__title { color: var(--ctd-blog-accent); } .ctd-blog-card:hover .ctd-blog-card__cat, .ctd-blog-card:focus .ctd-blog-card__cat { color: var(--ctd-blog-accent); } .ctd-blog-card__excerpt { margin: 0; font-family: var(--ctd-blog-font-body); color: var(--ctd-blog-muted); font-size: 14px; line-height: 1.5; flex: 1; } .ctd-blog-card__date, .ctd-article__meta { font-size: 13px; color: var(--ctd-blog-muted); } .ctd-blog-empty { grid-column: 1 / -1; padding: 40px; background: var(--ctd-blog-card); margin: 0; } .ctd-blog-pager { margin-top: 28px; } .ctd-blog-pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; } .ctd-blog-pager a, .ctd-blog-pager span { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--ctd-blog-line); background: var(--ctd-blog-card); text-decoration: none; color: var(--ctd-blog-ink) !important; padding: 0 10px; } .ctd-blog-pager a:hover, .ctd-blog-pager a:focus { border-color: var(--ctd-blog-accent); color: var(--ctd-blog-accent) !important; } .ctd-blog-pager .current { border-color: var(--ctd-blog-accent); color: var(--ctd-blog-accent) !important; font-weight: 700; } /* Article */ .ctd-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; padding: 8px 0 24px; } /* Колонки не должны раздуваться под min-content широкой таблицы. */ .ctd-article, .ctd-article-sidebar { min-width: 0; } .ctd-article-breadcrumb { margin: 0 0 14px; font-size: 13px; color: var(--ctd-blog-muted); } .ctd-article-breadcrumb a { color: var(--ctd-blog-muted) !important; text-decoration: none; } .ctd-article-breadcrumb a:hover, .ctd-article-breadcrumb a:focus { color: var(--ctd-blog-accent) !important; } .ctd-article { background: var(--ctd-blog-card); border: 1px solid var(--ctd-blog-line); padding: 28px 28px 36px; } .ctd-article__title { margin: 10px 0 8px; font-family: var(--ctd-blog-font-display); font-size: clamp(26px, 3.5vw, 36px) !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: -0.015em !important; } .ctd-article__figure { margin: 18px 0 22px; } .ctd-article__image { width: 100%; height: auto; display: block; border-radius: 2px; } .ctd-article__content { font-size: 17px; line-height: 1.75; color: var(--ctd-blog-ink); } .ctd-article__content > p:first-of-type { font-size: 18px; color: #3d2f26; } .ctd-article__section-title { margin: 54px 0 18px; padding-top: 30px; border-top: 1px solid var(--ctd-blog-line); font-family: var(--ctd-blog-font-display); font-size: 24px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; scroll-margin-top: calc(var(--ctd-header-h) + 26px); } .ctd-article__content p, .ctd-article__content ul, .ctd-article__content ol { margin: 0 0 18px; } .ctd-article__content ul, .ctd-article__content ol { padding-left: 1.2em; } /* Заголовок не должен прилипать к списку под ним. */ .ctd-article__section-title + ul, .ctd-article__section-title + ol, .ctd-article__sub-title + ul, .ctd-article__sub-title + ol, .ctd-article__content p + ul, .ctd-article__content p + ol { margin-top: 30px; } .ctd-article__section-title + .ctd-checks, .ctd-article__section-title + .ctd-steps, .ctd-article__sub-title + .ctd-checks, .ctd-article__sub-title + .ctd-steps { margin-top: 36px; } .ctd-article__content li { margin-bottom: 10px; } .ctd-article__content a { color: var(--ctd-blog-accent) !important; } .ctd-article__content a:hover, .ctd-article__content a:focus { color: #9a5f30 !important; } /* --- Шапка статьи --------------------------------------------------- */ .ctd-article__lead { margin: 0 0 14px; font-size: 19px; line-height: 1.55; color: #3d2f26; } .ctd-article__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0 4px; border-top: 1px solid var(--ctd-blog-line); font-size: 13px; color: var(--ctd-blog-muted); } .ctd-article__byline > * + *::before { content: '•'; margin-right: 14px; color: var(--ctd-blog-line); } .ctd-article__author { font-weight: 600; color: var(--ctd-blog-ink); } .ctd-article__updated { color: var(--ctd-blog-accent); } /* --- «Коротко»: ответ до содержания ---------------------------------- */ .ctd-tldr { margin: 0 0 28px; padding: 20px 24px 22px; background: linear-gradient(135deg, #fdf6ee, #f7e9da); border: 1px solid #e9d3ba; border-left: 5px solid var(--ctd-blog-accent); } .ctd-tldr__label { margin-bottom: 12px; font-family: var(--ctd-blog-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #96521f; } .ctd-tldr__list { margin: 0; padding: 0; list-style: none; } .ctd-tldr__list li { position: relative; padding-left: 26px; margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; color: #33241a; } .ctd-tldr__list li:last-child { margin-bottom: 0; } .ctd-tldr__list li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; background: var(--ctd-blog-accent); transform: rotate(45deg); } /* --- Частые вопросы --------------------------------------------------- */ .ctd-faq { margin: 48px 0 0; scroll-margin-top: calc(var(--ctd-header-h) + 26px); } .ctd-faq__list { border-top: 1px solid var(--ctd-blog-line); } .ctd-faq__item { padding: 22px 0; border-bottom: 1px solid var(--ctd-blog-line); } .ctd-faq__q { margin: 0 0 10px !important; font-family: var(--ctd-blog-font-display); font-size: 19px !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--ctd-blog-ink); } .ctd-faq__a { font-size: 16.5px; line-height: 1.75; color: #3d2f26; } .ctd-faq__a p { margin: 0 0 12px; } .ctd-faq__a p:last-child { margin-bottom: 0; } /* --- Подробное содержание над статьёй -------------------------------- */ .ctd-article-contents { margin: 0 0 36px; background: #faf6f1; border: 1px solid var(--ctd-blog-line); } .ctd-article-contents__summary { display: flex; align-items: center; gap: 12px; padding: 16px 22px; cursor: pointer; list-style: none; font-family: var(--ctd-blog-font-display); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; } .ctd-article-contents__summary::-webkit-details-marker { display: none; } .ctd-article-contents__burger { position: relative; width: 18px; height: 12px; flex: none; } .ctd-article-contents__burger::before, .ctd-article-contents__burger::after, .ctd-article-contents__summary::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ctd-blog-accent); } .ctd-article-contents__burger::before { top: 0; } .ctd-article-contents__burger::after { bottom: 0; } .ctd-article-contents__summary::after { position: static; width: 12px; margin-left: auto; } .ctd-article-contents__list { margin: 0; padding: 2px 22px 20px; list-style: none; counter-reset: ctd-toc; font-size: 15.5px; line-height: 1.45; } .ctd-article-contents__list li { margin: 0 0 11px; } .ctd-article-contents__list li:last-child { margin-bottom: 0; } .ctd-article-contents__list .is-level-2 { counter-increment: ctd-toc; font-weight: 600; } .ctd-article-contents__list .is-level-2 a::before { content: counter(ctd-toc, decimal-leading-zero) ' '; color: var(--ctd-blog-accent); font-variant-numeric: tabular-nums; } .ctd-article-contents__list .is-level-3 { padding-left: 36px; font-size: 14.5px; } .ctd-article-contents__list .is-level-3 a::before { content: '— '; color: var(--ctd-blog-line); } .ctd-article-contents__list a { color: var(--ctd-blog-ink) !important; text-decoration: none; } .ctd-article-contents__list a:hover, .ctd-article-contents__list a:focus { color: var(--ctd-blog-accent) !important; } /* --- Лендинговые блоки в теле статьи --------------------------------- */ .ctd-article__sub-title { margin: 36px 0 16px; font-family: var(--ctd-blog-font-display); font-size: 20px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; scroll-margin-top: calc(var(--ctd-header-h) + 26px); } .ctd-quote { position: relative; margin: 36px 0; padding: 30px 32px 26px 76px; background: linear-gradient(135deg, #fbf1e6, #f6e3d1); border: 1px solid #e9c9a8; border-left: 5px solid var(--ctd-blog-accent); font-family: var(--ctd-blog-font-display); font-size: 20px; line-height: 1.5; font-weight: 500; color: #33241a; } .ctd-quote::before { content: '“'; position: absolute; left: 26px; top: 14px; font-family: Georgia, 'Times New Roman', serif; font-size: 76px; line-height: 1; color: var(--ctd-blog-accent); } .ctd-quote__author { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--ctd-blog-font-body); font-size: 14px; font-weight: 600; color: #96521f; } .ctd-quote__author::before { content: ''; width: 26px; height: 2px; background: var(--ctd-blog-accent); } .ctd-callout { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; margin: 30px 0; padding: 20px; background: #faf6f1; border: 1px solid var(--ctd-blog-line); } .ctd-callout__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--ctd-blog-line); font-size: 18px; line-height: 1; color: var(--ctd-blog-accent); } .ctd-callout__title { font-weight: 600; margin-bottom: 4px; } .ctd-callout p:last-child { margin-bottom: 0; } .ctd-callout--warn { background: #fdf3ec; border-color: #f0d3bd; } .ctd-takeaway { margin: 32px 0; padding: 20px 22px; background: #fdefe1; border: 1px solid #edc9a5; border-left: 5px solid var(--ctd-blog-accent); } .ctd-takeaway__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #96521f; } .ctd-takeaway__label::before { content: '→'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ctd-blog-accent); color: #fff; font-size: 12px; letter-spacing: 0; } .ctd-takeaway p { font-weight: 500; color: #3a2a1d; } .ctd-takeaway p:last-child { margin-bottom: 0; } .ctd-summary { margin: 40px 0; padding: 24px; background: #2b211a; color: #f4ece4; } .ctd-summary__title { font-family: var(--ctd-blog-font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; } .ctd-summary ul { margin: 0; padding: 0; list-style: none; } .ctd-summary li { position: relative; padding-left: 26px; margin-bottom: 10px; } .ctd-summary li::before { content: '✓'; position: absolute; left: 0; color: var(--ctd-blog-accent-2); } .ctd-summary li:last-child { margin-bottom: 0; } /* Инфографика: числа и полосы */ .ctd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin: 36px 0; background: #e3c1a0; border: 2px solid var(--ctd-blog-accent); } .ctd-stats__item { background: linear-gradient(180deg, #fff8f1, #fbeddf); padding: 22px 20px; } .ctd-stats__value { font-family: var(--ctd-blog-font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: #a4571f; line-height: 1.05; } .ctd-stats__label { margin-top: 8px; font-size: 14px; line-height: 1.45; color: #5c4534; } .ctd-bars { margin: 36px 0; padding: 24px 24px 20px; background: linear-gradient(180deg, #fffaf5, #fbeee1); border: 2px solid var(--ctd-blog-accent); } .ctd-bars__title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid #edcfb2; font-family: var(--ctd-blog-font-display); font-size: 18px; font-weight: 700; color: #33241a; } .ctd-bars__title::before { content: ''; width: 6px; height: 20px; background: var(--ctd-blog-accent); } .ctd-bars__row { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) 84px; gap: 14px; align-items: center; margin-bottom: 14px; font-size: 15px; font-weight: 600; color: #33241a; } .ctd-bars__track { height: 16px; background: #f0dcc6; box-shadow: inset 0 0 0 1px #e3c1a0; } .ctd-bars__fill { display: block; height: 100%; background: linear-gradient(90deg, #a4571f, var(--ctd-blog-accent) 60%, var(--ctd-blog-accent-2)); } .ctd-bars__value { text-align: right; color: #a4571f; font-weight: 700; font-variant-numeric: tabular-nums; } .ctd-bars__note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #edcfb2; font-size: 13px; line-height: 1.5; color: #6b5a4d; } /* Списки */ .ctd-steps { margin: 32px 0; padding: 0; list-style: none; counter-reset: ctd-step; } .ctd-steps li { position: relative; counter-increment: ctd-step; padding: 0 0 16px 52px; margin: 0; } .ctd-steps li::before { content: counter(ctd-step); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ctd-blog-accent); color: #fff; font-weight: 600; font-size: 15px; } .ctd-steps li::after { content: ''; position: absolute; left: 17px; top: 36px; bottom: 2px; width: 1px; background: var(--ctd-blog-line); } .ctd-steps li:last-child::after { display: none; } .ctd-steps b { display: block; } .ctd-checks { margin: 28px 0; padding: 0; list-style: none; } .ctd-checks li { position: relative; padding-left: 30px; margin-bottom: 10px; } .ctd-checks li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #f1e2d4; color: var(--ctd-blog-accent); font-size: 12px; } /* Таблицы */ .ctd-table { margin: 36px 0; overflow-x: auto; border: 2px solid #2b211a; } .ctd-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; background: #fff; } .ctd-table th, .ctd-table td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--ctd-blog-line); vertical-align: top; } .ctd-table thead th { background: #2b211a; color: #f7ece1; font-family: var(--ctd-blog-font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; border-bottom: 0; } .ctd-table thead th + th { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .15); } /* Первый столбец — «шапка строки» */ .ctd-table tbody th, .ctd-table tbody td:first-child { background: #faf4ee; font-weight: 600; color: #33241a; box-shadow: inset 4px 0 0 var(--ctd-blog-accent-2); } .ctd-table tbody tr:nth-child(even) td { background: #fdfaf7; } .ctd-table tbody tr:nth-child(even) td:first-child { background: #f7f0e8; } .ctd-table tbody tr:hover td { background: #fdefe1; } .ctd-table tbody tr:hover td:first-child { background: #fbe6d2; } /* Последний столбец выделяем: обычно там наш «премиальный» вариант */ .ctd-table tbody td:last-child { color: #33241a; font-weight: 500; box-shadow: inset -4px 0 0 var(--ctd-blog-accent); } .ctd-table tbody tr:last-child td { border-bottom: 0; } /* Медиа из описи */ .ctd-figure { margin: 32px 0; } .ctd-figure img, .ctd-figure video { width: 100%; height: auto; display: block; } .ctd-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--ctd-blog-muted); } .ctd-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0; } .ctd-figures .ctd-figure { margin: 0; } .ctd-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 32px 0; } .ctd-swatch { border: 1px solid var(--ctd-blog-line); background: #fff; } .ctd-swatch img { width: 100%; height: 120px; object-fit: cover; display: block; } .ctd-swatch__name { display: block; padding: 10px 12px; font-size: 14px; font-weight: 600; } /* Ссылки на премиальные сайты */ .ctd-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 32px 0; } .ctd-links a { display: block; padding: 16px 18px; background: #fff; border: 1px solid var(--ctd-blog-line); text-decoration: none; transition: border-color .2s, transform .2s; } .ctd-links a:hover, .ctd-links a:focus { border-color: var(--ctd-blog-accent); transform: translateY(-2px); } .ctd-links__name { display: block; font-family: var(--ctd-blog-font-display); font-weight: 600; color: var(--ctd-blog-ink); } .ctd-links__desc { display: block; margin-top: 4px; font-size: 14px; color: var(--ctd-blog-muted); } /* --- CPA-форма под статьёй ------------------------------------------ */ .ctd-cpa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; margin: 36px 0 0; padding: 28px; background: #2b211a; color: #f4ece4; scroll-margin-top: calc(var(--ctd-header-h) + 26px); } .ctd-cpa__eyebrow { display: inline-block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ctd-blog-accent-2); } .ctd-cpa__title { font-family: var(--ctd-blog-font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; } .ctd-cpa__text { margin: 10px 0 14px; font-size: 16px; line-height: 1.6; color: #d9cabd; } .ctd-cpa__points { margin: 0; padding: 0; list-style: none; font-size: 15px; } .ctd-cpa__points li { position: relative; padding-left: 24px; margin-bottom: 8px; } .ctd-cpa__points li::before { content: '→'; position: absolute; left: 0; color: var(--ctd-blog-accent-2); } .ctd-cpa__form .form__item { margin-bottom: 12px; } .ctd-cpa__form label { display: block; margin-bottom: 6px; font-size: 13px; color: #d9cabd; } .ctd-cpa__form input[type="text"], .ctd-cpa__form input[type="tel"], .ctd-cpa__form input[type="email"] { width: 100%; padding: 12px 14px; background: #fff; border: 1px solid transparent; color: var(--ctd-blog-ink); font-family: var(--ctd-blog-font-body); font-size: 15px; } .ctd-cpa__form input:focus { outline: none; border-color: var(--ctd-blog-accent); } .ctd-cpa__form input[type="submit"] { width: 100%; padding: 14px 18px; background: var(--ctd-blog-accent); color: #fff; border: 0; cursor: pointer; font-family: var(--ctd-blog-font-display); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; transition: background .2s; } .ctd-cpa__form input[type="submit"]:hover { background: #9a5f30; } .ctd-cpa__form .wpcf7-not-valid-tip { font-size: 12px; color: #ffb38a; } .ctd-cpa__form .wpcf7-response-output { margin: 12px 0 0; padding: 10px 12px; font-size: 14px; border: 1px solid rgba(255, 255, 255, .3); } .ctd-article__back { display: inline-block; margin-top: 28px; color: var(--ctd-blog-accent) !important; text-decoration: none; font-weight: 600; } .ctd-article__back:hover, .ctd-article__back:focus { color: #9a5f30 !important; } .ctd-article-sidebar { position: sticky; /* иначе липкий сайдбар уезжает под липкое меню темы */ top: calc(var(--ctd-header-h) + 20px); max-height: calc(100vh - var(--ctd-header-h) - 40px); overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 14px; } .ctd-article-sidebar__block { background: var(--ctd-blog-card); border: 1px solid var(--ctd-blog-line); padding: 16px; } .ctd-article-sidebar__title { margin: 0 0 14px; font-family: var(--ctd-blog-font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; } .ctd-article-sidebar__text { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--ctd-blog-muted); } .ctd-article-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .ctd-article-toc a { color: var(--ctd-blog-ink) !important; text-decoration: none; font-size: 14.5px; line-height: 1.4; } .ctd-article-toc a:hover, .ctd-article-toc a:focus, .ctd-article-toc a.is-active { color: var(--ctd-blog-accent) !important; } .ctd-article-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ctd-article-related a { display: block; text-decoration: none; color: var(--ctd-blog-ink) !important; font-size: 14px; line-height: 1.35; } .ctd-article-related a:hover, .ctd-article-related a:focus { color: var(--ctd-blog-accent) !important; } .ctd-article-related__date { display: block; margin-top: 2px; font-size: 12px; color: var(--ctd-blog-muted); } .ctd-article-sidebar__more { display: inline-block; margin-top: 12px; color: var(--ctd-blog-accent) !important; text-decoration: none; font-weight: 600; font-size: 14px; } .ctd-article-sidebar__more:hover, .ctd-article-sidebar__more:focus { color: #9a5f30 !important; } .ctd-article-sidebar__cta { background: linear-gradient(160deg, #fff7ef, #f3e0cc); } @media (max-width: 1100px) { .ctd-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .ctd-article-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ctd-article-sidebar { position: static; } .ctd-cpa { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px; } } @media (max-width: 640px) { .ctd-tldr { padding: 16px 16px 18px; } .ctd-tldr__list li { font-size: 16px; padding-left: 22px; } .ctd-faq { margin-top: 36px; } .ctd-faq__q { font-size: 17.5px !important; } .ctd-faq__a { font-size: 16px; } .ctd-blog { --ctd-header-h: 57px; /* тема уже отбивает контент от липкой шапки на 15 px, свой отступ гасим */ padding: 6px 0 48px; } .ctd-article-layout { padding-top: 0; } /* На узком экране внешние поля темы съедают ширину текста: контент кладём по краям, отступы возвращаем тем блокам, где они нужны. */ .ctd-blog > .container { padding-left: 0; padding-right: 0; } .ctd-article { border-left: 0; border-right: 0; } .ctd-blog-hero, .ctd-blog-empty, .ctd-article-sidebar { padding-left: 16px; padding-right: 16px; } /* 11 рубрик в столбик занимали пол-экрана — листаем лентой. */ .ctd-blog-cats { flex-wrap: nowrap; overflow-x: auto; padding: 2px 16px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ctd-blog-cats::-webkit-scrollbar { display: none; } .ctd-blog-cats__item { white-space: nowrap; } .ctd-quote { padding: 46px 20px 20px; font-size: 18px; } .ctd-quote::before { left: 18px; top: 8px; font-size: 58px; } .ctd-stats__value { font-size: 30px; } .ctd-bars__title { font-size: 17px; } .ctd-blog-grid { grid-template-columns: 1fr; } .ctd-article { padding: 20px 16px 30px; } .ctd-article__title { font-size: 26px !important; } .ctd-article__lead { font-size: 17px; } .ctd-article__content { font-size: 16.5px; } .ctd-article__section-title { margin: 42px 0 16px; padding-top: 24px; font-size: 21px !important; } .ctd-article__sub-title { margin: 30px 0 14px; font-size: 18px !important; } .ctd-article-contents__summary { padding: 15px 16px; font-size: 16px; } .ctd-article-contents__list { padding: 2px 16px 16px; font-size: 15px; } .ctd-article-contents__list .is-level-3 { padding-left: 26px; font-size: 14px; } .ctd-figures, .ctd-swatches, .ctd-stats, .ctd-links { grid-template-columns: minmax(0, 1fr); } .ctd-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctd-bars, .ctd-callout, .ctd-takeaway, .ctd-summary, .ctd-cpa { padding: 18px; } .ctd-bars__row { grid-template-columns: minmax(0, 1fr) 70px; grid-template-areas: 'label value' 'track track'; gap: 6px 10px; margin-bottom: 16px; font-size: 15px; } .ctd-bars__row > :first-child { grid-area: label; } .ctd-bars__track { grid-area: track; } .ctd-bars__value { grid-area: value; } .ctd-callout { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; } .ctd-callout__icon { width: 32px; height: 32px; font-size: 15px; } .ctd-steps li { padding-left: 44px; } .ctd-table { -webkit-overflow-scrolling: touch; } .ctd-article__figure--hero { margin: 0 -16px 18px; } }