/* ============================================================
ДИЗАЙН СИСТЕМА на сайта (по DESIGN_BRIEF.md)
Структура на файла:
1. Токени (цветове, типография, отстъпи, радиуси, сенки)
2. Основа (reset, типография, връзки, фокус)
3. Компоненти (бутони, картички, форми, хедър, футър…)
4. Hero и банери на вътрешните страници
5. Секции по страници
6. Движение (fade-in при скрол) + prefers-reduced-motion
7. Адаптивност
Всяка нова страница ползва само класовете оттук —
без отделни стилове в шаблоните.
============================================================ */
/* ============================================================
АДАПТИВНОСТ: ТОЧКИТЕ НА ПРЕЧУПВАНЕ (подредено на 11.08.2026)
⚠️ ВСИЧКИ МЕДИЯ ЗАЯВКИ СА В `rem`, НЕ В `px`.
Дотук файлът смесваше двете (640px и 40rem са едно и също при основа
16px — и съвсем различно, ако човек си е вдигнал шрифта в браузъра). При
вдигнат шрифт `rem` заявките се местят заедно с текста, а `px` остават на
място: тогава едната половина от страницата минава в мобилен изглед, а
другата не. Затова 20 заявки бяха преобразувани в `rem`.
⚠️ ГОРНАТА ГРАНИЦА Е ВИНАГИ С .01 ПО-МАЛКО.
`max-width: 40rem` и `min-width: 40rem` съвпадат ТОЧНО на 40rem и двете
важат едновременно — на екран, широк точно толкова, се прилагаха и
мобилните, и настолните правила. Затова горните граници са 39.99rem.
Стълбицата (основа 16px):
30rem 480px малък телефон
35rem 560px телефон
37.5rem 600px голям телефон
40rem 640px телефон в ширина / малък таблет
45rem 720px таблет
47.5rem 760px таблет
48rem 768px таблет в ширина
53.75rem 860px малък лаптоп
56.25rem 900px лаптоп
60rem 960px лаптоп
64rem 1024px голям лаптоп и нагоре
⚠️ ДЪЛГ: единайсет стойности са твърде много — различните компоненти
се пречупват на различни места и на 800px част от страницата изглежда
„таблет“, а част „лаптоп“. Свиването до четири (40 / 48 / 64 / 80rem)
иска визуална проверка на всяка страница и затова НЕ е направено
наведнъж. Ново правило се пише на стойност ОТ стълбицата, не на нова.
============================================================ */
/* ---------- 0. ШРИФТОВЕ (самохоствани, задължително — style-src/font-src 'self') ----------
Source Serif 4 (400, 600) — заглавия, числа, цени.
Golos Text (400, 500, 600, 700) — тяло, етикети, бутони.
И двата са variable fonts в Google Fonts: латиница и кирилица идват в ОТДЕЛНИ
файлове (2 на семейство = 4 общо), но всеки файл покрива целия набор тежести
по-горе — затова тежестите се декларират многократно към един и същ файл
(стандартният начин, по който Google Fonts обслужва variable fonts).
Няма подскачане чрез size-adjust/ascent-override: точните стойности изискват
измерване на метриките на всеки резервен шрифт (system-ui е различен на
Windows/Mac/Linux), а познаване на приблизителна стойност е точно видът
„уверено грешно“, което проектът избягва (виж CLAUDE.md). Приема се съзнателно
лек reflow при първо зареждане с font-display: swap; при следващо посещение
шрифтът е кеширан и подскачането не се усеща. */
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../fonts/source-serif-4-latin.197cc326af6d.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Source Serif 4";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../fonts/source-serif-4-cyrillic.510c90fa5758.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/golos-text-latin.f57df9832ab8.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/golos-text-cyrillic.2b8fbbb33a14.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* ---------- 1. ТОКЕНИ ---------- */
/* Индиго + виолетово, заоблени карти, плаващ pill хедър —
върху реалните снимки на текущия сайт (hero/банери остават същите). */
:root {
/* Цветове: индиго = доверие/действие, виолетово = вторичен акцент.
ЗЕЛЕНОТО ОТПАДНА. Тюркоазът (teal 600/700) не се връзваше с навы +
индиго — две различни температури в един екран. Виолетово-индиговата
гама е съседна на основния цвят и лентите се четат като едно семейство.
Контраст: бял текст върху #7c3aed е 5.9:1 (AA), а върху най-светлата
точка на градиента #a855f7 — 4.6:1 (пак AA). Затова върху градиента
НЕ се слага сив текст, само бял. */
--color-navy: #1e1b3a;
--color-primary: #4f46e5;
--color-primary-dark: #4338ca;
--color-accent: #7c3aed;
--color-accent-dark: #5b21b6;
--color-accent-soft: #a78bfa;
--gradient-accent: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
--color-accent-bg: #efedfd;
--color-on-navy: #cecbf6; /* текст върху навы лентите, вече ползван в "Услуги" */
--color-on-navy-muted: #afa9ec; /* приглушен текст върху навы */
/* Неутрални: текстът е тъмен върху светло за контраст ≥ 7:1 */
--color-text: #1f2937;
--color-muted: #6b6b87; /* контраст ≥ 7:1 върху бяло */
--color-bg: #f6f5fd;
--color-card: #ffffff;
--color-border: #eceafb;
/* Състояния */
--color-danger: #dc2626;
--color-success: #065f46;
--color-success-bg: #ecfdf5;
--color-warning: #92400e;
--color-warning-bg: #fffbeb;
--color-danger-bg: #fef2f2;
/* Затъмняващ слой върху hero/банер снимките */
--overlay-dark: rgba(15, 20, 45, 0.74);
--overlay-light: rgba(30, 27, 58, 0.58);
/* Типография: самохоствани уеб шрифтове с пълна кирилица; тяло ≥ 18px.
Системната редица остава като резервна при бавна мрежа/блокирани шрифтове. */
--font-display: "Source Serif 4", Georgia, serif;
--font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--text-sm: 0.875rem;
--text-base: 1.125rem; /* 18px — тялото */
--text-md: 1.25rem;
--text-lg: 1.5rem;
--text-xl: clamp(1.6rem, 3vw, 2.2rem);
--text-hero: clamp(2.1rem, 4.5vw, 3.6rem);
--leading: 1.6;
/* Едно място, откъдето всяко „героично“ число взима вида си. Досега
същото число беше 4.75rem в лентата с числа, 4rem в резултата на
калкулатора, 2.4rem на „Вашият пакет“ и 2rem в кутията за покупка —
четири размера за едно нещо. Три стъпки, не четири:
lg = лента на цяла ширина, md = кутия/панел, sm = ред в списък. */
--figure-lg: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
--figure-md: clamp(2rem, 1.6rem + 1.6vw, 3rem);
--figure-sm: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
/* Отстъпи (кратни на 0.25rem) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3.5rem;
/* Радиуси и сенки: по-заоблени карти в стила на визия 2б */
--radius-sm: 10px;
--radius: 14px;
--radius-md: 18px;
--radius-lg: 28px;
--radius-pill: 999px;
--shadow: 0 2px 8px rgba(30, 27, 58, 0.05);
--shadow-hover: 0 10px 26px rgba(30, 27, 58, 0.1);
--shadow-lift: 0 18px 46px rgba(79, 70, 229, 0.16);
/* Движение и достъпност */
--transition: 0.18s ease;
--tap-target: 2.75rem; /* ~44px минимална цел за докосване */
--focus-ring: 3px solid var(--color-primary);
}
/* ---------- 2. ОСНОВА ---------- */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading);
color: var(--color-text);
background: var(--color-bg);
}
img { max-width: 100%; display: block; }
/* Йерархия на заглавията — забележимо по-големи от тялото */
h1 { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--space-4); color: var(--color-navy); }
h2 { font-size: var(--text-lg); line-height: 1.25; margin: 0 0 var(--space-3); color: var(--color-navy); }
h3 { font-size: var(--text-md); line-height: 1.3; margin: 0 0 var(--space-2); }
h4 { font-size: var(--text-base); line-height: 1.35; margin: 0 0 var(--space-2); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Видим фокус за работа с клавиатура — навсякъде, еднакъв */
:focus-visible {
outline: var(--focus-ring);
outline-offset: 2px;
border-radius: 4px;
}
/* Индиговата рамка се губи върху тъмните ленти (индиго на индиго) —
там фокусът е светъл, не по-тъмен вариант на същия цвят */
.band-navy :focus-visible,
.band-accent :focus-visible { outline-color: #fff; }
/* Връзка „Към съдържанието“ — видима само при фокус с клавиатура */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--color-navy);
color: #fff;
padding: var(--space-3) var(--space-5);
border-radius: 0 0 var(--radius) 0;
font-weight: 600;
}
.skip-link:focus-visible { left: 0; text-decoration: none; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 var(--space-4);
}
main.container { padding-top: var(--space-6); padding-bottom: var(--space-8); }
/* Страница, чието съдържание е изцяло в ленти (начална, за нас, казуси),
оставя `main` празен. Без това правило неговите отстъпи рисуват ивица
празно между последната лента и футъра. Работи само защото в base.html
отварящият и затварящият таг са на един ред — виж бележката там. */
main.container:empty { padding: 0; }
/* ---------- 3. КОМПОНЕНТИ ---------- */
/* --- Бутони: една основа + разновидности; цел за докосване ≥ 44px --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: var(--tap-target);
padding: 0.7rem 1.5rem;
border: 0;
border-radius: var(--radius-pill);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, 0.22); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary {
background: var(--color-accent-bg);
color: var(--color-primary-dark);
border: 0;
}
.btn-secondary:hover { background: #e4e1fb; }
/* Единствен основен призив — едър, индиговa бутон с мека сянка */
.btn-cta {
background: var(--color-primary);
color: #fff;
font-size: 1.1rem;
padding: 0.85rem 2.1rem;
box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
}
.btn-cta:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(79, 70, 229, 0.34);
}
/* --- Картичка: обща основа, наследена от конкретните картички --- */
/* `.product-card` НЕ е тук: картата на услугата има собствен вид с цветна
лента отляво (виж „Раздел Услуги“ по-долу), а не рамка от всички страни.
`.cart-row`/`.cart-summary`/`.payment-method`/`.bank-instructions`
излязоха оттук при партида Б; `.case-card` — при партида В. При визия 3
`.about-card`, `.contact-info`, `.contact-form-panel` и
`.checkout-form-panel` отпаднаха изцяло: белите панели вече са един клас
(`.formpanel`), а картите — редове (виж
съответните раздели по-долу). `.category-card` беше тук, махната е при
уборката на партида Г (мъртва — виж бележката в раздел „5. Секции по
страници“). `.auth-card`/`.payment-sim-card` бяха оставени непипнати като
„извън обхвата на визия „1c““, но формата за вход е ПЪРВОТО, което вижда
човек, минал през публичния сайт — сянка точно там прави прехода видим.
Затова и те минаха на плоско, заедно с `.doc-card` и
`.portal-module-card`. */
.auth-card,
.payment-sim-card {
background: var(--color-card);
border: 1px solid var(--color-border);
}
/* --- Форми и полета --- */
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.form-field input,
.form-field textarea,
.form-field select {
width: 100%;
min-height: var(--tap-target);
font: inherit;
padding: 0.65rem 0.8rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
color: var(--color-text);
}
.form-field textarea { min-height: 7rem; }
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
outline: var(--focus-ring);
outline-offset: 0;
border-color: var(--color-primary);
}
.field-error { color: var(--color-danger); font-size: 0.9rem; margin: 0.3rem 0 0; }
.form-success {
background: var(--color-success-bg);
border: 1px solid #10b981;
border-radius: var(--radius);
color: var(--color-success);
padding: var(--space-3) var(--space-4);
margin: 0 0 1.25rem;
}
/* --- Заглавна лента: плаваща заоблена лента (визия 2б) --- */
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: rgba(246, 245, 253, 0.85);
backdrop-filter: blur(10px);
padding: 0.9rem 0;
}
/* Единствен ред: [бранд | табове | език + кошница + портал] в заоблена карта */
.header-inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem 0.75rem;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
box-shadow: var(--shadow);
padding: 0.55rem 0.7rem 0.55rem 1.1rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.7rem;
color: var(--color-navy);
}
.brand:hover { text-decoration: none; }
/* Иконна значка на бранда — заменя се лесно с реално лого () */
.brand-mark {
flex: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 14px;
background: linear-gradient(135deg, var(--color-primary), #7c3aed);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 0.95rem;
}
.brand-name {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.1;
white-space: nowrap;
}
.brand-tagline {
display: block;
font-size: 0.72rem;
font-weight: 600;
color: var(--color-muted);
white-space: nowrap;
}
/* При замяна на текста с лого: в base.html */
.brand-logo { max-height: 2.5rem; width: auto; }
.main-nav { display: flex; gap: 0.15rem; margin-left: 0.5rem; }
.main-nav a {
display: inline-flex;
align-items: center;
min-height: var(--tap-target);
padding: 0 0.9rem;
border-radius: var(--radius-pill);
color: var(--color-text);
font-weight: 600;
white-space: nowrap;
transition: color var(--transition), background var(--transition);
}
.main-nav a:hover { color: var(--color-primary-dark); background: var(--color-accent-bg); text-decoration: none; }
/* Дясна група: език + кошница + бутон „Клиентски портал“ */
.header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.lang-switch {
display: inline-flex;
align-items: center;
background: var(--color-bg);
border-radius: var(--radius-pill);
padding: 2px;
}
.lang-switch form { display: contents; }
.lang-btn {
border: 0;
background: none;
font: inherit;
font-size: 0.8rem;
font-weight: 700;
color: var(--color-muted);
cursor: pointer;
min-height: 2.2rem;
padding: 0 0.6rem;
border-radius: var(--radius-pill);
transition: color var(--transition), background var(--transition);
}
.lang-btn:hover { color: var(--color-primary-dark); }
.lang-btn.active { background: var(--color-card); color: var(--color-primary-dark); box-shadow: var(--shadow); }
/* Кошница с брояч */
.cart-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: var(--tap-target);
padding: 0 0.9rem;
border-radius: var(--radius-pill);
color: var(--color-text);
font-weight: 600;
transition: color var(--transition), background var(--transition);
}
.cart-link:hover { color: var(--color-primary-dark); background: var(--color-accent-bg); text-decoration: none; }
.cart-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.cart-count {
min-width: 1.35rem;
height: 1.35rem;
padding: 0 0.3rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-pill);
font-size: 0.8rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* Главно действие за съществуващи клиенти: плътен индигов бутон */
.nav-portal {
display: inline-flex;
align-items: center;
min-height: var(--tap-target);
border-radius: var(--radius-pill);
background: var(--color-primary);
color: #fff;
font-weight: 700;
padding: 0 1.3rem;
white-space: nowrap;
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
transition: background var(--transition), box-shadow var(--transition);
}
.nav-portal:hover {
background: var(--color-primary-dark);
box-shadow: 0 10px 24px rgba(79, 70, 229, 0.34);
text-decoration: none;
}
/* Значката „чакащи преглед“ до „Документи“ в хедъра — вторичен бутон, за
да не спори с главното действие „Клиентски портал“ */
.nav-portal.nav-badge {
background: var(--color-card);
color: var(--color-text);
border: 1px solid var(--color-border);
box-shadow: none;
gap: 0.5rem;
}
.nav-portal.nav-badge:hover { background: var(--color-accent-bg); }
/* Бутон „Меню“ (сгъване на телефон): checkbox — работи без JavaScript.
На широк екран е скрит; табовете се показват в реда на pill-а. */
.nav-toggle-input { position: absolute; opacity: 0; }
.nav-toggle {
display: none;
align-items: center;
gap: 0.55rem;
min-height: var(--tap-target);
padding: 0 0.8rem;
font-weight: 600;
color: var(--color-text);
cursor: pointer;
border-radius: var(--radius-pill);
}
.nav-toggle-icon {
position: relative;
width: 1.2rem;
height: 2px;
background: currentColor;
flex: none;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
}
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }
/* Видим фокус за клавиатура: checkbox-ът е фокусиран, рисуваме върху етикета */
.nav-toggle-input:focus-visible ~ .nav-toggle { outline: var(--focus-ring); outline-offset: 2px; }
/* --- Съобщения (messages) под хедъра --- */
.flash-messages { padding-top: var(--space-4); }
.flash {
border: 1px solid;
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
margin: 0 0 var(--space-2);
}
.flash-success { background: var(--color-success-bg); border-color: #10b981; color: var(--color-success); }
.flash-error { background: #fef2f2; border-color: var(--color-danger); color: #991b1b; }
.flash-info { background: var(--color-accent-bg); border-color: var(--color-primary); color: var(--color-navy); }
/* --- Превключвател на езици (BG | EN) — дискретни текстови връзки,
за да не крадат вниманието от бутона „Клиентски портал“ --- */
.lang-switch {
display: inline-flex;
align-items: center;
}
.lang-switch form { display: contents; }
/* Разделител „|“ между езиците (формите са display: contents,
но техните псевдоелементи пак се рисуват) */
.lang-switch form + form::before {
content: "|";
color: var(--color-border);
padding: 0 0.15rem;
}
.lang-btn {
border: 0;
background: transparent;
font: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-muted);
min-height: 2.25rem;
padding: 0.2rem 0.45rem;
border-radius: var(--radius-sm);
cursor: pointer;
transition: color var(--transition);
}
.lang-btn:hover { color: var(--color-primary); text-decoration: underline; }
.lang-btn.active {
color: var(--color-navy);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 4px;
}
/* --- Трохи (breadcrumbs) --- */
.breadcrumbs {
background: var(--color-card);
border-bottom: 1px solid var(--color-border);
font-size: var(--text-sm);
}
.breadcrumbs ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: 0;
padding: var(--space-2) 0;
}
.breadcrumbs li + li::before {
content: "›";
margin: 0 0.4rem;
color: var(--color-muted);
}
.breadcrumbs span { color: var(--color-muted); }
/* --- Етикет над заглавие (eyebrow) --- */
.eyebrow {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-primary-dark);
background: var(--color-accent-bg);
border-radius: var(--radius-pill);
padding: 0.35rem 0.95rem;
margin: 0 0 1.25rem;
}
/* --- Долен колонтитул --- */
.site-footer {
background: var(--color-card);
border-top: 1px solid var(--color-border);
color: var(--color-muted);
font-size: var(--text-sm);
padding: 1.25rem 0;
}
.site-footer p { margin: 0; }
/* Правни връзки (GDPR) до копирайта; на телефон минават на нов ред */
.footer-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1.5rem;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1.25rem;
}
.footer-legal a { color: var(--color-muted); text-decoration: underline; }
.footer-legal a:hover { color: var(--color-primary-dark); }
/* Бутонът „Настройки на бисквитките“ изглежда като връзка (отваря банера) */
.footer-legal-btn {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--color-muted);
text-decoration: underline;
cursor: pointer;
min-height: var(--tap-target);
}
.footer-legal-btn:hover { color: var(--color-primary-dark); }
/* --- Банер за съгласие за бисквитки (GDPR) --- */
/* V3 (11.09.2026) — ПРОМЕНЕНО Е САМО ПРЕДСТАВЯНЕТО.
Логиката (consent.js), срокът на бисквитката, гейтването на аналитиката и
текстът НЕ са пипани.
ЗАЩО. Банерът беше лилава стена на цялата ширина — на телефон заемаше
близо една трета от първия екран и беше първото, което човек вижда. Сега
е компактна тъмна карта, центрирана, с отстъп от ръбовете (и от „носа“
на iPhone — `safe-area-inset-bottom`).
⚠️ ДВАТА БУТОНА СА ЕДНАКВИ — по размер, цвят и тежест. „Отказвам“ е точно
толкова видим и лесен, колкото „Приемам“. Никакъв визуален натиск към
единия избор. Белите бутони върху тъмна карта освен това не се бъркат с
индиговите призиви на самата страница.
⚠️ `display` НЕ СЕ ЗАДАВА НА `.cookie-banner`. Скриването е с атрибута
`hidden` (consent.js); `display: flex` тук би го надвил и банерът нямаше
да изчезва след избор. Подредбата е на вътрешния елемент. */
.cookie-banner {
position: fixed;
left: 50%;
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 100;
width: min(52rem, calc(100% - 2rem));
translate: -50% 0;
padding: 1rem 1rem 1rem 1.4rem;
border: 1px solid rgba(196, 181, 253, 0.22);
border-radius: 20px;
background: var(--color-navy);
background-clip: padding-box;
color: #fff;
box-shadow: 0 1px 2px rgba(15, 12, 40, 0.2), 0 22px 48px -18px rgba(15, 12, 40, 0.55);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
max-width: none;
padding: 0;
}
.cookie-banner-text {
flex: 1 1 22rem;
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.88);
}
.cookie-banner-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; flex: none; gap: 0.6rem; }
.cookie-btn {
min-width: 8.5rem;
padding: 0.6rem 1.4rem;
font-weight: 700;
font-size: 0.9375rem;
background: #fff;
color: var(--color-navy);
border: 1px solid #fff;
}
.cookie-btn:hover { background: var(--color-accent-bg); border-color: var(--color-accent-bg); }
.cookie-btn:focus-visible { outline: 3px solid var(--color-accent-soft); outline-offset: 2px; }
/* Телефон: долна карта, два равни бутона един до друг на цялата ширина. */
@media (max-width: 40rem) {
.cookie-banner {
bottom: max(0.625rem, env(safe-area-inset-bottom));
width: calc(100% - 1.25rem);
padding: 0.9rem 0.9rem 0.9rem 1rem;
border-radius: 18px;
}
.cookie-banner-inner { gap: 0.7rem; }
.cookie-banner-text { flex-basis: 100%; font-size: 0.875rem; line-height: 1.45; }
.cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.cookie-btn { min-width: 0; padding: 0.55rem 0.75rem; }
}
/* --- Правни страници (политики) — визия „1c“, партида Г ---
Двуколонна на широк екран: лепкаво оглавление (.toc) вляво, текстът
вдясно, ограничен до 68ch — по-широка колона се чете по-трудно. */
.legal-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: start;
/* Отстъпът отдолу вече е на лентата (.band), не на самата решетка —
.legal-layout е .container ВЪТРЕ в .band-light. */
margin-bottom: 0;
}
@media (min-width: 64rem) {
.legal-layout { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-8); }
}
/* min-width:0 е задължителен тук: .legal-page е елемент на грид (.legal-layout)
и по подразбиране грид елементите имат min-width:auto — таблицата в
„Бисквитки“ (.cookie-table) не се свива под собствената си минимална
ширина и раздува цялата колона извън екрана на 375px, въпреки че
.table-wrap отдолу си има overflow-x:auto (то не помага без това). */
.legal-page { max-width: 68ch; min-width: 0; }
.legal-page h2 {
margin-top: var(--space-7);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
font-family: var(--font-display);
font-weight: 600;
}
.legal-page section:first-of-type h2 { margin-top: 0; }
.legal-page h2 { color: var(--color-navy); }
.legal-page h3 {
font-family: var(--font-display);
font-weight: 600;
color: var(--color-navy);
margin-top: var(--space-5);
}
.legal-page p, .legal-page li { line-height: 1.65; }
.legal-page ul { padding-left: 1.15rem; }
.legal-page li { margin-bottom: var(--space-2); }
/* Дълъг адрес/имейл в не бута колоната навън на 375 px */
.legal-page strong { overflow-wrap: anywhere; }
/* Оглавлението — .toc е готов от визия „1c“ (началото); тук само
показва/скрива според ширината. На телефон е , лепкаво отгоре,
под заглавието — не встрани, там няма място за него. */
.toc { display: none; min-width: 0; }
@media (min-width: 64rem) { .toc { display: block; } }
/* Оглавлението на телефон/таблет: бяло върху бялата лента, с косъм
отдолу — досега стоеше върху лилаво и не се различаваше от текста. */
.toc-mobile {
display: block;
min-width: 0;
position: sticky;
top: 0;
z-index: 20;
background: var(--color-card);
box-shadow: 0 1px 0 var(--color-border);
}
.toc-mobile summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--tap-target);
padding: var(--space-3) 0;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { content: "▾"; color: var(--color-muted); }
.toc-mobile[open] summary::after { content: "▴"; }
.toc-mobile nav { padding-bottom: var(--space-3); }
.toc-mobile nav a { display: block; padding: 0.5rem 0; color: var(--color-muted); }
.toc-mobile nav a.is-active { color: var(--color-navy); font-weight: 600; }
@media (min-width: 64rem) { .toc-mobile { display: none; } }
/* Широката таблица скролира в собствен контейнер на тесен екран */
.table-wrap { overflow-x: auto; }
.cookie-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.cookie-table th, .cookie-table td {
text-align: left;
padding: 0.6rem 0.9rem;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
/* Главичката говори същия език като .factlist: тих етикет с уверттюр,
косъм отдолу, нула фон — иначе таблицата изглежда като изрезка от
друг документ. */
.cookie-table th {
font-size: 0.6875rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-muted);
border-bottom: 1px solid var(--color-border);
}
.cookie-table td code {
font-size: 0.9375rem;
background: var(--color-bg);
padding: 0.1rem 0.4rem;
}
.cookie-table td:first-child { white-space: nowrap; }
/* --- Ленти и общи класове (визия „1c · Отговорът първи“) ---
Десет класа, преизползвани на всичките девет страници на публичния сайт:
.band(-light/-lilac/-navy/-teal), .band-head, .eyebrow-quiet,
.stat/.stat-value/.stat-label, .rowlist/.rowlist-item, .pricerow,
.profile-choice, .decision-bar, .toc, .empty-note.
Плоско навсякъде — без box-shadow и transform при посочване. */
.band { padding: var(--space-8) 0; }
.band-light { background: var(--color-card); }
.band-lilac { background: var(--color-bg); }
.band-navy { background: var(--color-navy); color: #fff; }
/* Акцентната лента. Беше `.band-accent` с плътен тюркоаз; сега носи
градиента и се казва по РОЛЯТА си, а не по цвета — следващата смяна на
гамата няма да иска преименуване в шест шаблона. */
.band-accent { background-image: var(--gradient-accent); color: #fff; }
.band-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--space-3);
margin-bottom: var(--space-5);
}
.band-head h2 {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
letter-spacing: -0.01em;
color: inherit;
}
/* Заглавие в регистър на ЕТИКЕТ — за раздели, чието съдържание само е
едро (шестте ситуации на началната страница). Тялото говори, заглавието
само посочва. Без това двете са в един и същи серифен глас и разделът
започва с два еднакво силни реда един под друг. */
.band-head-quiet h2 {
font-family: var(--font-body);
font-weight: 800;
font-size: 0.8125rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-muted);
}
.band-head a { font-size: 1rem; color: var(--color-muted); white-space: nowrap; }
/* Връзката „всички 18 услуги“ е ДЕЙСТВИЕ — единственият изход от раздела
към каталога. Като сив ред на 1rem до заглавие от 2rem тя се четеше
като подпис, не като нещо, което се щрака. Затова е бутон с рамка. */
.band-head-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 1rem;
border: 1px solid var(--color-primary);
border-radius: 999px;
color: var(--color-primary-dark);
font-size: 0.9375rem;
font-weight: 700;
white-space: nowrap;
transition: background var(--transition), color var(--transition), transform var(--transition);
}
.band-head a.band-head-link { color: var(--color-primary-dark); }
.band-head-link:hover {
background: var(--color-primary);
color: #fff;
text-decoration: none;
transform: translateX(2px);
}
.band-head-link span { transition: transform var(--transition); }
.band-head-link:hover span { transform: translateX(3px); }
.band-navy .band-head,
.band-accent .band-head { border-bottom-color: rgba(255, 255, 255, 0.16); }
.band-navy .band-head a,
.band-accent .band-head a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
.band-head-link, .band-head-link span { transition: none; }
.band-head-link:hover, .band-head-link:hover span { transform: none; }
}
/* Призив вътре в лента: текст отляво, бутон отдясно — краят на „За нас“ и
„Казуси“ (визия „1c“, партида В). Не е от първите десет класа, но се
появява на две страници по еднакъв начин, а нито един от десетте не му
пасва (.band-head е заглавие+бройка/връзка, не заглавие+текст+бутон). */
.band-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
.band-cta h2 {
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
color: inherit;
}
.band-cta p { margin: 0; max-width: 44ch; }
.band-accent .band-cta p { color: #fff; }
.band-navy .band-cta p { color: var(--color-on-navy); }
.band-cta .btn { flex: none; }
.eyebrow-quiet {
display: block;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: var(--space-3);
}
.band-navy .eyebrow-quiet { color: var(--color-on-navy-muted); }
/* Върху градиента текстът е БЯЛ, не приглушен: най-светлата точка (#a855f7)
дава 4.6:1 с бяло и всяко посивяване пада под прага. */
.band-accent .eyebrow-quiet { color: #fff; }
/* .stat е обвивката на едно число + ред под него; .stat-value никога не се
рендира без .stat-label — виж шаблоните. Триколонната подредба на
тюркоазената лента (2.3) е локална за нея, не част от .stat самия. */
/* Редица от 2–4 едри числа/твърдения в една лента. Досега тази подредба
стоеше на `.band-accent .container` и хващаше ВСЯКА container в тюркоазена
лента — включително призива `.band-cta` в края на „За нас“ и „Казуси“,
който заради по-високата специфичност се рендираше като решетка с празна
трета колона. Затова е собствен клас: слага се изрично там, където е
искан, и никъде другаде.
`auto-fit` вместо `repeat(3, …)`: лентата трябва да работи и с две колони. */
.band-stats {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 48rem) {
.band-stats {
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: var(--space-7);
}
}
/* ТРИТЕ ЧИСЛА — свити и подравнени (11.08.2026)
Проблемът: `--figure-lg` е 72 px и е мярка за ЧИСЛО („25+“). Тук два от
трите реда са ДУМИ („1 работен ден“, „Без жаргон“) и на 72 px се
пренасяха на три реда. Лентата ставаше 515 px висока — цял екран за три
изречения — а понеже редовете бяха различно дълги, поясненията под тях
увисваха на три различни височини и лентата се четеше като разсипана.
Три поправки, всяка за отделна част от проблема:
1. по-малък размер, който расте с екрана, но не стига до 72 px;
2. `align-content: start` върху клетката — поясненията тръгват от една
линия, независимо на колко реда се е пренесла стойността над тях;
3. `min-height` на стойността — три реда текст и един ред текст заемат
еднакво място, тоест поясненията са на една височина. */
.band-stats { align-items: stretch; }
.band-stats .stat {
display: grid;
align-content: start;
}
.band-stats .stat-value {
text-wrap: balance;
font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
display: flex;
align-items: flex-end;
/* Място за два реда — важи САМО докато колоната е тясна и стойността
наистина може да се пренесе. На широк екран таванът се маха
(виж медия заявката по-долу): там всичко е на един ред и празното
поле над числата само раздува лентата. */
min-height: 2.4em;
}
.band-stats .stat-label { max-width: 30ch; margin-top: var(--space-2); }
@media (min-width: 48rem) {
.band-stats .stat-value { min-height: 0; }
}
.stat-value {
display: block;
font-family: var(--font-display);
font-size: var(--figure-lg);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: var(--color-navy);
}
.band-navy .stat-value,
.band-accent .stat-value { color: #fff; }
.stat-label {
display: block;
margin-top: var(--space-3);
font-size: 1.0625rem;
line-height: 1.5;
color: var(--color-muted);
}
.band-navy .stat-label { color: var(--color-on-navy); }
.band-accent .stat-label { color: #fff; }
.rowlist-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2) var(--space-5);
padding: var(--space-5) 0;
border-bottom: 1px solid var(--color-border);
color: inherit;
}
.rowlist-item:last-child { border-bottom: none; }
a.rowlist-item:hover { text-decoration: none; }
a.rowlist-item:hover > span:first-child,
a.rowlist-item:hover > h3 { text-decoration: underline; }
.band-navy .rowlist-item,
.band-accent .rowlist-item { border-bottom-color: rgba(255, 255, 255, 0.14); }
.rowlist-item > span:first-child { font-size: 1.3125rem; font-weight: 600; }
/* Дясната страна варира по съдържание — цена (.price, вече стилизиран в
продуктовите карти) или кратък приглушен етикет; тук само подравняване */
.rowlist-item > span:last-child { white-space: nowrap; }
.band-navy .rowlist-item > span:last-child { font-size: 0.9375rem; color: var(--color-on-navy-muted); }
.band-accent .rowlist-item > span:last-child { font-size: 0.9375rem; color: #fff; }
/* Тих етикет на мястото на бутона: услуга, която е перо от абонамента, не
се поръчва сама. Умишлено НЕ прилича на бутон — нищо тук не се натиска. */
.rowlist-tag {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
white-space: nowrap;
}
/* Едрото име на ситуация (2.2 на началната) — заглавие, не span, защото
всеки ред описва самостоятелна ситуация, не просто етикет до цена */
.rowlist-item h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: inherit;
}
/* Точкувана водеща линия между име и цена — само там, където шаблонът
слага празен между двете (виж 2.2 на началната страница) */
.rowlist-item > span:empty,
.rowlist-leader {
flex: 1 1 3rem;
align-self: flex-end;
margin: 0 var(--space-3) 0.4em;
border-bottom: 1px dotted var(--color-border);
}
.band-navy .rowlist-item > span:empty,
.band-navy .rowlist-leader,
.band-accent .rowlist-item > span:empty,
.band-accent .rowlist-leader { border-bottom-color: rgba(255, 255, 255, 0.3); }
.pricerow {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.pricerow:last-child { border-bottom: none; }
.pricerow > span:first-child { font-size: 1.125rem; font-weight: 700; }
.pricerow > span:first-child small {
display: block;
margin-top: 0.15rem;
font-size: 0.875rem;
font-weight: 400;
color: var(--color-on-navy-muted);
}
.pricerow > span:last-child {
white-space: nowrap;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
}
/* СТЪПКА 0: за кого е обслужването.
Три едри карти, преди всякакви полета. Стоят на три различни ленти —
бяла („Вашият пакет“), навы (началната) и градиентна (каталогът) —
затова картата е БЯЛА и носи собствените си цветове: наследеният от
лентата бял текст иначе изчезва върху бялата карта.
Плоска, без сянка и без вдигане при посочване — както всичко останало
във визията. Тук стоеше калкулаторът на началната (.calc-hero); той
отпадна заедно с въпроса за ДДС и класовете му се махат, вместо да
висят неизползвани. */
.profile-choice {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 48rem) {
.profile-choice { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
.profile-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-height: var(--tap-target);
padding: var(--space-5) var(--space-5) var(--space-6);
background: var(--color-card);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
color: var(--color-text);
transition: background var(--transition);
}
.profile-card:hover { background: var(--color-accent-bg); text-decoration: none; }
.profile-card h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.375rem;
line-height: 1.2;
color: var(--color-navy);
}
.profile-card-tagline { margin: 0; font-size: 1rem; color: var(--color-muted); }
.profile-card-price { margin: auto 0 0; padding-top: var(--space-3); }
.profile-card-price .price {
font-family: var(--font-display);
font-size: var(--figure-sm);
font-weight: 600;
color: var(--color-navy);
}
/* Лепкавата лента на телефон с текущата цена + бутон — виж static/js/decision-bar.js.
Скрита по подразбиране: JS я показва само когато основният бутон излезе
от екрана, за да не се дублира сама. */
.decision-bar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
align-items: center;
/* flex-wrap: на много тесен екран бутонът пада на свой ред, вместо да
се смачква текстът му (голи текстови възли в inline-flex бутон не
пренасят на ред както обикновен текст — по-надежден е целият ред) */
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
background: var(--color-card);
border-top: 1px solid var(--color-border);
box-shadow: 0 -6px 18px rgba(30, 27, 58, 0.08);
padding: var(--space-3) var(--space-4);
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
.decision-bar.is-visible { display: flex; }
.decision-bar-info { flex: 1 1 auto; min-width: 9rem; }
.decision-bar-info p { margin: 0; }
.decision-bar-label { font-size: 0.8125rem; color: var(--color-muted); }
.decision-bar-price { font-size: 1.1875rem; font-weight: 700; color: var(--color-navy); }
.decision-bar-price small { font-size: 0.8125rem; font-weight: 500; color: var(--color-muted); }
.decision-bar .btn { flex: none; }
/* Запас отдолу, равен горе-долу на височината на лентата — за да не покрива
последния елемент на страницата (напр. футъра). Само под 64rem: JS слага
класа на body при всяко скролиране извън/в екрана, независимо от ширината;
без границата тук padding-ът щеше да остане и на десктоп, където лентата
изобщо не се показва. */
@media (max-width: 63.99rem) {
body.has-decision-bar { padding-bottom: 4.75rem; }
}
@media (min-width: 64rem) { .decision-bar { display: none !important; } }
/* Оглавлението на правните страници — лепкаво на широк екран, на телефон */
.toc { font-size: 1rem; }
.toc-heading {
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-muted);
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--space-3);
margin: 0 0 0.4rem;
}
.toc a {
display: block;
padding: 0.55rem 0 0.55rem 0.9rem;
color: var(--color-muted);
box-shadow: inset 3px 0 0 transparent;
}
.toc a:hover { text-decoration: none; color: var(--color-navy); }
.toc a.is-active {
color: var(--color-navy);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--color-primary);
}
@media (min-width: 64rem) { .toc { position: sticky; top: var(--space-5); } }
/* Редът при непопълнено съдържание — само на страницата на услуга, само
веднъж; НЕ се показва на картите в каталога (виж CLAUDE.md/промпта). */
.empty-note {
margin-top: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-bg);
border-left: 2px solid var(--color-border);
font-size: 0.875rem;
line-height: 1.5;
color: var(--color-muted);
}
/* --- Визия 3: повърхности и мярка ---------------------------------- */
/* --color-card (#ffffff) и --color-bg (#f6f5fd) се различават с 4%.
Долепени без линия, двете ленти се четат като една повърхност и
ритъмът на страницата изчезва. Косъмът не рисува рамка — само казва
„нов раздел“. */
.band-light + .band-lilac,
.band-lilac + .band-light { border-top: 1px solid var(--color-border); }
/* Разделът се обявява в тясна колона вляво и не се повтаря вътре в
съдържанието. Това е подредбата, която прави дълъг списък (девет
казуса, осемнайсет услуги, шест раздела политика) да изглежда
проектиран, а не изсипан.
.band-head НЕ върши тази работа — той е ред „заглавие + бройка/връзка“
НАД съдържанието и точно затова линията му свършва другаде. */
/* ЗАГЛАВИЕТО НА РАЗДЕЛА СТОИ НАД СЪДЪРЖАНИЕТО И Е ЦЕНТРИРАНО.
Първоначално беше тясна колона вляво, а съдържанието вдясно. На хартия
е добре; на екрана заглавието увисва в празно поле и изглежда като
надпис, залепен встрани от текста — а не като начало на раздел. Плюс
това тясната колона стесняваше и съдържанието до себе си.
Сега разделът се обявява като раздел: приглушен надред, едро серифно
заглавие в центъра, къса черта под него и чак тогава съдържанието.
Чертата е това, което кара окото да приеме заглавието за заглавие —
без нея центрираният текст изглежда просто като още един абзац. */
.band-split {
display: block;
}
.band-split-head {
min-width: 0;
max-width: 46rem;
margin: 0 auto var(--space-7);
text-align: center;
}
.band-split-head .eyebrow-quiet { margin-bottom: var(--space-2); }
.band-split-head h2 {
margin: 0;
font-family: var(--font-display);
font-weight: 600; /* Source Serif 4 е свалена само 400–600 */
font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: inherit;
text-wrap: balance; /* без „сираци“ по един дума на реда */
}
/* Двете къси черти около заглавието — ГОРНАТА вляво, ДОЛНАТА вдясно.
Асиметрията е нарочна: две еднакво центрирани черти четат като украса,
а изместените в противоположни посоки — като дизайн. `::before`/`::after`
на самия head, а не отделни елементи: шаблоните не носят декорация.
Дебелината е 4px със заоблени краища и лека сянка — при 2px чертата се
губеше на плътни екрани и приличаше на артефакт, а не на решение. */
.band-split-head::before {
content: "";
display: block;
width: 5rem;
height: 6px;
border-radius: 999px;
margin: 0 auto var(--space-4) 0; /* избутана ВЛЯВО */
background-image: var(--gradient-accent);
/* Две сенки: близка и тъмна за ръба, по-широка и цветна за обема.
Само с една чертата изглежда плоска, залепена за фона. */
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(124, 58, 237, 0.28);
}
.band-split-head::after {
content: "";
display: block;
width: 5rem;
height: 6px;
border-radius: 999px;
margin: var(--space-4) 0 0 auto; /* избутана ВДЯСНО */
background-image: var(--gradient-accent);
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(124, 58, 237, 0.28);
}
.band-split-head p {
margin: var(--space-4) auto 0;
max-width: 56ch;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--color-muted);
}
/* Връзката („не намирате вашия?“) е ПОД чертата, за да не се чете като
част от заглавието. Затова и `order` не върши работа — тя е след
::after по документен ред. */
.band-split-head a {
display: inline-block;
margin-top: var(--space-3);
font-size: 1rem;
color: var(--color-muted);
}
/* Върху тъмна лента градиентът се губи — там чертите са светли. */
.band-navy .band-split-head::before,
.band-navy .band-split-head::after,
.band-accent .band-split-head::before,
.band-accent .band-split-head::after {
background-image: none;
background-color: rgba(255, 255, 255, 0.55);
/* Върху тъмно тъмната сянка не се вижда — там дълбочината идва от
тънък тъмен ръб под чертата. */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.band-navy .band-split-head p,
.band-navy .band-split-head a { color: var(--color-on-navy-muted); }
.band-accent .band-split-head p,
.band-accent .band-split-head a { color: #fff; }
/* Съдържанието под заглавието. Ограничено по ширина и центрирано: без
това редът на 1440 px става ~140 знака и разделът пак изглежда като
насипан текст, независимо колко е добре заглавието. Списъци и таблици
вътре сами си взимат нужното — затова `max-width`, а не фиксирана. */
.band-split-body {
min-width: 0;
max-width: 62rem;
margin: 0 auto;
}
/* Водещият абзац — центриран ИЗРИЧНО, не по наследство.
Центрирането на цялото тяло правеше списъците и таблиците вътре
нечитаеми (окото няма къде да се върне в началото на реда). Затова е
клас върху самия абзац: центрира се това, което е едно изречение, а
всичко останало си остава ляво подравнено. */
.band-lead {
max-width: 56ch;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Ред от ~68 знака се чете на един поглед; нередактиран абзац в
.container на 1440 px е ~140 знака и точно това създава усещането
„текст, залепен в шаблона“. .measure-tight е за водещо изречение,
което трябва да се чете като твърдение, не като абзац. */
.measure { max-width: 68ch; }
.measure-tight { max-width: 46ch; }
/* Заглавие на страница без банерна снимка (кошница, поръчка, правни
страници). Ляво подравнено и на --font-display, с косъм отдолу —
същият език като .band-head. Досегашният .page-heading е центриран и
на --font-body, но остава непроменен: ползват го страниците за
плащане, които са извън обхвата.
ВНИМАНИЕ: съдържанието се увива в .container от шаблона — тук няма
собствен хоризонтален отстъп. */
.page-head {
background: var(--color-card);
border-bottom: 1px solid var(--color-border);
padding: clamp(1.75rem, 4.5vw, 3rem) 0 clamp(1.25rem, 3vw, 1.75rem);
}
.page-head h1 {
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
line-height: 1.1;
letter-spacing: -0.02em;
text-transform: none;
color: var(--color-navy);
}
.page-head .eyebrow-quiet { margin-bottom: var(--space-2); }
.page-head-sub {
margin: var(--space-3) 0 0;
max-width: 56ch;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--color-muted);
}
/* Дата/бележка под заглавието (правните страници) */
.page-head-meta {
margin: var(--space-3) 0 0;
font-size: var(--text-sm);
color: var(--color-muted);
}
/* Лента, която носи само лента с раздели или стъпки — пълната
вертикална въздишка на .band (var(--space-8)) я откъсва от банера. */
.band-tight { padding: var(--space-5) 0 0; }
/* Дясната страна на ред от списък, когато освен цена има и действие
(каталогът). `.rowlist-item > span:last-child` подравнява един
елемент; тук са два и трябват собствени отстъпи. */
.rowlist-buy {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
white-space: nowrap;
}
.rowlist-buy .price {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.5rem;
}
.rowlist-buy .btn { flex: none; white-space: nowrap; }
/* --- Начална страница: layout, специфичен само за нея (не е част от
десетте преизползваеми класа — скопиран през ID, за да не се разраства
списъкът с класове). --- */
#how-it-works {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
#how-it-works > div:first-child > p {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-navy);
}
#how-it-works ol { list-style: none; margin: 0; padding: 0; counter-reset: how-step; }
#how-it-works li {
display: grid;
grid-template-columns: 2.75rem 1fr;
gap: var(--space-4);
padding: var(--space-5) 0;
border-bottom: 1px solid var(--color-border);
counter-increment: how-step;
}
#how-it-works li:first-child { padding-top: 0; }
#how-it-works li:last-child { border-bottom: none; padding-bottom: 0; }
#how-it-works li::before {
content: "";
font-family: var(--font-display);
font-size: 1.375rem;
color: var(--color-primary);
}
#how-it-works h3 { margin: 0 0 0.35rem; font-size: 1.3125rem; }
#how-it-works p { margin: 0; }
@media (min-width: 60rem) {
/* Лявата колона (едно изречение) се ЦЕНТРИРА спрямо трите стъпки
вдясно. При `align-items: start` изречението висеше горе и
оставяше празно поле до края на списъка — раздел с една пълна и
една почти празна колона. `center` го поставя срещу средата на
стъпките и двете страни се четат като едно цяло. */
#how-it-works { grid-template-columns: 1fr 1.15fr; gap: var(--space-8); align-items: center; }
}
#final-cta { text-align: center; }
#final-cta h2 {
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.35rem + 2vw, 2.875rem);
letter-spacing: -0.02em;
max-width: 32ch;
margin: 0 auto var(--space-3);
}
#final-cta > p { font-size: 1.1875rem; max-width: 56ch; margin: 0 auto var(--space-6); color: var(--color-text); }
#final-cta > div {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
font-size: 1.0625rem;
color: var(--color-muted);
}
#final-cta > div strong { color: var(--color-navy); }
/* ---------- 4. HERO И БАНЕРИ ---------- */
/* Hero на началната: текстът стои ВЪРХУ снимката със затъмняващ слой.
Ако файлът липсва, отдолу остава навы градиент и текстът пак е четим.
Снимката е на ::before (отделен слой), затъмняването — на ::after;
така снимката може да се анимира (transform) без да пипаме текста. */
.hero {
position: relative;
overflow: hidden;
background-image: linear-gradient(150deg, var(--color-navy) 0%, var(--color-primary) 60%, var(--color-accent) 120%);
background-size: cover;
background-position: center;
}
.hero::before {
content: "";
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
background-image: url("../images/hero.cdd77ec902d9.webp"); /* WebP: 210 → 109 KB; hero.jpg остава за og:image */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
animation: banner-drift-hero 18s ease-in-out infinite alternate;
will-change: transform;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(var(--overlay-dark), var(--overlay-light));
z-index: 1;
}
.hero-inner {
position: relative;
z-index: 2;
max-width: 1140px;
margin: 0 auto;
padding: clamp(4rem, 10vw, 7.5rem) var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Заглавие на страница върху светъл фон — ползва се само на страниците
без банер (кошница, поръчка, плащане, „Благодарим“) */
.page-heading {
background: var(--color-card);
text-align: center;
padding: clamp(1.75rem, 4vw, 2.75rem) var(--space-4) clamp(1.25rem, 3vw, 2rem);
}
.page-heading h1 { margin: 0; }
.page-heading .eyebrow { margin-bottom: 0.9rem; }
.page-heading-sub {
max-width: 44rem;
margin: var(--space-3) auto 0;
color: var(--color-muted);
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}
/* Банер на вътрешните страници: заглавието стои ВЪРХУ снимката,
със същия затъмняващ слой като hero-то (само височината е по-малка);
при липсваща снимка — навы градиент и текстът пак е четим. */
.page-banner {
position: relative;
overflow: hidden;
/* ПО-ВИСОК БАНЕР (11.08.2026). Беше 10–19 rem и на широк екран се
четеше като лента, а не като начало на страница. Центрирането
остава — то е това, което държи текста в средата, независимо от
височината. */
min-height: clamp(13rem, 32vw, 25rem);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-image: linear-gradient(150deg, var(--color-navy) 0%, var(--color-primary) 60%, var(--color-accent) 120%);
background-size: cover;
background-position: center;
}
/* По-нисък банер за детайлната страница на услуга и портала. Расте заедно
с големия, за да остане същата разлика между двата. */
.page-banner-compact { min-height: clamp(10rem, 22vw, 16rem); }
.page-banner::before {
content: "";
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
animation: banner-drift-page 16s ease-in-out infinite alternate;
will-change: transform;
}
.page-banner::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(var(--overlay-dark), var(--overlay-light));
z-index: 1;
}
/* Съдържание на банера: центрирано вертикално и хоризонтално */
.banner-inner {
position: relative;
z-index: 2;
max-width: 1140px;
margin: 0 auto;
padding: clamp(1.75rem, 4vw, 3rem) var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
}
/* Светъл текст върху затъмнената снимка — същият стил като hero-то.
⚠️ `.banner-title` е СЪЩИЯТ вид, но НЕ е заглавие (виж коментара в
templates/calendar_app/paid_landing.html): страница с две заглавия от
първо ниво обърква и четците на екран, и търсачките. Затова размерът се
задава изрично — `
` не наследява размера на `h1`. */
.page-banner .banner-title {
font-size: var(--text-xl);
line-height: 1.2;
}
.page-banner h1,
.page-banner .banner-title {
color: #fff;
margin: 0;
max-width: 46rem;
text-wrap: balance;
text-shadow: 0 2px 12px rgba(13, 20, 45, 0.45);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.page-banner .eyebrow {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.35);
margin-bottom: 0.9rem;
}
.banner-sub {
max-width: 44rem;
margin: var(--space-3) 0 0;
color: #e8edf6;
font-size: clamp(1.05rem, 1.6vw, 1.2rem);
text-shadow: 0 1px 8px rgba(13, 27, 54, 0.45);
}
/* Снимка за всяка вътрешна страница: static/images/banner-<име>.jpg
(сложена на ::before на банера, вижте по-горе) */
.banner-services::before { background-image: url("../images/banner-services.3bad1e5ccd06.jpg"); }
.banner-cases::before { background-image: url("../images/banner-cases.5c968455028a.jpg"); }
/* „За нас“ използва неутралния екипен банер вместо инсцениран офис. */
.banner-about::before { background-image: url("../images/banner-consultation.b131891dd3f4.jpg"); }
.banner-contacts::before {
background-image: url("../images/banner-contacts.645114db17ba.jpg");
/* Снимката е портретна — фокусираме горната ѝ част, за да се вижда
цялата бележка „Call Tax Agent“ */
background-position: center 22%;
}
.banner-contacts { min-height: clamp(13rem, 34vw, 24rem); }
/* Светъл текст върху затъмнения hero фон — контраст > 7:1 */
.hero h1 {
color: #fff;
margin: 0 0 var(--space-4);
max-width: 46rem;
text-wrap: balance;
text-shadow: 0 2px 16px rgba(13, 20, 45, 0.45);
font-size: var(--text-hero);
line-height: 1.08;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.hero-sub {
font-size: clamp(1.125rem, 1.8vw, 1.3rem);
line-height: var(--leading);
color: #e8edf6;
max-width: 38rem;
margin: 0 0 var(--space-6);
text-shadow: 0 1px 8px rgba(13, 27, 54, 0.45);
}
.hero .eyebrow {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.35);
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.hero-trust {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2) var(--space-5);
margin: var(--space-6) 0 0;
padding: 0;
font-size: 1rem;
color: #e8edf6;
text-shadow: 0 1px 6px rgba(13, 27, 54, 0.45);
}
.hero-trust li::before {
content: "✓";
color: var(--color-accent-soft);
font-weight: 700;
margin-right: 0.45rem;
}
/* ---------- 5. СЕКЦИИ ПО СТРАНИЦИ ---------- */
/* .home-section/-head/-sub/-more, .home-grid, .category-grid/.category-card
отпаднаха при визия „1c“ (началната мина на .band-редове/.rowlist-item —
виж core/home.html и раздел „Ленти и общи класове“ по-горе). Проверено в
целия templates/ (вкл. portal/, reporting/, documents/) и static/js/ —
нулева употреба навсякъде. */
/* --- Счетоводни казуси (акордеон) --- */
/* --- Страница „Казуси“ (визия 3) — плоски редове, не карти.
Списъкът е тялото на .band-split: заглавието стои центрирано отгоре
вляво. Мярката 48rem остава — ред от 48rem се чете на един поглед —
но `margin: 0 auto` отпада: центрирането беше причината линията под
заглавието да стърчи със ~170 px от двете страни на акордеона. */
.cases-list {
display: block;
max-width: 48rem;
margin: 0;
}
.case-card { border-bottom: 1px solid var(--color-border); }
.case-card:first-child { border-top: 1px solid var(--color-border); }
.case-card summary {
display: flex;
align-items: baseline;
gap: var(--space-4);
min-height: var(--tap-target);
padding: var(--space-5) 0;
cursor: pointer;
list-style: none;
user-select: none;
}
.case-card summary::-webkit-details-marker { display: none; }
.case-title {
flex: 1;
margin: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
line-height: 1.3;
color: var(--color-navy);
}
/* Знакът +/− е квадратен, не кръгъл — плоско навсякъде в тази визия */
.case-card summary::after {
content: "+";
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-accent-bg);
color: var(--color-primary);
font-size: 1.25rem;
font-weight: 700;
}
.case-card[open] summary::after { content: "−"; }
/* Знакът +/− става тънък и тих: плътният квадрат на --color-accent-bg
изглеждаше като девет бутона на девет реда. */
.case-card summary::after {
background: none;
color: var(--color-muted);
font-size: 1.5rem;
font-weight: 400;
width: 1.75rem;
height: 1.75rem;
}
.case-card summary:hover .case-title { color: var(--color-primary); }
.case-card[open] summary::after { color: var(--color-primary); }
/* Отворен казус получава тънка лента отляво — единственият сигнал за
„ето къде си“, вместо цветна кутия вътре. */
.case-card[open] {
box-shadow: inset 3px 0 0 var(--color-primary);
padding-left: var(--space-5);
margin-left: calc(-1 * var(--space-5));
}
.case-body { padding: 0 0 var(--space-5); max-width: 68ch; }
.case-body p { margin: 0 0 var(--space-3); color: var(--color-text); font-size: 1.0625rem; line-height: 1.6; }
/* Съветът и помощта: плоски редове с етикет, не цветни кутии.
Кехлибареното .case-tip четеше като предупреждение, а е съвет. */
.case-note {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
margin: 0 0 var(--space-4);
padding: var(--space-4) 0 0;
border-top: 1px solid var(--color-border);
font-size: 1rem;
line-height: 1.55;
color: var(--color-text);
}
.case-note-label {
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-muted);
}
.case-note-tip .case-note-label { color: var(--color-warning); }
/* „Как помагаме“ носи цвета на чертичките около заглавията — това е
гласът на кантората в целия сайт. Съветът остава кехлибарен: той е
общото правило, а помощта е нашето предложение. */
.case-note-help .case-note-label { color: var(--color-accent); }
/* САМО „Как помагаме“ получава фон. Това е единственият ред в казуса, в
който говори кантората — останалото е обяснение на закона. Фонът го
отделя, без да добавя още един цвят: същият нюанс като чертичките,
разреден до фон. */
.case-note-help {
background: var(--color-accent-bg);
border: 1px solid var(--color-border);
border-top: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-top: var(--space-4);
}
/* Същият фон, но за CMS абзаца „Как помагаме“, който е обикновен
с
вътре, а не редът с етикет и текст. Затова НЕ наследява решетката
на .case-note — тя би разкъсала изречението на две колони.
Класът се слага при отдаването (core/templatetags/cms_extras.py). */
.case-body p.case-help-inline {
background: var(--color-accent-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-top: var(--space-4);
}
.case-body p.case-help-inline strong { color: var(--color-accent); }
.case-note-text { max-width: 62ch; }
/* Числото на съвета — едро, вляво от текста на широк екран */
.case-note-figure {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--figure-sm);
line-height: 1;
color: var(--color-navy);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (min-width: 40rem) {
.case-note {
grid-template-columns: 8rem minmax(0, 1fr);
gap: var(--space-2) var(--space-5);
align-items: baseline;
}
.case-note-label { grid-column: 1; grid-row: 1; }
.case-note-figure { grid-column: 1; grid-row: 2; }
.case-note-text { grid-column: 2; grid-row: 1 / span 2; }
}
/* ---------- КАЗУСИТЕ, ЦЕНТРИРАНИ ----------
Заглавието на раздела е центрирано, а списъкът под него беше ляво
подравнен през цялата ширина — двете се четяха като два различни
раздела. Тук списъкът поема оста на заглавието.
Ширината пада до 52 rem нарочно. Центриран текст на широк ред е
нечитаем: окото няма фиксирано място, откъдето да започне следващия ред.
При ~60 знака връщането е късо и центрирането се чете като оформление,
а не като грешка. */
.cases-list {
max-width: 52rem;
margin-inline: auto;
}
.case-card summary {
justify-content: center;
text-align: center;
gap: var(--space-3);
}
.case-title { flex: 0 1 auto; }
/* Знакът стои ОТЛЯВО на въпроса (гледано от посетителя) и е в основния
нюанс. Отдясно той изглеждаше като край на реда — окото го намираше
чак след като е прочело целия въпрос, тоест след като вече е решило
дали да го отвори. Отляво е там, където започва четенето. */
.case-card summary::after {
order: -1;
color: var(--color-accent);
font-weight: 600;
}
.case-card summary:hover::after { color: var(--color-primary); }
.case-body {
max-width: 46rem;
margin-inline: auto;
text-align: center;
}
.case-body p { margin-inline: auto; }
/* Двуколонната мрежа на съвета се изправя в един центриран стълб:
етикет, число, текст. Двете колони с центрирано съдържание вътре
изглеждат като счупена таблица. */
@media (min-width: 40rem) {
.case-note {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: var(--space-2);
}
.case-note-label,
.case-note-figure,
.case-note-text { grid-column: 1; grid-row: auto; }
}
.case-note-text { max-width: 60ch; margin-inline: auto; }
/* Лентата отляво при отворен казус отпада — при центрирано съдържание тя
тегли окото встрани. Вместо нея отвореният получава мек фон и лека
сянка, тоест сигналът е „това е издигнато“, а не „това е вляво“. */
/* РАЗДЕЛЕНИЕТО МЕЖДУ ВЪПРОСИТЕ.
Косъмът от 1 px между девет затворени въпроса ги сливаше в един блок —
не се виждаше къде свършва единият и започва другият. Сега всеки
въпрос е отделна карта с фон, рамка и въздух помежду им. */
.case-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
padding-inline: var(--space-5);
transition: border-color var(--transition), box-shadow var(--transition);
}
.case-card:first-child { border-top: 1px solid var(--color-border); }
.case-card:hover { border-color: var(--color-primary); }
.case-card[open] {
border-color: var(--color-primary);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(79, 70, 229, 0.1);
padding-inline: var(--space-5);
margin-inline: 0;
border-radius: var(--radius-md);
}
/* --- Плавното отваряне (static/js/cases.js) ---
Правилата важат САМО когато скриптът е поел управлението. Без него
`` работи както си е по подразбиране — мигновено, но изправно. */
.js-cases .case-body {
overflow: hidden;
will-change: height;
}
/* Знакът се завърта, вместо да се сменя +/− с рязък скок. */
.js-cases .case-card summary::after {
transition: transform 320ms ease, color 320ms ease;
}
.js-cases .case-card[open] summary::after { transform: rotate(180deg); }
/* ---------- РАЗДЕЛ „УСЛУГИ“ ----------
Страничната лента с категории (.catalog-layout, .filters, .filter-group,
.cat-nav, .cat-link, .cat-summary, .cat-name, .cat-count, .cat-group,
.cat-chevron, .cat-children, .cat-link-all) отпадна още при преминаването
към хоризонтални раздели; правилата ѝ са изтрити при визия 3, след като
grep -rn показа нула употреби в templates/ и static/js/. */
.empty-state { color: var(--color-muted); padding: var(--space-6) 0; }
/* Категориите като бутони отгоре — вместо странична лента.
На телефон се превръщат в хоризонтален списък с плъзгане, вместо в дълъг
стълб, който трябва да се подмине, за да се стигне до услугите. */
/* Категориите като лента с раздели, а не разпилени „балончета“.
Овалните хапчета с различна дължина се редят неравно и приличат на
етикети, не на навигация. Един общ фон с разделителна линия отдолу ги
държи заедно и ги чете като едно нещо. */
.cat-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-5);
}
.cat-chips {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 0;
}
/* Разделът е сив текст на бял фон с косъм отдолу — четеше се като
изброяване, не като навигация: нищо не подсказваше, че се щрака.
Сега всеки раздел е плочка с фон, а активният е плътен. Движението
при посочване е единственото, което кара окото да ги пробва. */
.cat-chip {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
padding: 0.6rem 1rem;
margin: 0 0.35rem 0.5rem 0;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 999px;
color: var(--color-text);
font-size: var(--text-sm);
font-weight: 600;
white-space: nowrap;
transition: background var(--transition), border-color var(--transition),
color var(--transition), transform var(--transition), box-shadow var(--transition);
}
/* Само връзка — .cat-chip се преизползва и за нетактивни (все още
недостигнати) стъпки на поръчката, показани като , без hover. */
a.cat-chip:hover {
text-decoration: none;
color: var(--color-primary-dark);
border-color: var(--color-primary);
background: var(--color-accent-bg);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
a.cat-chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.cat-chip.is-active {
background-image: var(--gradient-accent);
border-color: transparent;
color: #fff;
box-shadow: 0 6px 18px rgba(79, 70, 229, 0.3);
}
a.cat-chip.is-active:hover { color: #fff; transform: translateY(-2px); }
.chip-count {
font-size: 0.72rem;
font-weight: 700;
color: var(--color-muted);
background: var(--color-bg);
border-radius: var(--radius-pill);
padding: 0.1rem 0.45rem;
font-variant-numeric: tabular-nums;
}
.cat-chip.is-active .chip-count {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
/* Лентата вече не носи обща линия — плочките сами се четат като група. */
.cat-toolbar { border-bottom: none; }
.cat-typefilter {
display: flex;
align-items: center;
gap: var(--space-2);
padding-bottom: var(--space-2);
font-size: var(--text-sm);
color: var(--color-muted);
}
/* Падащото поле идваше без стил и стоеше като чуждо тяло до плочките. */
.cat-typefilter select {
max-width: 220px;
padding: 0.45rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-card);
color: var(--color-text);
font: inherit;
font-size: var(--text-sm);
font-weight: 600;
cursor: pointer;
}
.cat-typefilter select:hover { border-color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
.cat-chip { transition: none; }
a.cat-chip:hover, a.cat-chip.is-active:hover { transform: none; }
}
/* Челната услуга вече е .band-navy + .band-cta на цяла ширина — правилата
на .featured-service/.featured-text/.featured-name/… отпаднаха заедно с
тъмната кутия в лилаво поле. Тук остава само видът на цената и бутона. */
.featured-band .featured-buy { flex: none; text-align: right; }
.featured-band .stat-value { font-size: var(--figure-md); color: #fff; }
.featured-band .stat-label { margin-top: var(--space-1); }
.featured-band .price-from { color: var(--color-on-navy-muted); font-size: 1rem; }
.featured-btn {
display: inline-block;
margin-top: var(--space-4);
background: #fff;
color: var(--color-navy);
font-weight: 700;
box-shadow: none;
}
.featured-btn:hover { background: var(--color-accent-bg); text-decoration: none; }
/* Лентата с раздели вече седи на бяла повърхност, залепена за банера */
.band-tight .cat-toolbar { margin-bottom: 0; border-bottom: 0; }
/* Името в реда на каталога — същият шрифт като .rowlist-item h3 на
началната, но с втори, тих ред за срока. */
.rowlist-name {
flex: 1 1 16rem;
min-width: 0;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-navy);
}
.rowlist-name:hover { color: var(--color-primary); text-decoration: none; }
.rowlist-name:hover > span:first-child { text-decoration: underline; }
.rowlist-meta {
display: block;
margin-top: var(--space-1);
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0;
color: var(--color-muted);
}
/* Решетката с карти (.product-grid/.product-card) остава в CSS, макар
каталогът вече да ползва редове: shop/includes/product_card.html е
запазен непроменен, за да е връщането към карти един {% include %}. */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: var(--space-4);
}
/* Картата на услугата: плоска, с цветна лента отляво.
Рамка от всички страни + сянка + повдигане при посочване правеха
осемнайсет еднакви кутии, които се борят една с друга за внимание.
Лентата отляво групира визуално, без да огражда. */
.product-card {
background: var(--color-card);
border-left: 3px solid var(--color-primary);
color: var(--color-text);
display: flex;
flex-direction: column;
transition: background var(--transition);
}
.product-card:hover { background: var(--color-accent-bg); }
/* Връзката покрива снимката и текста; бутонът „Купи“ е отделно, извън нея */
.product-card-link {
display: flex;
flex-direction: column;
flex: 1;
color: var(--color-text);
/* Съдържанието вече не започва със снимка, затова отстъпът е тук */
padding: 1rem 1rem 0.75rem;
}
.product-card-link:hover { text-decoration: none; }
.product-card-link:hover .product-name { color: var(--color-primary); }
.product-card-actions { padding: 0 1rem 1rem; margin-top: auto; }
.btn-buy { width: 100%; }
/* Бутонът може да е (заявка, час) или