/*
Theme Name: freecoloringpagess — Crayon
Theme URI: https://freecoloringpagess.com
Description: Яркая "карандашная" тема для Coloring2Kids. Дочерняя тема на базе freecoloringpagess — весь функционал (типы записей, шорткоды, лайки, поиск, комментарии) наследуется от родительской темы без изменений, меняется только визуальное оформление.
Author: freecoloringpagess
Template: freecoloringpagess
Version: 1.0.0
Text Domain: freecoloringpagess-crayon
*/
/* =========================================================
1. ПАЛИТРА
========================================================= */
:root {
--c2k-orange: #FF6B35;
--c2k-orange-dark: #E8501C;
--c2k-orange-light: #FF8552;
--c2k-pink: #FF3D81;
--c2k-pink-dark: #E01C63;
--c2k-pink-light: #FF6FA8;
--c2k-yellow: #FFC93C;
--c2k-green: #2ED9A3;
--c2k-plum: #3B2352;
--c2k-plum-light: #4E3168;
--c2k-cream: #FFF6EA;
--c2k-cream-2: #FFE9D6;
--c2k-cream-3: #FFF3E3;
--c2k-ink: #2B2118;
}
/* =========================================================
2. БАЗА / ТИПОГРАФИКА
========================================================= */
body {
background-color: #FFFBF4;
background-image:
radial-gradient(circle, rgba(255, 107, 53, .07) 2px, transparent 2px),
radial-gradient(circle, rgba(255, 61, 129, .06) 2px, transparent 2px);
background-size: 46px 46px, 46px 46px;
background-position: 0 0, 23px 23px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Gluten', 'Montserrat', sans-serif;
color: var(--c2k-ink);
}
table thead th, table tfoot th {
background: var(--c2k-orange);
border-color: #fff;
}
table thead th:first-of-type, table tfoot th:first-of-type { border-left-color: var(--c2k-orange); }
table thead th:last-of-type, table tfoot th:last-of-type { border-right-color: var(--c2k-orange); }
table td { border-color: var(--c2k-orange); }
.owl-dots .owl-dot { background: var(--c2k-cream-2) !important; }
.owl-dots .owl-dot.active { background-color: var(--c2k-orange) !important; }
.navigation.pagination .nav-links .page-numbers { color: var(--c2k-orange); }
.navigation.pagination .nav-links .page-numbers:hover,
.navigation.pagination .nav-links .page-numbers.current {
background-color: var(--c2k-orange);
border-color: var(--c2k-orange);
}
.navigation.pagination .nav-links .page-numbers:hover:hover,
.navigation.pagination .nav-links .page-numbers.current:hover {
box-shadow: 0 10px 40px rgba(255, 107, 53, .5);
}
.navigation.pagination .nav-links .page-numbers.active,
.navigation.pagination .nav-links .page-numbers:active {
background: var(--c2k-orange-dark);
}
.navigation.pagination .nav-links .page-numbers:hover-primary,
.navigation.pagination .nav-links .page-numbers.current-primary {
border-color: var(--c2k-orange);
color: var(--c2k-orange);
}
.navigation.pagination .nav-links .page-numbers:hover-primary:hover,
.navigation.pagination .nav-links .page-numbers.current-primary:hover {
background: var(--c2k-orange);
border-color: var(--c2k-orange);
}
.navigation.pagination .nav-links .page-numbers:hover-search,
.navigation.pagination .nav-links .page-numbers.current-search {
background: var(--c2k-pink);
border-color: var(--c2k-pink);
}
.navigation.pagination .nav-links .page-numbers:hover-search.active,
.navigation.pagination .nav-links .page-numbers.current-search.active,
.navigation.pagination .nav-links .page-numbers:hover-search:active,
.navigation.pagination .nav-links .page-numbers.current-search:active {
background: var(--c2k-pink-dark);
}
/* =========================================================
3. КНОПКИ И ФОРМЫ
========================================================= */
.button {
background-color: var(--c2k-orange);
border: 2px dashed rgba(255, 255, 255, .55);
box-shadow: 0 4px 0 rgba(0, 0, 0, .08);
}
.button:hover { box-shadow: 0 10px 40px rgba(255, 107, 53, .55), 0 4px 0 rgba(0, 0, 0, .08); }
.button.active, .button:active { background: var(--c2k-orange-dark); }
.button-primary { border: 2px solid var(--c2k-orange); background-color: #fff; color: var(--c2k-orange); }
.button-primary:hover { color: #fff; background: var(--c2k-orange); border-color: var(--c2k-orange); }
.button-secondary { background-color: var(--c2k-orange); }
.button-search { background: var(--c2k-pink); border-color: var(--c2k-pink); }
.button-search.active, .button-search:active { background: var(--c2k-pink-dark); }
input, textarea {
border-color: rgba(255, 107, 53, .2);
border-radius: 18px;
}
input[type='email'] { background: var(--c2k-plum-light); }
form.form { box-shadow: 0 5px 90px rgba(255, 107, 53, .25); }
form.form .search-suggestions.active { box-shadow: 0 35px 90px rgba(255, 107, 53, .25); }
form.form .search-suggestions.active .suggestion:hover { color: var(--c2k-orange); }
.header-main .search-form-container .form::before {
content: url("data:image/svg+xml,%3Csvg width='131' height='131' viewBox='0 0 131 131' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='65.5' cy='65.5' r='65.5' fill='%23FF6B35'/%3E%3C/svg%3E");
}
.header-main .search-form-container .form::after {
content: url("data:image/svg+xml,%3Csvg width='131' height='131' viewBox='0 0 131 131' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='65.5' cy='65.5' r='65.5' fill='%23FF3D81'/%3E%3C/svg%3E");
}
.comment-form .comment-form-cookies-consent input[type="checkbox"]:checked + label::before { background-color: var(--c2k-orange); }
.comment-form .comment-form-cookies-consent input[type="checkbox"]:checked + label::after { background: var(--c2k-orange); }
.comment-form .form-submit input {
background-color: var(--c2k-orange);
border-color: var(--c2k-orange);
}
.comment-form .form-submit input:hover { box-shadow: 0 10px 40px rgba(255, 107, 53, .5); }
.comment-form .form-submit input.active, .comment-form .form-submit input:active { background: var(--c2k-orange-dark); }
.comment-form .form-submit input-primary { border-color: var(--c2k-orange); color: var(--c2k-orange); }
.comment-form .form-submit input-secondary { background-color: var(--c2k-orange); }
.comment-form .form-submit input-search { background: var(--c2k-pink); border-color: var(--c2k-pink); }
.comment-form .form-submit input-search.active, .comment-form .form-submit input-search:active { background: var(--c2k-pink-dark); }
.wpcf7-response-output { border-color: var(--c2k-pink) !important; }
/* =========================================================
4. ШАПКА / ГЕРОЙ
========================================================= */
.header,
.header-main {
background-color: var(--c2k-orange);
background-image: linear-gradient(135deg, var(--c2k-orange) 0%, var(--c2k-pink) 100%);
}
.header-main .title { text-shadow: 0 5px 10px var(--c2k-yellow); }
.header .menu a:hover {
background: var(--c2k-yellow);
color: var(--c2k-ink);
box-shadow: 0 10px 40px rgba(255, 201, 60, .55);
}
.header .menu a.active, .header .menu a:active { background: var(--c2k-pink-dark); }
.header .menu .current-menu-item a { background: var(--c2k-pink-dark); }
.header .search-form-contaienr .header-search-form:focus-within { background: var(--c2k-orange-light); }
.header .burger-menu .line { border-color: #fff; }
.header .burger-menu.open .line { border-color: var(--c2k-orange); }
@media (max-width: 991px) {
.header .menu.open { box-shadow: 0 5px 90px rgba(255, 140, 80, .4); }
.header .menu.open li.menu-item-has-children.active > a { color: var(--c2k-orange); }
.header .menu.open li.menu-item-has-children.active > a::after {
content: url('data:image/svg+xml,');
}
.header .menu.open li.menu-item-has-children.active .sub-menu { background: var(--c2k-cream); }
.header .menu.open li .menu-item-all-posts a { color: var(--c2k-pink); }
.header .menu.open li .menu-item-all-posts a::after {
content: url('data:image/svg+xml,') !important;
}
.header .menu.open li.current-menu-item a { color: var(--c2k-orange); }
}
/* десктопное выпадающее меню */
@media (min-width: 992px) {
.menu > .menu-item-has-children.active > a { background: var(--c2k-pink); }
.menu > .menu-item-has-children.active > a::after { background: var(--c2k-pink-dark); }
.menu > .menu-item-has-children.active > .sub-menu { box-shadow: 0 5px 90px rgba(255, 61, 129, .35); }
.menu > .menu-item-has-children.active > .sub-menu > li > a { color: var(--c2k-orange); }
.menu > .menu-item-has-children.active > .sub-menu .sub-menu a:hover { color: var(--c2k-pink); }
.menu > .menu-item-has-children.active > .sub-menu .sub-menu a:hover::before { background: var(--c2k-pink); }
.menu > .menu-item-has-children.active > .sub-menu .sub-menu li.current-menu-item a { color: var(--c2k-pink); }
.menu > .menu-item-has-children.active > .sub-menu .sub-menu li.current-menu-item a::before { background: var(--c2k-pink); }
}
/* =========================================================
5. КАРТОЧКИ / КОНТЕНТ
========================================================= */
.item {
border: 2px dashed rgba(255, 107, 53, .3);
transition: transform .25s ease-in-out, box-shadow .25s ease-in-out;
}
.item:hover {
transform: translateY(-5px) rotate(-.6deg);
box-shadow: 0 16px 30px rgba(255, 61, 129, .18);
}
.item header { color: var(--c2k-ink); }
.main-container .content { background: var(--c2k-cream-3); }
.main-container .category-description .h1 { color: var(--c2k-ink); }
.main-container .category-description .description { color: #3a2f26; }
.main-container .author-description .avatar { border-color: rgba(255, 107, 53, .3); }
.main-container .share-block .socials a { border-color: var(--c2k-cream-2); }
.content-item-block .items .item .likes::before {
content: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4996 30C-11.4437 14.5169 8.11698 -2.29101 16.4996 8.33728C24.8833 -2.29102 44.444 14.5169 16.4996 30Z' stroke='%232B2118' stroke-width='1.8'/%3E%3C/svg%3E");
}
@media (max-width: 991px) {
.content-item-block .items .item .likes::before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4996 30C-11.4437 14.5169 8.11698 -2.29101 16.4996 8.33728C24.8833 -2.29102 44.444 14.5169 16.4996 30Z' stroke='%232B2118' stroke-width='1.8'/%3E%3C/svg%3E");
}
}
.content-item-block .items .item .likes.active::before,
.content-item-block .items .item .likes:hover::before {
content: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4996 30C-11.4437 14.5169 8.11698 -2.29101 16.4996 8.33728C24.8833 -2.29102 44.444 14.5169 16.4996 30Z' fill='%23FF3D81'/%3E%3C/svg%3E");
}
@media (max-width: 991px) {
.content-item-block .items .item .likes.active::before,
.content-item-block .items .item .likes:hover::before {
content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4996 30C-11.4437 14.5169 8.11698 -2.29101 16.4996 8.33728C24.8833 -2.29102 44.444 14.5169 16.4996 30Z' fill='%23FF3D81'/%3E%3C/svg%3E");
}
.content-item-block .items .item .downloads.active::before,
.content-item-block .items .item .downloads:hover::before {
content: url('data:image/svg+xml,');
}
}
.breadcrumbs { color: var(--c2k-orange); }
.breadcrumbs a:hover { color: var(--c2k-orange); }
.details a, .details time, .details span { color: var(--c2k-ink); }
/* =========================================================
6. SIDEBAR
========================================================= */
.sidebar .sidebar-item .h3 { color: var(--c2k-ink); }
.sidebar .sidebar-item .categories-list .category-item::after {
content: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 3.625L10 8L5.625 12.375' stroke='%23D9A9A9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sidebar .sidebar-item .categories-list .category-item:hover { color: var(--c2k-orange); }
.sidebar .sidebar-item .categories-list .category-item:hover::after {
content: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.625 3.625L10 8L5.625 12.375' stroke='%23FF6B35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* =========================================================
7. ПОДВАЛ
========================================================= */
.footer { background: var(--c2k-plum); }
.footer .title { color: var(--c2k-yellow); }
.footer .socials .icon-36 { background: var(--c2k-plum-light); }
.footer .socials .icon-36:hover { background: var(--c2k-orange); }
.footer .menu a:hover { color: var(--c2k-pink-light); }
/* =========================================================
8. ШАРИНГ
========================================================= */
.share-container .share {
background: var(--c2k-cream-2);
color: var(--c2k-orange);
}
.share-container .share::after {
content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.2865 3.20728C11.6367 2.70401 10.7002 3.17433 10.7002 4.00396V8.30319C5.14816 8.88075 1.54817 13.4403 1.00245 19.2179C0.956721 19.7021 1.56237 19.9173 1.87554 19.5492C4.15899 16.865 6.97664 15.3764 10.7002 15.758V19.996C10.7002 20.8257 11.6367 21.296 12.2865 20.7927L22.6116 12.7967C23.1295 12.3956 23.1295 11.6044 22.6116 11.2033L12.2865 3.20728Z' fill='%23FF6B35'/%3E%3C/svg%3E");
}
@media (max-width: 991px) {
.share-container .share::after {
content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.2865 3.20728C11.6367 2.70401 10.7002 3.17433 10.7002 4.00396V8.30319C5.14816 8.88075 1.54817 13.4403 1.00245 19.2179C0.956721 19.7021 1.56237 19.9173 1.87554 19.5492C4.15899 16.865 6.97664 15.3764 10.7002 15.758V19.996C10.7002 20.8257 11.6367 21.296 12.2865 20.7927L22.6116 12.7967C23.1295 12.3956 23.1295 11.6044 22.6116 11.2033L12.2865 3.20728Z' fill='%23FF6B35'/%3E%3C/svg%3E");
}
}
/* =========================================================
9. ФИКСИРОВАННАЯ ШАПКА
Родительская тема уже добавляет header класс "fixed" (position:fixed
без явных top/left, работает за счёт статического положения первого
элемента в body). Здесь это поведение делаем явным и надёжным на всех
брейкпоинтах + добавляем тень при накоплении контента под шапкой.
========================================================= */
.header.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
box-shadow: 0 4px 20px rgba(59, 35, 82, .12);
}
/* =========================================================
10. MOBILE FIRST: более плотная сетка карточек
На конкурентах (mondaymandala.com, coloringonline.com) карточки на
мобильном идут в 2 колонки, а не в 1 — так на экран помещается больше
раскрасок и меньше скролла до полезного контента.
========================================================= */
.grid-3-columns {
grid-template-columns: repeat(2, 1fr);
}
.items.grid-3-columns {
gap: 12px;
}
@media (max-width: 991px) {
.item .item-image { border-radius: 8px 8px 0 0; }
.item { padding: 8px; }
.item header { font-size: 13px; margin-top: 10px; margin-bottom: 12px; }
.item .button { font-size: 12px; padding: 8px; }
}
/* =========================================================
11. MOBILE FIRST: поиск доступен не только на главной
У конкурентов иконка поиска есть в шапке на любом экране и любой
странице. Раньше на мобильном .search-form-contaienr был полностью
скрыт (display:none) — теперь показываем компактную иконку рядом с
бургером; раскрытие поля по фокусу работает на той же CSS-анимации,
что и на десктопе, разметка и JS не меняются.
========================================================= */
@media (max-width: 991px) {
.header .container {
grid-template-columns: auto 44px 44px;
align-items: center;
}
.home .header .container {
grid-template-columns: auto 44px !important;
}
.header .search-form-contaienr {
display: flex;
align-items: center;
justify-content: center;
}
.header .search-form-contaienr .header-search-form {
position: static;
gap: 0;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.header .search-form-contaienr .header-search-form .search-input {
width: 30px;
height: 30px;
padding: 0;
}
.header .search-form-contaienr .header-search-form:focus-within {
position: absolute;
right: 59px;
left: 15px;
top: 12px;
min-width: 0;
min-height: 0;
background: var(--c2k-orange-light);
border-radius: 20px;
z-index: 20;
animation: none;
justify-content: flex-start;
}
.header .search-form-contaienr .header-search-form:focus-within .search-input {
width: 100%;
height: auto;
padding: 10px 15px;
}
}
/* =========================================================
12. PAGESPEED / ПРОИЗВОДИТЕЛЬНОСТЬ
========================================================= */
/* Уважаем настройку "меньше анимаций" — экономим CPU/GPU и не мешаем
пользователям, чувствительным к движению. */
@media (prefers-reduced-motion: reduce) {
*, .item, .button, a, .menu a {
transition: none !important;
animation: none !important;
}
.item:hover { transform: none; }
}
/* content-visibility откладывает расчёт стилей/layout для контента ниже
первого экрана — быстрее First Contentful Paint / меньше Total Blocking
Time на длинных архивных страницах и в подвале. */
.footer,
.sidebar .sidebar-item {
content-visibility: auto;
contain-intrinsic-size: 1px 600px;
}
/* Декоративный точечный фон — не должен создавать лишний слой перерисовки
при скролле (background-attachment сознательно НЕ fixed). */
body {
will-change: auto;
}
/* Явные font-display уже стоят "swap" в родительской теме (шрифты не
блокируют рендер текста) — здесь просто не добавляем новых внешних
шрифтов/запросов, вся дочерняя тема работает на локальных файлах
родителя без единого нового HTTP-запроса. */
/* =========================================================
13. КОНСИСТЕНТНЫЕ ПРОПОРЦИИ КАРТОЧЕК (как у конкурентов)
У mondaymandala.com и coloringonline.com превью карточек всегда
одной пропорции — сетка выглядит ровно и не "прыгает" при загрузке
картинок разных размеров. Задаём aspect-ratio на контейнер превью и
object-fit:cover на картинку — это ещё и снижает CLS.
========================================================= */
.item .item-image {
aspect-ratio: 4 / 3;
}
.item .item-image img {
height: 100%;
object-fit: cover;
}
.sidebar .sidebar-item .items .item .item-picture {
aspect-ratio: 134 / 75;
height: auto;
}
/* =========================================================
14. БЛОК "ПОЧЕМУ COLORING2KIDS" (главная страница)
Новый блок из дочерней темы (templates/page/frontpage.php), инспирация
— секция преимуществ на coloringonline.com. Только CSS, без внешних
запросов: иконки — инлайновые SVG прямо в шаблоне.
========================================================= */
.benefits-block {
background: transparent;
padding: 0 !important;
box-shadow: none;
}
.benefits-grid {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
.benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.benefits-grid { grid-template-columns: repeat(4, 1fr); }
}
.benefit-item {
background: #fff;
border: 2px dashed rgba(255, 107, 53, .25);
border-radius: 24px;
padding: 24px 20px;
text-align: center;
transition: transform .25s ease-in-out, box-shadow .25s ease-in-out;
}
.benefit-item:hover {
transform: translateY(-4px);
box-shadow: 0 14px 26px rgba(255, 61, 129, .15);
}
.benefit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--c2k-cream-2);
margin-bottom: 16px;
}
.benefit-title {
margin-bottom: 8px !important;
font-size: 18px;
}
.benefit-text {
font-size: 15px;
line-height: 140%;
opacity: .75;
margin-bottom: 0;
}