/* ============================================================ KeramikFest — стилі для текстових блоків категорій/сторінок Підключити через FTP у тему сайту (наприклад /design/css/ або через адмінку OkayCMS: Дизайн → Редактор шаблонів → підключити цей файл у після основних стилів теми). Всі класи мають префікс "kf-" щоб не конфліктувати з темою. ============================================================ */ .kf-content { font-family: inherit; color: #2c2c2c; line-height: 1.65; } /* ---------- Заголовки ---------- */ .kf-content h2 { font-size: 1.5em; font-weight: 700; color: #1a2340; margin: 1.6em 0 0.7em; padding-bottom: 0.3em; border-bottom: 2px solid #eef1f7; display: flex; align-items: center; gap: 10px; } .kf-content h2 svg { flex-shrink: 0; width: 26px; height: 26px; color: #d4a843; } .kf-content h3 { font-size: 1.15em; font-weight: 700; color: #1a2340; margin: 1.2em 0 0.5em; } /* ---------- Лід-абзац (вступ) ---------- */ .kf-lead { font-size: 1.08em; color: #44464d; background: #f8f6f0; border-left: 4px solid #d4a843; padding: 14px 18px; border-radius: 6px; margin: 0 0 1.2em; } /* ---------- Звичайний абзац ---------- */ .kf-content p { margin: 0 0 1em; } /* ---------- Сітка карток (переваги / категорії) ---------- */ .kf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 1em 0 1.6em; } .kf-card { background: #ffffff; border: 1px solid #e7e9ee; border-radius: 10px; padding: 18px 16px; box-shadow: 0 2px 8px rgba(20, 20, 40, 0.04); transition: transform .15s ease, box-shadow .15s ease; } .kf-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(20, 20, 40, 0.09); } .kf-card-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #d4a843, #b8862f); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .kf-card-icon svg { width: 24px; height: 24px; color: #ffffff; } .kf-card-title { font-weight: 700; font-size: 1.02em; color: #1a2340; text-decoration:none; margin: 0 0 6px; } .kf-card-text { font-size: 0.93em; color: #5a5c66; margin: 0; } /* ---------- Список з іконками-галочками ---------- */ .kf-list-icons { list-style: none; margin: 0 0 1.2em; padding: 0; } .kf-list-icons li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #e7e9ee; } .kf-list-icons li:last-child { border-bottom: none; } .kf-list-icons .kf-ico { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #eef7ee; color: #2f9e44; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .kf-list-icons .kf-ico svg { width: 13px; height: 13px; } /* ---------- Виділений блок (ціна / важлива інформація) ---------- */ .kf-callout { background: #fff8e6; border: 1px solid #f0dca6; border-radius: 10px; padding: 18px 20px; margin: 1.2em 0; display: flex; gap: 14px; align-items: flex-start; } .kf-callout svg { flex-shrink: 0; width: 30px; height: 30px; color: #b8862f; margin-top: 2px; } .kf-callout-title { font-weight: 700; color: #8a661f; margin: 0 0 4px; } .kf-callout p { margin: 0; color: #5a4a1e; } /* ---------- Ряд посилань-пігулок (суміжні категорії) ---------- */ .kf-links-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0.6em 0 1.4em; } .kf-pill { display: inline-flex; align-items: center; gap: 6px; background: #f3f4f8; color: #1a2340 !important; text-decoration: none !important; font-size: 0.9em; font-weight: 600; padding: 8px 14px; border-radius: 20px; border: 1px solid #e2e4ec; transition: background .15s ease, border-color .15s ease; } .kf-pill:hover { background: #1a2340; color: #fff !important; border-color: #1a2340; } .kf-pill svg { width: 14px; height: 14px; } /* ---------- Таблиці всередині .kf-content ---------- */ .kf-content table { width: 100%; border-collapse: collapse; font-size: 0.92em; margin: 0.6em 0 1.4em; } .kf-content table th { background: #1a2340; color: #fff; padding: 8px; } .kf-content table td { padding: 7px 8px; border: 1px solid #e7e9ee; } .kf-content table tr:nth-child(even) td { background: #f8f9fb; } /* ---------- Мобільна адаптація ---------- */ @media (max-width: 640px) { .kf-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .kf-content h2 { font-size: 1.25em; } .kf-callout { flex-direction: column; } }