/*
Theme Name: Base
Theme URI:
Author:
Author URI:
Description: Легкая базовая тема WordPress с правильной структурой и адаптивностью
Version: 1.0.9
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: base
Tags: blog, one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/
/*--------------------------------------------------------------
# Reset & Base
--------------------------------------------------------------*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.2;
margin-bottom: 1em;
}
h1 { font-size: 2.3rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.18rem; }
h6 { font-size: 0.95rem; }
p {
margin-bottom: 1.5em;
}
a {
color: #0073aa;
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #005177;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/*--------------------------------------------------------------
# Lists
--------------------------------------------------------------*/
ul, ol {
margin: 0 0 1.5em 0;
padding-left: 2em;
}
ul {
list-style: disc;
}
ul li {
margin-bottom: 0.75em;
line-height: 1.6;
}
ol {
list-style: decimal;
}
ol li {
margin-bottom: 0.75em;
line-height: 1.6;
padding-left: 0.5em;
}
ol li::marker {
color: #0073aa;
font-weight: 600;
}
ul ul, ol ol, ul ol, ol ul {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
/* Кастомные маркеры только в контенте (не ломают меню/виджеты/пагинацию) */
.entry-content ul,
.comment-content ul,
.archive-description ul {
list-style: none;
padding-left: 0;
}
.entry-content ul li,
.comment-content ul li,
.archive-description ul li {
position: relative;
padding-left: 1.5em;
}
.entry-content ul li::before,
.comment-content ul li::before,
.archive-description ul li::before {
content: '▸';
position: absolute;
left: 0;
color: #0073aa;
font-size: 0.875rem;
line-height: inherit;
}
.entry-content ul ul li::before,
.comment-content ul ul li::before,
.archive-description ul ul li::before {
content: '▹';
}
.entry-content ul ul ul li::before,
.comment-content ul ul ul li::before,
.archive-description ul ul ul li::before {
content: '•';
}
/*--------------------------------------------------------------
# Mark (Highlight) — как маркер в тексте, без «бейджа» и звёзд
--------------------------------------------------------------*/
.entry-content mark,
.comment-content mark,
.archive-description mark,
.page-content mark {
/* лёгкий «маркер» по строке */
background: linear-gradient(
to bottom,
transparent 0%,
transparent 58%,
rgba(255, 214, 102, 0.55) 58%,
rgba(255, 214, 102, 0.55) 100%
);
background-color: transparent;
color: inherit;
padding: 0 0.12em;
margin: 0;
border: none;
border-radius: 0.12em;
font-weight: inherit;
font-style: inherit;
box-shadow: none;
display: inline;
line-height: inherit;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* Отдельный блок … (рерайт: важная мысль абзацем) */
.entry-content > mark,
.comment-content > mark,
.archive-description > mark,
.page-content > mark,
.entry-content p > mark:only-child {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 1.35em 0;
padding: 0.9em 1.15em 0.9em 1.2em;
background: #fffbeb;
background-image: none;
border: none;
border-left: 3px solid #e0a800;
border-radius: 0 6px 6px 0;
color: #2a2a2a;
font-weight: 500;
line-height: 1.55;
box-shadow: none;
}
/* без декоративных символов */
.entry-content mark::before,
.comment-content mark::before,
.archive-description mark::before,
.page-content mark::before,
mark::before {
content: none !important;
display: none !important;
}
/* fallback, если mark вне .entry-content */
mark {
background: linear-gradient(
to bottom,
transparent 0%,
transparent 58%,
rgba(255, 214, 102, 0.55) 58%,
rgba(255, 214, 102, 0.55) 100%
);
color: inherit;
padding: 0 0.12em;
border: none;
font-weight: inherit;
box-shadow: none;
}
/*--------------------------------------------------------------
# Tables
--------------------------------------------------------------*/
table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
background-color: #fff;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
thead {
background-color: #0073aa;
color: #fff;
}
thead th {
padding: 12px 15px;
text-align: left;
font-weight: 600;
font-size: 0.9375rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
tbody tr {
border-bottom: 1px solid #e5e5e5;
transition: background-color 0.2s ease;
}
tbody tr:hover {
background-color: #f8f9fa;
}
tbody tr:last-child {
border-bottom: none;
}
tbody td {
padding: 12px 15px;
font-size: 0.9375rem;
line-height: 1.6;
color: #333;
}
tbody th {
padding: 12px 15px;
font-weight: 600;
text-align: left;
color: #333;
}
tfoot {
background-color: #f8f9fa;
border-top: 2px solid #e5e5e5;
}
tfoot td,
tfoot th {
padding: 12px 15px;
font-weight: 600;
color: #333;
}
/* Адаптивность для таблиц */
@media screen and (max-width: 768px) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
thead th,
tbody td,
tbody th,
tfoot td,
tfoot th {
padding: 10px 12px;
font-size: 0.875rem;
}
}
/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.site {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.site-header {
width: 100%;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 40px;
}
.site-header-inner {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
display: flex;
align-items: center;
gap: 24px;
}
.site-branding {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
flex: 0 1 auto;
min-width: 0;
max-width: 52%;
}
.custom-logo-link {
display: inline-flex;
justify-content: flex-start;
margin: 0;
flex-shrink: 0;
}
.site-branding-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 0;
}
.site-title {
font-size: 1.35rem;
font-weight: 500;
margin: 0;
line-height: 1.25;
}
.site-title a {
color: #333;
}
.site-description {
font-size: 0.875rem;
color: #666;
margin: 0;
line-height: 1.35;
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
.main-navigation {
margin-top: 0;
margin-left: auto;
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 1 auto;
}
.main-navigation ul,
.main-navigation .menu {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
justify-content: flex-end;
width: 100%;
}
.main-navigation li {
padding-left: 0;
margin-bottom: 0;
line-height: inherit;
}
.main-navigation li::before {
content: none;
}
.main-navigation a {
display: inline-block;
color: #2f2f2f;
font-weight: 500;
padding: 8px 12px;
border-radius: 8px;
transition: color 0.2s ease, background-color 0.2s ease;
}
.main-navigation a:hover {
color: #0b5f86;
background-color: #f3f7fa;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_parent > a {
color: #0b5f86;
background-color: #eaf3f8;
}
.menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
margin: 0;
background: #fff;
border: 1px solid #d8d8d8;
border-radius: 10px;
cursor: pointer;
color: #2f2f2f;
flex-shrink: 0;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.menu-toggle:hover {
background-color: #f3f7fa;
border-color: #bfd8e6;
color: #0b5f86;
}
.menu-toggle:focus-visible {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
.menu-toggle-box {
position: relative;
display: block;
width: 20px;
height: 14px;
}
.menu-toggle-bar {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background-color: currentColor;
transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.menu-toggle-bar:nth-child(1) { top: 0; }
.menu-toggle-bar:nth-child(2) { top: 6px; }
.menu-toggle-bar:nth-child(3) { top: 12px; }
/* Бургер → крестик */
.main-navigation.toggled .menu-toggle {
background-color: #eaf3f8;
border-color: #9ec9df;
color: #0b5f86;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.12);
}
.main-navigation.toggled .menu-toggle-bar:nth-child(1) {
top: 6px;
transform: rotate(45deg);
}
.main-navigation.toggled .menu-toggle-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.main-navigation.toggled .menu-toggle-bar:nth-child(3) {
top: 6px;
transform: rotate(-45deg);
}
/* Блокировка скролла при открытом мобильном меню */
body.nav-open {
overflow: hidden;
touch-action: none;
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.content-area {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
margin-bottom: 40px;
}
body:not(.has-sidebar-dom) .content-area {
grid-template-columns: 1fr;
}
.site-main {
min-width: 0;
/* Белая «плита» поверх фонового узора body (страницы и записи) */
background-color: #fff;
border-radius: 12px;
padding: 28px 32px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* Сайдбар тоже на белом, чтобы не «висел» на узоре */
.widget-area {
background-color: #fff;
border-radius: 12px;
padding: 20px 22px;
box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
align-self: start;
}
body:not(.singular) .archive-wrapper {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Универсальная сетка карточек */
.posts-grid {
display: flex;
flex-wrap: wrap;
justify-content: center; /* неполный последний ряд — по центру */
gap: 20px;
}
/* Универсальная карточка */
.posts-grid > .post {
margin: 0;
padding: 15px;
border: 1px solid #e5e5e5;
border-radius: 8px;
background: #fff;
display: flex;
flex-direction: column;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease, transform 0.2s ease;
flex: 0 0 calc((100% - 60px) / 4);
max-width: calc((100% - 60px) / 4);
box-sizing: border-box;
position: relative;
}
.posts-grid > .post:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.post-card-link {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
}
.post-card-link:focus-visible {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
/* Клик по всей плитке идёт на post-card-link; отдельно кликабельны только ссылки в подвале. */
.posts-grid > .post .entry-header,
.posts-grid > article .entry-header,
.posts-grid > .post .post-thumbnail,
.posts-grid > article .post-thumbnail,
.posts-grid > .post .entry-content,
.posts-grid > article .entry-content,
.posts-grid > .post .entry-footer,
.posts-grid > article .entry-footer,
.base-posts-tiles-grid > .post .entry-header,
.base-posts-tiles-grid > article .entry-header,
.base-posts-tiles-grid > .post .post-thumbnail,
.base-posts-tiles-grid > article .post-thumbnail,
.base-posts-tiles-grid > .post .entry-content,
.base-posts-tiles-grid > article .entry-content,
.base-posts-tiles-grid > .post .entry-footer,
.base-posts-tiles-grid > article .entry-footer,
.related-posts-section .posts-grid > .post .entry-header,
.related-posts-section .posts-grid > article .entry-header,
.related-posts-section .posts-grid > .post .post-thumbnail,
.related-posts-section .posts-grid > article .post-thumbnail,
.related-posts-section .posts-grid > .post .entry-content,
.related-posts-section .posts-grid > article .entry-content,
.related-posts-section .posts-grid > .post .entry-footer,
.related-posts-section .posts-grid > article .entry-footer {
pointer-events: none;
}
.posts-grid > .post .entry-footer a,
.posts-grid > article .entry-footer a,
.base-posts-tiles-grid > .post .entry-footer a,
.base-posts-tiles-grid > article .entry-footer a,
.related-posts-section .posts-grid > .post .entry-footer a,
.related-posts-section .posts-grid > article .entry-footer a {
position: relative;
z-index: 3;
pointer-events: auto;
}
.post-thumbnail {
text-align: center;
display: flex;
justify-content: center;
}
.post-thumbnail img {
width: 330px;
height: auto;
}
/* На одиночных страницах не фиксируем ширину картинки */
/* Плиточная миниатюра */
.posts-grid > .post .post-thumbnail {
margin: 0 0 10px;
border-radius: 6px;
overflow: hidden;
height: 150px;
align-items: center;
}
.posts-grid > .post .post-thumbnail img {
max-height: 100%;
object-fit: contain;
object-position: center;
}
@media screen and (max-width: 1200px) {
.posts-grid > .post {
flex: 0 0 calc((100% - 40px) / 3);
max-width: calc((100% - 40px) / 3);
}
}
@media screen and (max-width: 768px) {
.posts-grid > .post {
flex: 0 0 calc((100% - 20px) / 2);
max-width: calc((100% - 20px) / 2);
}
}
@media screen and (max-width: 480px) {
.posts-grid > .post {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Базовые стили для миниатюр */
.post-thumbnail {
text-align: center;
}
/* Миниатюра на одиночных страницах */
.single .post-thumbnail,
.page .post-thumbnail {
margin: 0 auto 30px;
text-align: center;
max-width: 100%;
display: block;
}
.single .post-thumbnail img,
.page .post-thumbnail img {
margin: 0 auto;
display: block;
}
.single .post:last-child {
border-bottom: none;
}
.entry-header {
margin-bottom: 12px;
}
/* Заголовки в плитках (универсальные для всех карточек) */
.posts-grid > .post:not(.type-page) .entry-title,
.posts-grid > article:not(.type-page) .entry-title,
.posts-grid > .post.type-post .entry-title,
.posts-grid > article.type-post .entry-title,
.base-posts-tiles-grid > .post .entry-title,
.base-posts-tiles-grid > article .entry-title,
.posts-grid > .post-card .entry-title {
font-size: 1rem;
margin-bottom: 8px;
line-height: 1.3;
height: 2.6em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
color: #333;
}
.posts-grid > .post:not(.type-page) .entry-title a,
.posts-grid > article:not(.type-page) .entry-title a,
.posts-grid > .post.type-post .entry-title a,
.posts-grid > article.type-post .entry-title a,
.base-posts-tiles-grid > .post .entry-title a,
.base-posts-tiles-grid > article .entry-title a {
text-align: center;
}
/* Для shortcode внутри entry-content */
.entry-content .base-posts-tiles-grid > .post .entry-title,
.entry-content .base-posts-tiles-grid > article .entry-title,
.post .entry-content .base-posts-tiles-grid > .post .entry-title,
.post .entry-content .base-posts-tiles-grid > article .entry-title {
font-size: 1rem !important;
margin-bottom: 8px !important;
line-height: 1.3 !important;
height: 2.6em !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
text-align: center !important;
}
.entry-content .base-posts-tiles-grid > .post .entry-title a,
.entry-content .base-posts-tiles-grid > article .entry-title a,
.post .entry-content .base-posts-tiles-grid > .post .entry-title a,
.post .entry-content .base-posts-tiles-grid > article .entry-title a {
text-align: center !important;
}
/* Заголовки на одиночных страницах */
.single .entry-title {
font-size: 1.75rem;
margin-bottom: 10px;
}
.entry-title a {
color: #333;
}
.entry-title a:hover {
color: #0073aa;
}
.entry-meta {
font-size: 0.75rem;
color: #666;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
/* Мета-информация в плитках */
.posts-grid > .post:not(.type-page) .entry-meta,
.posts-grid > article:not(.type-page) .entry-meta,
.posts-grid > .post.type-post .entry-meta,
.posts-grid > article.type-post .entry-meta,
.base-posts-tiles-grid > .post .entry-meta,
.base-posts-tiles-grid > article .entry-meta {
margin-bottom: 8px;
}
.entry-content .base-posts-tiles-grid > .post .entry-meta,
.entry-content .base-posts-tiles-grid > article .entry-meta,
.post .entry-content .base-posts-tiles-grid > .post .entry-meta,
.post .entry-content .base-posts-tiles-grid > article .entry-meta {
margin-bottom: 8px !important;
}
body.single .entry-meta {
font-size: 1.125rem;
}
body.single .entry-header .entry-meta {
margin-bottom: 30px;
}
body.single .entry-title {
text-align: center;
margin-bottom: 40px;
}
.entry-meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.entry-meta .posted-on::before {
content: '◷';
font-family: inherit;
font-size: 0.85rem;
color: #0073aa;
line-height: 1;
}
.entry-meta .byline::before {
content: '☺';
font-family: inherit;
font-size: 0.85rem;
color: #0073aa;
line-height: 1;
}
body.single .entry-meta .posted-on::before,
body.single .entry-meta .byline::before {
font-size: 1.05rem;
}
/* Изображения в плитках (универсальные) */
.posts-grid > .post:not(.type-page) .post-thumbnail,
.posts-grid > article:not(.type-page) .post-thumbnail,
.posts-grid > .post.type-post .post-thumbnail,
.posts-grid > article.type-post .post-thumbnail,
.base-posts-tiles-grid > .post .post-thumbnail,
.base-posts-tiles-grid > article .post-thumbnail {
margin: 0 auto 10px;
border-radius: 6px;
overflow: hidden;
height: 150px;
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
}
.posts-grid > .post:not(.type-page) .post-thumbnail a,
.posts-grid > article:not(.type-page) .post-thumbnail a,
.posts-grid > .post.type-post .post-thumbnail a,
.posts-grid > article.type-post .post-thumbnail a,
.base-posts-tiles-grid > .post .post-thumbnail a,
.base-posts-tiles-grid > article .post-thumbnail a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.posts-grid > .post:not(.type-page) .post-thumbnail img,
.posts-grid > article:not(.type-page) .post-thumbnail img,
.posts-grid > .post.type-post .post-thumbnail img,
.posts-grid > article.type-post .post-thumbnail img,
.base-posts-tiles-grid > .post .post-thumbnail img,
.base-posts-tiles-grid > article .post-thumbnail img {
max-width: 100%;
max-height: 100%;
width: 330px;
height: auto;
object-fit: contain;
object-position: center;
display: block;
margin: 0 auto;
}
.posts-grid > .post:not(.type-page) .post-thumbnail,
.posts-grid > article:not(.type-page) .post-thumbnail,
.posts-grid > .post.type-post .post-thumbnail,
.posts-grid > article.type-post .post-thumbnail,
.base-posts-tiles-grid > .post .post-thumbnail,
.base-posts-tiles-grid > article .post-thumbnail {
display: flex;
justify-content: center;
align-items: center;
}
/* Изображения для shortcode внутри entry-content */
.entry-content .base-posts-tiles-grid > .post .post-thumbnail,
.entry-content .base-posts-tiles-grid > article .post-thumbnail,
.post .entry-content .base-posts-tiles-grid > .post .post-thumbnail,
.post .entry-content .base-posts-tiles-grid > article .post-thumbnail {
margin-bottom: 10px !important;
border-radius: 6px !important;
overflow: hidden !important;
height: 150px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.entry-content .base-posts-tiles-grid > .post .post-thumbnail a,
.entry-content .base-posts-tiles-grid > article .post-thumbnail a,
.post .entry-content .base-posts-tiles-grid > .post .post-thumbnail a,
.post .entry-content .base-posts-tiles-grid > article .post-thumbnail a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
.entry-content .base-posts-tiles-grid > .post .post-thumbnail img,
.entry-content .base-posts-tiles-grid > article .post-thumbnail img,
.post .entry-content .base-posts-tiles-grid > .post .post-thumbnail img,
.post .entry-content .base-posts-tiles-grid > article .post-thumbnail img {
max-width: 100% !important;
max-height: 100% !important;
width: 330px !important;
height: auto !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
margin: 0 auto !important;
}
.entry-content {
margin-bottom: 12px;
width: 100%;
max-width: 100%;
}
/*--------------------------------------------------------------
# Content images (по центру в записях/страницах)
--------------------------------------------------------------*/
.entry-content img,
.comment-content img,
.archive-description img {
max-width: 100%;
height: auto;
display: block;
}
/* WP align* + figure / Gutenberg */
.entry-content .aligncenter,
.entry-content img.aligncenter,
.entry-content figure.aligncenter,
.entry-content .wp-block-image,
.entry-content .wp-block-image figure,
.entry-content .wp-block-image img,
.comment-content .aligncenter,
.comment-content img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1.25em;
margin-bottom: 1.25em;
text-align: center;
float: none;
clear: both;
}
.entry-content .wp-block-image {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.entry-content .wp-block-image img,
.entry-content figure img {
margin-top: 0;
margin-bottom: 0;
}
/* Картинка одна в абзаце — тоже по центру */
.entry-content p:has(> img:only-child),
.entry-content p:has(> a:only-child > img:only-child) {
text-align: center;
}
.entry-content p > img:only-child,
.entry-content p > a:only-child > img:only-child {
display: inline-block;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
/* left/right — если понадобятся, не ломаем */
.entry-content .alignleft,
.entry-content img.alignleft {
float: left;
margin: 0.4em 1.25em 1em 0;
clear: left;
}
.entry-content .alignright,
.entry-content img.alignright {
float: right;
margin: 0.4em 0 1em 1.25em;
clear: right;
}
.entry-content .alignnone,
.entry-content img.alignnone {
margin: 1em 0;
}
/* Убеждаемся что entry-content на одиночных страницах не ограничен */
.single .entry-content,
.page .entry-content {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* Контент в плитках (универсальные) */
.posts-grid > .post:not(.type-page) .entry-content,
.posts-grid > article:not(.type-page) .entry-content,
.posts-grid > .post.type-post .entry-content,
.posts-grid > article.type-post .entry-content,
.base-posts-tiles-grid > .post .entry-content,
.base-posts-tiles-grid > article .entry-content {
margin-bottom: 10px;
flex-grow: 1;
}
.posts-grid > .post:not(.type-page) .entry-content p,
.posts-grid > article:not(.type-page) .entry-content p,
.posts-grid > .post.type-post .entry-content p,
.posts-grid > article.type-post .entry-content p,
.base-posts-tiles-grid > .post .entry-content p,
.base-posts-tiles-grid > article .entry-content p {
margin-bottom: 0.5em;
font-size: 0.875rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center;
}
.posts-grid > .post:not(.type-page) .entry-summary,
.posts-grid > article:not(.type-page) .entry-summary,
.posts-grid > .post.type-post .entry-summary,
.posts-grid > article.type-post .entry-summary,
.base-posts-tiles-grid > .post .entry-summary,
.base-posts-tiles-grid > article .entry-summary {
text-align: center;
}
.entry-content .base-posts-tiles-grid > .post .entry-content,
.entry-content .base-posts-tiles-grid > article .entry-content,
.post .entry-content .base-posts-tiles-grid > .post .entry-content,
.post .entry-content .base-posts-tiles-grid > article .entry-content {
margin-bottom: 10px !important;
flex-grow: 1 !important;
}
.entry-content .base-posts-tiles-grid > .post .entry-content p,
.entry-content .base-posts-tiles-grid > article .entry-content p,
.post .entry-content .base-posts-tiles-grid > .post .entry-content p,
.post .entry-content .base-posts-tiles-grid > article .entry-content p {
margin-bottom: 0.5em !important;
font-size: 0.875rem !important;
line-height: 1.4 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-align: center !important;
}
.entry-content p {
margin-bottom: 1em;
}
.entry-footer {
font-size: 0.75rem;
color: #666;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e5e5e5;
text-align: center;
}
/* Footer в плитках (универсальные) */
.posts-grid > .post:not(.type-page) .entry-footer,
.posts-grid > article:not(.type-page) .entry-footer,
.posts-grid > .post.type-post .entry-footer,
.posts-grid > article.type-post .entry-footer,
.base-posts-tiles-grid > .post .entry-footer,
.base-posts-tiles-grid > article .entry-footer {
margin-top: auto;
}
.entry-content .base-posts-tiles-grid > .post .entry-footer,
.entry-content .base-posts-tiles-grid > article .entry-footer,
.post .entry-content .base-posts-tiles-grid > .post .entry-footer,
.post .entry-content .base-posts-tiles-grid > article .entry-footer {
margin-top: auto !important;
}
.entry-footer a {
margin-right: 12px;
}
.entry-footer .cat-links {
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
}
/* Иконка «папка» для категории (SVG, без Font Awesome) */
.entry-footer .cat-links::before {
content: '';
display: inline-block;
width: 0.95em;
height: 0.95em;
flex-shrink: 0;
background-color: #0073aa;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/*--------------------------------------------------------------
# Related Posts Widget
--------------------------------------------------------------*/
.related-posts-grid {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 15px;
}
.related-post-item {
display: flex;
flex-direction: row;
border: 1px solid #e5e5e5;
border-radius: 6px;
overflow: hidden;
background: #fff;
transition: box-shadow 0.2s ease, transform 0.2s ease;
width: 100%;
gap: 12px;
}
.related-post-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.related-post-thumbnail {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
min-width: 80px;
height: 80px;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.related-post-thumbnail img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
object-position: center;
display: block;
transition: transform 0.3s ease;
}
.related-post-item:hover .related-post-thumbnail img {
transform: none;
}
.related-post-content {
padding: 10px 10px 10px 0;
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
}
.related-post-title {
margin: 0 0 8px 0;
font-size: 0.875rem;
line-height: 1.3;
font-weight: 600;
text-align: center;
}
.related-post-title a {
color: #333;
text-decoration: none;
transition: color 0.2s ease;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center;
}
.related-post-title a:hover {
color: #0073aa;
}
.related-post-meta {
font-size: 0.75rem;
color: #666;
margin-top: auto;
}
.related-post-date {
display: flex;
align-items: center;
gap: 4px;
}
.related-post-date::before {
content: '◷';
font-family: inherit;
color: #0073aa;
}
/*--------------------------------------------------------------
# Related Posts Section (tiles at bottom of single posts)
--------------------------------------------------------------*/
.related-posts-section {
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid #e5e5e5;
}
.related-posts-title {
font-size: 2rem;
font-weight: 600;
margin-bottom: 30px;
color: #333;
text-align: center;
}
/* Специфичные стили для related-posts (уже определены выше в универсальных) */
/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.widget-area {
min-width: 0;
}
.widget {
margin-bottom: 40px;
padding: 20px;
border-radius: 5px;
}
.widget-title {
font-size: 1.25rem;
margin-bottom: 15px;
font-weight: 600;
}
.widget ul {
list-style: none;
}
.widget li {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e5e5;
}
.widget li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/*--------------------------------------------------------------
# Tag Cloud (sidebar widget)
--------------------------------------------------------------*/
.widget_tag_cloud .widget-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding-bottom: 0.65rem;
border-bottom: 2px solid #eaf3f8;
color: #1a1a1a;
}
.widget_tag_cloud .widget-title::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, #0073aa 0%, #00a0d2 100%);
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
flex-shrink: 0;
}
.tagcloud {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
line-height: 1.2;
}
/* Сбрасываем inline font-size WP — единый «чип» выглядит аккуратнее */
.tagcloud a.tag-cloud-link,
.tagcloud a {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8125rem !important;
font-weight: 500;
line-height: 1.25 !important;
letter-spacing: 0.01em;
color: #0b5f86 !important;
background: linear-gradient(180deg, #f7fbfe 0%, #eef6fb 100%);
border: 1px solid #cfe3ef;
border-radius: 999px;
padding: 0.4rem 0.85rem !important;
margin: 0 !important;
text-decoration: none !important;
box-shadow: 0 1px 2px rgba(11, 95, 134, 0.06);
transition:
color 0.18s ease,
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
max-width: 100%;
word-break: break-word;
}
.tagcloud a.tag-cloud-link:hover,
.tagcloud a.tag-cloud-link:focus,
.tagcloud a:hover,
.tagcloud a:focus {
color: #fff !important;
background: linear-gradient(135deg, #0073aa 0%, #00a0d2 100%);
border-color: transparent;
box-shadow: 0 4px 12px rgba(0, 115, 170, 0.28);
transform: translateY(-1px);
outline: none;
}
.tagcloud a.tag-cloud-link:focus-visible,
.tagcloud a:focus-visible {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
.tagcloud a.tag-cloud-link:active,
.tagcloud a:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 115, 170, 0.2);
}
/* Популярные метки (крупный inline size от WP) — чуть заметнее */
.tagcloud a.tag-cloud-link[style*="22pt"],
.tagcloud a.tag-cloud-link[style*="20pt"],
.tagcloud a.tag-cloud-link[style*="18pt"],
.tagcloud a.tag-cloud-link[style*="16pt"] {
font-weight: 600;
background: linear-gradient(180deg, #eaf3f8 0%, #dceef8 100%);
border-color: #9ec9df;
box-shadow: 0 1px 3px rgba(0, 115, 170, 0.1);
}
/*--------------------------------------------------------------
# Categories Widget (рубрики)
--------------------------------------------------------------*/
.widget_categories .widget-title,
.widget_block .wp-block-categories .wp-block-heading,
.wp-block-categories .wp-block-heading {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding-bottom: 0.65rem;
border-bottom: 2px solid #eaf3f8;
color: #1a1a1a;
}
.widget_categories .widget-title::before {
content: "";
display: inline-block;
width: 1.05em;
height: 1.05em;
flex-shrink: 0;
background-color: #0073aa;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.widget_categories > ul,
.widget_categories .wp-block-categories,
.wp-block-categories-list {
list-style: none !important;
margin: 0 !important;
padding: 0.35rem !important;
display: flex;
flex-direction: column;
gap: 0.35rem;
background: linear-gradient(180deg, #f8fbfd 0%, #f3f8fc 100%);
border: 1px solid #e2eef6;
border-radius: 12px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.widget_categories ul ul {
list-style: none !important;
margin: 0.35rem 0 0 0 !important;
padding: 0 0 0 0.65rem !important;
border-left: 2px solid #d4e8f4;
display: flex;
flex-direction: column;
gap: 0.3rem;
background: transparent;
border-radius: 0;
box-shadow: none;
border-top: none;
border-right: none;
border-bottom: none;
}
.widget_categories li,
.widget_categories .cat-item,
.wp-block-categories-list li {
margin: 0 !important;
padding: 0 !important;
border: none !important;
list-style: none !important;
}
.widget_categories .cat-item > a,
.wp-block-categories-list li > a {
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: 0.55rem 0.7rem;
border-radius: 9px;
color: #1e3a4c !important;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.3;
text-decoration: none !important;
background: #fff;
border: 1px solid transparent;
box-shadow: 0 1px 2px rgba(15, 60, 90, 0.04);
transition:
color 0.18s ease,
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.widget_categories .cat-item > a::before,
.wp-block-categories-list li > a::before {
content: "";
display: inline-block;
width: 0.95em;
height: 0.95em;
flex-shrink: 0;
background-color: #7aa8c4;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
transition: background-color 0.18s ease;
}
.widget_categories .cat-item > a .cat-name,
.wp-block-categories-list li > a .cat-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Счётчик: badge справа */
.widget_categories .cat-count,
.wp-block-categories .cat-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.85rem;
height: 1.4rem;
padding: 0 0.45rem;
margin-left: auto;
flex-shrink: 0;
font-size: 0.72rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
color: #0b5f86;
background: linear-gradient(180deg, #eef6fb 0%, #e2f0f8 100%);
border: 1px solid #c5ddea;
border-radius: 999px;
line-height: 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
transition:
color 0.18s ease,
background 0.18s ease,
border-color 0.18s ease;
}
/* Если count не обёрнут — li держит ссылку + текст "(N)" */
.widget_categories .cat-item:not(:has(.cat-count)) {
display: flex;
align-items: center;
gap: 0.4rem;
}
.widget_categories .cat-item:not(:has(.cat-count)) > a {
flex: 1 1 auto;
}
.widget_categories .cat-item > a:hover,
.widget_categories .cat-item > a:focus,
.wp-block-categories-list li > a:hover,
.wp-block-categories-list li > a:focus {
color: #fff !important;
background: linear-gradient(135deg, #0073aa 0%, #00a0d2 100%);
border-color: transparent;
box-shadow: 0 4px 14px rgba(0, 115, 170, 0.28);
transform: translateY(-1px);
outline: none;
}
.widget_categories .cat-item > a:hover::before,
.widget_categories .cat-item > a:focus::before,
.wp-block-categories-list li > a:hover::before,
.wp-block-categories-list li > a:focus::before {
background-color: #fff;
}
.widget_categories .cat-item > a:hover .cat-count,
.widget_categories .cat-item > a:focus .cat-count,
.wp-block-categories-list li > a:hover .cat-count,
.wp-block-categories-list li > a:focus .cat-count {
color: #fff;
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.35);
box-shadow: none;
}
.widget_categories .cat-item > a:focus-visible,
.wp-block-categories-list li > a:focus-visible {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
.widget_categories .cat-item > a:active,
.wp-block-categories-list li > a:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 115, 170, 0.2);
}
/* Текущая рубрика */
.widget_categories .current-cat > a,
.wp-block-categories-list .current-cat > a {
color: #0b5f86 !important;
background: linear-gradient(180deg, #eaf4fb 0%, #dceef8 100%);
border-color: #9ec9df;
box-shadow: 0 1px 4px rgba(0, 115, 170, 0.12);
font-weight: 600;
}
.widget_categories .current-cat > a::before,
.wp-block-categories-list .current-cat > a::before {
background-color: #0073aa;
}
.widget_categories .current-cat > a .cat-count {
background: linear-gradient(180deg, #d6ebf7 0%, #c5e2f3 100%);
border-color: #8fbfda;
color: #065a82;
}
/* Dropdown-режим */
.widget_categories select,
.widget_categories .postform {
width: 100%;
appearance: none;
-webkit-appearance: none;
padding: 0.65rem 2.25rem 0.65rem 0.85rem;
font-size: 0.9rem;
font-weight: 500;
color: #1e3a4c;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230073aa' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
border: 1px solid #cfe3ef;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(11, 95, 134, 0.06);
cursor: pointer;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.widget_categories select:hover,
.widget_categories .postform:hover,
.widget_categories select:focus,
.widget_categories .postform:focus {
border-color: #0073aa;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.12);
outline: none;
}
/* Метки в подвале записи (те же чипы, что в облаке) */
.entry-footer .tags-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin-top: 0.85rem;
width: 100%;
}
.entry-footer .tags-links a {
display: inline-flex;
align-items: center;
margin-right: 0 !important;
font-size: 0.8125rem;
font-weight: 500;
color: #0b5f86;
background: linear-gradient(180deg, #f7fbfe 0%, #eef6fb 100%);
border: 1px solid #cfe3ef;
border-radius: 999px;
padding: 0.35rem 0.75rem;
text-decoration: none;
transition:
color 0.18s ease,
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease;
}
.entry-footer .tags-links a:hover,
.entry-footer .tags-links a:focus {
color: #fff;
background: linear-gradient(135deg, #0073aa 0%, #00a0d2 100%);
border-color: transparent;
box-shadow: 0 4px 12px rgba(0, 115, 170, 0.28);
transform: translateY(-1px);
}
/*--------------------------------------------------------------
# Search Form
--------------------------------------------------------------*/
.search-form {
display: flex;
gap: 0;
align-items: stretch;
}
.search-form label {
flex: 1;
display: flex;
flex-direction: column;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.skip-link:focus {
position: fixed;
top: 10px;
left: 10px;
z-index: 100000;
width: auto;
height: auto;
padding: 12px 20px;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
background-color: #0073aa;
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.search-field {
width: 100%;
padding: 8px 15px;
border: 1px solid #ddd;
border-right: none;
border-radius: 10px 0 0 10px;
font-size: 0.9375rem;
font-family: inherit;
line-height: 1.5;
color: #333;
background-color: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-field:focus {
outline: none;
border-color: #0073aa;
box-shadow: none;
z-index: 1;
position: relative;
}
.search-field:focus + .search-submit {
border-color: #0073aa;
}
.search-field::placeholder {
color: #999;
}
.search-submit {
padding: 8px 24px;
border: 1px solid #ddd;
border-left: none;
border-radius: 0 10px 10px 0;
background-color: #0073aa;
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
white-space: nowrap;
}
.search-submit:hover {
background-color: #005177;
border-color: #005177;
}
.search-submit:active {
transform: translateY(1px);
}
.search-submit:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.3);
}
/*--------------------------------------------------------------
# Archive Header
--------------------------------------------------------------*/
.archive-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.archive-title {
font-size: 2rem;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
.archive-title span {
font-weight: 400;
color: #666;
}
.archive-description {
font-size: 1rem;
color: #666;
line-height: 1.6;
margin-top: 10px;
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
margin-bottom: 25px;
padding: 0;
font-size: 0.875rem;
line-height: 1.5;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
}
.breadcrumbs a {
color: #0073aa;
text-decoration: none;
transition: color 0.2s ease;
display: inline-flex;
align-items: center;
padding: 4px 0;
}
.breadcrumbs a:hover {
color: #005177;
text-decoration: underline;
}
.breadcrumbs a:not(:last-child)::after {
content: '›';
font-family: inherit;
margin: 0 10px;
color: #0073aa;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
line-height: 1;
}
.breadcrumbs a:not(:last-child):hover::after {
text-decoration: none;
}
.breadcrumbs span {
color: #666;
font-weight: 400;
display: inline-flex;
align-items: center;
padding: 4px 0;
}
.breadcrumbs > a:first-child::before {
content: '⌂';
font-family: inherit;
margin-right: 8px;
font-size: 0.95rem;
color: #0073aa;
line-height: 1;
}
/*--------------------------------------------------------------
# 404 Error Page
--------------------------------------------------------------*/
.error-404 {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
}
.error-404-content {
max-width: 600px;
width: 100%;
text-align: center;
}
.error-header {
margin-bottom: 30px;
}
.error-title {
font-size: 8rem;
font-weight: 700;
color: #0073aa;
line-height: 1;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.error-subtitle {
font-size: 2rem;
font-weight: 600;
color: #333;
margin-bottom: 0;
}
.error-description {
margin-bottom: 40px;
font-size: 1.125rem;
color: #666;
line-height: 1.6;
}
.error-actions {
margin-bottom: 50px;
}
.error-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background-color: #0073aa;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 500;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.error-button:hover {
background-color: #005177;
color: #fff;
transform: translateY(-2px);
}
.error-button:active {
transform: translateY(0);
}
.error-button-icon {
font-size: 1.15rem;
line-height: 1;
}
/*--------------------------------------------------------------
# Gallery Grid
--------------------------------------------------------------*/
.gallery-grid {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Центрирует картинки в ряду */
gap: 15px; /* Отступ между плитками */
}
.gallery-grid a {
/* Вычисляем ширину: (100% / 4) минус поправка на отступы gap */
flex: 0 0 calc(25% - 15px);
box-sizing: border-box;
}
.gallery-grid img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Скрываем лишние теги
, если вы не можете удалить их из HTML */
.gallery-grid br {
display: none;
}
/*--------------------------------------------------------------
# Image Tiles
--------------------------------------------------------------*/
.image-tiles {
margin: 24px 0;
}
.image-tiles-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.image-tiles-item {
flex: 0 0 calc((100% - 30px) / 3);
max-width: calc((100% - 30px) / 3);
}
.image-tiles-link {
display: block;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
}
.image-tiles-img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.2s ease;
}
.image-tiles-link:hover .image-tiles-img {
transform: scale(1.02);
}
@media screen and (max-width: 768px) {
.image-tiles-item {
flex: 0 0 calc((100% - 15px) / 2);
max-width: calc((100% - 15px) / 2);
}
}
@media screen and (max-width: 480px) {
.image-tiles-item {
flex: 0 0 100%;
max-width: 100%;
}
}
/*--------------------------------------------------------------
# Download Button
--------------------------------------------------------------*/
.mwindows {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 30px;
background-color: #0073aa;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 500;
transition: background-color 0.2s ease, transform 0.1s ease;
margin: 20px auto;
text-align: center;
}
/* Центрирование кнопки */
p .mwindows,
div .mwindows,
.entry-content .mwindows {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
/* Облачко + стрелка (SVG, без Font Awesome) */
.mwindows::before {
content: '';
display: inline-block;
width: 1.2em;
height: 1.2em;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mwindows:hover {
background-color: #005177;
color: #fff;
transform: translateY(-2px);
}
.mwindows:active {
transform: translateY(0);
}
.mwindows:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.3);
}
/* Кнопка скачивания по классу .dlink */
.dlink {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
border: 1px solid #0073aa;
border-radius: 10px;
background: linear-gradient(135deg, #0073aa 0%, #005177 100%);
color: #fff;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
box-shadow: 0 6px 16px rgba(0, 115, 170, 0.25);
transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.dlink::before {
content: '';
display: inline-block;
width: 1.15em;
height: 1.15em;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dlink:hover {
color: #fff;
background: linear-gradient(135deg, #0b84bf 0%, #00628f 100%);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(0, 115, 170, 0.3);
}
.dlink:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(0, 115, 170, 0.2);
}
.dlink:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.28), 0 8px 20px rgba(0, 115, 170, 0.3);
}
/* Удобное центрирование кнопки в контенте записи */
.entry-content .dlink {
display: flex;
width: fit-content;
margin: 10px auto 18px;
}
.error-search {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #e5e5e5;
}
.error-search h3 {
font-size: 1.25rem;
font-weight: 600;
color: #333;
margin-bottom: 20px;
}
.error-search .search-form {
justify-content: center;
max-width: 400px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.error-title {
font-size: 5rem;
}
.error-subtitle {
font-size: 1.5rem;
}
.error-description {
font-size: 1rem;
}
}
/*--------------------------------------------------------------
# No Results / Not Found
--------------------------------------------------------------*/
.no-results {
padding: 40px 20px;
text-align: center;
}
.no-results .page-header {
margin-bottom: 30px;
}
.no-results .page-title {
font-size: 2rem;
font-weight: 600;
color: #333;
margin-bottom: 20px;
}
.no-results .page-content {
font-size: 1.125rem;
color: #666;
line-height: 1.6;
}
.no-results .page-content p {
margin-bottom: 30px;
}
.search-form-wrapper {
max-width: 500px;
margin: 30px auto 0;
}
/*--------------------------------------------------------------
# Comments
--------------------------------------------------------------*/
.comments-area {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #e5e5e5;
}
.comments-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 30px;
color: #333;
}
.comment-list {
list-style: none;
margin: 0 0 30px 0;
padding: 0;
}
.comment-list .comment {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #e5e5e5;
}
.comment-list .comment:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.comment-body {
display: flex;
gap: 15px;
}
.comment-author-avatar {
flex-shrink: 0;
}
.comment-author-avatar img {
border-radius: 50%;
width: 50px;
height: 50px;
}
.comment-content {
flex-grow: 1;
}
.comment-meta {
margin-bottom: 10px;
font-size: 0.875rem;
}
.comment-author {
font-weight: 600;
color: #333;
margin-right: 10px;
}
.comment-metadata {
color: #666;
}
.comment-metadata a {
color: #666;
text-decoration: none;
}
.comment-metadata a:hover {
color: #0073aa;
}
.comment-text {
font-size: 0.9375rem;
line-height: 1.6;
color: #333;
}
.comment-reply-link {
display: inline-block;
margin-top: 10px;
font-size: 0.875rem;
color: #0073aa;
text-decoration: none;
}
.comment-reply-link:hover {
color: #005177;
text-decoration: underline;
}
.comment-form {
margin-top: 30px;
}
.comment-form label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #333;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 0.9375rem;
font-family: inherit;
line-height: 1.5;
color: #333;
background-color: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
margin-bottom: 15px;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}
.comment-form textarea {
min-height: 120px;
resize: vertical;
}
.comment-form .form-submit {
margin-top: 15px;
}
.comment-form input[type="submit"] {
padding: 12px 30px;
border: none;
border-radius: 6px;
background-color: #0073aa;
color: #fff;
font-size: 1rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.comment-form input[type="submit"]:hover {
background-color: #005177;
}
.comment-form input[type="submit"]:active {
transform: translateY(1px);
}
.comment-form input[type="submit"]:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.3);
}
/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.pagination {
display: flex;
justify-content: center;
margin: 30px 0 10px;
}
.pagination ul {
list-style: none;
display: flex;
gap: 8px;
padding: 0;
margin: 0;
}
.pagination li {
list-style: none;
padding: 0;
margin: 0;
}
.pagination li::before,
.pagination .page-numbers::before {
content: none;
}
.pagination .page-numbers {
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 10px;
background: transparent;
color: #222;
font-size: 0.95rem;
font-weight: 500;
line-height: 1;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination .page-numbers:hover {
background-color: #f1f5f9;
color: #0073aa;
}
.pagination .page-numbers.current {
background: #0073aa;
color: #fff;
font-weight: 600;
}
.pagination .page-numbers:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25);
}
.pagination .page-numbers.dots {
background: transparent;
cursor: default;
color: #94a3b8;
}
.pagination .page-numbers.dots:hover {
background: transparent;
color: #94a3b8;
}
.comments-navigation {
margin: 30px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.comments-navigation a {
color: #0073aa;
text-decoration: none;
padding: 8px 15px;
border: 1px solid #0073aa;
border-radius: 6px;
transition: all 0.2s ease;
}
.comments-navigation a:hover {
background-color: #0073aa;
color: #fff;
}
.no-comments {
padding: 20px;
background-color: #f8f9fa;
border-radius: 6px;
color: #666;
text-align: center;
margin-bottom: 30px;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
width: 100%;
background-color: #fff;
border-top: 1px solid #e5e5e5;
margin-top: 40px;
text-align: center;
font-size: 0.875rem;
color: #666;
}
.site-footer-inner {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
/* Универсальные стили для всех карточек - 3 колонки */
.posts-grid > .post:not(.type-page),
.posts-grid > article:not(.type-page),
.posts-grid > .post.type-post,
.posts-grid > article.type-post,
.base-posts-tiles-grid > .post,
.base-posts-tiles-grid > article {
flex: 0 0 calc((100% - 40px) / 3);
max-width: calc((100% - 40px) / 3);
}
.entry-content .base-posts-tiles-grid > .post,
.entry-content .base-posts-tiles-grid > article,
.post .entry-content .base-posts-tiles-grid > .post,
.post .entry-content .base-posts-tiles-grid > article {
flex: 0 0 calc((100% - 40px) / 3) !important;
max-width: calc((100% - 40px) / 3) !important;
}
}
@media screen and (max-width: 992px) {
.content-area {
grid-template-columns: 1fr;
gap: 30px;
}
/* Универсальные стили для всех карточек - 3 колонки */
.posts-grid > .post:not(.type-page),
.posts-grid > article:not(.type-page),
.posts-grid > .post.type-post,
.posts-grid > article.type-post,
.base-posts-tiles-grid > .post,
.base-posts-tiles-grid > article {
flex: 0 0 calc((100% - 40px) / 3);
max-width: calc((100% - 40px) / 3);
}
.entry-content .base-posts-tiles-grid > .post,
.entry-content .base-posts-tiles-grid > article,
.post .entry-content .base-posts-tiles-grid > .post,
.post .entry-content .base-posts-tiles-grid > article {
flex: 0 0 calc((100% - 40px) / 3) !important;
max-width: calc((100% - 40px) / 3) !important;
}
}
/* Бургер с 992px — раньше, чем «ломается» горизонтальное меню */
@media screen and (max-width: 992px) {
.site-header {
position: relative;
z-index: 100;
}
.site-header-inner {
position: relative;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
}
.site-branding {
max-width: calc(100% - 60px);
flex: 1 1 auto;
min-width: 0;
}
.main-navigation {
flex: 0 0 auto;
margin-left: auto;
position: static;
}
.menu-toggle {
display: inline-flex;
}
.main-navigation > ul,
.main-navigation > .menu {
position: absolute;
top: calc(100% - 4px);
left: 15px;
right: 15px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 10px;
width: auto;
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
pointer-events: none;
justify-content: flex-start;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
transform: translateY(-6px);
transition:
max-height 0.28s ease,
opacity 0.22s ease,
transform 0.22s ease,
visibility 0.22s ease;
}
.main-navigation.toggled > ul,
.main-navigation.toggled > .menu {
max-height: min(70vh, 480px);
overflow-y: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
-webkit-overflow-scrolling: touch;
}
.main-navigation li {
width: 100%;
margin: 0;
}
.main-navigation a {
display: block;
width: 100%;
padding: 12px 14px;
border-radius: 8px;
font-size: 1rem;
line-height: 1.35;
}
.main-navigation .sub-menu {
display: flex;
flex-direction: column;
gap: 2px;
list-style: none;
margin: 0 0 4px;
padding: 0 0 0 12px;
border-left: 2px solid #e8eef3;
width: 100%;
}
.main-navigation .sub-menu a {
padding: 10px 12px;
font-size: 0.9375rem;
color: #444;
}
body.nav-open::before {
content: '';
position: fixed;
inset: 0;
z-index: 90;
background: rgba(15, 23, 42, 0.28);
animation: base-nav-fade 0.2s ease;
}
}
@media screen and (max-width: 768px) {
.site {
padding: 0 15px;
}
.site-header-inner {
padding: 12px 15px;
}
.site-footer-inner {
padding: 30px 15px;
}
.site-main,
.widget-area {
padding: 18px 16px;
border-radius: 10px;
}
.content-area {
gap: 20px;
}
/* Универсальные стили для всех карточек - 2 колонки */
.posts-grid > .post:not(.type-page),
.posts-grid > article:not(.type-page),
.posts-grid > .post.type-post,
.posts-grid > article.type-post,
.base-posts-tiles-grid > .post,
.base-posts-tiles-grid > article {
flex: 0 0 calc((100% - 20px) / 2);
max-width: calc((100% - 20px) / 2);
}
.entry-content .base-posts-tiles-grid > .post,
.entry-content .base-posts-tiles-grid > article,
.post .entry-content .base-posts-tiles-grid > .post,
.post .entry-content .base-posts-tiles-grid > article {
flex: 0 0 calc((100% - 20px) / 2) !important;
max-width: calc((100% - 20px) / 2) !important;
}
.related-posts-section {
margin-top: 40px;
padding-top: 30px;
}
.related-posts-title {
font-size: 1.75rem;
margin-bottom: 20px;
}
.widget-area {
order: -1;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
}
@keyframes base-nav-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.menu-toggle,
.menu-toggle-bar,
.main-navigation > ul,
.main-navigation > .menu,
body.nav-open::before {
transition: none !important;
animation: none !important;
}
}
@media screen and (max-width: 480px) {
/* Универсальные стили для всех карточек - 1 колонка */
.posts-grid > .post:not(.type-page),
.posts-grid > article:not(.type-page),
.posts-grid > .post.type-post,
.posts-grid > article.type-post,
.base-posts-tiles-grid > .post,
.base-posts-tiles-grid > article {
flex: 0 0 100%;
max-width: 100%;
}
.entry-content .base-posts-tiles-grid > .post,
.entry-content .base-posts-tiles-grid > article,
.post .entry-content .base-posts-tiles-grid > .post,
.post .entry-content .base-posts-tiles-grid > article {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.related-posts-title {
font-size: 1.5rem;
}
}