с вложенными
*/
.zkdk .faq-item__a p {
margin: 0 0 12px;
}
.zkdk .faq-item__a p:last-child {
margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
.zkdk .faq-item__a,
.zkdk .faq-item__toggle {
transition: none;
}
}
/* CTA «Не нашли вопрос» — тёмная карточка справа в шапке FAQ.
Отступ задаёт grid шапки, поэтому собственного margin-top нет. */
.zkdk .faq-cta {
padding: 28px;
background: var(--ink);
color: var(--paper);
border-radius: var(--radius-sm);
}
.zkdk .faq-cta strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: var(--w-semibold);
margin-bottom: 10px;
}
.zkdk .faq-cta span {
display: block;
color: rgba(243, 236, 224, 0.7);
font-size: var(--text-md);
line-height: var(--leading-loose);
}
.zkdk .faq-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 22px;
padding: 14px 26px;
background: var(--wood);
color: var(--paper);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--radius-sm);
transition: opacity var(--transition);
}
.zkdk .faq-cta__btn:hover {
opacity: 0.88;
}
/* ─── КОНТАКТЫ И ФОРМА ──────────────────────────────────── */
.zkdk .contact-section {
/* вертикальные паддинги: сверху 56, снизу 0 (просьба Ивана, 20.07.2026) */
padding: 56px 0 0;
background: var(--ink);
color: var(--paper);
}
.zkdk .contact-h2 {
font-family: var(--font-display);
font-size: var(--text-8xl);
line-height: 0.95;
font-weight: var(--w-regular);
letter-spacing: -0.03em;
}
.zkdk .contact-h2 em {
font-style: italic;
color: var(--wood);
}
.zkdk .contact-info {
margin-top: 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
font-size: var(--text-md);
}
.zkdk .contact-info__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: rgba(243, 236, 224, 0.5);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.zkdk .contact-info__value {
margin-top: 8px;
line-height: 1.5;
}
.zkdk .contact-info__value--large {
font-family: var(--font-display);
font-size: var(--text-2xl);
}
.zkdk .contact-form {
background: var(--paper);
color: var(--ink);
padding: 40px;
}
.zkdk .contact-form__title {
font-family: var(--font-display);
font-size: var(--text-3xl);
margin-bottom: 24px;
}
.zkdk .contact-form__field {
border-bottom: 1px solid var(--line);
padding: 14px 0;
}
.zkdk .contact-form__label {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--ink-soft);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.zkdk .contact-form__value {
font-family: var(--font-display);
font-size: 18px;
margin-top: 6px;
}
.zkdk .contact-form__note {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--ink-soft);
margin-top: 16px;
line-height: 1.5;
}
/* ─── ПОРТФОЛИО ─────────────────────────────────────────── */
.zkdk .portfolio-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 16px;
}
/* ─── УТИЛИТЫ ───────────────────────────────────────────── */
.zkdk .divider {
width: 100%;
height: 1px;
background: var(--line);
}
.zkdk .divider--ink {
background: var(--ink);
}
.zkdk .ratio-4-5 {
aspect-ratio: 4 / 5;
}
.zkdk .ratio-16-9 {
aspect-ratio: 16 / 9;
}
.zkdk .ratio-4-3 {
aspect-ratio: 4 / 3;
}
.zkdk .ratio-1-1 {
aspect-ratio: 1 / 1;
}
.zkdk .img-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Плейсхолдер-заглушка (как в демо). Если на нём задан aspect-ratio,
высоту считает ratio, а не height:100% — иначе в grid растягивается
и выдавливает контент. */
.zkdk .ph {
background: #d8d0c4;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: #8a7f6f;
text-transform: uppercase;
}
.zkdk .ph.ratio-4-5,
.zkdk .ph.ratio-16-9,
.zkdk .ph.ratio-4-3,
.zkdk .ph.ratio-1-1 {
height: auto;
}
.zkdk .placeholder {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 18px;
background: repeating-linear-gradient(
135deg,
#d8c4a3 0 18px,
#c2a87b 18px 36px
);
color: #3a2e1f;
}
.zkdk .placeholder__caption {
position: relative;
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.35;
opacity: 0.85;
max-width: 85%;
}
.zkdk .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* =========================================================
АДАПТИВ
========================================================= */
/* ─── 1024px ────────────────────────────────────────────── */
@media (max-width: 1024px) {
:root {
--px: 40px;
--py: 72px;
--py-sm: 60px;
--text-9xl: 72px;
--text-8xl: 56px;
--text-7xl: 48px;
}
.zkdk .grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.zkdk .grid-6 {
grid-template-columns: repeat(3, 1fr);
}
.zkdk .process-grid {
grid-template-columns: repeat(3, 1fr);
}
.zkdk .process-grid::before {
top: 88px;
}
.zkdk .factory-section .section-title {
font-size: var(--text-5xl);
}
.zkdk .portfolio-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ─── 768px ─────────────────────────────────────────────── */
@media (max-width: 768px) {
:root {
--px: 24px;
--py: 56px;
--py-sm: 44px;
--gap-4xl: 32px;
--text-9xl: 56px;
--text-8xl: 48px;
--text-7xl: 40px;
--text-6xl: 40px;
--text-5xl: 32px;
}
.zkdk .grid-2 {
grid-template-columns: 1fr;
}
.zkdk .grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.zkdk .grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.zkdk .grid-6 {
grid-template-columns: repeat(2, 1fr);
}
.zkdk .project-card--wide .project-card__meta {
grid-template-columns: 1fr 1fr;
}
.zkdk .advantages-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px 40px;
}
.zkdk .brus-row {
grid-template-columns: 1fr;
gap: var(--gap-lg);
padding: 32px 0;
}
.zkdk .process-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.zkdk .process-grid::before {
display: none;
}
.zkdk .factory-stats {
grid-template-columns: repeat(2, 1fr);
}
.zkdk .paths-note {
flex-direction: column;
gap: 12px;
}
.zkdk .reviews-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.zkdk .contact-info {
grid-template-columns: 1fr;
}
.zkdk .portfolio-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ─── 480px ─────────────────────────────────────────────── */
@media (max-width: 480px) {
:root {
--px: 20px;
--py: 48px;
--py-sm: 36px;
--gap-4xl: 24px;
--text-9xl: 44px;
--text-8xl: 36px;
--text-7xl: 32px;
--text-6xl: 32px;
--text-5xl: 28px;
--text-4xl: 24px;
--text-3xl: 22px;
--text-2xl: 18px;
}
.zkdk .grid-2,
.zkdk .grid-3,
.zkdk .grid-4,
.zkdk .grid-6 {
grid-template-columns: 1fr;
}
.zkdk .advantages-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.zkdk .process-grid {
grid-template-columns: 1fr;
gap: 0;
}
.zkdk .factory-stats {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.zkdk .calc-panel {
padding: 24px 20px;
}
.zkdk .package-card__name {
font-size: var(--text-4xl);
}
.zkdk .path-card__roman {
font-size: 64px;
}
.zkdk .path-card__title {
font-size: var(--text-3xl);
}
.zkdk .portfolio-grid {
grid-template-columns: 1fr;
}
.zkdk .review__footer {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.zkdk .faq-item__q {
font-size: var(--text-xl);
}
.zkdk .contact-form {
padding: 24px 20px;
}
}
/* ─── Производственный цикл (Gantt — альт. вид §04 Процесс) ─── */
.zkdk .gantt-section {
--gantt-stage: 260px;
--gantt-cols: 12;
padding: 0;
}
.zkdk .gantt-eyebrow {
display: flex;
align-items: center;
gap: 18px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 44px;
}
.zkdk .gantt-eyebrow__rule {
flex: 1;
height: 1px;
background: var(--line);
}
.zkdk .gantt-title {
margin: 0 0 52px;
}
.zkdk .gantt-title em {
font-style: italic;
color: var(--wood);
}
.zkdk .gantt {
border-top: 1px solid var(--line);
}
.zkdk .gantt__head {
display: grid;
grid-template-columns: var(--gantt-stage) 1fr;
background: var(--paper-deep);
}
.zkdk .gantt__head-stage,
.zkdk .gantt__week {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 13px 0;
}
.zkdk .gantt__head-stage {
padding-left: 0;
}
.zkdk .gantt__weeks {
display: grid;
grid-template-columns: repeat(var(--gantt-cols), 1fr);
}
.zkdk .gantt__week {
padding-left: 14px;
border-left: 1px solid var(--line);
}
.zkdk .gantt__row {
display: grid;
grid-template-columns: var(--gantt-stage) 1fr;
border-bottom: 1px solid var(--line);
min-height: 150px;
}
.zkdk .gantt__stage {
padding: 28px 32px 28px 0;
}
.zkdk .gantt__n {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
}
.zkdk .gantt__name {
font-size: 26px;
line-height: 1.05;
color: var(--ink);
margin: 8px 0 12px;
}
.zkdk .gantt__dur {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
}
.zkdk .gantt__track {
position: relative;
display: grid;
grid-template-columns: repeat(var(--gantt-cols), 1fr);
grid-template-rows: auto auto;
align-content: start;
row-gap: 30px;
padding: 30px 0;
background-image: repeating-linear-gradient(
to right,
var(--line) 0,
var(--line) 1px,
transparent 1px,
transparent calc(100% / 12)
);
}
.zkdk .gantt__bar {
grid-row: 1;
grid-column: var(--col) / span var(--span, 1);
align-self: start;
justify-self: start;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
width: 100%;
background: var(--ink);
color: var(--white);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 10px 14px;
border-radius: var(--radius-sm);
overflow: hidden;
white-space: nowrap;
}
.zkdk .gantt__bar--wood {
background: var(--wood);
}
.zkdk .gantt__bar--xs {
width: 62px;
}
.zkdk .gantt__desc {
grid-row: 2;
grid-column: 1 / -1;
margin: 0;
max-width: 480px;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.55;
}
@media (max-width: 860px) {
.zkdk .gantt__head {
display: none;
}
.zkdk .gantt__row {
grid-template-columns: 1fr;
min-height: 0;
gap: 4px;
padding: 22px 0;
}
.zkdk .gantt__stage {
padding: 0;
}
.zkdk .gantt__track {
display: block;
background: none;
padding: 14px 0 0;
}
.zkdk .gantt__bar {
display: inline-block;
width: auto;
max-width: none;
margin-bottom: 12px;
}
.zkdk .gantt__bar--xs {
width: auto;
}
}
/* --- Анимация баров при доскролле: каждый «заливается» из своей колонки
(растёт от левого края к правому, как полоса прогресса). Триггер —
ПОэлементный: каждый бар заполняется в момент, когда сам въезжает в экран
(класс .is-filled навешивает JS на конкретный бар). Класс .gantt--anim на
секции включает режим; пока его нет — бары видны как обычно (ничего не
пропадёт). Позиционные --col/--span не трогаем; заливка через clip-path. */
.zkdk .gantt-section.gantt--anim .gantt__bar {
clip-path: inset(0 100% 0 0);
transition: clip-path 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: var(--bar-delay, 0ms);
will-change: clip-path;
}
.zkdk .gantt-section.gantt--anim .gantt__bar.is-filled {
clip-path: inset(0 -2px 0 0);
}
/* лёгкий каскад: когда видно несколько строк сразу (десктоп),
бары заливаются по очереди сверху вниз, а не разом */
.zkdk .gantt__row:nth-child(3) .gantt__bar {
--bar-delay: 90ms;
}
.zkdk .gantt__row:nth-child(4) .gantt__bar {
--bar-delay: 180ms;
}
.zkdk .gantt__row:nth-child(5) .gantt__bar {
--bar-delay: 270ms;
}
.zkdk .gantt__row:nth-child(6) .gantt__bar {
--bar-delay: 360ms;
}
.zkdk .gantt__row:nth-child(7) .gantt__bar {
--bar-delay: 450ms;
}
@media (prefers-reduced-motion: reduce) {
.zkdk .gantt-section.gantt--anim .gantt__bar {
clip-path: none;
transition: none;
}
}
/* =========================================================
МОДИФИКАТОРЫ ВМЕСТО ИНЛАЙН-СТИЛЕЙ (перенос из zkdk-blocks.html).
Позиционные --col/--span у гантт-баров остаются инлайн (это данные).
========================================================= */
/* Блок 02 — Hero */
.zkdk .hero__cover {
height: 560px;
}
/* Блок 04 — Каталог */
.zkdk .catalog__lead {
max-width: 360px;
}
.zkdk .grid-2--wide-cards {
margin-top: 56px;
gap: var(--gap-xl);
}
.zkdk .project-card__stat {
font-size: 22px;
}
.zkdk .catalog__more {
text-align: center;
margin: 10px 0 20px;
}
/* Блок 06 — Процесс (шапка) */
.zkdk .grid-2--head {
margin-bottom: 56px;
}
.zkdk .grid-2--head .section-lead {
align-self: end;
}
/* Калькулятор в секции «Цены и комплектации» */
.zkdk .grid-2--calc {
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.zkdk .calc__intro {
margin-top: var(--gap-lg);
max-width: 440px;
line-height: var(--leading-loose);
}
.zkdk .calc-header > div:last-child {
text-align: right;
}
/* Финальная CTA в панели калькулятора и в форме контактов */
.zkdk .calc-panel .btn--xl,
.zkdk .contact-form .btn--xl {
margin-top: 28px;
}
/* Блок 09 — Бригады */
.zkdk .grid-2--brigades {
margin-bottom: var(--gap-2xl);
align-items: end;
}
.zkdk .filters__label {
font-size: var(--text-sm);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-right: 12px;
}
.zkdk .brigade-card__metric-unit {
font-size: var(--text-sm);
}
/* Блок 10 — Цены */
.zkdk .section-title--mb-sm {
margin-bottom: 12px;
}
.zkdk .section-intro-lead {
max-width: 560px;
margin-bottom: var(--gap-3xl);
line-height: var(--leading-loose);
}
/* Блок 11 — Портфолио */
.zkdk .portfolio__header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--gap-3xl);
}
.zkdk .portfolio__geo {
font-size: 13px;
}
/* Блок 12 — Отзывы (шапка) */
.zkdk .section-title--mb-lg {
margin-bottom: var(--gap-3xl);
}
/* Блок 13 — FAQ: шапка секции — заголовок слева, карточка «Не нашли
вопрос» справа; список вопросов идёт ниже во всю ширину (.faq-list). */
.zkdk .grid-2--faq-head {
grid-template-columns: 1fr 1fr;
align-items: start;
margin-bottom: var(--gap-4xl);
}
/* Блок 14 — Контакты */
.zkdk .grid-2--contact {
gap: var(--gap-5xl);
align-items: center; /* левая колонка по центру относительно формы */
}
/* =========================================================
БЛОК 15 — ФУТЕР (тёмная секция). Перенос из дизайн-CSS.
.footer-section даёт тёмный фон + паддинги (как .contact-section).
========================================================= */
.zkdk.footer-section {
padding: 60px
max(
var(--px),
calc((100% - var(--content-width)) / 2 + clamp(16px, 4vw, 40px))
);
background: var(--ink);
color: var(--paper);
}
.zkdk.footer-section .footer {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.zkdk .footer {
border-top: 1px solid rgba(243, 236, 224, 0.18);
margin-top: 96px;
padding-top: 48px;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 40px;
}
.zkdk .footer__logo {
height: 72px;
width: auto;
opacity: 0.78; /* в цвет ссылок: rgba(243,236,224,0.78) на тёмном фоне */
transition: opacity var(--transition);
}
.zkdk .footer__logo-link:hover .footer__logo {
opacity: 1;
}
.zkdk .footer__tagline {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: rgba(243, 236, 224, 0.55);
letter-spacing: 0.08em;
margin-top: 16px;
line-height: 1.5;
}
.zkdk .footer__socials {
display: flex;
gap: 10px;
margin-top: 24px;
}
.zkdk .footer__social {
border: 1px solid rgba(243, 236, 224, 0.25);
padding: 8px 14px;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--paper);
letter-spacing: 0.06em;
transition: border-color var(--transition);
text-decoration: none;
}
.zkdk .footer__social:hover {
border-color: rgba(243, 236, 224, 0.6);
}
.zkdk .footer__col-title {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--wood);
margin-bottom: 16px;
}
.zkdk .footer__links {
display: flex;
flex-direction: column;
gap: 10px;
}
.zkdk .footer__link {
font-size: var(--text-base);
color: rgba(243, 236, 224, 0.78);
cursor: pointer;
}
.zkdk .footer__link:hover {
color: var(--paper);
}
/* Нижняя правовая строка */
.zkdk .footer__legal {
border-top: 1px solid rgba(243, 236, 224, 0.12);
margin-top: 56px;
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: var(--text-sm);
color: rgba(243, 236, 224, 0.45);
letter-spacing: 0.06em;
flex-wrap: wrap;
gap: 16px;
}
.zkdk .footer__legal-links {
display: flex;
gap: 16px;
}
.zkdk .footer__lang {
color: var(--wood);
}
/* ── Футер: блок 1 (бренд + контакты) и блок 2 (меню) ── */
.zkdk .footer__top {
border-top: 1px solid rgba(243, 236, 224, 0.18);
margin-top: 0;
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}
.zkdk .footer__brand {
display: flex;
flex-direction: column;
gap: 16px;
text-decoration: none;
align-items: flex-start;
}
.zkdk .footer__brand:hover .footer__logo {
opacity: 1;
}
.zkdk .footer__desc {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: rgba(243, 236, 224, 0.55);
letter-spacing: 0.06em;
line-height: 1.5;
max-width: 260px;
}
.zkdk .footer__contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.zkdk .footer__phone {
font-family: var(--font-mono);
font-size: 20px;
color: var(--paper);
letter-spacing: 0.02em;
text-decoration: none;
}
.zkdk .footer__msgrs {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.zkdk .footer__msgr {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(243, 236, 224, 0.25);
padding: 9px 16px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--paper);
letter-spacing: 0.04em;
text-decoration: none;
transition: border-color var(--transition);
}
.zkdk .footer__msgr:hover {
border-color: rgba(243, 236, 224, 0.6);
}
.zkdk .footer__msgr .zkdk-header__soc-ico {
width: 16px;
height: 16px;
}
.zkdk .footer__menu {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
@media (max-width: 1024px) {
.zkdk .footer {
grid-template-columns: 2fr 1fr 1fr;
}
}
@media (max-width: 768px) {
.zkdk .footer {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
/* блок 1: лого+дескриптор ←→ телефон+мессенджеры (мессенджеры иконками) */
.zkdk .footer__top {
margin-top: 0;
padding-top: 28px;
gap: 60px;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-start;
}
.zkdk .footer__logo {
height: 42px;
}
.zkdk .footer__desc {
font-size: 9px;
letter-spacing: 0.03em;
max-width: 140px;
}
.zkdk .footer__phone {
font-size: 16px;
}
.zkdk .footer__msgr {
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
}
.zkdk .footer__msgr-label {
display: none;
}
/* блок 2: меню в 2 колонки */
.zkdk .footer__menu {
grid-template-columns: 1fr 1fr;
gap: 24px 16px;
margin-top: 32px;
}
.zkdk .footer__legal {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
@media (max-width: 480px) {
.zkdk .footer {
grid-template-columns: 1fr;
}
.zkdk .footer__logo {
height: 48px;
}
}
/* =========================================================
БЛОК 16 — HERO (первый экран с видео-фоном).
Перенос макета под токены темы. Полноширинный (вырывается
из контейнера 1190px через 100vw), текст белый на тёмном видео.
Состояние .is-placeholder — градиент, пока нет видео.
========================================================= */
.zkdk .hero {
position: relative;
min-height: 720px;
display: flex;
flex-direction: column;
overflow: hidden;
color: #fff;
/* выезд на всю ширину окна из центрированного контейнера контента */
width: 100vw;
margin-left: calc(50% - 50vw);
}
.zkdk .hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.zkdk .hero__media video,
.zkdk .hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* затемнение поверх видео — чтобы текст читался на любом кадре */
.zkdk .hero__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(28, 42, 35, 0.55) 0%,
rgba(28, 42, 35, 0.25) 40%,
rgba(28, 42, 35, 0.78) 100%
),
linear-gradient(90deg, rgba(28, 42, 35, 0.6) 0%, transparent 60%);
}
/* плейсхолдер-градиент (дерево + лес), пока нет видео */
.zkdk .hero__media.is-placeholder {
background:
radial-gradient(
circle at 70% 20%,
rgba(138, 106, 63, 0.4) 0%,
transparent 50%
),
linear-gradient(
135deg,
var(--ink) 0%,
var(--ink-deep) 45%,
var(--wood) 100%
);
}
.zkdk .hero__inner {
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 0 32px;
}
/* верхняя панель: лого + меню + телефон поверх видео */
.zkdk .hero__topbar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 0;
}
.zkdk .hero__logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.zkdk .hero__logo-mark {
width: 44px;
height: 44px;
background: rgba(243, 236, 224, 0.95);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
color: var(--ink-deep);
}
.zkdk .hero__logo-text {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
line-height: 1.3;
max-width: 170px;
}
.zkdk .hero__nav {
display: flex;
gap: 28px;
align-items: center;
}
.zkdk .hero__nav a {
font-family: var(--font-body);
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 15px;
transition: color var(--transition);
}
.zkdk .hero__nav a:hover {
color: #fff;
}
.zkdk .hero__phone {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.02em;
color: #fff;
text-decoration: none;
}
/* центральный контент */
.zkdk .hero__content {
position: relative;
z-index: 2;
flex-grow: 1;
display: flex;
align-items: center;
}
/* контент-ряд: текст слева, картинка-рендер справа */
.zkdk .hero__content .hero__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 48px;
position: relative;
}
.zkdk .hero__text {
flex: 1 1 0;
max-width: 720px;
z-index: 100;
}
.zkdk .hero__figure {
position: absolute;
width: 914px;
right: -226px;
top: 0;
aspect-ratio: 16 / 9;
z-index: 10;
}
/* слайды стопкой друг на друге, активный проявляется (кроссфейд) */
.zkdk .hero__figure img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity 1500ms ease;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
}
.zkdk .hero__figure img.is-active {
opacity: 1;
}
.zkdk .hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--paper);
margin-bottom: 24px;
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius-pill);
backdrop-filter: blur(4px);
}
.zkdk .hero__dot {
width: 7px;
height: 7px;
border-radius: 2px;
background: #7fbf8f;
box-shadow: 0 0 0 4px rgba(127, 191, 143, 0.25);
}
.zkdk .hero__title {
font-family: var(--font-display);
font-size: clamp(38px, 6vw, 72px);
font-weight: 500;
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0 0 28px;
color: #fff;
}
.zkdk .hero__title-soft {
display: block;
font-size: 0.5em;
font-weight: 400;
font-style: italic;
letter-spacing: 0;
line-height: 1;
color: var(--wood);
}
.zkdk .hero__lead {
font-family: var(--font-body);
font-size: 1em;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 40px;
max-width: 600px;
font-style: italic;
}
.zkdk .hero__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
margin-top: 60px;
}
.zkdk .hero__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all var(--transition);
}
.zkdk .hero__btn--primary {
background: var(--paper);
color: var(--ink-deep);
}
.zkdk .hero__btn--primary:hover {
background: #fff;
}
/* Двигаем только стрелку, а не растягиваем кнопку (gap менял ширину
и толкал соседнюю кнопку). Ширина теперь фиксирована — сосед не едет. */
.zkdk .hero__btn--primary:hover svg {
transform: translateX(4px);
}
.zkdk .hero__btn--ghost {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(4px);
}
.zkdk .hero__btn--ghost:hover {
background: rgba(255, 255, 255, 0.16);
}
.zkdk .hero__btn svg {
transition: transform var(--transition);
}
/* нижняя полоса с цифрами доверия */
.zkdk .hero__stats {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.zkdk .hero__stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 40px 0 40px;
}
.zkdk .hero__stat-num {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 36px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
color: #fff;
margin-bottom: 6px;
}
.zkdk .hero__stat-label {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.35;
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 900px) {
.zkdk .hero__nav {
display: none;
}
/* текст и картинка — друг под другом */
.zkdk .hero__content .hero__inner {
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.zkdk .hero__text,
.zkdk .hero__figure {
max-width: 100%;
flex-basis: auto;
width: 100%;
}
.zkdk .hero__figure {
position: relative;
right: 0;
top: 0;
}
.zkdk .hero__stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px 16px;
}
}
@media (max-width: 600px) {
.zkdk .hero {
min-height: 88vh;
}
.zkdk .hero__inner {
padding: 0 20px;
}
.zkdk .hero__actions {
flex-direction: column;
align-items: stretch;
}
.zkdk .hero__btn {
justify-content: center;
}
.zkdk .hero__logo-text {
display: none;
}
}
/* ─── ЖИВАЯ ГАЛЕРЕЯ (§13 — горизонтальная лента построенных домов) ───
Фон-полоса на всю ширину окна (вырывается из контейнера контента),
внутри — горизонтально прокручиваемая лента карточек 440×540 с фото-
обложкой и подписью поверх. Разметка — шорткод [zkdk_gallery]
(см. inc/gallery.php), фронт-логика кнопок — zkdk-custom.js. */
.zkdk-gallery {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 60px 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
}
/* шапка — в колонку контента сайта (--content-width), ровно как соседние
секции: тот же приём выравнивания, что и у full-width блоков. */
.zkdk-gallery__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--gap-2xl);
flex-wrap: wrap;
padding: 0
max(
var(--px),
calc((100% - var(--content-width)) / 2 + clamp(16px, 4vw, 40px))
);
margin: 10px 40px 60px;
}
.zkdk-gallery__intro {
max-width: 620px;
}
.zkdk-gallery .section-title {
font-weight: var(--w-semibold);
}
.zkdk-gallery__lead {
margin: 20px 0 0;
max-width: 540px;
color: var(--ink-soft);
font-size: var(--text-xl);
}
/* кнопки прокрутки ←/→ */
.zkdk-gallery__nav {
display: flex;
align-items: center;
gap: 12px;
}
.zkdk-gallery__btn {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid var(--ink);
border-radius: var(--radius-pill);
background: transparent;
color: var(--ink);
font-family: var(--font-mono);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition:
background var(--transition),
color var(--transition),
opacity var(--transition);
}
.zkdk-gallery__btn:hover {
background: var(--ink);
color: var(--paper);
}
/* в фокусе — акцент цветом дерева */
.zkdk-gallery__btn:focus {
outline: none;
border-color: var(--ink);
color: var(--ink);
}
.zkdk-gallery__btn:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
}
.zkdk-gallery__btn:disabled {
opacity: 0.3;
cursor: default;
background: transparent;
color: var(--ink);
}
/* лента — на всю ширину экрана: узкий отступ от краёв, фото шире колонки */
.zkdk-gallery__rail {
display: flex;
gap: 20px;
padding: 0 clamp(20px, 4vw, 56px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
cursor: grab; /* можно тащить мышью */
}
.zkdk-gallery__rail::-webkit-scrollbar {
display: none;
}
/* во время перетаскивания: курсор-кулак, без снэпа и выделения */
.zkdk-gallery__rail--drag {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.zkdk-gallery__rail--drag .zkdk-gallery__img {
cursor: grabbing;
}
/* все «прямоугольные» медиа/боксы скина — скругление 2px (токены уже 2px,
здесь добиваем то, у чего радиуса не было: фото, плейсхолдеры, врезки) */
.zkdk img,
.zkdk figure,
.zkdk video,
.zkdk iframe,
.zkdk .ph,
.zkdk .img-cover {
border-radius: var(--radius-sm);
}
/* кнопка-CTA под лентой */
.zkdk-gallery__cta {
display: flex;
justify-content: center;
margin-top: var(--gap-3xl);
padding: 0
max(
var(--px),
calc((100% - var(--content-width)) / 2 + clamp(16px, 4vw, 40px))
);
}
.zkdk-gallery__cta .section-cta {
margin-top: 0; /* отступ задаёт обёртка, не дублируем */
}
/* карточка дома */
.zkdk-gallery__card {
flex: 0 0 auto;
width: 440px;
scroll-snap-align: start;
}
.zkdk-gallery__media {
position: relative;
height: 540px;
margin: 0;
overflow: hidden;
background: var(--ink);
border-radius: var(--radius-sm); /* фото со скруглением 2px */
}
.zkdk-gallery__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.zkdk-gallery__shade {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.5));
}
/* подпись поверх фото */
.zkdk-gallery__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding: 18px;
color: #fff;
}
.zkdk-gallery__name {
font-family: var(--font-display);
font-weight: var(--w-semibold);
font-size: 30px;
line-height: 1;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.zkdk-gallery__place {
margin-top: 8px;
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.04em;
opacity: 0.92;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.zkdk-gallery__meta {
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.06em;
text-align: right;
white-space: nowrap;
opacity: 0.92;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
/* финальная карточка «Ещё N дома — на карте» */
.zkdk-gallery__card--tail {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 540px;
padding: 40px;
background: var(--ink);
color: var(--paper);
}
.zkdk-gallery__tail-label {
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(243, 236, 224, 0.6);
}
.zkdk-gallery__tail-title {
font-family: var(--font-display);
font-weight: var(--w-semibold);
font-size: var(--text-5xl);
line-height: 1.04;
letter-spacing: -0.02em;
}
.zkdk-gallery__tail-title em {
font-style: italic;
color: var(--wood);
}
.zkdk-gallery__tail-btn {
display: inline-block;
margin-top: 28px;
padding: 16px 26px;
background: var(--wood);
color: var(--paper);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: opacity var(--transition);
}
.zkdk-gallery__tail-btn:hover {
opacity: 0.85;
}
@media (max-width: 768px) {
.zkdk-gallery {
padding: 56px 0;
}
.zkdk-gallery__card,
.zkdk-gallery__card--tail {
width: 320px;
}
.zkdk-gallery__media,
.zkdk-gallery__card--tail {
height: 440px;
}
.zkdk-gallery__card--tail {
padding: 28px;
}
.zkdk-gallery__name {
font-size: 24px;
}
}
@media (max-width: 480px) {
.zkdk-gallery__head {
padding: 0 20px;
}
.zkdk-gallery__rail {
padding: 0 20px;
}
.zkdk-gallery__card,
.zkdk-gallery__card--tail {
width: 80vw;
}
.zkdk-gallery__media,
.zkdk-gallery__card--tail {
height: 104vw;
}
}
/* ── Лайтбокс живой галереи ─────────────────────────────────────────── */
.zkdk-gallery__img {
cursor: zoom-in; /* подсказка: фото открывается на весь экран */
}
.zkdk-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(8px, 2vw, 28px);
padding: clamp(12px, 4vw, 48px);
background: rgba(10, 9, 8, 0.92);
opacity: 0;
transition: opacity 0.25s ease;
}
.zkdk-lightbox[hidden] {
display: none; /* перебиваем display:flex автором, не только UA */
}
.zkdk-lightbox.is-open {
opacity: 1;
}
.zkdk-lightbox__stage {
margin: 0;
display: flex;
max-width: min(1200px, 90vw);
max-height: 88vh;
}
.zkdk-lightbox__img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 88vh;
object-fit: contain;
cursor: default;
border-radius: var(--radius-sm);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.zkdk-lightbox__nav,
.zkdk-lightbox__close {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(243, 236, 224, 0.4);
border-radius: var(--radius-pill);
background: transparent;
color: var(--paper);
font-family: var(--font-mono);
line-height: 1;
cursor: pointer;
transition:
background var(--transition),
color var(--transition);
}
.zkdk-lightbox__nav {
width: 56px;
height: 56px;
font-size: 22px;
}
.zkdk-lightbox__nav:hover,
.zkdk-lightbox__close:hover {
background: var(--paper);
color: var(--ink);
}
.zkdk-lightbox__nav[hidden],
.zkdk-lightbox__counter[hidden] {
display: none;
}
.zkdk-lightbox__close {
position: absolute;
top: clamp(12px, 3vw, 28px);
right: clamp(12px, 3vw, 28px);
width: 48px;
height: 48px;
font-size: 26px;
}
.zkdk-lightbox__counter {
position: absolute;
bottom: clamp(12px, 3vw, 28px);
left: 0;
right: 0;
text-align: center;
color: rgba(243, 236, 224, 0.7);
font-family: var(--font-mono);
font-size: var(--text-sm);
letter-spacing: 0.12em;
}
@media (max-width: 640px) {
.zkdk-lightbox__nav {
position: absolute;
bottom: clamp(12px, 3vw, 28px);
width: 48px;
height: 48px;
}
.zkdk-lightbox__nav--prev {
left: 16%;
}
.zkdk-lightbox__nav--next {
right: 16%;
}
/* счётчик — по центру между стрелками (стрелки 48px внизу, текст низкий) */
.zkdk-lightbox__counter {
bottom: 26px;
}
.zkdk-lightbox__stage,
.zkdk-lightbox__img {
max-height: 78vh;
}
}
@media (prefers-reduced-motion: reduce) {
.zkdk-lightbox {
transition: none;
}
}
.bono-customize-pc-preset {
display: inline-block;
width: 26px;
height: 24px;
border: 1px solid #fbfaf8;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-shadow: inset 0 0 0 1px #fff;
box-shadow: inset 0 0 0 1px #fff;
}
.preset-gradient-3,
.sidebar-left .section-preset--gradient-3,
.sidebar-none .section-preset--gradient-3:before,
.sidebar-right .section-preset--gradient-3 {
background-color: #fbfaf8;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#fbfaf8),
to(#fbfaf8)
);
background-image: linear-gradient(to right, #fbfaf8);
background-repeat: repeat-x;
}
/* =========================================================
ЗАВОД КДК — re-skin темы Bono под дизайн-систему «Журнал»
Натягивает токены из zkdk.css на реальные классы Bono + WooCommerce.
Подключается из дочерней темы bono-child (см. functions.php).
Загружается ПОСЛЕ стилей темы, поэтому ключевые правила помечены
!important, чтобы перебить дефолты Bono.
========================================================= */
/* ─── 0. ШРИФТЫ (локальный хостинг, файлы в bono-child/fonts/) ─
woff2 с кириллицей+латиницей. font-display: swap — текст виден
сразу системным шрифтом, потом подменяется. Никаких обращений
к Google со стороны посетителя. */
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/golos-text-400.woff2) format("woff2");
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/golos-text-500.woff2) format("woff2");
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/golos-text-600.woff2) format("woff2");
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/golos-text-700.woff2) format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/inter-400.woff2) format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/inter-500.woff2) format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/inter-600.woff2) format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/jetbrains-mono-400.woff2) format("woff2");
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//zkdk.ru/wp-content/themes/bono-child/fonts/jetbrains-mono-500.woff2) format("woff2");
}
/* ─── 1. ТОКЕНЫ ─────────────────────────────────────────── */
:root {
--paper: #f3ece0;
--paper-deep: #e7ddc9;
--white: #faf8f3;
--ink: #2a3e33;
--ink-deep: #1c2a23;
--ink-soft: #5e6960;
--wood: #8a6a3f;
--line: rgba(42, 62, 51, 0.1);
--font-display: "Golos Text", "Inter Tight", system-ui, sans-serif;
--font-body:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
--radius-sm: 2px;
--radius-md: 2px;
--radius-pill: 2px;
--transition: 150ms ease;
--content-width: 1280px;
/* Тень карточек при наведении — единая на весь сайт, меняется тут */
--shadow-card-hover: 0 0 30px -10px rgba(0, 0, 0, 0.3);
}
/* ─── 2. БАЗА ───────────────────────────────────────────── */
body.home,
body.theme-bono {
background: #ffffff !important;
color: var(--ink) !important;
font-family: var(--font-body) !important;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
margin-bottom: 0;
}
body.theme-bono .site {
background: #ffffff !important;
}
.theme-bono h1,
.theme-bono h2,
.theme-bono h3,
.theme-bono h4 {
font-family: var(--font-display) !important;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--ink);
}
h1 {
font-size: var(--text-7xl);
}
.theme-bono a {
color: inherit;
}
/* ссылки-кнопки с заливкой: сброс выше (color:inherit) специфичнее
.btn--primary и красит текст в цвет фона — возвращаем светлый */
.theme-bono a.btn--primary,
.theme-bono a.btn--wood {
color: var(--paper);
}
/* контейнер контента — выровнять по ширине дизайна */
.theme-bono .site-content-inner,
.theme-bono .fixed {
max-width: var(--content-width);
}
.content-area {
order: 0;
}
/* Фоны секций категории — повторяют пресеты конструктора на главной:
§02 «Три варианта» = градиент gradient-3 (#f4f3e6 → #f5eeed),
§04 «Шесть причин» = paper (bgc-2, #f3ece0). Полоса во всю ширину окна
через ::before (как у пресетов Bono), контент поднимаем над ней z-index'ом. */
.zkdk-cat-bg--gradient,
.zkdk-cat-bg--paper {
position: relative;
}
.zkdk-cat-bg--gradient::before,
.zkdk-cat-bg--paper::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
z-index: 0;
}
.zkdk-cat-bg--gradient::before {
background: linear-gradient(to right, #f4f3e6, #f5eeed);
}
.zkdk-cat-bg--paper::before {
background: var(--paper);
}
.zkdk-cat-bg--gradient > *,
.zkdk-cat-bg--paper > * {
position: relative;
z-index: 1;
}
/* ─── 3. ШАПКА (template-parts/header/header.php) ────────────
Кастомная разметка: .zkdk-header__brand (логотип + дескриптор),
.zkdk-header__nav (главное меню = #site-navigation, источник для
клона в мобильное меню), .zkdk-header__actions (телефон + мессенджеры).
Меню-правила заскоплены под .zkdk-header, чтобы НЕ задеть клон
#site-navigation-mobile (он лежит в .js-mobile-menu-placeholder, вне шапки,
и оформляется боновским drawer'ом). Sticky-поведение — в разделе 13. */
/* position:sticky у шапки требует, чтобы предок .site НЕ был скролл-контейнером.
Bono ставит .site{overflow:hidden} (ради клиппинга full-bleed секций с :before
width:100vw) — это ломает sticky. Меняем на overflow-x:clip: горизонтальный
вылет так же обрезается, но скролл-контейнер по оси Y не создаётся. */
body.theme-bono .site {
overflow-x: clip !important;
overflow-y: visible !important;
}
/* ─── ЕДИНАЯ КОНТЕНТНАЯ КОЛОНКА ───
Контейнеры Bono (.fixed/.container: шапка, каталог, карточка товара)
на широких экранах растягивались до 1390px, а полосы .zkdk (футер,
секции главной, галерея) живут на --content-width (1280px) c полями
--px. Приводим сетку Bono к той же колонке — весь сайт в один стиль.
Селекторы — как у Bono (style.min.css, правила .fixed). */
@media (min-width: 1200px) {
.container,
.fixed.block-after-site,
.fixed.main-navigation-inner,
.fixed.related-posts,
.fixed.section-block,
.fixed.section-html,
.fixed.site-content,
.fixed.site-footer-inner,
.fixed.site-header-inner,
.footer-navigation.fixed,
.main-navigation.fixed,
.site-footer.fixed,
.site-header.fixed,
.super-header-inner.fixed,
.super-header.fixed {
max-width: min(var(--content-width), calc(100% - 2 * var(--px)));
}
}
.site-header.zkdk-header {
position: sticky;
top: 0;
z-index: 1000;
background: var(--paper) !important;
border-bottom: 1px solid var(--line) !important;
box-shadow: none !important;
padding: 0;
transition:
transform 320ms ease,
box-shadow 320ms ease;
will-change: transform;
}
.zkdk-header .zkdk-header__inner {
display: flex;
align-items: center;
gap: 28px;
max-width: var(--content-width);
margin: 0 auto;
padding: 12px clamp(16px, 4vw, 40px) !important;
}
/* бренд: логотип + дескриптор справа от него (через разделитель) */
.zkdk-header__brand {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 16px;
flex: 0 0 auto;
text-decoration: none;
}
.zkdk-header__logo {
display: block;
height: 62px;
width: auto;
}
.zkdk-header__desc {
font-size: 10px;
line-height: 1.25;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
max-width: 150px;
padding-left: 16px;
border-left: 1px solid var(--line);
}
/* главное меню — по центру по горизонтали и вертикали. Центрируем на КАЖДОМ
уровне вложенности (nav → .main-navigation-inner → ul), иначе внутренние
блоки растягиваются по высоте и меню прижимается к их верху (был выше телефона). */
.zkdk-header .zkdk-header__nav.main-navigation {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: space-between;
align-self: stretch;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
min-height: 0 !important;
width: auto !important;
margin: 0;
}
.zkdk-header .zkdk-header__nav .main-navigation-inner {
display: flex;
align-items: center;
width: auto;
padding: 0;
}
/* Меню: гасим стили родительской Bono (style.min.css). Её правила
.main-navigation ul li>a задают крупный padding 20px, display:block,
font-weight, color:#111, стрелки-иконки у пунктов с подменю и вертикальную
раскладку списка с отрицательными margin. Перебиваем — вид задаёт только
этот CSS. !important на ключевых свойствах, т.к. наш файл грузится после Bono. */
.zkdk-header .zkdk-header__nav .menu {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: clamp(14px, 2vw, 30px);
margin: 0 !important;
padding: 0 !important;
list-style: none;
background: none !important;
}
.zkdk-header .zkdk-header__nav .menu > li {
position: relative;
margin: 0 !important;
}
.zkdk-header .zkdk-header__nav .menu > li.only-hamburger {
display: none; /* пункты top-menu, что скрипт Bono подмешивает для мобилки */
}
.zkdk-header .zkdk-header__nav .menu > li > a,
.zkdk-header .zkdk-header__nav .menu > li > span {
display: inline-block;
padding: 0 !important;
font-family: var(--font-mono) !important;
font-weight: 400;
font-size: 15px !important;
line-height: 1;
color: var(--ink-soft);
text-decoration: none;
letter-spacing: 0.01em;
white-space: nowrap;
transition: color var(--transition);
}
.zkdk-header .zkdk-header__nav .menu > li > a:hover,
.zkdk-header .zkdk-header__nav .menu > li > span:hover,
.zkdk-header .zkdk-header__nav .menu > li.current-menu-item > a,
.zkdk-header .zkdk-header__nav .menu > li.current-menu-ancestor > a {
color: var(--ink) !important;
}
/* стрелки-иконки у пунктов с подменю (иконочный шрифт wpshop-core) — убрать */
.zkdk-header .zkdk-header__nav .menu > li.menu-item-has-children > a:after,
.zkdk-header .zkdk-header__nav .menu > li.menu-item-has-children > span:after {
content: none !important;
}
/* действия справа: телефон + мессенджеры */
.zkdk-header__actions {
display: flex;
align-items: center;
gap: 18px;
flex: 0 0 auto;
/* без margin-left:auto — иначе он съедает свободное место раньше flex-grow
у меню, и меню перестаёт центрироваться. Зазор держит .zkdk-header__nav. */
}
.zkdk-header__phone {
font-size: 15px;
line-height: 1;
color: var(--ink);
text-decoration: none;
letter-spacing: 0.02em;
white-space: nowrap;
transition: color var(--transition);
}
.zkdk-header__phone:hover {
color: var(--wood);
}
.zkdk-header__socials {
display: flex;
align-items: center;
gap: 10px;
}
.zkdk-header__soc {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink);
transition: var(--transition);
}
/* специфичность выше, чем у инлайн-правила Bono
«.site-header-inner a:hover{color:#000}», иначе иконка чернеет на тёмном */
.zkdk-header .zkdk-header__socials .zkdk-header__soc:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
/* подсказка при наведении (текст — в data-tip у ссылки) */
.zkdk-header__soc {
position: relative;
}
.zkdk-header__soc::after {
content: attr(data-tip);
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
white-space: nowrap;
padding: 6px 10px;
border-radius: var(--radius-sm);
opacity: 0;
pointer-events: none;
transition:
opacity 200ms ease,
transform 200ms ease;
z-index: 60;
}
/* у последней иконки подсказку прижимаем к правому краю, чтобы не
вылезала за экран (иконки у самой кромки шапки) */
.zkdk-header__soc:last-child::after {
left: auto;
right: 0;
transform: translateY(-4px);
}
.zkdk-header__soc:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.zkdk-header__soc:last-child:hover::after {
transform: translateY(0);
}
.zkdk-header__soc-ico {
display: inline-block;
width: 18px;
height: 18px;
background-color: currentColor; /* иконка повторяет цвет кнопки */
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.zkdk-header__soc-ico--tg {
-webkit-mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/tg.svg);
mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/tg.svg);
}
.zkdk-header__soc-ico--max {
-webkit-mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/max.svg);
mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/max.svg);
}
/* гамбургер — только на мобиле */
.zkdk-header .humburger {
display: none;
}
.humburger span {
background: var(--ink) !important;
}
/* адаптив: меню сворачивается в гамбургер.
Селектор повторяет специфичность базового (…__nav.main-navigation), иначе
display:flex базового правила (0,3,0) перебивает скрытие — меню не пряталось. */
@media (max-width: 1024px) {
.zkdk-header .zkdk-header__nav.main-navigation {
display: none !important; /* клон #site-navigation-mobile вне .zkdk-header — не затрагивается */
}
.zkdk-header .humburger {
display: flex;
order: -1;
}
.zkdk-header__actions {
margin-left: auto; /* меню скрыто — нечему держать зазор, прижимаем действия вправо */
}
}
@media (max-width: 600px) {
.zkdk-header .zkdk-header__inner {
gap: 14px;
}
.zkdk-header__logo {
height: 44px;
}
.zkdk-header__desc {
display: none;
}
.zkdk-header__phone {
display: inline-block;
font-size: 14px;
}
}
/* ═══ МОБИЛЬНОЕ МЕНЮ — офф-канвас слева (header.php + zkdk-custom.js, блок 9).
Боновский нижний drawer не используем — прячем его. ═══ */
.js-mobile-menu-placeholder {
display: none !important;
}
/* гамбургер: своя геометрия + анимация в «X» по body.zkdk-menu-open */
.zkdk-header .humburger {
position: relative;
width: 26px;
height: 18px;
padding: 0;
box-sizing: border-box;
cursor: pointer;
}
.zkdk-header .humburger span {
position: absolute;
left: 10px;
right: 0;
height: 2px;
border-radius: 2px;
background: var(--ink) !important;
transition:
transform 260ms ease,
opacity 200ms ease;
}
.zkdk-header .humburger span:nth-child(1) {
top: 0;
}
.zkdk-header .humburger span:nth-child(2) {
top: 8px;
}
.zkdk-header .humburger span:nth-child(3) {
top: 16px;
}
body.zkdk-menu-open .zkdk-header .humburger span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
body.zkdk-menu-open .zkdk-header .humburger span:nth-child(2) {
opacity: 0;
}
body.zkdk-menu-open .zkdk-header .humburger span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* контейнер: оверлей + панель */
.zkdk-mmenu {
position: fixed;
inset: 0;
z-index: 2000;
visibility: hidden;
pointer-events: none;
}
body.zkdk-menu-open .zkdk-mmenu {
visibility: visible;
pointer-events: auto;
}
@media (min-width: 1025px) {
.zkdk-mmenu {
display: none; /* на десктопе меню обычное, офф-канвас не нужен */
}
}
.zkdk-mmenu__overlay {
position: absolute;
inset: 0;
background: rgba(28, 42, 35, 0.5);
opacity: 0;
transition: opacity 320ms ease;
}
body.zkdk-menu-open .zkdk-mmenu__overlay {
opacity: 1;
}
/* панель (наезжает слева) */
.zkdk-mmenu__panel {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: min(340px, 86vw);
display: flex;
flex-direction: column;
gap: 22px;
padding: 22px 24px 28px;
background: var(--paper);
box-shadow: 6px 0 50px rgba(28, 42, 35, 0.3);
transform: translateX(-100%);
transition: transform 340ms cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.zkdk-menu-open .zkdk-mmenu__panel {
transform: translateX(0);
}
/* шапка панели: логотип слева + дескриптор справа от него, крестик справа,
ниже — лёгкий бордер */
.zkdk-mmenu__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line);
}
.zkdk-mmenu__brand {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
text-decoration: none;
}
.zkdk-mmenu__logo {
display: block;
height: 50px;
width: auto;
}
.zkdk-mmenu__desc {
font-size: 10px;
line-height: 1.3;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
max-width: 150px;
padding-left: 14px;
border-left: 1px solid var(--line);
}
.zkdk-mmenu__close {
flex: 0 0 auto;
margin: -6px -6px 0 0;
padding: 4px 8px;
background: none;
border: 0;
font-size: 30px;
line-height: 1;
color: var(--ink);
cursor: pointer;
}
/* список меню */
.zkdk-mmenu__list {
list-style: none;
margin: 0;
padding: 0;
}
.zkdk-mmenu__list li {
margin: 0;
}
/* И , и (текущий пункт — Bono снимает ссылку со
страницы, на которой находимся): чтобы активный пункт не менял размер. */
.zkdk-mmenu__list a,
.zkdk-mmenu__list li > span {
display: block;
padding: 11px 0;
font-family: var(--font-display);
font-size: 21px;
color: var(--ink);
text-decoration: none;
}
.zkdk-mmenu__list .sub-menu {
list-style: none;
margin: 0 0 8px;
padding: 0 0 0 14px;
}
.zkdk-mmenu__list .sub-menu a {
padding: 8px 0;
font-size: 16px;
color: var(--ink-soft);
}
/* контакты — сразу под меню (через разделитель) */
.zkdk-mmenu__contacts {
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.zkdk-mmenu__phone {
font-family: var(--font-mono);
font-size: 20px;
letter-spacing: 0.02em;
color: var(--ink);
text-decoration: none;
}
.zkdk-mmenu__msgrs {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.zkdk-mmenu__msgr {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 14px;
color: var(--ink);
text-decoration: none;
transition: var(--transition);
}
.zkdk-mmenu__msgr:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.zkdk-mmenu__email {
font-family: var(--font-mono);
font-size: 14px;
color: var(--ink-soft);
text-decoration: none;
}
.zkdk-mmenu__addr {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.45;
color: var(--ink-soft);
}
/* кнопка «Написать нам» */
.zkdk-mmenu__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px 24px;
background: var(--ink);
color: var(--paper) !important;
font-family: var(--font-display);
font-size: 16px;
text-decoration: none;
border-radius: var(--radius-md);
transition: var(--transition);
}
.zkdk-mmenu__cta:hover {
background: var(--ink-deep);
}
/* при открытом меню — блокируем прокрутку страницы */
body.zkdk-menu-open {
overflow: hidden;
}
/* ─── 4. HERO (swiper-слайдер .card-slider) ─────────────── */
.card-slider-container {
border-bottom: 1px solid var(--line);
background: var(--paper-deep);
}
.card-slider__body-inner {
background: var(--paper) !important;
padding: 32px 36px !important;
box-shadow: 0 24px 60px rgba(28, 42, 35, 0.18);
border-radius: var(--radius-md);
}
.card-slider__title {
font-family: var(--font-display) !important;
font-size: clamp(34px, 5vw, 64px) !important;
line-height: 0.98 !important;
letter-spacing: -0.03em;
color: var(--ink) !important;
font-weight: 500 !important;
}
.card-slider__excerpt {
font-family: var(--font-body) !important;
font-size: 17px !important;
line-height: 1.5;
color: var(--ink-soft) !important;
margin-top: 14px;
}
/* стрелки и пагинация swiper */
.swiper-button-next,
.swiper-button-prev {
color: var(--ink) !important;
}
.swiper-pagination-bullet-active {
background: var(--wood) !important;
}
/* ─── 5. СЕКЦИИ (.section-block) ────────────────────────── */
.section-block {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Последний блок на главной — встык к футеру (оба тёмные → сливаются):
убираем только его нижний отступ. */
body.home #main > .section-block:last-child {
padding-bottom: 0 !important;
margin-bottom: -20px;
}
/* Секция с HERO — без отступов/границы, чтобы первый экран был во весь край. */
.section-block:has(.hero) {
padding: 0 !important;
border: none !important;
}
.section-preset--bg-dark-8 {
background: var(--ink) !important;
color: var(--paper) !important;
}
.section-preset--bg-dark-8 h1,
.section-preset--bg-dark-8 h2,
.section-preset--bg-dark-8 h3,
.section-preset--bg-dark-8 .section-block__title {
color: var(--paper) !important;
}
.section-preset--bg-dark-8 .section-block__title em,
.section-preset--bg-dark-8 em {
color: var(--wood) !important;
}
/* Цветовые пресеты Bono → под палитру темы.
Цвета пресетов зашиты в bono/assets/css/style.min.css; переопределяем здесь.
Фон у пресета вешается и напрямую, и через :before (full-width раскладка). */
.section-preset--bgc-2,
.section-preset--bgc-2:before {
background: var(--paper) !important;
}
.section-block__title {
font-family: var(--font-display) !important;
font-size: clamp(32px, 4.5vw, 56px) !important;
line-height: 0.98 !important;
font-weight: 400 !important;
letter-spacing: -0.02em;
color: var(--ink);
}
.section-block__title em {
font-style: italic;
color: var(--wood);
}
.section-block__description {
font-family: var(--font-body) !important;
font-size: 18px !important;
line-height: 1.55;
color: var(--ink-soft) !important;
}
/* «булиты» в первом блоке — как карточки преимуществ */
.home-first-block-bullet {
border-top: 2px solid var(--ink);
padding-top: 16px;
}
.home-first-block-bullet strong,
.home-first-block-bullet b {
font-family: var(--font-display) !important;
font-weight: 500;
display: block;
margin-bottom: 6px;
}
/* ─── 6. КАТАЛОГ (.shop-grid / .shop-item) ──────────────── */
/*.shop-grid {
gap: 24px !important;
}*/
.shop-grid--columns-3 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
}
/* В grid собственная ширина/гаттеры карточки Bono (33.333% + margin)
мешают — ячейка уже задаёт колонку. Сбрасываем, иначе карточка
занимает лишь треть своей ячейки и «худеет». */
.shop-grid--columns-3 > .shop-item,
.shop-grid--columns-3 > .product-category {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*.shop-item,
.shop-item-inner {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}*/
.shop-item__image,
.shop-item__image-inner {
width: 100% !important;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--paper);
height: 340px;
}
.related-products .shop-grid--columns-4 .shop-item__image {
height: 130px;
}
/* На телефонах сетка похожих/просмотренных схлопывается в одну колонку
(Bono: <576px — карточка на 100% ширины). Фото становится широким —
поднимаем высоту, чтобы держать пропорцию ~16/10 и не «приплюскивать»
картинку. В диапазоне 576–991px это 3 колонки, там остаётся 130px. */
@media (max-width: 575px) {
.related-products .shop-grid--columns-4 .shop-item__image {
height: 205px;
}
}
/* Одинаковый размер карточек: товары разного формата (фото 16:9 + планы)
давали разную высоту. Фиксируем боксу пропорции 16:9, картинку заполняем
(cover) — сетка ровная, основные фото 16:9 вписываются без обрезки. */
.shop-item__image-inner {
aspect-ratio: 16 / 10;
}
.shop-item__image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: var(--radius-md);
transition: transform 400ms ease;
}
.shop-item:hover .shop-item__image img {
transform: scale(1.03);
}
.shop-item__title {
margin-top: 14px !important;
}
.shop-item__title a {
font-family: var(--font-display) !important;
font-size: 24px !important;
font-weight: 500 !important;
letter-spacing: -0.01em;
color: var(--ink) !important;
}
/* Строка: характеристики слева, цена справа */
.shop-item__meta {
display: flex;
align-items: end;
gap: 12px;
height: 35px;
}
.shop-item__meta .shop-item__price {
margin-left: auto;
margin-top: 0 !important;
text-align: right;
}
/* Характеристики на карточке каталога — строка «иконка + значение»
.zkdk-specs--line (вывод из content-product.php, рендер и базовые
стили — inc/product-specs.php + раздел «Карточка товара» ниже) */
.shop-item__price {
margin-top: 4px !important;
}
.shop-item__price .price {
font-family: var(--font-display) !important;
font-size: 18px !important;
color: var(--ink) !important;
/* базовый .price — колонка (для del/ins); тут «от» и сумма в одну строку */
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
column-gap: 0.35em;
}
.shop-item__price del {
color: var(--ink-soft) !important;
opacity: 0.7;
font-size: 0.7em;
margin: 0;
order: 1;
text-decoration: line-through;
}
.shop-item__price ins {
text-decoration: none !important;
color: var(--ink) !important;
}
.price {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
gap: 0;
flex-direction: column;
}
.price > del:after {
content: none;
}
/* бейдж скидки */
.shop-item__badge,
.onsale {
background: var(--wood) !important;
color: var(--paper) !important;
font-family: var(--font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.04em;
border-radius: var(--radius-sm) !important;
padding: 4px 8px !important;
}
/* иконки на карточке: убираем быстрый просмотр и сравнение */
.shop-item__icons-quick,
.shop-item__icons-compare {
display: none !important;
}
/* кнопка «Посмотреть проект» (вместо «в корзину») — стиль праймари из hero */
.shop-item__view {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
background: var(--paper);
color: var(--ink-deep);
transition: background var(--transition);
}
.shop-item__view:hover {
background: #fff;
}
.shop-item__view svg {
transition: transform var(--transition);
}
.shop-item__view:hover svg {
transform: translateX(4px);
}
/* ─── 7. КНОПКИ ─────────────────────────────────────────── */
.shop-item__buttons-cart,
.theme-bono .button,
.theme-bono button.button,
.woocommerce a.button,
.woocommerce button.button,
.add_to_cart_button {
background: var(--ink) !important;
color: var(--paper) !important;
border: none !important;
border-radius: var(--radius-sm) !important;
font-family: var(--font-mono) !important;
font-size: 12px !important;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 12px 18px !important;
transition:
opacity var(--transition),
background var(--transition);
}
.shop-item__buttons-cart:hover,
.theme-bono .button:hover,
.woocommerce a.button:hover,
.add_to_cart_button:hover {
background: var(--ink-deep) !important;
opacity: 1 !important;
}
/* «акцентная» / охровая кнопка — для CTA, если помечена alt */
.theme-bono .button.alt,
.woocommerce .button.alt {
background: var(--wood) !important;
color: var(--paper) !important;
}
/* ссылка «Подробнее»/outline */
.theme-bono .button.outline,
.theme-bono a.button--ghost {
background: transparent !important;
color: var(--ink) !important;
border: 1px solid var(--ink) !important;
}
/* ─── 8. КОНТАКТЫ / ФОРМЫ ───────────────────────────────── */
.home-block-contacts,
.home-contacts-text {
font-family: var(--font-body);
}
.theme-bono input[type="text"],
.theme-bono input[type="tel"],
.theme-bono input[type="email"],
.theme-bono textarea,
.theme-bono select {
background: var(--white) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius-sm) !important;
font-family: var(--font-body) !important;
color: var(--ink) !important;
padding: 12px 14px !important;
}
.theme-bono input:focus,
.theme-bono textarea:focus {
border-color: var(--ink) !important;
outline: none;
}
/* ─── 9. ФУТЕР ──────────────────────────────────────────── */
.site-footer--style-gray {
background: var(--ink) !important;
color: var(--paper) !important;
border-top: none !important;
}
.site-footer a {
color: var(--paper) !important;
opacity: 0.85;
}
.site-footer a:hover {
opacity: 1;
color: var(--wood) !important;
}
.footer-widget .widget-title,
.site-footer h3,
.site-footer h4 {
font-family: var(--font-display) !important;
color: var(--paper) !important;
}
.footer-bottom {
border-top: 1px solid rgba(243, 236, 224, 0.15) !important;
font-family: var(--font-mono);
font-size: 12px;
color: rgba(243, 236, 224, 0.7);
}
/* ─── 10. QUICK-VIEW (модалка товара) ───────────────────── */
.quick-view__container {
background: var(--paper) !important;
border-radius: var(--radius-md);
}
.quick-view .product_title {
font-family: var(--font-display) !important;
color: var(--ink) !important;
}
.quick-view__close {
color: var(--ink) !important;
}
/* ─── 11. WOOCOMMERCE: цена/общее ───────────────────────── */
.woocommerce-Price-amount {
font-family: var(--font-display) !important;
}
.woocommerce-Price-currencySymbol {
font-weight: 400;
}
.woocommerce-message,
.woocommerce-info {
border-top-color: var(--wood) !important;
background: var(--white) !important;
}
.woocommerce span.onsale {
background: var(--wood) !important;
}
/* ─── 12. АДАПТИВ ───────────────────────────────────────── */
@media (max-width: 900px) {
.shop-grid--columns-3 {
grid-template-columns: repeat(2, 1fr) !important;
}
.card-slider__title {
font-size: clamp(28px, 7vw, 40px) !important;
}
.section-block {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media (max-width: 768px) {
/* карточка каталога: характеристики во всю ширину, цена строкой ниже */
.shop-item__meta {
flex-wrap: wrap;
height: auto;
row-gap: 6px;
}
.shop-item__meta .zkdk-specs--line {
flex: 1 1 100%;
justify-content: space-between;
}
.shop-item__meta .shop-item__price {
flex: 0 0 100%;
margin-left: 0;
text-align: left;
}
}
@media (max-width: 560px) {
.shop-grid--columns-3 {
grid-template-columns: 1fr !important;
}
.shop-item__title a {
font-size: 22px !important;
}
.shop-item__image {
height: 215px;
}
}
/* ─── 13. ПОВЕДЕНИЕ (классы из zkdk-custom.js) ──────────── */
/* Sticky-шапка «появляется при скролле вверх» (десктоп и мобайл).
Классы вешает zkdk-custom.js на :
.zkdk-head-fixed — проскроллили дальше высоты шапки (включаем тень);
.zkdk-head-hidden — последнее движение вниз (прячем шапку вверх).
Сама шапка приклеена через position:sticky (см. раздел 3). */
body.zkdk-head-fixed .site-header.zkdk-header {
box-shadow: 0 6px 24px rgba(28, 42, 35, 0.08) !important;
}
body.zkdk-head-hidden .site-header.zkdk-header {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.site-header.zkdk-header {
transition: none;
}
}
/* плавное появление */
.zkdk-reveal {
opacity: 0;
transform: translateY(18px);
transition:
opacity 600ms ease var(--reveal-delay, 0ms),
transform 600ms ease var(--reveal-delay, 0ms);
}
.zkdk-reveal--in {
opacity: 1;
transform: none;
}
/* лёгкий каскад карточек внутри сеток — появляются по очереди */
.zkdk .advantages-grid > .zkdk-reveal:nth-child(2),
.zkdk .grid-3 > .zkdk-reveal:nth-child(2),
.zkdk .process-grid > .zkdk-reveal:nth-child(2) {
--reveal-delay: 70ms;
}
.zkdk .advantages-grid > .zkdk-reveal:nth-child(3),
.zkdk .grid-3 > .zkdk-reveal:nth-child(3),
.zkdk .process-grid > .zkdk-reveal:nth-child(3) {
--reveal-delay: 140ms;
}
.zkdk .advantages-grid > .zkdk-reveal:nth-child(4),
.zkdk .process-grid > .zkdk-reveal:nth-child(4) {
--reveal-delay: 210ms;
}
.zkdk .advantages-grid > .zkdk-reveal:nth-child(5),
.zkdk .process-grid > .zkdk-reveal:nth-child(5) {
--reveal-delay: 280ms;
}
.zkdk .advantages-grid > .zkdk-reveal:nth-child(6),
.zkdk .process-grid > .zkdk-reveal:nth-child(6) {
--reveal-delay: 350ms;
}
@media (prefers-reduced-motion: reduce) {
.zkdk-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
.site-branding__body {
max-width: 110px;
}
.preset-bg-dark-8,
.sidebar-left .section-preset--bg-dark-8,
.sidebar-none .section-preset--bg-dark-8:before,
.sidebar-right .section-preset--bg-dark-8 {
background: var(--ink);
}
/* Светлые полоски по бокам на стыке нижней тёмной секции и футера.
Тёмная секция (:before, 100vw) и футер — оба full-bleed, а в зазоре между
ними по краям (за 1190px контента) просвечивал белый фон страницы (body/.site).
Тянем тёмный фон футера на пару пикселей вверх, чтобы перекрыть зазор,
компенсируя верхний паддинг — позиция содержимого футера не меняется. */
.zkdk .footer-section {
margin-top: -24px;
padding-top: calc(var(--py-sm) + 24px);
}
.header-phone {
display: block;
text-align: right;
}
/* Страница товара: шире колонка с фото (Bono по умолчанию даёт 42%).
Колонка .product-images задаёт ширину галереи, картинка тянется на 100%. */
@media (min-width: 768px) {
.product-images {
flex: 0 0 70%;
max-width: 70%;
margin-right: 56px; /* отступ до правой колонки (у Bono 70px) */
}
}
/* Галерея товара: слайды разного формата (фото 16:9 + план этажа) заставляли
высоту прыгать при перелистывании. Фиксируем слайду пропорции 16:9, а картинку
вписываем целиком (contain) — все слайды одной высоты, план не обрезается. */
.woocommerce-product-gallery__image {
aspect-ratio: 16 / 9;
overflow: hidden;
background: #fff;
}
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image .wp-post-image {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
/* ════════════════════════════════════════════════════════════
КАРТОЧКА ТОВАРА (одиночный домокомплект) — доработки ре-скина
════════════════════════════════════════════════════════════ */
/* ─── 1. Галерея: миниатюры поверх главного фото, у нижнего края ───
Родитель Bono раскладывает .woocommerce-product-gallery флексом в строку
(миниатюры колонкой слева, фото справа). Мы кладём ряд миниатюр ПОВЕРХ
фото, прижав к низу (контейнер у Bono уже position:relative). На мобиле
оверлей закрывал бы слишком много — там миниатюры обычным рядом под
фото. Когда фото много — ряд прокручивается по горизонтали
(drag-to-scroll в JS, блок 12 zkdk-custom.js). Классы .flex-viewport и
.flex-control-thumbs создаёт flexslider WooCommerce. */
.woocommerce-product-gallery {
flex-wrap: wrap;
}
.woocommerce-product-gallery .flex-viewport {
order: 1;
flex: 0 0 100%;
max-width: 100%;
}
.woocommerce-product-gallery .flex-control-thumbs {
order: 2;
flex: 0 0 100%;
max-width: 100%;
display: flex;
gap: 12px;
margin: 12px 0 0;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
padding-bottom: 2px;
cursor: grab;
-webkit-user-select: none;
user-select: none;
}
/* мобильные: миниатюры мельче (на десктопе перекрывается оверлеем ниже) */
.woocommerce-product-gallery .flex-control-thumbs li {
flex: 0 0 52px;
margin-bottom: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
display: block;
width: 100%;
}
.woocommerce-product-gallery .flex-control-thumbs.is-dragging {
cursor: grabbing;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
height: 4px;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
background: var(--line);
border-radius: 2px;
}
/* Десктоп: ряд миниатюр — оверлей у нижнего края фото. Миниатюры мельче
(72px), с белой рамкой, чтобы читались на любом снимке; активная
подсвечена охрой (--wood). Прозрачность Bono (0.6) убираем — на фото
полупрозрачные миниатюры выглядят грязно. */
@media (min-width: 768px) {
.woocommerce-product-gallery .flex-control-thumbs {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 3;
flex: none;
max-width: none;
margin: 0;
padding-bottom: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li {
flex: 0 0 72px;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
opacity: 1;
border: 2px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
border-color: var(--wood);
}
}
/* ─── 1б. Блок «Наш брус» на карточке товара: два сечения РЯДОМ ───
На главной .brus-row — широкие горизонтальные ряды (фото слева, текст
справа). На карточке товара компактнее: сечения 145 и 195 стоят двумя
столбиками (145 слева, 195 справа), внутри каждого фото сверху, текст
снизу, шрифты и картинки мельче. Скоуп .zkdk-brus — только карточка
товара, главная не затрагивается. */
@media (min-width: 768px) {
.zkdk-brus .brus-rows {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 48px;
}
.zkdk-brus .brus-row {
grid-template-columns: 1fr; /* фото над текстом, а не сбоку */
gap: 20px;
align-items: start;
padding: 32px 0;
}
.zkdk-brus .brus-row__size {
font-size: var(--text-4xl);
}
.zkdk-brus .brus-row__desc {
font-size: var(--text-sm);
margin: 12px 0 18px;
}
.zkdk-brus .brus-row__params {
gap: 16px 28px;
padding-top: 16px;
}
.zkdk-brus .brus-row__param-val {
font-size: var(--text-lg);
}
}
/* клик по главному фото открывает лайтбокс (как на главной, JS-блок 12);
родной зум-триггер WooCommerce убираем, курсор — «увеличить» */
.woocommerce-product-gallery__trigger {
display: none !important;
}
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
cursor: zoom-in;
}
/* ─── 2. CTA вместо корзины: «Получить коммерческое предложение» ───
Форма корзины (количество, «В корзину», сравнение) убрана в шаблоне
woocommerce/content-single-product.php. Кнопка акцентная (охра),
крупнее базовой .btn. Пока инертная — позже повесим форму на .js-zkdk-kp. */
.woocommerce-product-form-wrap {
margin: 24px 0 0;
}
.zkdk-kp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
max-width: 100%;
padding: 16px 30px;
border: none;
border-radius: var(--radius-sm);
background: var(--wood);
color: var(--paper);
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.3;
text-align: center;
cursor: pointer;
transition:
background var(--transition),
opacity var(--transition);
}
.zkdk-kp-btn:hover {
background: var(--ink);
color: var(--paper);
opacity: 1;
}
/* ─── 2б. Цена: новая крупная и обычного цвета, старая — сбоку ───
Родитель Bono красит новую цену (.price>ins) в красный (#f43c33) и кладёт
её ПОД старой (колонкой). На карточке товара делаем иначе: новая цена —
первой, обычным цветом темы и крупнее; старая — зачёркнута, мельче,
приглушена и стоит сбоку (в строке). Скоплено под .product-info, чтобы
карточки каталога (.shop-item__price) не затронуть. */
/* Колонка инфо — флекс-столбец: блок «цена + подпись + кнопка» прижат
к низу колонки (вровень с нижним краем фото). На мобиле контейнер
перенесён в столбик и высота своя — margin-top:auto просто не работает. */
.product-info {
display: flex;
flex-direction: column;
}
.product-info p.price {
margin-top: auto;
margin-bottom: 0;
}
/* Пустая мета под кнопкой (артикул/категории скрыты фильтрами Bono):
у Bono она с верхним отступом и рамкой — отжимала кнопку от низа. */
.product-info .product_meta {
display: none;
}
.product-info .price {
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
font-family: var(--font-display);
font-size: 2em;
color: var(--ink);
}
.product-info .price ins {
order: 0;
color: var(--ink);
font-weight: 600;
text-decoration: none;
}
.product-info .price del {
order: 1;
color: var(--ink-soft);
opacity: 0.6;
font-size: 0.62em;
font-weight: 400;
text-decoration: line-through;
}
/* приставка «от» перед ценой (см. content-single-product.php и content-product.php) */
.shop-item__price .price .zkdk-price-from,
.product-info .price .zkdk-price-from {
font-size: 0.62em;
font-weight: 400;
color: var(--ink-soft);
}
/* подпись под ценой — якорь к блоку «Варианты комплектации» (#complektaciya) */
.zkdk-price-note {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
}
.zkdk-price-note a {
color: var(--ink-soft);
text-decoration: underline dashed;
text-underline-offset: 3px;
}
.zkdk-price-note a:hover {
color: var(--wood);
}
/* плавный прокрут по якорям (подпись под ценой → #zkdk-config и т.п.) */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* чтобы якорные секции не подлезали под шапку при прокруте */
.zkdk-config,
#calc,
#paths,
#brus,
#production,
#faq {
scroll-margin-top: 90px;
}
/* ─── 2а. Иконки-характеристики (общий рендер inc/product-specs.php) ───
Данные из атрибутов WooCommerce (этажи / площадь / комнаты / санузлы),
пустые пропускаются. Два вида: --grid на карточке товара (2×2 под
названием, шириной примерно с кнопку «Получить предложение»)
и --line в карточках каталога / похожих / просмотренных. */
.zkdk-specs {
color: var(--ink);
}
.zkdk-specs__item {
display: flex;
align-items: center;
gap: 9px;
}
.zkdk-specs__icon {
flex: 0 0 auto;
fill: none;
stroke: var(--wood);
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.zkdk-specs__icon .zkdk-ico-dot {
fill: var(--wood);
stroke: none;
}
.zkdk-specs--grid {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 14px; /* отступ между колонками = отступу между рядами */
margin: 18px 0 6px;
}
.zkdk-specs--grid .zkdk-specs__icon {
width: 40px;
height: 40px;
}
.zkdk-specs--line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-family: var(--font-mono);
font-size: 12px;
}
.zkdk-specs--line .zkdk-specs__item {
gap: 5px;
}
.zkdk-specs--line .zkdk-specs__icon {
width: 16px;
height: 16px;
stroke-width: 1.6;
}
/* Две подписи в строке: полная («4 комнаты») и сокращённая («4 к»).
По умолчанию видна полная; в маленьких карточках (похожие/просмотренные,
обёртка .related-products) — сокращённая. */
.zkdk-specs__short {
display: none;
}
.related-products .zkdk-specs--line .zkdk-specs__full {
display: none;
}
.related-products .zkdk-specs--line .zkdk-specs__short {
display: inline;
}
/* нижний отступ верхнего блока карточки (фото + инфо) на десктопе */
@media (min-width: 768px) {
.product-container {
margin-bottom: 46px;
}
}
/* ─── 3. Описание + характеристики в две колонки ───
Обе панели вкладок (описание и «Доп. информация» = таблица характеристик)
выводятся стопкой без переключателя. Раскладываем в ряд: характеристики
слева (order:1), описание справа (order:2). На мобильных (<900px) — снова
одна колонка (там описание «расстёгивается» через .zkdk-td, см. блок 10
в zkdk-custom.js). */
@media (min-width: 900px) {
.woocommerce-tabs.wc-tabs-wrapper {
display: flex;
align-items: flex-start;
gap: 56px;
}
.woocommerce-Tabs-panel--additional_information {
order: 1;
flex: 0 0 40%;
max-width: 40%;
}
.woocommerce-Tabs-panel--description {
order: 2;
flex: 1 1 auto;
min-width: 0;
}
}
/* таблица характеристик под палитру темы (родитель даёт бордер #eee) */
.woocommerce-product-attributes .woocommerce-product-attributes-item {
border-bottom: 1px solid var(--line);
}
.woocommerce-product-attributes .woocommerce-product-attributes-item__label {
color: var(--ink-soft);
font-family: var(--font-body);
font-weight: 500;
}
.woocommerce-product-attributes .woocommerce-product-attributes-item__value {
color: var(--ink);
font-family: var(--font-display);
}
/* ─── 4. Похожие / просмотренные: цена на отдельной строке ───
В .shop-item__meta характеристики и цена делили один ряд, и длинная цена
(«2 333 147 ₽») переносилась по цифрам даже на десктопе (разряды разделены
обычными пробелами). В блоках на карточке товара кладём цену ПОД
характеристики, во всю ширину, чуть мельче и без переноса цифр. */
.related-products .shop-item__meta {
display: block;
height: auto;
}
.related-products .zkdk-specs--line {
font-size: 11px;
gap: 4px 10px;
}
.related-products .zkdk-specs--line .zkdk-specs__icon {
width: 14px;
height: 14px;
}
.related-products .zkdk-specs--line .zkdk-specs__item {
gap: 2px;
}
.related-products .shop-item__meta .shop-item__price {
margin-top: 6px !important;
margin-left: 0;
text-align: left;
}
.related-products .shop-item__price .price {
font-size: 16px !important;
white-space: nowrap;
}
/* ─── 5. «Варианты комплектации» (карточки как в калькуляторе) ───
Разметку выводит inc/product-config-variants.php (хук
woocommerce_after_single_product_summary, приоритет 12). Вид карточек
.package-card наследуется из zkdk-components.css (scope .zkdk); здесь —
только заголовок блока, кнопка внизу карточки и правки под статичный
контекст (на карточке товара калькулятора нет). */
.zkdk-config__title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 28px;
}
/* карточки здесь статичные (не выбирают комплектацию) — гасим «кликабельность» */
.zkdk-config .package-card {
cursor: default;
}
.zkdk-config .package-card:hover:not(.is-active) {
border-color: var(--line);
}
/* «Цена по запросу» — короче стандартных 36px, чтобы не растягивала строку */
.zkdk-config .package-card__price--request {
font-size: 22px;
}
/* кнопка прижата к низу карточки — ряды кнопок выровнены между карточками */
.zkdk-config .package-card__foot {
margin-top: auto;
padding-top: 24px;
}
.zkdk-config .package-card__foot .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 20px;
font-size: var(--text-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* на тёмной карточке «Только комплект» кнопка — бежевая (на охре плохо читалась) */
.zkdk-config .package-card.is-active .package-card__foot .btn {
background: var(--paper);
color: var(--ink);
}
.zkdk-config .package-card.is-active .package-card__foot .btn:hover {
background: var(--white);
color: var(--ink);
opacity: 1;
}
/* убрать нижний отступ вкладок на десктопе — блок комплектаций подтягивается */
@media (min-width: 768px) {
.woocommerce-tabs {
margin-bottom: 0;
}
}
/* ─── 6. Модалка «Получить КП / расчёт» ───
Разметку выводит inc/product-config-variants.php в wp_footer (только на
товаре). Форма переиспользует стили .contact-form (scope .zkdk). Отправка
пока не подключена — по submit показывается блок .zkdk-modal__done. */
.zkdk-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.zkdk-modal.is-open {
display: flex;
}
.zkdk-modal__overlay {
position: absolute;
inset: 0;
background: rgba(28, 42, 35, 0.55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.zkdk-modal__dialog {
position: relative;
width: 100%;
max-width: 460px;
max-height: calc(100vh - 40px);
overflow-y: auto;
background: var(--paper);
color: var(--ink);
padding: 36px 32px;
border-radius: var(--radius-md);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
}
.zkdk-modal__close {
position: absolute;
top: 10px;
right: 12px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
font-size: 26px;
line-height: 1;
color: var(--ink-soft);
cursor: pointer;
transition: color var(--transition);
}
.zkdk-modal__close:hover {
color: var(--ink);
}
.zkdk-modal__title {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: -0.01em;
margin: 0 30px 6px 0;
}
.zkdk-modal__context {
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-soft);
margin-bottom: 18px;
}
/* форма внутри модалки — без фона/паддинга обёртки .contact-form */
.zkdk-modal .contact-form {
background: none;
padding: 0;
}
.zkdk-modal .contact-form__label {
display: block;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
}
.zkdk-modal__submit {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 22px;
padding: 14px 20px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.zkdk-modal__note {
font-size: 11px;
line-height: 1.5;
color: var(--ink-soft);
margin: 14px 0 0;
}
.zkdk-modal__note a {
color: var(--ink);
text-decoration: underline;
}
.zkdk-modal__submit:disabled {
opacity: 0.6;
cursor: default;
}
.zkdk-modal__error {
margin: 12px 0 0;
font-size: 12px;
line-height: 1.45;
color: #a3402f;
}
/* honeypot: скрытое поле-ловушка — человек не видит, боты заполняют */
.zkdk-hp-field {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* обязательное согласие на обработку ПДн: чекбокс + текст со ссылками */
.zkdk-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 18px;
font-size: 12px;
line-height: 1.5;
color: var(--ink-soft);
cursor: pointer;
}
.zkdk-consent input {
margin: 2px 0 0;
flex: 0 0 auto;
accent-color: var(--wood);
}
.zkdk-consent a {
color: var(--ink);
text-decoration: underline;
}
/* Инлайн-форма [zkdk_lead_form]: поля на всю ширину и в минимальном стиле
(подчёркивание, без коробки) — как в модалке/на странице контактов.
!important — чтобы перебить дефолтные инпуты Bono/WooCommerce. */
.zkdk .js-zkdk-inline-form .contact-form__field {
display: block;
}
.zkdk .js-zkdk-inline-form .contact-form__input {
display: block !important;
width: 100% !important;
box-sizing: border-box;
margin-top: 4px;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 2px 0 !important;
font-family: var(--font-display);
font-size: 18px;
color: var(--ink);
-webkit-appearance: none;
appearance: none;
}
.zkdk .js-zkdk-inline-form .contact-form__input--area {
resize: vertical;
line-height: 1.4;
}
.zkdk-modal__done-title {
font-family: var(--font-display);
font-size: 20px;
margin-bottom: 10px;
}
.zkdk-modal__done-text {
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
margin-bottom: 20px;
}
.zkdk-modal__done .btn,
.zkdk-form-done .btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 20px;
color: var(--paper);
}
/* экран «Спасибо» у инлайн-форм: отступ до кнопок контактов */
.zkdk-form-done .zkdk-modal__done-contacts {
margin-top: 20px;
}
.zkdk-modal__done-messengers {
display: flex;
gap: 10px;
margin-top: 10px;
}
.zkdk-modal__done-messengers .btn {
flex: 1;
}
/* кнопки мессенджеров на экране «Спасибо»: иконка + название */
.zkdk-msgr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.zkdk-msgr-btn__ico {
width: 18px;
height: 18px;
flex: 0 0 auto;
background-color: currentColor; /* иконка повторяет цвет текста кнопки */
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.zkdk-msgr-btn__ico--tg {
-webkit-mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/tg.svg);
mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/tg.svg);
}
.zkdk-msgr-btn__ico--max {
-webkit-mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/max.svg);
mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/max.svg);
}
.shop-grid {
-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;
}
.shop-item--type-standard .shop-item-inner {
padding: 15px;
background: var(--paper);
border: 1px solid #d2d0c4;
border-radius: var(--radius-md);
}
/* ─── ХОВЕР КАРТОЧЕК (единый для всего сайта) ──────────────────
При наведении на карточный блок появляется мягкая тень
(--shadow-card-hover, задаётся в :root одним местом).
Карточки также получают класс .zkdk-reveal (вешает JS для плавного
появления). На элементе свойство transition одно — поэтому это
правило (выше по специфичности) перебивало бы reveal, и карточки
«прыгали» бы. Чтобы и появление, и тень работали вместе, тут
собран ОДИН общий transition: opacity/transform появления +
box-shadow/background/color. Каскадная задержка появления идёт
через --reveal-delay и навешена только на opacity/transform —
на тень (box-shadow) она не влияет, тень реагирует на ховер сразу.
background/color — чтобы не сломать смену фона активной
package-card в калькуляторе.
Анимация ховера только на устройствах с настоящим курсором:
@media (hover: hover) and (pointer: fine) — на тач-экранах
«залипающего» ховера не будет. */
.zkdk .path-card,
.zkdk .brigade-card,
.zkdk .package-card,
.shop-item--type-standard .shop-item-inner {
transition:
opacity 600ms ease var(--reveal-delay, 0ms),
transform 600ms ease var(--reveal-delay, 0ms),
box-shadow var(--transition),
background var(--transition),
color var(--transition);
}
@media (hover: hover) and (pointer: fine) {
.zkdk .path-card:hover,
.zkdk .brigade-card:hover,
.zkdk .package-card:hover,
.shop-item--type-standard .shop-item-inner:hover {
box-shadow: var(--shadow-card-hover);
}
}
.site-content {
padding-bottom: 0;
}
.term-description {
padding: 0 0 40px;
}
/* ════════════════════════════════════════════════════════════
СТРАНИЦА КОНТАКТОВ (page-contacts.php)
Структура внутренней страницы: крошки + H1 .page-title, ниже — инфо,
мессенджеры, карта+форма, затем .entry-content. Светлая тема (тёмный текст).
════════════════════════════════════════════════════════════ */
.zkdk-contacts {
color: var(--ink);
}
.zkdk-contacts .contact-info__label {
color: var(--ink-soft);
}
/* ════════════════════════════════════════════════════════════
СТРАНИЦА «О КОМПАНИИ» (page-o-kompanii.php) — по PDF-макету.
Секции идут стопкой без обёрток конструктора (section-block),
поэтому отступы и цветные плашки (--paper / --paper-deep / --ink)
задаём здесь. Статья Bono (.article-post) красит заголовки в
тёмный — на тёмных плашках возвращаем светлый цвет темы.
════════════════════════════════════════════════════════════ */
.zkdk-about .section {
padding: 0;
}
.zkdk.zkdk-about {
padding-top: 0;
padding-bottom: 0; /* последний блок (контакты с формой) прижат к футеру */
}
/* Лента фото в §01 — без вертикальных отступов, фон белый (как страница);
на главной галерея остаётся кремовой полосой --paper с паддингами 60px */
.zkdk-about .zkdk-gallery {
padding: 0;
background: #ffffff;
}
/* шапка тут — только стрелки ←/→: ужимаем зазор до фото (на главной 60px) */
.zkdk-about .zkdk-gallery__head {
margin-top: 0;
margin-bottom: 16px;
}
/* Появление при скролле: секции получают .zkdk-reveal из zkdk-custom.js (§2);
здесь — каскадные задержки для цифр (§03) и списка доверия (§05),
чтобы элементы всплывали по очереди, как карточки на главной */
.zkdk-about .about-stats > .zkdk-reveal:nth-child(2),
.zkdk-about .about-trust > .zkdk-reveal:nth-child(2) {
--reveal-delay: 70ms;
}
.zkdk-about .about-stats > .zkdk-reveal:nth-child(3),
.zkdk-about .about-trust > .zkdk-reveal:nth-child(3) {
--reveal-delay: 140ms;
}
.zkdk-about .about-stats > .zkdk-reveal:nth-child(4),
.zkdk-about .about-trust > .zkdk-reveal:nth-child(4) {
--reveal-delay: 210ms;
}
.zkdk-about .about-stats > .zkdk-reveal:nth-child(5),
.zkdk-about .about-trust > .zkdk-reveal:nth-child(5) {
--reveal-delay: 280ms;
}
.zkdk-about .about-stats > .zkdk-reveal:nth-child(6) {
--reveal-delay: 350ms;
}
/* Цветные плашки — на всю ширину экрана: как у пресетов Bono на главной,
фон рисует абсолютный ::before шириной 100vw (margin-left: calc(50% - 50vw)),
контент лежит поверх (z-index). */
.zkdk-about .about-band {
position: relative;
margin: 0;
padding: 56px 0;
}
.zkdk-about .about-band::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100vw;
margin-left: calc(50% - 50vw);
z-index: 0;
}
.zkdk-about .about-band > * {
position: relative;
z-index: 1;
}
.zkdk-about .about-band--paper::before {
background: var(--paper);
}
.zkdk-about .about-band--deep::before {
background: var(--paper-deep);
}
.zkdk-about .about-band--dark::before {
background: var(--ink);
}
/* §02 «Кто мы» и §03 «Цифры» идут вплотную, без белой полосы между */
.zkdk-about .about-band--paper {
margin-bottom: 0;
}
.zkdk-about .about-band--paper + .about-band--dark {
margin-top: 0;
}
.zkdk-about .about-band--dark {
color: var(--paper);
}
.zkdk-about .about-band--dark .section-label {
color: rgba(243, 236, 224, 0.5);
}
.zkdk-about .about-band--dark .section-title,
.zkdk-about .about-band--dark h2 {
color: var(--paper);
}
/* §01 — hero: заголовок + (текст | факты) */
.zkdk-about .about-hero {
padding-top: 32px; /* воздух между крошками и заголовком */
}
.zkdk-about .about-hero__title {
margin: 8px 0 0;
}
/* §07 контакты: статья Bono красит h2 в тёмный — на тёмной плашке
пропадали «Приходите, обсудим» и «у нас в офисе» (видна была только
охровая часть «Ваш дом»). Возвращаем светлый цвет, как на главной. */
.zkdk-about .contact-section .contact-h2 {
color: var(--paper);
}
/* Тёмная плашка контактов — на всю ширину экрана (как остальные цветные
плашки страницы) и с отступом 56px от §06 «География». Горизонтальные
паддинги не трогаем: база .contact-section сама центрирует контент
до --content-width. */
.zkdk-about .contact-section {
position: relative;
margin: 56px 0 0;
/* низ без паддинга — форма прижата к краю плашки, как на главной.
Фон во всю ширину рисует ::before (приём пресетов Bono). */
background: none;
}
.zkdk-about .contact-section::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100vw;
margin-left: calc(50% - 50vw);
background: var(--ink);
z-index: 0;
}
.zkdk-about .contact-section > * {
position: relative;
z-index: 1;
}
/* Плашка контактов встык с футером: у статьи Bono margin-bottom 2rem,
плюс отступы контейнеров — обнуляем на этой странице (класс на body
ставит body_class-фильтр в page-o-kompanii.php) */
body.zkdk-about-page .article-post {
margin-bottom: 0;
}
body.zkdk-about-page .site-content,
body.zkdk-about-page .content-area,
body.zkdk-about-page .site-main {
padding-bottom: 0;
margin-bottom: 0;
}
.zkdk-about .about-hero__grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 48px;
align-items: start;
margin-top: 40px;
}
.zkdk-about .about-facts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--ink-soft);
}
.zkdk-about .about-facts b {
color: var(--ink);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Шапки-интро секций на этой странице без нижнего отступа
(глобально .grid-2--intro держит var(--gap-4xl) для главной) */
.zkdk-about .grid-2--intro {
margin-bottom: 0;
}
/* Акценты em в заголовках — охрой, как в макете (§01, §04).
В §05 (плашка --deep) охрой — только внутри em
(«получить результат»), остальной курсив тёмный. */
.zkdk-about .section-title em {
color: var(--wood);
}
.zkdk-about .about-band--deep .section-title em {
color: inherit;
}
.zkdk-about .about-band--deep .section-title em span {
color: var(--wood);
}
/* §02 «Кто мы» (плашка --paper): em - курсив без охры */
.zkdk-about .about-band--paper .section-title em {
color: inherit;
}
/* §06 география: колонки 40 / 60 */
.zkdk-about .about-geo-section .grid-2--intro {
grid-template-columns: 2fr 3fr;
}
/* §03 — цифры в рамке на тёмной плашке */
.zkdk-about .about-stats {
border: 1px solid rgba(243, 236, 224, 0.25);
padding: 40px;
margin-top: 32px;
}
/* §04 — текст + фото */
.zkdk-about .about-desc {
margin-top: 20px;
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--ink-soft);
max-width: 520px;
}
.zkdk-about .about-photo img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-sm);
}
/* §05 — нумерованный список доверия */
.zkdk-about .about-trust {
list-style: none;
margin: 0;
padding: 0;
}
.zkdk-about .about-trust li {
display: grid;
grid-template-columns: 36px 170px 1fr;
gap: 16px;
align-items: baseline;
padding: 36px 0;
border-top: 1px solid var(--line);
}
.zkdk-about .about-trust li:first-child {
border-top: 0;
padding-top: 0;
}
.zkdk-about .about-trust__n {
font-size: var(--text-sm);
color: var(--ink-soft);
}
.zkdk-about .about-trust__t {
font-weight: var(--w-medium);
}
.zkdk-about .about-trust__d {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--ink-soft);
}
/* §06 — таблица адресов + карта */
.zkdk-about .about-geo {
list-style: none;
margin: 32px 0 0;
padding: 0;
}
.zkdk-about .about-geo li {
display: grid;
grid-template-columns: 180px 1fr;
gap: 16px;
padding: 14px 0;
border-top: 1px solid var(--line);
}
.zkdk-about .about-geo__k {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-soft);
}
.zkdk-about .about-map iframe {
display: block;
width: 100%;
height: 100%;
min-height: 420px;
border: 0;
border-radius: var(--radius-sm);
}
/* §07 — CTA с формой на тёмной плашке */
.zkdk-about .about-cta__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.zkdk-about .about-cta__title {
font-size: var(--text-4xl);
font-weight: var(--w-medium);
letter-spacing: -0.02em;
margin-top: 16px;
}
.zkdk-about .about-cta__lead {
margin-top: 14px;
color: rgba(243, 236, 224, 0.75);
line-height: var(--leading-relaxed);
}
.zkdk-about .about-cta__card {
background: var(--white);
color: var(--ink);
padding: 32px;
border-radius: var(--radius-sm);
}
.zkdk-about .about-cta__submit {
width: 100%;
justify-content: center;
}
/* мобильные */
@media (max-width: 900px) {
.zkdk-about .about-band {
padding: 40px 0;
}
.zkdk-about .about-hero__grid,
.zkdk-about .about-cta__grid {
grid-template-columns: 1fr;
gap: 28px;
}
.zkdk-about .about-trust li {
grid-template-columns: 32px 1fr;
}
.zkdk-about .about-trust__d {
grid-column: 2;
}
.zkdk-about .about-geo li {
grid-template-columns: 1fr;
gap: 4px;
}
.zkdk-about .about-map iframe {
min-height: 320px;
}
}
/* ─ мессенджеры (Telegram, MAX) ─ */
.zkdk .contact-messengers {
margin-top: 44px;
}
.zkdk .contact-messengers__label {
font-size: var(--text-xs);
color: var(--ink-soft);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 14px;
}
.zkdk .contact-messengers__list {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.zkdk .contact-msgr {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink);
text-decoration: none;
font-family: var(--font-display);
font-size: var(--text-md);
transition: var(--transition);
}
.zkdk .contact-msgr:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.zkdk .contact-msgr__icon {
display: inline-block;
width: 22px;
height: 22px;
background-color: currentColor; /* иконка повторяет цвет текста кнопки */
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.zkdk .contact-msgr__icon--tg {
-webkit-mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/tg.svg);
mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/tg.svg);
}
.zkdk .contact-msgr__icon--max {
-webkit-mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/max.svg);
mask-image: url(//zkdk.ru/wp-content/themes/bono-child/images/max.svg);
}
/* ─ низ: карта (слева) + форма (справа) ─ */
.zkdk .contact-bottom {
margin-top: 64px;
align-items: stretch;
}
.zkdk .contact-map {
overflow: hidden;
border-radius: var(--radius-md);
min-height: 480px;
background: rgba(42, 62, 51, 0.06);
}
.zkdk .contact-map iframe {
display: block;
width: 100%;
height: 100%;
min-height: 480px;
border: 0;
}
/* ─ форма-страница: реальные поля поверх стиля .contact-form ─ */
.zkdk .contact-form--page .contact-form__field {
display: block;
}
.zkdk .contact-form__input {
display: block;
width: 100%;
margin-top: 6px;
background: transparent;
border: 0;
padding: 2px 0;
font-family: var(--font-display);
font-size: 18px;
color: var(--ink);
-webkit-appearance: none;
appearance: none;
}
.zkdk .contact-form__input::placeholder {
color: var(--ink-soft);
opacity: 0.6;
}
.zkdk .contact-form__input:focus {
outline: none;
}
.zkdk .contact-form__input--area {
resize: vertical;
line-height: 1.4;
}
.zkdk .contact-form--page .btn {
margin-top: 22px;
}
.article-meta {
text-align: left;
}
.entry-title,
.page-title {
text-align: left;
margin: 20px 0;
}
.humburger {
position: relative;
top: 0;
left: 0;
z-index: 700;
}
/* ═══ СТРАНИЦА «ОПЛАТА И ДОСТАВКА» (page-oplata-i-dostavka.php) ═══
Обёртка .zkdk-about.zkdk-pay переиспользует плашки и списки страницы
«О компании»; ниже — только специфичное для этой страницы. */
/* белые секции обеих страниц (.zkdk-about): вертикальный ритм 56px,
hero без собственных паддингов (просьба Ивана, 20.07.2026) */
.zkdk-about .section {
padding: 56px 0;
}
.zkdk-about .section.about-hero {
padding-top: 0;
}
.zkdk-pay .about-hero__title {
margin: 16px 0;
}
/* доля платежа в заголовке этапа (70% / 30% / по факту) */
.zkdk-pay .pay-share {
color: var(--wood);
font-weight: 500;
margin-left: 10px;
white-space: nowrap;
}
/* тёмная плашка «ипотеку пока не оформляем» */
.zkdk-pay .pay-honest {
padding: 56px 0;
}
.zkdk-pay .pay-honest__title {
margin: 0;
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 500;
line-height: 1.25;
}
.zkdk-pay .pay-honest__title em {
font-style: italic;
color: var(--wood-light, #c9a86a);
}
.zkdk-pay .pay-honest__text {
margin: 0;
align-self: center;
color: rgba(243, 236, 224, 0.8);
font-size: 15px;
line-height: 1.6;
}
/* таблица направлений доставки */
.zkdk-pay .pay-table {
margin-top: 40px;
border-top: 2px solid var(--ink);
}
.zkdk-pay .pay-table__row {
display: grid;
grid-template-columns: 1.6fr 1fr 1.4fr;
gap: 16px;
align-items: baseline;
padding: 16px 0;
border-bottom: 1px solid var(--line);
}
.zkdk-pay .pay-table__row--head {
padding: 10px 0;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
}
.zkdk-pay .pay-table__dir {
font-size: 17px;
font-weight: 500;
}
.zkdk-pay .pay-table__val {
font-size: 14px;
color: var(--ink-soft);
}
/* три фото под таблицей */
.zkdk-pay .pay-photos {
margin-top: 40px;
}
.zkdk-pay .pay-photo {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
}
/* колонки §04/§05: заголовок поменьше + отступ до списка */
.zkdk-pay .pay-lists {
gap: var(--gap-xl, 48px);
}
.zkdk-pay .section-title--sm {
font-size: clamp(24px, 2.6vw, 32px);
margin-bottom: 28px;
}
/* бежевая плашка §04/§05 и тёмная секция формы — встык, без белой полосы
(базовый .zkdk-about .contact-section даёт margin-top 56px) */
.zkdk-pay .about-band--paper + .contact-section {
margin-top: 0;
}
/* подводка под заголовком в тёмной секции формы */
.zkdk-pay .pay-form-lead {
margin: 20px 0 0;
max-width: 420px;
color: rgba(243, 236, 224, 0.8);
font-size: 15px;
line-height: 1.6;
}
@media (max-width: 768px) {
/* компактные отступы (просьба Ивана, 20.07.2026): крошки и секции ближе,
пункты списков 20px вместо 36, стык плашек без зазоров */
nav.woocommerce-breadcrumb {
padding: 0;
margin: 0;
}
.zkdk-about .section {
padding: 40px 0;
}
.zkdk-about .about-hero {
padding-top: 0;
}
/* пункты .about-trust получают .zkdk-reveal — правим сам li, чтобы
отступ не прыгал в момент анимации появления */
.zkdk-about .about-trust li {
padding: 20px 0;
}
.zkdk-about .about-trust li:last-child {
padding-bottom: 0;
}
.zkdk .grid-3 {
gap: 20px;
}
.zkdk .contact-h2 {
margin: 0;
}
.zkdk .grid-2--contact {
gap: 20px;
}
.zkdk.zkdk-about.zkdk-pay {
padding-bottom: 0 !important;
}
.zkdk-pay .pay-honest {
padding: 40px 0;
}
.zkdk-pay .pay-table {
margin-top: 0;
}
.zkdk-pay .pay-photos {
margin-top: 20px;
}
.zkdk-pay .about-band--paper + .contact-section {
margin: 0;
padding: 40px 0;
}
footer.footer-section.zkdk {
padding-top: 0;
padding-bottom: 40px;
}
.zkdk-pay .pay-table__row {
grid-template-columns: 1fr;
gap: 4px;
padding: 14px 0;
}
.zkdk-pay .pay-table__row--head {
display: none;
}
.zkdk-pay .pay-honest__title {
margin-bottom: 14px;
}
}
/* ═══ МОБИЛЬНЫЕ ОТСТУПЫ / АДАПТИВ (≤768px — там же схлопываются .grid-2) ═══ */
@media (max-width: 768px) {
/* вертикальные отступы у контентных .zkdk-блоков (секции, контакты, галерея,
каталог). Структурные .zkdk — шапку, футер, панель моб. меню — не трогаем. */
.zkdk:not(.site-header):not(.footer-section):not(.zkdk-mmenu__panel) {
padding-top: 20px;
padding-bottom: 20px;
}
/* контакты: меньше отступ до блока «карта + форма» */
.zkdk .contact-bottom {
margin-top: 20px;
}
/* карточка товара: иконки-характеристики компактнее к названию */
.zkdk-specs--grid {
margin: -10px 0 20px;
}
/* главная: брус-блок вплотную, секции 7/8 (комплектации и галерея)
встык, тёмная секция контактов без паддингов. Классы .zkdk-reveal
в селекторы не включаем — они навешиваются с задержкой анимации */
.zkdk .brus-rows {
margin-top: 0;
}
.section-block.section-html.section-7 {
padding-bottom: 0 !important;
}
.section-block.section-html.section-8 {
padding-top: 0 !important;
}
section#contact {
padding: 0;
}
/* гант: на мобильных прячем подписи (экономим место) */
.gantt__name.t-display,
.gantt__n {
display: none;
}
/* калькулятор: в одну колонку с компактным зазором */
.zkdk .grid-2--calc {
grid-template-columns: 1fr;
gap: 10px;
}
/* FAQ: перенесённый JS'ом под список блок «Не нашли свой вопрос?» — отступ */
.faq-cta {
margin-top: 24px;
}
/* HERO: компактнее «eyebrow» и точка-индикатор */
.zkdk .hero__eyebrow {
font-size: 9px;
padding: 6px 10px;
}
.zkdk .hero__dot {
width: 3px;
height: 3px;
border-radius: 2px;
background: #7fbf8f;
box-shadow: 0 0 0 3px rgba(127, 191, 143, 0.25);
}
/* «Пути/варианты»: зазор и нижний отступ */
.zkdk .grid-2--paths {
gap: 30px;
margin-bottom: 20px;
}
/* секция «производство» — без внутренних отступов */
.zkdk .factory-section {
padding: 0;
}
/* сетка из 3 — компактный зазор */
.zkdk .grid-3 {
gap: 15px;
}
.zkdk .calc-cards {
margin-top: 15px;
}
}
/* ═══ ОПИСАНИЕ КАТЕГОРИИ И ТОВАРА (.term-description, .product-description-wide) ═══
На мобильных длинный текст обрезаем по высоте: он уходит в белый градиент,
снизу — бордер и шеврон-стрелка («язычок», за который тянут). Структуру
строит zkdk-custom.js (блок 10). Десктоп — полный текст, «язычка» нет. */
.zkdk-td__more {
display: none;
}
@media (max-width: 768px) {
.term-description {
padding: 0 0 10px;
}
.zkdk-td {
position: relative;
}
/* высота анимируется (JS ставит точную высоту), overflow всегда режет */
.zkdk-td__full {
overflow: hidden;
transition: max-height 380ms ease;
}
.zkdk-td:not(.is-open) .zkdk-td__full {
max-height: 150px;
}
/* градиент-растворение текста в белый (над «язычком»); плавно гаснет */
.zkdk-td::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 42px;
height: 80px;
background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
pointer-events: none;
opacity: 1;
transition: opacity 300ms ease;
}
.zkdk-td.is-open::after {
opacity: 0;
}
/* «язычок»: бордер сверху + шеврон-стрелка */
.zkdk-td__more {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 42px;
padding: 0;
background: none;
border: 0;
border-top: 1px solid var(--line);
color: var(--ink-soft);
cursor: pointer;
transition: color var(--transition);
}
.zkdk-td__more:hover {
color: var(--ink);
}
.zkdk-td__arrow {
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 220ms ease;
}
.zkdk-td.is-open .zkdk-td__arrow {
transform: translateY(2px) rotate(-135deg);
}
}
/* Карточка товара: сброс внутреннего отступа панели вкладок (описание
«расстёгивается» тем же .zkdk-td — селектор в zkdk-custom.js, блок 10). */
.woocommerce-tabs .woocommerce-Tabs-panel {
padding: 0;
}
/* ═══ ФИЛЬТР КАТАЛОГА (widget-area--mobile) ═══
Полноширинный бар СВЕРХУ над списком товаров, с тумблером «Показать
фильтры» (и на десктопе — sidebar.php форсит mobile.php для магазина).
Фильтры — виджет-зона «mobile-filters» (layered nav).
Над баром — ряд быстрых ссылок-пресетов (.zkdk-presets, разметка
в inc/catalog-presets.php) и счётчик проектов. */
/* --- быстрые ссылки-пресеты («Одноэтажные», «С сауной», «До 100 м²» …) ---
Живут в строке .widget-area--show-filters слева; тумблер «Показать
фильтры» и «Сбросить» прижаты к правому краю той же строки. */
.zkdk-presets {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px 32px;
margin-right: auto;
}
.zkdk-presets__link {
font-size: 16px;
line-height: 20px;
color: var(--ink);
text-decoration: none;
padding-bottom: 4px;
/* --line (10%) под текстом почти не читается — своя линия поконтрастнее */
border-bottom: 1px solid rgba(42, 62, 51, 0.28);
transition: border-color var(--transition), color var(--transition);
}
.zkdk-presets__link:hover {
border-bottom-color: var(--ink);
}
/* применённый пресет — подчёркивание в тон текста */
.zkdk-presets__link.is-active {
font-weight: 500;
border-bottom-color: var(--ink);
}
/* фильтр рендерится в шаблоне под заголовком (get_sidebar в
taxonomy-product_cat.php), внутри main — обычный блок; переопределяем
боновский .widget-area{max-width:300px} */
#secondary.widget-area--mobile {
max-width: 100%;
width: 100%;
margin: 0 0 28px;
padding: 0;
}
/* опустевшая обёртка before-loop (result_count/ordering сняты) — скрыть */
.shop-sorting:empty {
display: none;
}
/* строка над фильтром: слева ссылки-пресеты, справа тумблер и «Сбросить» */
.widget-area--show-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 24px;
margin: 0;
}
/* кнопка сброса фильтра (рядом с тумблером; выводится в mobile.php при активном фильтре) */
.zkdk-filter-reset {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--wood);
text-decoration: none;
transition: color var(--transition);
}
.zkdk-filter-reset:hover {
color: var(--ink);
}
/* Bono вешает «☰» на ЛЮБОЙ span в этой зоне
(.widget-area--show-filters span::before) — у крестика ✕ он лишний */
.widget-area--show-filters .zkdk-filter-reset span::before {
content: none;
}
.widget-area--show-filters .zkdk-filter-reset span {
font-size: 1em;
}
.widget-area--show-filters .js-show-filters {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 10px 18px;
transition: var(--transition);
}
.widget-area--show-filters .js-show-filters:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
/* свой значок вместо боновского синего «☰» */
.widget-area--show-filters .js-show-filters::before {
content: "☰";
color: currentColor;
margin: 0;
font-size: 1em;
}
/* раскрытые фильтры: полоса в линейках, группы в ряд через разделители */
.widget-area--mobile .js-mobile-filters {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 20px 0;
margin-top: 16px;
padding: 22px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.widget-area--mobile .js-mobile-filters .widget {
margin: 0;
padding: 0 34px;
border-right: 1px solid var(--line);
background: none;
}
.widget-area--mobile .js-mobile-filters .widget:first-child {
padding-left: 0;
}
.widget-area--mobile .widget-header,
.widget-area--mobile .widget-title,
.widget-area--mobile .widgettitle {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 12px;
}
.widget-area--mobile .woocommerce-widget-layered-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* чип = сам : рамка охватывает и значение, и счётчик (как в макете) */
.widget-area--mobile .woocommerce-widget-layered-nav-list__item {
position: relative;
display: inline-flex;
align-items: baseline;
gap: 6px;
margin: 0;
padding: 9px 13px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: transparent;
transition: var(--transition);
}
.widget-area--mobile .woocommerce-widget-layered-nav-list__item::before {
content: none; /* убрать боновские маркеры/стрелки */
}
/* убрать боновский псевдо-чекбокс (рамка 16px + галочка) у значений */
.widget-area--mobile .woocommerce-widget-layered-nav-list__item a::before,
.widget-area--mobile .woocommerce-widget-layered-nav-list__item a::after {
content: none !important;
}
/* ...и вернуть ::after как невидимую накладку — клик по всей площади чипа */
.widget-area--mobile .woocommerce-widget-layered-nav-list__item a::after {
content: "" !important;
position: absolute;
inset: 0;
border: 0;
background: none;
}
.widget-area--mobile .woocommerce-widget-layered-nav-list__item a {
display: inline-flex;
align-items: center;
border: 0;
padding: 0;
background: none;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1;
color: var(--ink);
text-decoration: none;
}
/* высокоспецифичный селектор Bono — цвет ссылок по умолчанию (ink) */
.widget.woocommerce.woocommerce-widget-layered-nav
> ul
.woocommerce-widget-layered-nav-list__item
a,
.widget_rating_filter > ul > li a {
text-decoration: none;
color: var(--ink);
}
.widget-area--mobile .woocommerce-widget-layered-nav-list__item:hover {
border-color: var(--ink);
}
/* выбранный фильтр (chosen) — зелёная заливка + светлый текст */
.widget-area--mobile .woocommerce-widget-layered-nav-list__item--chosen {
background: var(--ink);
border-color: var(--ink);
}
.widget.woocommerce.woocommerce-widget-layered-nav
> ul
.woocommerce-widget-layered-nav-list__item--chosen
a {
color: var(--paper);
}
/* счётчик — внутри рамки чипа, мелкий и приглушённый */
.widget-area--mobile .woocommerce-widget-layered-nav-list__item .count {
font-family: var(--font-mono);
font-size: 10px;
line-height: 1;
color: var(--ink-soft);
}
.widget-area--mobile .woocommerce-widget-layered-nav-list__item--chosen .count {
color: rgba(243, 236, 224, 0.65);
}
/* сортировка внутри панели фильтра (выводится в mobile.php) — справа, в тон чипсам */
.widget-area--mobile .js-mobile-filters .woocommerce-ordering {
margin: 0 0 0 auto;
padding-left: 34px;
align-self: center;
}
.widget-area--mobile .js-mobile-filters .woocommerce-ordering select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* !important — перебиваем глобальное .theme-bono select { …!important } */
font-family: var(--font-mono) !important;
font-size: 13px;
line-height: 1;
color: var(--ink) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius-sm) !important;
padding: 10px 34px 10px 14px !important;
background: transparent
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232a3e33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat right 13px center !important;
cursor: pointer;
transition: var(--transition);
}
.widget-area--mobile .js-mobile-filters .woocommerce-ordering select:hover {
border-color: var(--ink) !important;
}
/* пункты выпадающего списка — на светлом (нативный список) */
.widget-area--mobile .js-mobile-filters .woocommerce-ordering select option {
color: var(--ink);
background: var(--white);
}
/* узкие экраны: группы фильтра друг под другом, без вертикальных линеек */
@media (max-width: 900px) {
.zkdk-presets__link {
font-size: 15px;
}
/* ссылки занимают строку целиком, тумблер уходит под них */
.zkdk-presets {
flex: 1 1 100%;
margin-right: 0;
}
.widget-area--mobile .js-mobile-filters {
gap: 18px 0;
}
.widget-area--mobile .js-mobile-filters .widget {
flex: 1 1 100%;
padding: 0;
border-right: 0;
}
.widget-area--mobile .js-mobile-filters .woocommerce-ordering {
margin: 0;
padding-left: 0;
flex: 1 1 100%;
}
.widget-area--mobile .js-mobile-filters .woocommerce-ordering select {
width: 100%;
}
}
/* боновский «Отображение 1-10 из 19» (остался на странице магазина) */
.woocommerce-result-count {
margin: 18px 5px 0;
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.02em;
color: var(--ink-soft);
text-align: left;
opacity: 0.7;
}
p.woocommerce-result-count {
display: none;
}
/* мобильные ≤480: шапка живой галереи компактнее (просьба Ивана, 20.07.2026) */
@media (max-width: 480px) {
.zkdk-gallery__head {
padding: 0;
margin: 15px;
}
}