/*
* Каменарска - базови стилове.
*
* Токените идват от theme.json (--wp--preset--*). Тук стои само това, което
* theme.json не покрива: хедър, футър, патърни, sticky телефон.
*
* Без сенки, без градиенти, без скрол-анимации - нарочно.
*/
:root {
--k-radius-card: 12px;
--k-radius-image: 16px;
--k-radius-pill: 36px;
--k-radius-small: 6px;
--k-section: 112px;
--k-gutter: 40px;
--k-container: 1280px;
--k-stroke: 2px;
}
/*
* Вертикалният ритъм е 112px десктоп / 64px мобилно (пречупване на 600px) -
* каноничният модел на design-system.css. Заменя стария fluid clamp, за да е
* една истина с редактора (theme.json spacing „60" = 112px).
*/
@media (max-width: 600px) {
:root { --k-section: 64px; }
}
/* ---------------------------------------------------------------- основа */
body {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--body);
line-height: 1.7;
color: var(--wp--preset--color--body);
background: var(--wp--preset--color--white);
-webkit-font-smoothing: antialiased;
}
/*
* Налагане на шрифтовете. Body-то се рендираше с чужд (ръкописен) шрифт - или
* CSS var-ът не се резолвваше на стейджинга, или GeneratePress/Elementor
* прегазваше веригата. `html body` е с по-висока специфичност от голото `body`
* (бие customizer inline CSS-а на GP), а стойността е ЛИТЕРАЛНА (не var), за да
* не зависи от това дали theme.json presets се извеждат. Заглавията - Lora.
*/
html body {
font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html body h1, html body h2, html body h3, html body h4,
html body .k-hero__title, html body .wp-block-heading {
font-family: 'Lora', Georgia, 'Times New Roman', serif;
}
/*
* Таван за СУРОВИ снимки в съдържанието - напр. немигрираната /about/, където
* `![]()
` няма .figure клас, затова .figure img не ги хваща и растат на
* пълна височина. Тук ги ограничаваме по височина без рязане (height:auto пази
* съотношението). Специфичните правила по-долу (.k-hero__media img, .figure
* img - същата специфичност, по-късен ред) печелят за hero/фигурите.
*/
.page img,
.post img,
.service img {
max-width: 100%;
height: auto;
max-height: clamp(280px, 45vw, 560px);
}
h1, h2, h3, .k-h1, .k-h2, .k-h3 {
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--wp--preset--color--ink);
}
h4, h5, h6 {
font-family: var(--wp--preset--font-family--body);
font-weight: 600;
color: var(--wp--preset--color--ink);
}
/*
* ВАЖНО: WordPress извежда preset var-овете в КЕБАБ вид (--h-1, не --h1) -
* `_wp_to_kebab_case('h1')` → 'h-1'. Старите имена (--h1…) не съществуват,
* var() пада и заглавията НАСЛЕДЯВАХА 18px от body (и на стейджинга).
* Литералният clamp е резервen вариант, ако presets не се изведат изобщо.
*/
h1 { font-size: var(--wp--preset--font-size--h-1, clamp(34px, 1rem + 5vw, 68px)); line-height: 1.15; }
h2 { font-size: var(--wp--preset--font-size--h-2, clamp(28px, 1.2rem + 2vw, 44px)); line-height: 1.2; }
h3 { font-size: var(--wp--preset--font-size--h-3, clamp(23px, 1.2rem + 1vw, 30px)); line-height: 1.3; }
h4 { font-size: var(--wp--preset--font-size--h-4, clamp(18px, 1rem + .4vw, 21px)); line-height: 1.4; }
a {
color: var(--wp--preset--color--ink);
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--border);
text-underline-offset: 3px;
transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover {
text-decoration-color: var(--wp--preset--color--accent);
}
img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--k-radius-image);
}
::selection {
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--ink);
}
/* Скрол до котва да не се крие под sticky хедъра. */
:target {
scroll-margin-top: 96px;
}
/* --------------------------------------------------------------- контейнер */
.container {
max-width: var(--k-container);
margin-inline: auto;
padding-inline: 20px;
}
.sec {
padding-block: var(--k-section);
}
@media (min-width: 601px) {
.container { padding-inline: var(--k-gutter); }
}
/* --------------------------------------------------------------- елементи */
/* Жълтата линия под заглавията - повтарящ се знак в целия дизайн. */
.rule::after {
content: "";
display: block;
width: 48px;
height: 3px;
margin-top: 28px;
background: var(--wp--preset--color--accent);
}
.eyebrow {
font-family: var(--wp--preset--font-family--body);
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
margin: 0 0 18px;
}
/* Eyebrow с иконка над H1 (hub/услуга) - иконката в акцент, до текста. */
.eyebrow--icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow__icon {
width: 16px;
height: 16px;
stroke: var(--wp--preset--color--accent);
}
.lead {
font-size: var(--wp--preset--font-size--lead);
line-height: 1.6;
color: var(--wp--preset--color--muted);
}
/*
* Карти (.cards / .card) - hub решетки, „какво получавате", навигационни карти.
* Каноничен източник: design-reference/design-system.css (икона-само, gap 16px).
* Контейнерът е wp:group (не wp:columns), затова CSS grid се прилага чисто, без
* да се бори с core-ото `.wp-block-columns` flex оформление.
*/
.cards { display: grid; gap: 16px; }
/*
* WP „flow" layout-ът дава margin-block-start на всяко следващо дете - в грид
* това сваля картите след първата по-надолу и редовете излизат неравни.
* Нулираме го: гридът си държи разстоянията през gap.
*/
.cards > *, .gridcells > *, .navcards > *, .showcase__subs > * { margin-block-start: 0; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 960px) {
.cards-3 { grid-template-columns: 1fr 1fr; }
.cards-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.cards-3, .cards-2, .cards-5 { grid-template-columns: 1fr; }
}
.card {
position: relative; /* за кликаемата площ през ::after на заглавието */
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px;
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-card);
color: var(--wp--preset--color--ink);
text-decoration: none;
transition: border-color .18s ease;
}
.card:hover { border-color: var(--wp--preset--color--ink); }
/* Иконата е Lucide (.k-icon база), обвита в .card__icon за цвят/hover. */
.card__icon { color: var(--wp--preset--color--ink); line-height: 0; }
.card__icon .k-icon { width: 26px; height: 26px; }
.card:hover .card__icon { color: var(--wp--preset--color--accent); }
.card h3, .card__title { margin: 0; font-size: 23px; line-height: 1.25; }
/* Заглавието носи единствения линк; ::after прави цялата карта кликаема
(wp:group не може да е , но UX-ът е същият). */
.card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--muted); }
.card__more {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 6px;
font-size: 15px;
color: var(--wp--preset--color--ink);
}
.card__more .arr { display: inline-block; transition: transform .15s ease; }
.card:hover .card__more .arr { transform: translateX(5px); }
/*
* Снимка отгоре в карта - ИЗКЛЮЧЕНА по избор (икона-само канон), но CSS-ът стои
* готов, за да е връщането един ред в конвертора (CARD_IMAGES_ENABLED=true).
* Отрицателният margin избутва снимката извън падинга - до ръба на картата.
*/
.card:has(.card__thumb) { overflow: hidden; }
.card__thumb {
height: 160px;
margin: -28px -28px 0;
background: var(--wp--preset--color--light);
border-bottom: 1px solid var(--wp--preset--color--border);
overflow: hidden;
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
/* Иконките са Lucide, контурни, еднаква дебелина навсякъде. */
.k-icon {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: var(--k-stroke);
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
flex: none;
}
/* --------------------------------------------------------------- бутони */
.k-btn {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 18px 32px;
border-radius: var(--k-radius-pill);
font-family: var(--wp--preset--font-family--body);
font-size: 17px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
border: 1px solid transparent;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.k-btn--primary {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--white);
}
.k-btn--primary:hover {
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--ink);
}
.k-btn--ghost {
background: transparent;
color: var(--wp--preset--color--ink);
border-color: var(--wp--preset--color--border);
}
.k-btn--ghost:hover {
border-color: var(--wp--preset--color--ink);
}
/* ------------------------------------------------------- тъмни секции */
.dark {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--light);
}
.dark h1, .dark h2, .dark h3, .dark h4 {
color: var(--wp--preset--color--white);
}
.dark a {
color: var(--wp--preset--color--white);
}
/* Черният филтър върху фоновите снимки в тъмните секции. */
.overlay {
position: relative;
isolation: isolate;
}
.overlay > * {
position: relative;
z-index: 1;
}
.overlay::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: rgba(27, 25, 23, .82);
}
/* ---------------------------------------------------------------- хедър */
.k-header {
position: relative; /* мега панелът се позиционира спрямо него */
background: var(--wp--preset--color--white);
border-bottom: 1px solid var(--wp--preset--color--border);
}
.k-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 58px;
}
.k-header__brand img,
.k-header__brand .custom-logo {
height: 24px;
width: auto;
border-radius: 0;
}
/* Логото (герб). Черният файл се обръща в бяло във футъра (тъмен фон). */
.k-logo { display: inline-flex; }
.k-logo__img { display: block; height: 26px; width: auto; }
.k-footer__logo { display: inline-flex; margin-bottom: 16px; }
.k-footer__logo .k-logo__img { height: 44px; filter: brightness(0) invert(1); }
.k-header__title {
font-family: var(--wp--preset--font-family--heading);
font-size: 19px;
text-decoration: none;
}
/* Меню и телефон в хедъра се показват чак от таблет нагоре. */
.k-nav,
.k-header__cta {
display: none;
}
@media (min-width: 992px) {
.k-header__inner { min-height: 84px; }
.k-header__brand img,
.k-header__brand .custom-logo { height: 34px; }
.k-nav,
.k-header__cta { display: block; }
/*
* Точките опират до дъното на хедъра - без "мъртва зона" между линка
* и мега панела, иначе hover-ът се губи по пътя надолу към панела.
*/
.k-nav { height: 84px; }
.k-nav__list { height: 100%; align-items: stretch; }
}
/* ------------------------------------------------------------ навигация */
.k-nav__list {
display: flex;
align-items: center;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.k-nav__item {
position: relative;
display: flex;
align-items: center;
gap: 5px;
}
/*
* БЕЗ position:relative тук: мега панелът е absolute с left:0/right:0 и
* трябва да се позиционира спрямо .k-header (който е relative нарочно).
* Ако е positioned, панелът се свива до ширината на самата точка
* и 4-колонната решетка се чупи - точно счупването на десктоп.
*/
.k-nav__item--has-mega { position: static; }
.k-nav__link {
font-size: 15.5px;
text-decoration: none;
white-space: nowrap;
}
.k-nav__item.is-current > .k-nav__link {
text-decoration: underline;
text-decoration-color: var(--wp--preset--color--accent);
text-underline-offset: 6px;
}
.k-nav__toggle {
display: inline-flex;
align-items: center;
padding: 4px;
background: none;
border: none;
cursor: pointer;
color: inherit;
}
.k-nav__chevron {
width: 18px;
height: 18px;
transition: transform .15s ease;
}
.k-nav__toggle[aria-expanded="true"] .k-nav__chevron {
transform: rotate(180deg);
}
/* ------------------------------------------------------------ мега меню */
/*
* Скрит с CSS, не с атрибута `hidden` - така hover и клавиатурата го
* отварят и когато JavaScript-ът не се е заредил.
*/
.k-mega {
/*
* visibility + delay вместо display:none: при диагонално движение на
* мишката към панела курсорът за миг напуска -то и панелът изчезваше
* моментално. Гратисът при затваряне е 500ms НАПЪЛНО видим (Denislav,
* 23.07.2026: „по-дълго да седи в хувър"), после 150ms избледняване.
* Отварянето е незабавно. БЕЗ pointer-events:none - докато е видим в
* гратиса, панелът остава хващаем и връщането на мишката върху него го
* задържа отворен (.k-mega:hover).
*/
visibility: hidden;
opacity: 0;
transition: opacity .15s ease .5s, visibility 0s linear .65s;
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 80;
background: var(--wp--preset--color--off-white);
border-top: 1px solid var(--wp--preset--color--border);
border-bottom: 1px solid var(--wp--preset--color--border);
padding-block: 28px;
}
.k-nav__item--has-mega:hover > .k-mega,
.k-nav__item--has-mega:focus-within > .k-mega,
.k-mega:hover,
.k-mega.is-open {
visibility: visible;
opacity: 1;
transition-delay: 0s, 0s;
}
/*
* Панелът .k-mega е на пълна ширина, но решетката вътре се държи в контейнера
* и се центрира - иначе на широк екран (1440px+) 4-тата колона излизаше извън
* viewport-а вдясно.
*/
.k-mega__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: var(--k-container);
margin-inline: auto;
padding-inline: var(--k-gutter);
box-sizing: border-box;
list-style: none;
}
.k-mega__card {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 16px;
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-card);
font-size: 14.5px;
text-decoration: none;
transition: border-color .18s ease;
}
.k-mega__card span { flex: 1; }
.k-mega__card:hover {
border-color: var(--wp--preset--color--ink);
}
.k-mega__card .k-arrow {
width: 18px;
height: 18px;
color: var(--wp--preset--color--border);
transition: transform .18s ease, color .18s ease;
}
.k-mega__card:hover .k-arrow {
transform: translateX(6px);
color: var(--wp--preset--color--accent);
}
/* ------------------------------------------------------- мобилно меню */
.k-burger {
display: inline-flex;
align-items: center;
justify-content: center;
/* Тап-таргет минимум 44x44px (WCAG 2.5.5). */
min-width: 44px;
min-height: 44px;
padding: 8px;
background: none;
border: none;
cursor: pointer;
}
/*
* Скриването стои ТУК, а не при хедъра. Медия заявките не добавят
* специфичност, така че `display:none` в по-ранен блок се прегазва от
* `display:inline-flex` по-долу и хамбургерът излизаше и на десктоп.
*/
@media (min-width: 992px) {
.k-burger { display: none; }
}
.k-burger__bars {
display: flex;
flex-direction: column;
gap: 4px;
}
.k-burger__bars span {
display: block;
width: 22px;
height: 2px;
background: var(--wp--preset--color--ink);
}
.k-drawer {
display: none;
position: fixed;
inset: 0;
z-index: 100;
background: rgba(27, 25, 23, .5);
}
.k-drawer.is-open { display: block; }
body.k-drawer-open { overflow: hidden; }
.k-drawer__panel {
position: absolute;
inset: 0 0 0 auto;
width: min(88vw, 380px);
padding: 24px 24px 40px;
background: var(--wp--preset--color--white);
overflow-y: auto;
}
.k-drawer__close {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
/* Тап-таргет минимум 44x44px (WCAG 2.5.5). */
min-width: 44px;
min-height: 44px;
padding: 8px;
background: none;
border: none;
cursor: pointer;
}
.k-drawer__list {
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.k-drawer__list li {
border-bottom: 1px solid var(--wp--preset--color--border);
}
.k-drawer__list a {
display: block;
padding: 16px 0;
font-size: 18px;
text-decoration: none;
}
/* Подстраниците в мобилното меню са с отстъп, не в решетка. */
.k-drawer__list .sub-menu {
margin: 0 0 12px;
padding: 0 0 0 16px;
list-style: none;
border-left: 2px solid var(--wp--preset--color--accent);
}
.k-drawer__list .sub-menu li { border: none; }
.k-drawer__list .sub-menu a { padding: 10px 0; font-size: 16px; }
.k-drawer__cta { margin-top: 28px; }
.k-drawer__hours {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 0;
font-size: 14px;
color: var(--wp--preset--color--muted);
}
.k-drawer__hours .k-icon { width: 16px; height: 16px; }
/* ----------------------------------------------------------- бутон блок */
.k-btn--block {
display: flex;
justify-content: center;
width: 100%;
}
.k-btn--phone-dark {
background: var(--wp--preset--color--ink-deep);
color: var(--wp--preset--color--light);
}
.k-btn--phone-dark:hover {
background: var(--wp--preset--color--slate);
color: var(--wp--preset--color--white);
}
.k-btn--phone-light {
background: var(--wp--preset--color--light);
color: var(--wp--preset--color--ink-deep);
}
.k-btn--phone-light:hover {
background: var(--wp--preset--color--white);
}
.k-btn--phone .k-icon {
stroke: var(--wp--preset--color--accent);
width: 17px;
height: 17px;
}
/* ---------------------------------------------------------------- трохи */
.crumbs-wrap { padding-top: 32px; }
.crumbs ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
color: var(--wp--preset--color--muted);
}
/* Разделителят е жълта наклонена черта - знак от макета. */
.crumbs li + li::before {
content: "/";
margin-right: 8px;
color: var(--wp--preset--color--accent);
}
.crumbs a {
color: inherit;
text-decoration: none;
}
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--wp--preset--color--ink); }
.crumbs--dark ol { color: var(--wp--preset--color--muted-dark); }
.crumbs--dark [aria-current="page"] { color: var(--wp--preset--color--white); }
/* --------------------------------------------- шаблон "Услуга" (2 колони) */
.k-hero-lead { padding-bottom: 8px; }
.service {
display: grid;
gap: 48px;
padding-block: var(--k-section);
}
@media (min-width: 992px) {
.service {
grid-template-columns: 1fr 380px;
gap: 72px;
align-items: start;
}
}
.aside__card {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--light);
border-radius: var(--k-radius-card);
padding: 32px;
}
/* Картата следва скрола - тя носи конверсията на дългите страници. */
@media (min-width: 992px) {
.aside {
position: sticky;
top: 32px;
}
}
.aside__list {
margin: 0 0 24px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.aside__list li {
display: flex;
gap: 12px;
font-size: 15px;
line-height: 1.55;
}
.aside__list .k-icon {
stroke: var(--wp--preset--color--accent);
width: 20px;
height: 20px;
margin-top: 2px;
}
.aside__hours {
margin: 12px 0 0;
text-align: center;
font-size: 13.5px;
color: var(--wp--preset--color--muted-dark);
}
/* ------------------------------------------------------------ CTA секция */
.cta-band__inner { text-align: center; }
/* Канон: заглавието на CTA лентата е обикновен H2 от скалата (44/28). */
.cta-band__heading {
font-size: var(--wp--preset--font-size--h-2, clamp(28px, 2vw + 20px, 44px));
margin: 16px 0 0;
}
.rule--center::after { margin-inline: auto; }
.cta-band__text {
max-width: 560px;
margin: 30px auto 0;
font-size: 18px;
color: var(--wp--preset--color--muted-dark);
}
/* Канон .cta-phone: Lora 600, 50px десктоп / 30px мобилно, икона 40px. */
.cta-band__phone {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 38px;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: clamp(30px, 5vw, 50px);
letter-spacing: -0.01em;
color: var(--wp--preset--color--accent);
text-decoration: none;
}
.cta-band__phone:hover { color: var(--wp--preset--color--accent); text-decoration: none; }
.cta-band__icon {
width: 40px;
height: 40px;
stroke: var(--wp--preset--color--accent);
}
.cta-band__alt {
margin: 20px 0 0;
font-size: 16px;
}
.cta-band__link {
color: var(--wp--preset--color--light);
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.cta-band__link:hover,
.cta-band__link:focus-visible {
color: var(--wp--preset--color--accent);
}
.cta-band__footline {
margin: 24px 0 0;
font-size: 15px;
color: var(--wp--preset--color--muted-dark);
}
.eyebrow--light { color: var(--wp--preset--color--white); }
.eyebrow--accent { color: var(--wp--preset--color--accent); }
/*
* Светъл вариант на CTA лентата - средният от трите блока на дългите
* страници (kamenarska_middle_cta_light), за да не се повтаря тъмното.
*/
.cta-band--light {
background: var(--wp--preset--color--off-white);
border-block: 1px solid var(--wp--preset--color--border);
}
.cta-band--light .cta-band__text { color: var(--wp--preset--color--muted); }
.cta-band--light .cta-band__phone { color: var(--wp--preset--color--ink); }
.cta-band--light .cta-band__icon { stroke: var(--wp--preset--color--accent); }
.cta-band--light .cta-band__link { color: var(--wp--preset--color--body); }
.cta-band--light .cta-band__footline { color: var(--wp--preset--color--muted); }
/* ---------------------------------------------------------------- футър */
.k-footer {
background: var(--wp--preset--color--ink-deep);
color: var(--wp--preset--color--muted-dark);
}
.k-footer__top {
display: grid;
gap: 40px;
padding-top: 72px;
}
@media (min-width: 992px) {
/*
* auto-fit, а не фиксирани 4 колони: футър менютата „Правни сфери" и
* „Полезни връзки" се рендират само ако са зададени в wp-admin. Липсва ли
* едно, колоната изобщо не се извежда - решетката се свива до наличните,
* вместо да оставя празни трактове.
*/
.k-footer__top { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.k-footer__name {
margin: 0 0 16px;
font-family: var(--wp--preset--font-family--heading);
font-size: 28px;
color: var(--wp--preset--color--white);
}
.k-footer__blurb {
margin: 0;
max-width: 280px;
font-size: 15px;
line-height: 1.6;
color: var(--wp--preset--color--muted-dark);
}
.k-footer__list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 11px;
}
.k-footer__list a,
.k-footer__mail {
font-size: 15px;
color: var(--wp--preset--color--muted-dark);
text-decoration: none;
}
.k-footer__list a:hover,
.k-footer__mail:hover { color: var(--wp--preset--color--accent); }
.k-footer__address {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.6;
color: var(--wp--preset--color--muted-dark);
}
.k-footer__phone {
display: block;
margin-bottom: 8px;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 26px;
color: var(--wp--preset--color--accent);
text-decoration: none;
}
.k-footer__hours {
margin: 14px 0 0;
font-size: 14px;
color: var(--wp--preset--color--muted-dark);
}
.k-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 52px;
padding-top: 24px;
padding-bottom: 24px;
border-top: 1px solid var(--wp--preset--color--slate);
font-size: 14px;
color: #8a8783;
}
.k-footer__legal-list {
display: flex;
/* Задължително wrap: на 390px четирите правни линка иначе изнасят
целия сайт до ~432px и се появява хоризонтален скрол НАВСЯКЪДЕ. */
flex-wrap: wrap;
gap: 10px 22px;
margin: 0;
padding: 0;
list-style: none;
}
.k-footer__legal-list a {
color: #8a8783;
text-decoration: none;
}
.k-footer__legal-list a:hover { color: var(--wp--preset--color--accent); }
/* ------------------------------------------------------- блог и архиви */
.archive__head { padding-block: var(--k-section) 0; }
.archive { padding-block: 40px var(--k-section); }
.grid {
display: grid;
/* 2px разстояние - картичките образуват блок с тънки линии, не решетка
с широки междини. Така е в макета. */
gap: 2px;
}
@media (min-width: 600px) {
.grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* Блог карта - .card база + flush снимка отгоре и падинг в тялото. */
.card--post {
padding: 0;
gap: 0;
overflow: hidden;
}
.card__media {
aspect-ratio: 16 / 10;
background: var(--wp--preset--color--light);
border-bottom: 1px solid var(--wp--preset--color--border);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--k-radius-image);
}
.card__body {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
padding: 28px;
}
.card--post .card__title { font-size: 24px; }
.card__excerpt {
flex: 1;
margin: 0;
font-size: 16px;
line-height: 1.55;
color: var(--wp--preset--color--muted);
}
.card__foot {
display: flex;
justify-content: space-between;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--wp--preset--color--border);
font-size: 13.5px;
color: var(--wp--preset--color--muted);
}
/* ---------------------------------------------------------------- статия */
/* Заглавката е в тъмния .post-hero (single.php) - статията носи само тялото. */
.post { padding-block: 0; }
/* Йерархия: заглавието на статия остава по-малко от това на страниците (60px). */
html body .post-hero .k-hero__title { font-size: clamp(2rem, 1rem + 4vw, 3.75rem); }
/* Featured снимките са пейзажни (768x432) - по-нисък прозорец от този на услугите. */
.post-hero .k-hero__media { height: 260px; }
@media (min-width: 992px) {
.post-hero.k-hero--has-image .k-hero__media { height: 400px; }
}
.post__meta--hero { color: var(--wp--preset--color--muted-dark); }
.post__meta--hero .post__author { color: var(--wp--preset--color--white); }
.post__meta--hero .post__author:hover { color: var(--wp--preset--color--accent); }
.post__head,
.post__body {
max-width: 760px;
margin-inline: auto;
padding-inline: 20px;
}
/* Основната снимка излиза по-широка от текстовата колона. */
.post__media {
max-width: 960px;
margin: 40px auto 0;
padding-inline: 20px;
}
.post__title {
margin: 0;
font-size: clamp(34px, 5vw, 60px);
}
.post__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 28px;
font-size: 15px;
color: var(--wp--preset--color--muted);
}
.post__dot { color: var(--wp--preset--color--accent); }
.post__body { padding-top: 52px; padding-bottom: 56px; }
/* ----------------------------------------------------- заглавна секция */
.k-hero { padding-block: var(--k-section); }
.k-hero__inner { display: grid; gap: 40px; }
@media (min-width: 992px) {
.k-hero--has-image .k-hero__inner {
grid-template-columns: 1.1fr .9fr;
gap: 64px;
align-items: center;
}
}
/*
* H1 стойности точно от макета (hub hero): 68px десктоп, 34px мобилно, Lora 500,
* line-height 1.15, letter-spacing -.02em, margin 24px над (под eyebrow-а).
* Форсира се с `html body`, защото GeneratePress подава по-дребен h1 с по-висока
* специфичност - затова на живо H1 излизаше колкото подзаглавие.
*/
html body .k-hero__title {
margin: 24px 0 0;
font-size: clamp(2.125rem, 1rem + 5vw, 4.25rem);
line-height: 1.15;
letter-spacing: -0.02em;
}
/* Лидът: къс ред (канон max-width 560px), 24px над - не се разлива на цялата колона. */
.k-hero__lead { max-width: 560px; margin: 24px 0 0; }
.k-hero__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
margin-top: 32px;
}
.k-hero__hours {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-size: 15px;
color: var(--wp--preset--color--muted);
}
.k-hero__hours .k-icon { width: 17px; height: 17px; }
/*
* Hero снимката беше CSS фон в Elementor - без вградено съотношение. След
* миграцията става реален ![]()
; без таван висока изходна снимка разтяга
* hero-а на цялата си височина. Контейнерът носи съотношение, снимката пълни.
*/
/* Канон: снимката е 520px на десктоп, 340px на мобилно (object-fit: cover). */
.k-hero__media {
height: 340px;
overflow: hidden;
border-radius: var(--k-radius-image);
border: 1px solid var(--wp--preset--color--border);
}
@media (min-width: 992px) {
.k-hero--has-image .k-hero__media {
height: 520px;
}
}
.k-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*
* Тъмният вариант. Обвивката в шаблона на Услуга съдържа и трохите, затова
* фонът се вдига от нея - иначе трохите остават на бяло над тъмния hero.
*/
.k-hero--dark,
.k-hero-lead:has(.k-hero--dark) {
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--light);
}
.k-hero--dark .k-hero__title { color: var(--wp--preset--color--white); }
.k-hero--dark .k-hero__lead { color: var(--wp--preset--color--muted-dark); }
.k-hero--dark .eyebrow,
.k-hero--dark .k-hero__hours { color: var(--wp--preset--color--muted-dark); }
.k-hero-lead:has(.k-hero--dark) .crumbs ol { color: var(--wp--preset--color--muted-dark); }
.k-hero-lead:has(.k-hero--dark) .crumbs [aria-current="page"] { color: var(--wp--preset--color--white); }
.k-hero-lead:has(.k-hero--dark) .crumbs a { color: var(--wp--preset--color--muted-dark); }
.k-hero-lead:has(.k-hero--dark) .crumbs a:hover { color: var(--wp--preset--color--white); }
/* Светлата рамка на снимката изчезва на тъмното - фина полупрозрачна вместо нея. */
.k-hero--dark .k-hero__media { border-color: rgba(255, 255, 255, .14); }
/* ------------------------------------------------- контакти (по макета) */
.contact-grid {
display: grid;
gap: 16px;
align-items: stretch;
}
@media (min-width: 992px) {
.contact-grid { grid-template-columns: 1fr 1fr; }
}
.contact-card {
display: flex;
flex-direction: column;
gap: 32px;
padding: 48px;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-image);
}
.phone-block { display: inline-flex; align-items: center; gap: 18px; }
.phone-block__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--wp--preset--color--ink);
}
.phone-block__icon .k-icon {
width: 26px;
height: 26px;
stroke: var(--wp--preset--color--accent);
color: var(--wp--preset--color--accent);
}
.phone-block__label {
display: block;
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.phone-block__num {
display: block;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 40px;
color: var(--wp--preset--color--ink);
}
.contact-card__divider { height: 1px; background: var(--wp--preset--color--border); }
.contact-detail { display: flex; gap: 14px; align-items: flex-start; }
.contact-detail__icon { flex: none; margin-top: 2px; }
.contact-detail__icon .k-icon {
width: 20px;
height: 20px;
stroke: var(--wp--preset--color--ink);
color: var(--wp--preset--color--ink);
}
.contact-detail__label {
margin: 0 0 6px;
font-size: 13px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.contact-detail__value { margin: 0; font-size: 18px; line-height: 1.55; }
.contact-detail__value a { color: var(--wp--preset--color--ink); }
.contact-detail__note { font-size: 16px; color: var(--wp--preset--color--muted); }
.contact-disclaimer {
margin: 0;
padding: 18px 20px;
border: 1px solid var(--wp--preset--color--border);
border-radius: 12px;
background: var(--wp--preset--color--off-white);
font-size: 15px;
line-height: 1.55;
color: var(--wp--preset--color--muted);
}
.contact-map {
overflow: hidden;
min-height: 360px;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-image);
background: var(--wp--preset--color--contrast, #EBEBEB);
}
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
@media (min-width: 992px) {
.contact-map,
.contact-map iframe { min-height: 520px; }
}
@media (max-width: 600px) {
.contact-card { padding: 28px; }
.phone-block__num { font-size: 32px; }
}
/* ------------------------------------------------------------------ FAQ */
.faq { background: var(--wp--preset--color--off-white); }
.faq--flush { background: transparent; }
.faq__inner { max-width: 900px; }
.faq__heading { text-align: center; margin: 16px 0 0; }
.faq__list {
margin-top: 52px;
border-top: 1px solid var(--wp--preset--color--border);
}
.faq__item {
border-bottom: 1px solid var(--wp--preset--color--border);
background: var(--wp--preset--color--white);
}
.faq--flush .faq__item { background: transparent; }
/* Заглавието носи семантиката, бутонът - поведението. */
.faq__q-wrap { margin: 0; font-size: inherit; }
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: 26px 30px;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: clamp(19px, 2.2vw, 23px);
line-height: 1.35;
color: var(--wp--preset--color--ink);
}
.faq--flush .faq__q { padding-inline: 4px; }
/* Знакът е + / - на текст, не иконка - така е в макета. */
.faq__sign {
flex: none;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--wp--preset--font-family--body);
font-size: 26px;
line-height: 1;
}
.faq__sign::before { content: "–"; }
.faq__q[aria-expanded="false"] .faq__sign::before { content: "+"; }
.faq__a {
padding: 0 30px 28px;
max-width: 720px;
}
.faq--flush .faq__a { padding-inline: 4px; }
.faq__a p {
margin: 0 0 14px;
font-size: 17px;
line-height: 1.7;
color: var(--wp--preset--color--muted);
}
.faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 781px) {
.faq__q { padding: 20px 18px; }
.faq__a { padding: 0 18px 22px; }
.faq__sign { color: var(--wp--preset--color--accent); }
}
/* --------------------------------------------------------- патърн части */
.sec--alt { background: var(--wp--preset--color--off-white); }
/*
* Тъмна лента (ритъмът от макета - не всички секции бели). Текстът светъл,
* заглавията бели, линковете в акцент; жълтата черта на H2 и отметките остават
* (акцент чете добре на тъмно). Границата се изсветлява.
*/
/*
* Тъмната лента в макета не е плосък цвят - тя е снимка с черен филтър отгоре
* (мокет: image + `#1B1917` overlay ~.74). Конверторът подава снимката като
* inline `--k-band-bg` (heroImage или първата снимка от съдържанието). Няма ли
* снимка - `var(..., none)` пада на самия ink цвят, тоест плоско тъмно.
*/
.sec--dark {
background-color: var(--wp--preset--color--ink);
background-image: linear-gradient(rgba(27, 25, 23, .76), rgba(27, 25, 23, .76)), var(--k-band-bg, none);
background-size: cover;
background-position: center;
color: var(--wp--preset--color--light);
border-top-color: rgba(255, 255, 255, .12);
}
.sec--dark .wp-block-heading,
.sec--dark h2,
.sec--dark h3,
.sec--dark h4 {
color: var(--wp--preset--color--white);
}
.sec--dark p,
.sec--dark li {
color: var(--wp--preset--color--light);
}
.sec--dark a {
color: var(--wp--preset--color--accent);
}
.sec--dark .list-check li {
border-color: rgba(255, 255, 255, .14);
}
.sec--line { border-top: 1px solid var(--wp--preset--color--border); }
.grid--2 { display: grid; gap: 2px; }
.grid--4 { display: grid; gap: 2px; }
@media (min-width: 600px) {
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.grid--4 { grid-template-columns: repeat(4, 1fr); }
}
/* Списък с отметки - повтаря се в макета пет пъти. */
.list-check {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
/*
* НЕ flex: с flex всеки inline елемент (, ) става отделен flex
* item и редът спира да се пренася - на 390px текстът излизаше извън екрана.
* Абсолютната отметка оставя съдържанието да тече като нормален текст.
*/
.list-check li {
position: relative;
padding-left: 36px;
line-height: 1.55;
color: var(--wp--preset--color--body);
}
/* Канон (design-system): 24px квадрат с радиус 6, тъмна отметка 14px. */
.list-check li::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--wp--preset--color--accent);
/* Отметката е нарисувана с CSS, за да не се вмъква SVG в съдържанието -
иначе клиентката може да го изтрие по невнимание при редакция. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1917' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
}
/*
* Списък-връзки („Свързани статии" в постовете) - стрелка вместо чек:
* чекчето значи „включено/да", а това са навигационни линкове.
* Класът се слага на рендер-време (kamenarska_related_as_links).
*/
.list-links {
list-style: none;
margin: 20px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.list-links li {
position: relative;
padding-left: 30px;
line-height: 1.55;
}
.list-links li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD500' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
background-size: 18px;
background-repeat: no-repeat;
background-position: center;
}
.list-links a {
color: var(--wp--preset--color--body);
text-decoration-color: var(--wp--preset--color--border);
text-underline-offset: 4px;
}
.list-links a:hover { text-decoration-color: var(--wp--preset--color--accent); }
/* Списък с жълти квадратчета - „проблемите" на началната. */
.bullets {
list-style: none;
margin: 0;
padding: 0;
}
.bullets li {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px 0;
border-bottom: 1px solid var(--wp--preset--color--border);
font-size: 19px;
line-height: 1.5;
}
.bullets li:last-child { border-bottom: none; }
.bullets li::before {
content: "";
flex: none;
width: 8px;
height: 8px;
margin-top: 11px;
background: var(--wp--preset--color--accent);
}
/* Цитат с жълта черта отляво. */
.quote {
margin: 36px 0;
padding: 24px 30px;
border-left: 3px solid var(--wp--preset--color--accent);
background: var(--wp--preset--color--off-white);
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.4;
color: var(--wp--preset--color--ink);
}
.quote p { margin: 0; }
/* Ценоразпис. Истинска таблица, не редици от div-ове - сумите са данни. */
.prices { width: 100%; border-collapse: collapse; margin-top: 8px; }
.prices caption {
text-align: left;
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: clamp(24px, 3vw, 32px);
color: var(--wp--preset--color--ink);
margin-bottom: 6px;
}
.prices th,
.prices td {
padding: 18px 0;
border-bottom: 1px solid var(--wp--preset--color--border);
text-align: left;
font-weight: 400;
font-size: 18px;
line-height: 1.5;
color: var(--wp--preset--color--body);
}
.prices thead th { border-bottom: 2px solid var(--wp--preset--color--ink); }
.prices td:last-child,
.prices th:last-child {
text-align: right;
white-space: nowrap;
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: 24px;
color: var(--wp--preset--color--ink);
}
/* Голямото число в лентата за доверие. */
.stat {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: clamp(64px, 12vw, 132px);
line-height: 1;
color: var(--wp--preset--color--accent);
}
/* ------------------------------------------------------- страници (общо) */
.page { display: block; }
/*
* Тялото на страницата няма собствен контейнер в шаблона, защото full-bleed
* секциите носят своя вътрешен .container и трябва да стигат до ръба:
* - hero и FAQ блоковете (рендират се като ),
* - .sec патърните,
* - широки снимки (.alignfull).
* Голото съдържание обаче - мигрирани абзаци/заглавия/списъци или още
* неконвертиран Elementor markup - няма как да се самоограничи, затова тук
* му даваме контейнер 1280px, подравнен с трохите (.crumbs-wrap).
*/
article.page > * {
max-width: var(--k-container);
margin-inline: auto;
padding-inline: 20px;
}
article.page > section,
article.page > .sec,
article.page > .alignfull {
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
@media (min-width: 601px) {
article.page > * { padding-inline: var(--k-gutter); }
article.page > section,
article.page > .sec,
article.page > .alignfull { padding-inline: 0; }
}
/*
* Защита срещу вграден SVG без нашия .k-icon клас - напр. остатъчни Elementor
* иконки, останали без размер след dequeue на Elementor CSS (виж бъга на
* /about/, където такава иконка се разливаше като черен кръг на цял екран).
* Нашите Lucide иконки носят и клас, и собствени width/height атрибути, затова
* са изключени и запазват размера си.
*
* Важи и за тялото на статия (.post): блог постовете (post) не минаха през
* миграцията - тя пипна само страниците (page) - затова още носят Elementor
* данни и се рендират през Elementor. Единичната статия носеше post-info
* уиджет с ~15 иконки, всяка без размер след dequeue-а - ~1200px висока,
* страницата ставаше 23000px. Тук ги свиваме. За да падне и самият уиджет
* (дублира нашия .post__meta), виж kamenarska_reclaim_template() -
* налагаме single.php обратно, така Theme Builder шаблонът не се прилага.
*/
.page svg:not([class*="k-icon"]),
.post svg:not([class*="k-icon"]) {
width: 24px;
height: auto;
}
/*
* Explicit таван и за обвивката на иконката в Elementor icon-list - някои
* теми ѝ дават собствена височина, не само на svg-то вътре. Пояс и тиранти
* към reclaim-а по-горе: дори уиджетът да оцелее някъде, не разбива layout-а.
*/
.post .elementor-icon-list-icon,
.post .elementor-icon-list-icon svg {
width: 24px;
max-width: 24px;
height: auto;
max-height: 24px;
}
/* ------------------------------------------- sticky телефон на мобилно */
/*
* Главната конверсия е обаждане. На мобилно бутонът стои долу на всяка
* страница и не се маха при скрол.
*/
.k-callbar {
display: none;
}
/*
* Барът се показва под 992px - същата граница като хамбургера. Преди беше на
* 781px и между 782-991px хамбургерът се виждаше, но телефонният бар липсваше.
*/
@media (max-width: 991px) {
.k-callbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
padding: 16px 20px;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--body);
font-size: 18px;
font-weight: 600;
text-decoration: none;
border-top: 1px solid var(--wp--preset--color--accent);
}
.k-callbar .k-icon {
stroke: var(--wp--preset--color--accent);
}
/* Лентата не бива да покрива края на съдържанието. */
body.has-callbar {
padding-bottom: 76px;
}
/*
* Complianz cookie widget-ът (revoke бутонът и банерът) стои долу и се
* засичаше с call-бара на мобилно. Вдигаме НЕГО над лентата, не бара:
* съгласието е задължително и трябва да остане видимо и кликаемо, затова
* call-барът (z-index 90) не се вдига над него. Отстъпът = височината на
* лентата (76px) + малка междина + safe-area. !important, защото Complianz
* налага позицията си с висока специфичност/inline стилове.
*/
body.has-callbar .cmplz-manage-consent,
body.has-callbar .cmplz-cookiebanner.cmplz-bottom-right,
body.has-callbar .cmplz-cookiebanner.cmplz-bottom-left,
body.has-callbar .cmplz-cookiebanner.cmplz-bottom-center {
bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}
}
/* ------------------------------------------------------------ достъпност */
.k-skip {
position: absolute;
left: -9999px;
}
.k-skip:focus {
left: 20px;
top: 20px;
z-index: 200;
padding: 14px 22px;
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--white);
border-radius: var(--k-radius-small);
}
:where(a, button, summary, input, textarea):focus-visible {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* ------------------------------------------------------- патърни (Фаза 6) */
/* Тесен контейнер за четивни колони - времева линия, дълъг текст. */
.container--narrow { max-width: 760px; }
/* Картовият компонент (.cards / .card / .card__*) е консолидиран по-горе,
* в секция „елементи" - каноничен източник design-system.css. */
/*
* Снимки в мигрираното съдържание. Idea: heroImage-ите бяха CSS фонове в
* Elementor, а конверторът ги вкарва като реални
* блокове. Без таван всяка снимка се рендира на пълната си естествена
* височина, една под друга - страниците стават безкрайно дълги. Таван на
* височината + cover + радиус по дизайна (16px). `--full` разделителят
* (по-долу, същата специфичност, по-късен ред) прегазва тавана си.
*/
.figure { margin-block: 32px; }
.figure img {
width: 100%;
max-height: clamp(260px, 38vw, 460px);
object-fit: cover;
border-radius: var(--k-radius-image);
display: block;
}
/* Широка снимка разделител (image-full). */
.figure--full { margin-block: 0; }
.figure--full img {
width: 100%;
max-height: clamp(240px, 42vw, 520px);
object-fit: cover;
border-radius: var(--k-radius-image);
display: block;
}
/* Времева линия (timeline). Вертикална черта отляво, точка на всеки етап. */
.timeline {
list-style: none;
margin: 48px 0 0;
padding: 0;
}
.timeline__item {
position: relative;
padding: 0 0 40px 32px;
border-left: 2px solid var(--wp--preset--color--border);
}
.timeline__item:last-child {
padding-bottom: 0;
border-left-color: transparent;
}
/* Точката. Стои върху линията, в акцент. */
.timeline__item::before {
content: "";
position: absolute;
left: -8px;
top: 4px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--wp--preset--color--accent);
border: 3px solid var(--wp--preset--color--white);
}
.timeline__year {
display: block;
font-family: var(--wp--preset--font-family--heading);
font-size: 15px;
font-weight: 600;
letter-spacing: .04em;
color: var(--wp--preset--color--muted);
margin-bottom: 6px;
}
.timeline__title {
margin: 0 0 8px;
font-size: clamp(20px, 2.4vw, 26px);
}
/* ============================================================
Оформления за секции (класификатор). Портнати от design-system.css към
preset-токените. Всяка H2 секция получава форма според съдържанието -
вариация, не един блок с фонове (design-reference §3б).
============================================================ */
/* Заглавен блок на секция: eyebrow + H2 + жълта черта. */
.head { margin-bottom: 40px; }
.head--center { text-align: center; }
.accent-line { width: 48px; height: 3px; background: var(--wp--preset--color--accent); border: 0; margin: 28px 0 0; }
.head--center .accent-line { margin-inline: auto; }
/* Проза - четивна колона в широка секция. */
.prose { max-width: 820px; }
.prose > * + * { margin-top: 22px; }
.prose--full { max-width: none; }
/* A · Две колони: заглавие+лид вляво, съдържание вдясно. */
.split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: start; }
.split > .head { margin-bottom: 0; }
/* Две колони за вътрешни секции (напр. „Защо да изберете"). */
.info-2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
/* B · Булети като мрежа от бордер-клетки (2×2 / 3×3). */
.gridcells { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.gridcells.cols-2 { grid-template-columns: 1fr 1fr; }
.gridcells.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* Без flex (inline елементи стават отделни items и редът не се пренася). */
.gridcells li {
position: relative;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-card);
padding: 22px 24px 22px 60px; font-size: 16px; line-height: 1.5;
color: var(--wp--preset--color--body);
}
.gridcells .num { position: absolute; left: 24px; top: 22px; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 20px; color: var(--wp--preset--color--accent); line-height: 1.2; }
/* Списък с точки (компактен, за средни списъци, които не са чеклист). */
.list-dot { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.list-dot li { position: relative; padding-left: 20px; font-size: var(--wp--preset--font-size--body); line-height: 1.55; color: var(--wp--preset--color--body); }
.list-dot li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; background: var(--wp--preset--color--accent); }
/* C · Номерирани стъпки (процес). */
.steps { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: step; display: grid; gap: 16px; }
.steps.cols-2 { grid-template-columns: 1fr 1fr; }
.steps li {
counter-increment: step; position: relative;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-card);
/*
* БЕЗ flex: при display:flex всеки текстов сегмент около /
* става отделен flex item и се чупи на собствен ред („, като цената…"
* увисва самò). Block запазва нормалното инлайн пренасяне.
*/
padding: 30px 30px 30px 84px; font-size: 17px; line-height: 1.5;
color: var(--wp--preset--color--body); display: block; min-height: 92px;
}
.steps li::before {
content: counter(step, decimal-leading-zero);
position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 32px;
color: var(--wp--preset--color--accent); line-height: 1;
}
/* D · Блок със снимка отстрани (media-split манифест). */
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.media-split--rev .media-split__media { order: -1; }
.media-split__media { border: 1px solid var(--wp--preset--color--border); border-radius: var(--k-radius-image); overflow: hidden; }
.media-split__media img { width: 100%; height: 460px; object-fit: cover; display: block; }
/* E · Предупреждение (рискове - различен визуален тип от услугите). */
.warning { border: 1px solid var(--wp--preset--color--ink); border-radius: var(--k-radius-card); background: var(--wp--preset--color--white); padding: 40px 44px; }
.warning__head { display: flex; align-items: center; gap: 14px; }
.warning__head .k-icon { width: 30px; height: 30px; stroke: var(--wp--preset--color--ink); }
.warning .accent-line { margin: 22px 0 24px; }
.warncells { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.warncells li {
border-left: 3px solid var(--wp--preset--color--accent);
background: var(--wp--preset--color--off-white); border-radius: 0 8px 8px 0;
padding: 16px 18px; font-size: 16px; line-height: 1.45; color: var(--wp--preset--color--body);
}
/* F · Предложение (какво включва - положителен, обратен на предупреждението). */
.offer { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border); border-radius: var(--k-radius-card); padding: 40px 44px; }
.offer--narrow { max-width: 960px; margin-inline: auto; }
.offer .list-check { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
/* Showcase · секцията с вложени H3 (най-богата). */
/*
* auto-fit вместо твърди 3 колони: при 2 под-карти няма празна трета
* колона, при 10 се редят равномерно. Под-карта с параграфен текст (не
* списък) заема цял ред - дълъг текст в тясна колона стоеше неравно
* до съседните списъци (напр. trudovo-pravo).
*/
.showcase__subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 40px; }
.showcase__sub:has(> p) { grid-column: 1 / -1; }
.showcase__sub {
border: 1px solid var(--wp--preset--color--border);
border-top: 3px solid var(--wp--preset--color--accent);
border-radius: 0 0 var(--k-radius-card) var(--k-radius-card);
padding: 30px 28px; background: var(--wp--preset--color--white);
}
.showcase__sub h3 { font-size: 22px; margin-bottom: 16px; }
.showcase__sub ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.showcase__sub li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.5; color: var(--wp--preset--color--muted); }
.showcase__sub li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--wp--preset--color--accent); }
/* H2 с вложени H3 (topic - по-лека версия на showcase). */
.topic__subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.topic__sub { border: 1px solid var(--wp--preset--color--border); border-radius: var(--k-radius-card); padding: 26px; }
.topic__sub h3 { font-size: 21px; margin-bottom: 16px; }
.topic__sub p { font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--muted); margin: 0; }
/* „На тази страница" - TOC. Десктоп: страничен; мобилно: разгъваем. */
.onthispage { margin: 0 0 40px; }
.onthispage details { border: 1px solid var(--wp--preset--color--border); border-radius: var(--k-radius-card); padding: 0 20px; }
.onthispage summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.onthispage summary::-webkit-details-marker { display: none; }
.onthispage summary::after { content: "+"; font-size: 22px; }
.onthispage details[open] summary::after { content: "\2013"; }
.onthispage ol { list-style: none; margin: 0; padding: 0 0 16px; display: flex; flex-direction: column; gap: 2px; }
.onthispage a { display: block; padding: 13px 0; font-size: 15px; color: var(--wp--preset--color--muted); text-decoration: none; border-top: 1px solid var(--wp--preset--color--border); }
.onthispage a:hover { color: var(--wp--preset--color--ink); }
/* Тесен media-split - „змийката" в narrow потока на service страниците. */
.media-split--narrow { margin: 40px 0; gap: 36px; grid-template-columns: .8fr 1.2fr; }
.media-split--narrow .media-split__media img { height: 300px; }
.media-split--narrow h2:first-child,
.media-split--narrow .media-split__text > h2 { margin-top: 0; }
@media (max-width: 960px) {
.media-split--narrow { grid-template-columns: 1fr; gap: 24px; }
.media-split--narrow .media-split__media img { height: 260px; }
}
/* ------------------------------------- „За адвоката" (template-about.php) */
.abt-hero { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: start; }
.abt-hero--no-photo { grid-template-columns: 1fr; max-width: 900px; }
.abt-hero__photo {
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-image);
overflow: hidden;
}
.abt-hero__photo img { width: 100%; height: 600px; object-fit: cover; object-position: top; border-radius: 0; }
.abt-hero__title { margin-top: 16px; }
.abt-hero__role {
margin-top: 28px;
font-family: var(--wp--preset--font-family--heading);
font-size: 24px;
color: var(--wp--preset--color--ink);
}
.abt-facts { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.abt-fact { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 17px; }
.abt-fact .k-icon { flex: none; width: 22px; height: 22px; }
.abt-hero__cta { margin-top: 36px; }
/* Кариерна линия - маркер + вертикална черта, без години. */
.abt-tl { margin-top: 48px; }
.abt-tl__item {
position: relative;
border-left: 2px solid var(--wp--preset--color--border);
padding: 0 0 44px 30px;
}
.abt-tl__item:last-child { padding-bottom: 0; }
.abt-tl__item::before {
content: "";
position: absolute;
left: -9px;
top: 4px;
width: 16px;
height: 16px;
background: var(--wp--preset--color--accent);
border: 3px solid var(--wp--preset--color--white);
border-radius: 50%;
}
.abt-tl__item h3 { font-size: 23px; }
.abt-tl__item p { margin-top: 10px; font-size: 17px; color: var(--wp--preset--color--muted); }
/* Тройна решетка: специализация, публикации, контакт. */
.abt-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.abt-card {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--wp--preset--color--white);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-card);
padding: 28px;
text-decoration: none;
transition: border-color .18s ease;
}
.abt-card:hover { border-color: var(--wp--preset--color--ink); }
/* Тематична иконка над заглавието на картата (Denislav, 2026-07-23). */
.abt-card__icon .k-icon {
width: 26px;
height: 26px;
color: var(--wp--preset--color--ink);
stroke: var(--wp--preset--color--ink);
}
.abt-card:hover .abt-card__icon .k-icon { color: var(--wp--preset--color--accent); stroke: var(--wp--preset--color--accent); }
.abt-card h3 { font-size: 23px; }
.abt-card p { font-size: 16px; color: var(--wp--preset--color--muted); flex: 1; }
.abt-card__more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--wp--preset--color--ink); }
.abt-card__more .k-arrow { width: 18px; height: 18px; transition: transform .18s ease; color: var(--wp--preset--color--border); }
.abt-card:hover .k-arrow { transform: translateX(5px); color: var(--wp--preset--color--accent); }
/* Тъмният цитат. */
.abt-quote__fig { margin: 0; text-align: center; }
.abt-quote__fig blockquote { margin: 0; }
.abt-quote__text {
font-family: var(--wp--preset--font-family--heading);
font-size: clamp(26px, 3vw, 38px);
line-height: 1.35;
color: var(--wp--preset--color--white);
}
.abt-quote__by {
margin-top: 28px;
font-size: 15px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--wp--preset--color--accent);
}
/* Контакт-карти. */
.abt-contact {
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-card);
padding: 28px;
}
.abt-contact__label {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.abt-contact__value { margin: 0; font-size: 17px; }
.abt-contact__phone {
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 26px;
color: var(--wp--preset--color--ink);
text-decoration: none;
}
@media (max-width: 960px) {
.abt-hero { grid-template-columns: 1fr; gap: 32px; }
.abt-hero__photo img { height: 440px; }
.abt-grid3 { grid-template-columns: 1fr; }
}
/* Търсачката (404 и search резултати) - WP default формата идва гола. */
.search-form {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
max-width: 560px;
}
.search-form label { flex: 1; min-width: 200px; }
.search-form .search-field,
.search-form input[type="search"] {
width: 100%;
padding: 13px 18px;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--k-radius-card);
font: inherit;
font-size: 16px;
color: var(--wp--preset--color--body);
background: var(--wp--preset--color--white);
}
.search-form .search-field:focus {
outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
border-color: var(--wp--preset--color--ink);
}
.search-form .search-submit {
padding: 13px 26px;
border: none;
border-radius: 999px;
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--white);
font: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.search-form .search-submit:hover { background: var(--wp--preset--color--slate); }
/* Дълъг URL/дума в текста не бива да изнася реда извън екрана (390px). */
.k-main p, .k-main li, .k-main h1, .k-main h2, .k-main h3, .k-main h4 { overflow-wrap: break-word; }
/* Респонсив за оформленията. */
@media (max-width: 960px) {
.split { grid-template-columns: 1fr; gap: 28px; }
.info-2 { grid-template-columns: 1fr; gap: 32px; }
.media-split { grid-template-columns: 1fr; gap: 28px; }
.media-split--rev .media-split__media { order: 0; }
.media-split__media img { height: 340px; }
.showcase__subs, .topic__subs { grid-template-columns: 1fr; }
.warncells { grid-template-columns: 1fr 1fr; }
.steps.cols-2 { grid-template-columns: 1fr; }
.gridcells.cols-2, .gridcells.cols-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.gridcells.cols-2, .gridcells.cols-3, .warncells, .offer .list-check { grid-template-columns: 1fr; }
.warning, .offer { padding: 28px 22px; }
}
/* ==================================================================== */
/* Канон (handoff 3) - дълга услуга: .layout / .aside / TOC / cta-card */
/* ==================================================================== */
/* Грид на дългото четиво: 300px прилепена колона | съдържание. */
.layout {
max-width: var(--k-container);
margin: 0 auto;
padding: var(--k-section) var(--k-gutter);
display: grid;
grid-template-columns: 300px 1fr;
gap: 56px;
align-items: start;
}
.layout .aside {
position: sticky;
top: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.service-read { min-width: 0; }
.service-read > * + * { margin-top: 56px; }
/* Странична „На тази страница" (десктоп). */
.toc { border: 1px solid var(--wp--preset--color--border); border-radius: var(--k-radius-card); padding: 24px; }
.toc__title { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 15px; line-height: 1.4; color: var(--wp--preset--color--muted); text-decoration: none; border-left: 2px solid transparent; }
.toc a:hover { color: var(--wp--preset--color--ink); border-left-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--off-white); }
/* Странични nav блокове (Семейно право / Правни сфери). */
.sidebar-nav { border: 1px solid var(--wp--preset--color--border); border-radius: var(--k-radius-card); padding: 24px; }
.sidebar-nav h4 { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 14px; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sidebar-nav a { font-size: 15px; color: var(--wp--preset--color--ink); text-decoration: none; }
.sidebar-nav a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); }
/* CTA карта (заоблена тъмна, в текстовата колона или в aside). */
.cta-card {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--wp--preset--color--ink);
background-image: linear-gradient(rgba(27, 25, 23, .76), rgba(27, 25, 23, .76)), var(--k-band-bg, none);
background-size: cover;
background-position: center;
border-radius: var(--k-radius-card);
padding: 40px;
color: var(--wp--preset--color--light);
text-align: center;
}
.cta-card h3 { color: var(--wp--preset--color--white); font-size: 26px; margin: 0; }
.cta-card p { margin: 12px auto 0; max-width: 420px; color: var(--wp--preset--color--muted-dark); font-size: 16px; }
.cta-card .hours { margin-top: 16px; font-size: 14px; }
/* Едрият телефон (канон .cta-phone): Lora 600, жълт. */
.cta-phone {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 22px;
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
font-size: 36px;
letter-spacing: -0.01em;
color: var(--wp--preset--color--accent);
text-decoration: none;
}
.cta-phone:hover { color: var(--wp--preset--color--accent); text-decoration: none; }
.cta-phone svg, .cta-phone .k-icon { width: 30px; height: 30px; stroke: var(--wp--preset--color--accent); }
.cta-card--aside { padding: 32px 24px; }
.cta-card--aside .cta-phone { font-size: 28px; gap: 12px; }
.cta-card--aside .cta-phone svg { width: 24px; height: 24px; }
/* Проза с ляв жълт борд („Предимства", канон §7). */
.prose--accent { border-left: 3px solid var(--wp--preset--color--accent); padding-left: 36px; }
/* Вградена снимка в дълъг текст. */
.media-inline { margin: 36px 0; }
.media-inline img { width: 100%; height: 380px; object-fit: cover; border-radius: var(--k-radius-image); }
/* Icon-list за клаузите на споразумението (канон §7). */
.clause-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--border); max-width: 900px; }
.clause-list li { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.clause-list .card__icon { flex: none; line-height: 0; margin: 0; }
.clause-list .card__icon svg { width: 26px; height: 26px; stroke: var(--wp--preset--color--ink); fill: none; }
.clause-list h4 { margin: 0 0 6px; }
.clause-list p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--muted); }
/* Авторитет („1992") - едро число + текст, върху тъмна секция. */
.authority { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; margin-top: 28px; }
.authority__num { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 132px; line-height: 1; color: var(--wp--preset--color--accent); letter-spacing: -.02em; }
.authority__text { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: 30px; line-height: 1.35; color: var(--wp--preset--color--white); max-width: 640px; }
/* Пълноширок снимков разделител. */
.imgband .frame { max-width: var(--k-container); margin: 0 auto; padding-inline: var(--k-gutter); }
.imgband img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--k-radius-image); }
/* Навигационни карти (компактни, сочат към други страници). */
.navcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.navcards--narrow { max-width: 820px; margin-inline: auto; }
.navcard { display: flex; align-items: center; gap: 16px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border); border-radius: var(--k-radius-card); padding: 22px 26px; text-decoration: none; color: var(--wp--preset--color--ink); }
.navcard:hover { border-color: var(--wp--preset--color--ink); }
.navcard .card__icon svg { width: 24px; height: 24px; }
.navcard .t { font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: 21px; }
.navcard .arr { margin-left: auto; color: var(--wp--preset--color--border); transition: transform .15s; }
.navcard:hover .card__icon { color: var(--wp--preset--color--accent); }
.navcard:hover .arr { transform: translateX(5px); color: var(--wp--preset--color--ink); }
/* Респонсив на канонния layout. */
@media (max-width: 960px) {
.layout { grid-template-columns: 1fr; gap: 0; }
.layout .aside { position: static; order: 2; margin-top: 56px; }
.layout .aside .toc { display: none; } /* десктоп TOC пада; ползва се .onthispage */
.navcards { grid-template-columns: 1fr; }
.authority { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.authority__num { font-size: 82px; }
.authority__text { font-size: 22px; }
}
@media (max-width: 600px) {
.imgband img { height: 300px; }
.media-inline img { height: 280px; }
.cta-card { padding: 28px 22px; }
.cta-phone { font-size: 30px; }
}
/*
* Десктоп: мобилният „На тази страница" се крие САМО когато страницата има
* .layout (тогава TOC-ът е в aside). Дълъг пост без aside си го пази.
* :has се ползва и другаде в темата (hero тъмната лента).
*/
@media (min-width: 961px) {
body:has(.layout) .onthispage { display: none; }
}
/* Цитат на тъмна секция (quote-dark, канон: пунктуация с цитат). */
.quote-dark { margin: 0; text-align: center; }
.quote-dark blockquote { margin: 0; border: 0; padding: 0; }
.quote-dark blockquote p {
margin: 0 auto;
max-width: 780px;
font-family: var(--wp--preset--font-family--heading);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.45;
color: var(--wp--preset--color--white);
}
.quote-dark figcaption { margin-top: 24px; font-size: 15px; color: var(--wp--preset--color--muted-dark); }
.quote-dark figcaption strong { color: var(--wp--preset--color--light); font-weight: 600; }
/* deploy-marker: 192e708-t23 */