Premium Redesign — Dez-obrabotka Implementation Plan
For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: Полный редизайн сайта dez-obrabotka.pro до премиум-уровня с адаптивностью, SVG-иконками, изображениями, микро-анимациями.
Architecture: CSS-фреймворк из 3 файлов (main/components/layout), один лейаут, 2 инклуда, 10 страниц. Все стили выносятся из inline в assets/css/. Изображения через seo-image-gen. Иконки — инлайн SVG.
Tech Stack: Jekyll 4.3, CSS custom properties, Intersection Observer, CSS-only animations, Playwright для проверки.
Source: docs/superpowers/specs/2026-06-01-premium-redesign-design.md
File Structure
| File | Action | Purpose |
|---|---|---|
assets/css/main.css |
Create | CSS-переменные, reset, типографика, spacing-шкала, цвета |
assets/css/layout.css |
Create | Контейнер, сетки, header, footer, секции |
assets/css/components.css |
Create | Кнопки, карточки, таблицы, аккордеоны, формы, бейджи |
_layouts/default.html |
Modify | Новый лейаут, подключает CSS-файлы, Schema.org |
_includes/header.html |
Modify | Премиум-хедер: лого, навигация, телефон |
_includes/footer.html |
Modify | Премиум-футер: 4 колонки, соцсети |
assets/img/ |
Create dir | Изображения |
_includes/icons/ |
Create dir | SVG-иконки как инклуды |
index.html |
Modify | Полный редизайн лендинга |
uslugi/*/index.html |
Modify ×7 | Шаблон страницы услуги |
faq/index.html |
Modify | FAQ-страница |
contacts/index.html |
Modify | Контакты |
blog/index.html |
Modify | Блог-листинг |
favicon.svg |
Create | SVG-фавикон |
Task 1: CSS Foundation — main.css
Files:
-
Create:
assets/css/main.css -
Step 1: Создать main.css с переменными и сбросом
/* ===== CSS Custom Properties ===== */
:root {
/* Colors — from design-dna.json */
--color-base: #0B1120;
--color-surface: #151E2D;
--color-accent: #10B981;
--color-accent-alt: #F59E0B;
--color-text: #F1F5F9;
--color-text-muted: #94A3B8;
--color-border: #1E293B;
--color-success: #10B981;
--color-danger: #EF4444;
/* Typography */
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Modular scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 2rem; /* 32px */
--text-4xl: 2.5rem; /* 40px */
--text-5xl: 3rem; /* 48px */
--text-6xl: 3.5rem; /* 56px */
/* Spacing scale */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
/* Layout */
--max-width: 1200px;
--radius-sm: 2px;
--radius: 4px;
--radius-none: 0;
/* Focus */
--focus-outline: 3px solid var(--color-accent);
--focus-offset: 2px;
/* Transitions */
--transition: 200ms ease;
}
/* ===== Reset ===== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video {
display: block;
max-width: 100%;
}
a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: color-mix(in srgb, var(--color-accent) 80%, white);
}
/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
}
h1 { font-size: var(--text-6xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p + p { margin-top: var(--space-4); }
/* ===== Focus ===== */
:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-offset);
}
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ===== Selection ===== */
::selection {
background: var(--color-accent);
color: var(--color-base);
}
/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-base); }
::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: var(--radius);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
- Step 2: Commit
git add assets/css/main.css
git commit -m "feat: add CSS foundation with variables, reset, typography
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>"
Task 2: CSS Layout System — layout.css
Files:
-
Create:
assets/css/layout.css -
Step 1: Написать layout.css
/* ===== Container ===== */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--space-5);
}
.container--narrow {
max-width: 800px;
}
.container--wide {
max-width: 1400px;
}
/* ===== Section ===== */
.section {
padding-block: var(--space-9);
}
.section--sm { padding-block: var(--space-7); }
.section--lg { padding-block: 8rem; }
.section__header {
text-align: center;
max-width: 700px;
margin-inline: auto;
margin-bottom: var(--space-7);
}
.section__label {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-3);
}
.section__title {
margin-bottom: var(--space-4);
}
.section__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
max-width: 560px;
margin-inline: auto;
}
/* ===== Grid systems ===== */
.grid {
display: grid;
gap: var(--space-5);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Auto-fit grid — адаптивная */
.grid--auto {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (max-width: 1024px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.section { padding-block: var(--space-7); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.container { padding-inline: var(--space-4); }
.section { padding-block: var(--space-6); }
.grid--3, .grid--4 { grid-template-columns: 1fr; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
}
/* ===== Flex utilities ===== */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }
.flex--gap { gap: var(--space-4); }
/* ===== Spacing utilities ===== */
.mt-1 { margin-top: var(--space-1); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
/* ... complete scale in full file ... */
- Step 2: Commit
Task 3: CSS Components — components.css
Files:
-
Create:
assets/css/components.css -
Step 1: Написать все компоненты
/* ===== Buttons ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 600;
padding: var(--space-3) var(--space-5);
border: 2px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: all var(--transition);
text-decoration: none;
line-height: 1;
}
.btn--primary {
background: var(--color-accent-alt);
color: var(--color-base);
}
.btn--primary:hover {
background: color-mix(in srgb, var(--color-accent-alt) 85%, white);
transform: translateY(-1px);
}
.btn--outline {
background: transparent;
border-color: var(--color-accent);
color: var(--color-accent);
}
.btn--outline:hover {
background: var(--color-accent);
color: var(--color-base);
}
.btn--ghost {
background: transparent;
color: var(--color-text);
}
.btn--ghost:hover {
background: var(--color-surface);
}
.btn--lg {
padding: var(--space-4) var(--space-6);
font-size: var(--text-lg);
}
/* ===== Cards ===== */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-6);
transition: border-color var(--transition);
}
.card:hover {
border-color: var(--color-accent);
}
.card--link {
text-decoration: none;
color: inherit;
display: block;
}
.card__icon {
width: 48px;
height: 48px;
margin-bottom: var(--space-4);
color: var(--color-accent);
}
.card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
margin-bottom: var(--space-2);
}
.card__text {
color: var(--color-text-muted);
font-size: var(--text-sm);
}
/* ===== Price Table ===== */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table th {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: left;
padding: var(--space-4) var(--space-5);
border-bottom: 2px solid var(--color-border);
background: var(--color-base);
position: sticky;
top: 0;
}
.table td {
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.table tr:hover td {
background: var(--color-surface);
}
.table .price {
font-family: var(--font-mono);
color: var(--color-accent-alt);
font-weight: 500;
}
/* ===== Accordion ===== */
.accordion {
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
}
.accordion__item {
border-bottom: 1px solid var(--color-border);
}
.accordion__item:last-child {
border-bottom: none;
}
.accordion__trigger {
width: 100%;
background: none;
border: none;
padding: var(--space-5);
font-family: var(--font-display);
font-size: var(--text-base);
color: var(--color-text);
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
transition: background var(--transition);
}
.accordion__trigger:hover {
background: var(--color-surface);
}
.accordion__trigger::after {
content: '+';
font-family: var(--font-mono);
font-size: var(--text-xl);
color: var(--color-accent);
transition: transform var(--transition);
}
details[open] .accordion__trigger::after {
content: '−';
}
.accordion__content {
padding: 0 var(--space-5) var(--space-5);
color: var(--color-text-muted);
line-height: 1.7;
}
/* ===== Badge ===== */
.badge {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--text-xs);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
.badge--accent {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* ===== Divider ===== */
.divider {
height: 1px;
background: var(--color-border);
border: none;
margin-block: var(--space-6);
}
/* ===== Phone link ===== */
.phone-link {
font-family: var(--font-mono);
font-size: var(--text-lg);
color: var(--color-accent-alt);
font-weight: 500;
white-space: nowrap;
}
.phone-link:hover {
color: color-mix(in srgb, var(--color-accent-alt) 80%, white);
}
/* ===== Feature list ===== */
.feature-list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.feature-list__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.feature-list__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--color-accent);
margin-top: 2px;
}
/* ===== Hero ===== */
.hero {
padding-block: var(--space-9);
position: relative;
overflow: hidden;
}
.hero__content {
max-width: 650px;
}
.hero__title {
margin-bottom: var(--space-5);
}
.hero__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
max-width: 520px;
}
.hero__actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
/* ===== CTA Block ===== */
.cta {
background: var(--color-surface);
border: 1px solid var(--color-accent);
border-radius: var(--radius);
padding: var(--space-7);
text-align: center;
}
.cta__title {
margin-bottom: var(--space-3);
}
.cta__text {
color: var(--color-text-muted);
margin-bottom: var(--space-5);
max-width: 480px;
margin-inline: auto;
}
.cta__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
/* ===== Numbered steps ===== */
.steps {
counter-reset: step;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.steps__item {
counter-increment: step;
display: flex;
gap: var(--space-5);
align-items: flex-start;
}
.steps__item::before {
content: counter(step, decimal-leading-zero);
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: 700;
color: var(--color-accent);
line-height: 1;
opacity: 0.3;
flex-shrink: 0;
}
/* ===== Image wrapper ===== */
.image-wrapper {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===== Scroll reveal ===== */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal--visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
- Step 2: Commit
Task 4: SVG Icon System
Files:
-
Create:
_includes/icons/directory with individual SVG files -
Step 1: Создать иконки
Создать SVG-файлы: shield.svg, droplet.svg, clock.svg, document.svg, phone.svg, map-pin.svg, mail.svg, chevron-right.svg, check.svg, plus.svg, target.svg, home.svg, spray.svg, bug.svg, award.svg, users.svg, tool.svg
Каждая иконка:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<!-- icon paths -->
</svg>
- Step 2: Commit
Task 5: New Layout — _layouts/default.html
Files:
-
Modify:
_layouts/default.html -
Step 1: Полный rewrite лейаута
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Redesign — Dez-obrabotka Implementation Plan | Дез Обработка</title>
<meta name="description" content="Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.">
<!-- Preload fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/css/layout.css">
<link rel="stylesheet" href="/assets/css/components.css">
<!-- Page-specific CSS -->
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Schema.org -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Дез Обработка",
"description": "Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.",
"url": "https://dez-obrabotka.pro",
"telephone": "+78412250177",
"address": {
"@type": "PostalAddress",
"addressLocality": "Пенза"
},
"openingHours": "Mo-Su 00:00-23:59",
"priceRange": "от 1600₽"
}
</script>
</head>
<body>
<header class="header" role="banner" id="site-header">
<div class="container">
<div class="header__inner">
<a href="/" class="header__logo" aria-label="Дез Обработка — на главную">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span class="header__logo-text">Дез Обработка</span>
</a>
<nav class="header__nav" role="navigation" aria-label="Основное меню">
<a href="/" class="header__link">Главная</a>
<div class="header__dropdown">
<button class="header__link header__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
Услуги
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
<div class="header__dropdown-menu" role="menu">
<a href="/uslugi/tarakany/" class="header__dropdown-link" role="menuitem">Тараканы</a>
<a href="/uslugi/klopy/" class="header__dropdown-link" role="menuitem">Клопы</a>
<a href="/uslugi/muravi/" class="header__dropdown-link" role="menuitem">Муравьи</a>
<a href="/uslugi/blohi/" class="header__dropdown-link" role="menuitem">Блохи</a>
<a href="/uslugi/kleshchi/" class="header__dropdown-link" role="menuitem">Клещи</a>
<a href="/uslugi/muhi/" class="header__dropdown-link" role="menuitem">Мухи</a>
<a href="/uslugi/gryzuny/" class="header__dropdown-link" role="menuitem">Грызуны</a>
<a href="/uslugi/komary/" class="header__dropdown-link" role="menuitem">Комары</a>
<a href="/uslugi/osy/" class="header__dropdown-link" role="menuitem">Осы</a>
</div>
</div>
<a href="/blog/" class="header__link">Блог</a>
<a href="/faq/" class="header__link">FAQ</a>
<a href="/contacts/" class="header__link">Контакты</a>
</nav>
<button class="header__city-btn header__city-picker" id="city-switch-btn" title="Сменить город">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span id="city-switch-label">Пенза</span>
</button>
<div class="header__actions">
<a href="tel:+78412250177" class="header__cta-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+7 (8412) 25-01-77
</a>
</div>
<input type="checkbox" id="menu-toggle" class="header__toggle-input" aria-label="Открыть меню">
<label for="menu-toggle" class="header__toggle-label" aria-hidden="true">
<span class="header__toggle-bar"></span>
<span class="header__toggle-bar"></span>
<span class="header__toggle-bar"></span>
</label>
<div class="header__mobile-nav" role="dialog" aria-label="Мобильное меню">
<nav class="header__mobile-links">
<a href="/" class="header__mobile-link">Главная</a>
<span class="header__mobile-heading">Услуги</span>
<a href="/uslugi/tarakany/" class="header__mobile-link">Тараканы</a>
<a href="/uslugi/klopy/" class="header__mobile-link">Клопы</a>
<a href="/uslugi/muravi/" class="header__mobile-link">Муравьи</a>
<a href="/uslugi/blohi/" class="header__mobile-link">Блохи</a>
<a href="/uslugi/kleshchi/" class="header__mobile-link">Клещи</a>
<a href="/uslugi/muhi/" class="header__mobile-link">Мухи</a>
<a href="/uslugi/gryzuny/" class="header__mobile-link">Грызуны</a>
<a href="/uslugi/komary/" class="header__mobile-link">Комары</a>
<a href="/uslugi/osy/" class="header__mobile-link">Осы</a>
<span class="header__mobile-divider"></span>
<a href="/blog/" class="header__mobile-link">Блог</a>
<a href="/faq/" class="header__mobile-link">FAQ</a>
<a href="/contacts/" class="header__mobile-link">Контакты</a>
<a href="/privacy/" class="header__mobile-link">Политика конфиденциальности</a>
</nav>
<a href="tel:+78412250177" class="header__cta-btn header__cta-btn--mobile" style="margin-top: var(--space-5); width: 100%; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
+7 (8412) 25-01-77
</a>
</div>
</div>
</div>
</header>
<style>
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--header-height);
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
transition: background var(--transition-slow), border-color var(--transition-slow), backdrop-filter var(--transition-slow);
}
.header--scrolled {
background: rgba(11,17,32,0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom-color: var(--color-border);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: var(--space-4);
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--color-text);
flex-shrink: 0;
}
.header__logo svg { width: 28px; height: 28px; color: var(--color-accent); }
.header__logo-text {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.02em;
}
.header__nav { display: flex; align-items: center; justify-content: center; gap: 2px; flex: 1; }
.header__link {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
padding: var(--space-2) var(--space-3);
border-radius: 50px;
transition: color var(--transition), background var(--transition);
background: none;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.header__link:hover { color: var(--color-text); background: rgba(255,255,255,0.05); }
.header__link svg { width: 14px; height: 14px; transition: transform var(--transition); }
.header__dropdown-toggle:hover svg { transform: rotate(90deg); }
.header__dropdown { position: relative; }
.header__dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-2);
min-width: 210px;
opacity: 0;
visibility: hidden;
transition: all var(--transition);
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.header__dropdown:hover .header__dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.header__dropdown-link {
display: block;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
border-radius: var(--radius-sm);
transition: all var(--transition);
}
.header__dropdown-link:hover { color: var(--color-text); background: var(--color-surface-hover); }
.header__actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
/* Pill CTA button — Kimi style */
.header__cta-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
padding: 10px 20px;
border-radius: 50px;
background: var(--color-accent-alt);
color: var(--color-base);
text-decoration: none;
transition: all var(--transition);
white-space: nowrap;
}
.header__cta-btn:hover {
background: color-mix(in srgb, var(--color-accent-alt) 90%, white);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}
.header__cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.header__city-btn{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-size:var(--text-xs);font-weight:500;padding:6px 12px;border:1px solid rgba(255,255,255,0.1);border-radius:50px;background:transparent;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.header__city-btn:hover{border-color:rgba(16,185,129,0.3);color:var(--color-accent);background:rgba(16,185,129,0.05)}
.header__city-btn svg{width:12px;height:12px;flex-shrink:0}
.header__toggle-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.header__toggle-label {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 200;
position: relative;
}
.header__toggle-bar {
display: block;
width: 24px;
height: 2px;
background: var(--color-text);
border-radius: 1px;
transition: transform var(--transition), opacity var(--transition);
transform-origin: center;
}
#menu-toggle:checked ~ .header__toggle-label .header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-toggle:checked ~ .header__toggle-label .header__toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#menu-toggle:checked ~ .header__toggle-label .header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header__mobile-nav {
display: none;
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
bottom: 0;
height: calc(100dvh - var(--header-height));
background: var(--color-base);
padding: var(--space-5);
overflow-y: auto;
z-index: 99;
overscroll-behavior: contain;
}
#menu-toggle:checked ~ .header__mobile-nav { display: flex; flex-direction: column; }
.header__mobile-heading {
display: block;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-3);
margin-top: var(--space-4);
}
.header__mobile-heading:first-child { margin-top: 0; }
.header__mobile-link {
display: block;
padding: var(--space-3) 0;
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid var(--color-border);
transition: color var(--transition);
}
.header__mobile-link:hover { color: var(--color-accent); }
.header__mobile-divider { display: block; height: 1px; background: var(--color-border); margin: var(--space-4) 0; }
@media (max-width: 768px) {
.header__nav, .header__actions { display: none; }
.header__city-picker { display: inline-flex; margin-left: auto; margin-right: var(--space-2); }
.header__toggle-label { display: flex; }
.header__inner { gap: var(--space-3); }
}
</style>
<script>
(function() {
var header = document.getElementById('site-header');
// Scroll: transparent → opaque (Kimi-style)
function onScroll() {
if (window.scrollY > 10) {
header.classList.add('header--scrolled');
} else {
header.classList.remove('header--scrolled');
}
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll(); // init
// Mobile menu: close on link click
var toggle = document.getElementById('menu-toggle');
var links = document.querySelectorAll('.header__mobile-link, .header__cta-btn--mobile');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function() {
toggle.checked = false;
});
}
})();
</script>
<main>
<h1 id="план-сайт-дез-обработка-dez-obrabotkapro">План: Сайт Дез Обработка (dez-obrabotka.pro)</h1>
<blockquote>
<p><strong>Контекст:</strong> Новый Jekyll-проект в <code class="language-plaintext highlighter-rouge">C:\Users\Admin\Projects\dez-obrabotka\</code>. Главная страница + 7 страниц услуг + блог + FAQ + контакты. Стиль protective-reliable (тёмный navy, эко-зелёный акцент, янтарный CTA). Без гарантий, без выезда 24ч, без горячего тумана.</p>
</blockquote>
<hr />
<h2 id="шаг-1-из-7-создать-проект-и-design-dnajson">Шаг 1 из 7: Создать проект и design-dna.json</h2>
<p><strong>ВКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">design-create</code></p>
<p><strong>Подробно:</strong></p>
<ol>
<li>Создать структуру каталогов:
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>C:\Users\Admin\Projects\dez-obrabotka\
├── _layouts/
├── _includes/
├── _data/
├── uslugi/
│ ├── tarakany/
│ ├── klopy/
│ ├── muravi/
│ ├── blohi/
│ ├── kleshchi/
│ ├── muhi/
│ └── gryzuny/
├── blog/
├── faq/
├── contacts/
└── assets/
├── css/
└── img/
</code></pre></div> </div>
</li>
<li>Создать <code class="language-plaintext highlighter-rouge">_config.yml</code>:
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">title</span><span class="pi">:</span> <span class="s">Дез Обработка</span>
<span class="na">description</span><span class="pi">:</span> <span class="s">Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.</span>
<span class="na">baseurl</span><span class="pi">:</span> <span class="s2">"</span><span class="s">"</span>
<span class="na">url</span><span class="pi">:</span> <span class="s2">"</span><span class="s">https://dez-obrabotka.pro"</span>
</code></pre></div> </div>
</li>
<li>Создать <code class="language-plaintext highlighter-rouge">design-dna.json</code> с полной protective-reliable палитрой:
<ul>
<li>personality: <code class="language-plaintext highlighter-rouge">protective-reliable</code></li>
<li>base: <code class="language-plaintext highlighter-rouge">#0B1120</code>, surface: <code class="language-plaintext highlighter-rouge">#151E2D</code>, accent: <code class="language-plaintext highlighter-rouge">#10B981</code>, accent_alt: <code class="language-plaintext highlighter-rouge">#F59E0B</code></li>
<li>text: <code class="language-plaintext highlighter-rouge">#F1F5F9</code>, text_muted: <code class="language-plaintext highlighter-rouge">#94A3B8</code>, border: <code class="language-plaintext highlighter-rouge">#1E293B</code></li>
<li>fonts: Space Grotesk / Inter / JetBrains Mono</li>
<li>component rules: .btn-primary (accent_alt), .card, .price_tag</li>
<li>layout patterns: hero с accent-линией 4px слева, cards grid, sticky table, тёмный footer</li>
</ul>
</li>
</ol>
<p><strong>Критерии качества:</strong></p>
<ul>
<li>design-dna.json валидный JSON</li>
<li>Все цвета из утверждённой палитры</li>
<li>Запрещённые цвета (<code class="language-plaintext highlighter-rouge">#0D7C4D</code>, <code class="language-plaintext highlighter-rouge">#3B82F6</code> и др.) отсутствуют</li>
</ul>
<p><strong>Нюансы:</strong> accent_alt (#F59E0B) — только для CTA-кнопок и цен. Accent (#10B981) — для заголовков, иконок, hover. Никаких box-shadow, градиентов, border-radius > 4px.</p>
<p><strong>ВЫКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">design-create</code></p>
<hr />
<h2 id="шаг-2-из-7-базовый-шаблон-и-includes">Шаг 2 из 7: Базовый шаблон и includes</h2>
<p><strong>ВКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">design-create</code></p>
<p><strong>Подробно:</strong></p>
<ol>
<li>Создать <code class="language-plaintext highlighter-rouge">_layouts/default.html</code> — общий каркас всех страниц:
<ul>
<li>DOCTYPE, lang=”ru”</li>
<li>meta charset + viewport</li>
<li>title: <code class="language-plaintext highlighter-rouge">План: Сайт Дез Обработка (dez-obrabotka.pro) — Дез Обработка</code></li>
<li>meta description: из page или site</li>
<li>Google Fonts preconnect: Space Grotesk, Inter, JetBrains Mono</li>
<li>`` — встроенный CSS страницы</li>
<li>body: `<header class="header" role="banner" id="site-header"></li>
</ul>
</li>
</ol>
<div class="container">
<div class="header__inner">
<a href="/" class="header__logo" aria-label="Дез Обработка — на главную">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
<span class="header__logo-text">Дез Обработка</span>
</a>
<nav class="header__nav" role="navigation" aria-label="Основное меню">
<a href="/" class="header__link">Главная</a>
<div class="header__dropdown">
<button class="header__link header__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
Услуги
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
</button>
<div class="header__dropdown-menu" role="menu">
<a href="/uslugi/tarakany/" class="header__dropdown-link" role="menuitem">Тараканы</a>
<a href="/uslugi/klopy/" class="header__dropdown-link" role="menuitem">Клопы</a>
<a href="/uslugi/muravi/" class="header__dropdown-link" role="menuitem">Муравьи</a>
<a href="/uslugi/blohi/" class="header__dropdown-link" role="menuitem">Блохи</a>
<a href="/uslugi/kleshchi/" class="header__dropdown-link" role="menuitem">Клещи</a>
<a href="/uslugi/muhi/" class="header__dropdown-link" role="menuitem">Мухи</a>
<a href="/uslugi/gryzuny/" class="header__dropdown-link" role="menuitem">Грызуны</a>
<a href="/uslugi/komary/" class="header__dropdown-link" role="menuitem">Комары</a>
<a href="/uslugi/osy/" class="header__dropdown-link" role="menuitem">Осы</a>
</div>
</div>
<a href="/blog/" class="header__link">Блог</a>
<a href="/faq/" class="header__link">FAQ</a>
<a href="/contacts/" class="header__link">Контакты</a>
</nav>
<button class="header__city-btn header__city-picker" id="city-switch-btn" title="Сменить город">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>
<span id="city-switch-label">Пенза</span>
</button>
<div class="header__actions">
<a href="tel:+78412250177" class="header__cta-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg>
+7 (8412) 25-01-77
</a>
</div>
<input type="checkbox" id="menu-toggle" class="header__toggle-input" aria-label="Открыть меню" />
<label for="menu-toggle" class="header__toggle-label" aria-hidden="true">
<span class="header__toggle-bar"></span>
<span class="header__toggle-bar"></span>
<span class="header__toggle-bar"></span>
</label>
<div class="header__mobile-nav" role="dialog" aria-label="Мобильное меню">
<nav class="header__mobile-links">
<a href="/" class="header__mobile-link">Главная</a>
<span class="header__mobile-heading">Услуги</span>
<a href="/uslugi/tarakany/" class="header__mobile-link">Тараканы</a>
<a href="/uslugi/klopy/" class="header__mobile-link">Клопы</a>
<a href="/uslugi/muravi/" class="header__mobile-link">Муравьи</a>
<a href="/uslugi/blohi/" class="header__mobile-link">Блохи</a>
<a href="/uslugi/kleshchi/" class="header__mobile-link">Клещи</a>
<a href="/uslugi/muhi/" class="header__mobile-link">Мухи</a>
<a href="/uslugi/gryzuny/" class="header__mobile-link">Грызуны</a>
<a href="/uslugi/komary/" class="header__mobile-link">Комары</a>
<a href="/uslugi/osy/" class="header__mobile-link">Осы</a>
<span class="header__mobile-divider"></span>
<a href="/blog/" class="header__mobile-link">Блог</a>
<a href="/faq/" class="header__mobile-link">FAQ</a>
<a href="/contacts/" class="header__mobile-link">Контакты</a>
<a href="/privacy/" class="header__mobile-link">Политика конфиденциальности</a>
</nav>
<a href="tel:+78412250177" class="header__cta-btn header__cta-btn--mobile" style="margin-top: var(--space-5); width: 100%; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg>
+7 (8412) 25-01-77
</a>
</div>
</div>
</div>
<p></header></p>
<style>
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--header-height);
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
transition: background var(--transition-slow), border-color var(--transition-slow), backdrop-filter var(--transition-slow);
}
.header--scrolled {
background: rgba(11,17,32,0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom-color: var(--color-border);
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: var(--space-4);
}
.header__logo {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
color: var(--color-text);
flex-shrink: 0;
}
.header__logo svg { width: 28px; height: 28px; color: var(--color-accent); }
.header__logo-text {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
letter-spacing: -0.02em;
}
.header__nav { display: flex; align-items: center; justify-content: center; gap: 2px; flex: 1; }
.header__link {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
padding: var(--space-2) var(--space-3);
border-radius: 50px;
transition: color var(--transition), background var(--transition);
background: none;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.header__link:hover { color: var(--color-text); background: rgba(255,255,255,0.05); }
.header__link svg { width: 14px; height: 14px; transition: transform var(--transition); }
.header__dropdown-toggle:hover svg { transform: rotate(90deg); }
.header__dropdown { position: relative; }
.header__dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--space-2);
min-width: 210px;
opacity: 0;
visibility: hidden;
transition: all var(--transition);
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.header__dropdown:hover .header__dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.header__dropdown-link {
display: block;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
border-radius: var(--radius-sm);
transition: all var(--transition);
}
.header__dropdown-link:hover { color: var(--color-text); background: var(--color-surface-hover); }
.header__actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
/* Pill CTA button — Kimi style */
.header__cta-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
padding: 10px 20px;
border-radius: 50px;
background: var(--color-accent-alt);
color: var(--color-base);
text-decoration: none;
transition: all var(--transition);
white-space: nowrap;
}
.header__cta-btn:hover {
background: color-mix(in srgb, var(--color-accent-alt) 90%, white);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}
.header__cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.header__city-btn{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-size:var(--text-xs);font-weight:500;padding:6px 12px;border:1px solid rgba(255,255,255,0.1);border-radius:50px;background:transparent;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition);white-space:nowrap}
.header__city-btn:hover{border-color:rgba(16,185,129,0.3);color:var(--color-accent);background:rgba(16,185,129,0.05)}
.header__city-btn svg{width:12px;height:12px;flex-shrink:0}
.header__toggle-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.header__toggle-label {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 200;
position: relative;
}
.header__toggle-bar {
display: block;
width: 24px;
height: 2px;
background: var(--color-text);
border-radius: 1px;
transition: transform var(--transition), opacity var(--transition);
transform-origin: center;
}
#menu-toggle:checked ~ .header__toggle-label .header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-toggle:checked ~ .header__toggle-label .header__toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#menu-toggle:checked ~ .header__toggle-label .header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header__mobile-nav {
display: none;
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
bottom: 0;
height: calc(100dvh - var(--header-height));
background: var(--color-base);
padding: var(--space-5);
overflow-y: auto;
z-index: 99;
overscroll-behavior: contain;
}
#menu-toggle:checked ~ .header__mobile-nav { display: flex; flex-direction: column; }
.header__mobile-heading {
display: block;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--space-3);
margin-top: var(--space-4);
}
.header__mobile-heading:first-child { margin-top: 0; }
.header__mobile-link {
display: block;
padding: var(--space-3) 0;
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid var(--color-border);
transition: color var(--transition);
}
.header__mobile-link:hover { color: var(--color-accent); }
.header__mobile-divider { display: block; height: 1px; background: var(--color-border); margin: var(--space-4) 0; }
@media (max-width: 768px) {
.header__nav, .header__actions { display: none; }
.header__city-picker { display: inline-flex; margin-left: auto; margin-right: var(--space-2); }
.header__toggle-label { display: flex; }
.header__inner { gap: var(--space-3); }
}
</style>
<script>
(function() {
var header = document.getElementById('site-header');
// Scroll: transparent → opaque (Kimi-style)
function onScroll() {
if (window.scrollY > 10) {
header.classList.add('header--scrolled');
} else {
header.classList.remove('header--scrolled');
}
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll(); // init
// Mobile menu: close on link click
var toggle = document.getElementById('menu-toggle');
var links = document.querySelectorAll('.header__mobile-link, .header__cta-btn--mobile');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function() {
toggle.checked = false;
});
}
})();
</script>
<p><code class="language-plaintext highlighter-rouge">, </code><main><h1 id="dez-obrabotka">Dez-obrabotka</h1></p>
<h2 id="tech-stack">Tech Stack</h2>
<ul>
<li>Jekyll (SSG)</li>
<li>Ruby (Gemfile)</li>
</ul>
<h2 id="структура">Структура</h2>
<ul>
<li><code class="language-plaintext highlighter-rouge">_layouts/</code> — шаблоны Liquid</li>
<li><code class="language-plaintext highlighter-rouge">_includes/</code> — переиспользуемые компоненты</li>
<li><code class="language-plaintext highlighter-rouge">_data/</code> — данные (JSON/YAML)</li>
<li><code class="language-plaintext highlighter-rouge">_site/</code> — собранный сайт (не редактировать)</li>
<li><code class="language-plaintext highlighter-rouge">blog/</code>, <code class="language-plaintext highlighter-rouge">contacts/</code>, <code class="language-plaintext highlighter-rouge">faq/</code>, <code class="language-plaintext highlighter-rouge">uslugi/</code> — разделы сайта (Jekyll collections)</li>
<li><code class="language-plaintext highlighter-rouge">design-dna.json</code> — дизайн-токены бренда</li>
</ul>
<h2 id="дизайн-система">Дизайн-система</h2>
<ul>
<li>Файл <code class="language-plaintext highlighter-rouge">design-dna.json</code> содержит токены бренда. Используй его при любых дизайн-задачах.</li>
<li>При дизайне: сначала прочитай <code class="language-plaintext highlighter-rouge">design-dna.json</code>, затем создавай/правь страницы.</li>
</ul>
<h2 id="правила">Правила</h2>
<ul>
<li>Отвечай на русском. Код и технические термины — на английском.</li>
<li>Перед началом работы проверь доступные скилы (Skill tool).</li>
<li>Дизайн: используй design-engine или design-cycle с Playwright для скриншотов.</li>
<li>После изменения кода → validator.</li>
<li>Перед «готово» → verification-before-completion.</li>
<li>Поиск по коду → делегируй cavecrew-investigator (Agent).</li>
<li>Jekyll: <code class="language-plaintext highlighter-rouge">bundle exec jekyll serve</code> для локального запуска.</li>
</ul>
<h2 id="экономия-токенов">Экономия токенов</h2>
<ul>
<li>Read только перед Edit.</li>
<li>Не перечитывай файлы без причины.</li>
<li>Поиск → sub-agent.</li>
</ul>
<p></main><code class="language-plaintext highlighter-rouge">, </code><footer class="footer" role="contentinfo"></p>
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__logo">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
<span>Дез Обработка</span>
</a>
<p class="footer__desc">Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.</p>
<div class="footer__docs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7" /><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" /></svg>
<span>Препараты 4-го класса безопасности</span>
</div>
</div>
<div class="footer__col">
<h4 class="footer__heading">Услуги</h4>
<a href="/uslugi/tarakany/">Тараканы</a>
<a href="/uslugi/klopy/">Клопы</a>
<a href="/uslugi/muravi/">Муравьи</a>
<a href="/uslugi/blohi/">Блохи</a>
<a href="/uslugi/kleshchi/">Клещи</a>
<a href="/uslugi/muhi/">Мухи</a>
<a href="/uslugi/gryzuny/">Грызуны</a>
</div>
<div class="footer__col">
<h4 class="footer__heading">Информация</h4>
<a href="/blog/">Блог</a>
<a href="/faq/">FAQ</a>
<a href="/contacts/">Контакты</a>
<a href="/privacy/">Политика конфиденциальности</a>
<a href="/karta-sajta/">Карта сайта</a>
</div>
<div class="footer__col">
<h4 class="footer__heading">Контакты</h4>
<a href="tel:+78412250177" class="footer__phone">+7 (8412) 25-01-77</a>
<a href="mailto:info@dez-obrabotka.pro">info@dez-obrabotka.pro</a>
<p class="footer__address">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>
Пенза и Пензенская область
</p>
<p class="footer__hours">Работаем ежедневно, 24/7</p>
</div>
</div>
<div class="footer__bottom">
<p>© 2026 Дез Обработка. Все права защищены.</p>
</div>
</div>
<p></footer></p>
<style>
.footer {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding-block: var(--space-8) var(--space-6);
}
.footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-7);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
text-decoration: none;
}
.footer__logo svg { width: 24px; height: 24px; color: var(--color-accent); }
.footer__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; max-width: 280px; }
.footer__docs {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-accent);
}
.footer__docs svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__heading {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--color-text);
margin-bottom: var(--space-3);
font-weight: 600;
}
.footer__col a {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.footer__col a:hover { color: var(--color-accent); }
.footer__phone {
font-family: var(--font-mono) !important;
color: var(--color-accent-alt) !important;
font-weight: 500;
}
.footer__address {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.footer__address svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer__hours { font-size: var(--text-xs); color: var(--color-text-muted); }
.footer__bottom {
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
text-align: center;
}
.footer__bottom p { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 1024px) {
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
.footer { padding-block: var(--space-6) var(--space-5); }
}
</style>
<p>`</p>
<ol>
<li>Создать <code class="language-plaintext highlighter-rouge">_includes/header.html</code>:
<ul>
<li><code class="language-plaintext highlighter-rouge"><header class="site-header" role="banner"></code> — sticky, blur (backdrop-filter), тёмный фон с границей</li>
<li><code class="language-plaintext highlighter-rouge">.logo</code> — «Дез Обработка», accent-цвет, Space Grotesk 700</li>
<li><code class="language-plaintext highlighter-rouge"><nav></code> с ul.nav-list:
<ul>
<li>Услуги (has-dropdown) → dropdown: 7 услуг (Тараканы, Клопы, Муравьи, Блохи, Клещи, Мухи, Грызуны)</li>
<li>Блог → /blog/</li>
<li>FAQ → /faq/</li>
<li>Контакты → /contacts/</li>
</ul>
</li>
<li>Dropdown раскрывается по :hover + :focus-within (чистый CSS, без JS)</li>
<li><code class="language-plaintext highlighter-rouge">.header-phone</code> — JetBrains Mono, accent_alt цвет, ссылка tel:+78412XXXXXXX</li>
<li>Кнопка <code class="language-plaintext highlighter-rouge">.nav-toggle</code> с гамбургером для мобильных (CSS-only)</li>
</ul>
</li>
<li>Создать <code class="language-plaintext highlighter-rouge">_includes/footer.html</code>:
<ul>
<li><code class="language-plaintext highlighter-rouge"><footer class="site-footer"></code> — тёмный фон (accent), светлый текст</li>
<li>4 колонки в <code class="language-plaintext highlighter-rouge">.footer-grid</code>:
<ul>
<li>Колонка 1: «Дез Обработка» — описание компании</li>
<li>Колонка 2: «Услуги» — 7 ссылок на страницы услуг</li>
<li>Колонка 3: «Информация» — Блог, FAQ, Контакты, Политика конфиденциальности</li>
<li>Колонка 4: «Контакты» — телефон (крупно, JetBrains Mono), email, Пенза и область</li>
</ul>
</li>
<li><code class="language-plaintext highlighter-rouge">.footer-bottom</code> — копирайт с годом</li>
</ul>
</li>
</ol>
<p><strong>Критерии качества:</strong></p>
<ul>
<li>HTML валидный (нет незакрытых тегов, правильные атрибуты)</li>
<li>ARIA-роли у header (banner), nav (navigation), footer (contentinfo)</li>
<li>Ссылки рабочие (относительные пути правильные)</li>
<li>Dropdown открывается на десктопе без JS</li>
<li>На мобильном меню скрывается за гамбургер</li>
</ul>
<p><strong>Нюансы:</strong></p>
<ul>
<li>Телефон-заглушка: <code class="language-plaintext highlighter-rouge">+7 (8412) XX-XX-XX</code></li>
<li>Email-заглушка: <code class="language-plaintext highlighter-rouge">info@dez-obrabotka.pro</code></li>
<li>Адрес: Пенза (без точного адреса)</li>
<li>В футере НЕ упоминать гарантию</li>
</ul>
<p><strong>ВЫКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">design-create</code></p>
<hr />
<h2 id="шаг-3-из-7-главная-страница--полный-html-и-css">Шаг 3 из 7: Главная страница — полный HTML и CSS</h2>
<p><strong>ВКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">design-create</code></p>
<p><strong>Подробно:</strong></p>
<p>Создать <code class="language-plaintext highlighter-rouge">index.html</code> с frontmatter: <code class="language-plaintext highlighter-rouge">layout: default</code>, <code class="language-plaintext highlighter-rouge">title: "Уничтожение насекомых в Пензе холодным туманом"</code>, <code class="language-plaintext highlighter-rouge">description: "..."</code>.</p>
<p>Весь CSS в <code class="language-plaintext highlighter-rouge"><style></code> внутри frontmatter <code class="language-plaintext highlighter-rouge">style</code> (Liquid передаст в default.html).</p>
<h3 id="css-переменные-root">CSS-переменные (:root)</h3>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">--color-base</span><span class="o">:</span> <span class="err">#0</span><span class="nt">B1120</span><span class="o">;</span>
<span class="nt">--color-surface</span><span class="o">:</span> <span class="err">#151</span><span class="nt">E2D</span><span class="o">;</span>
<span class="nt">--color-accent</span><span class="o">:</span> <span class="err">#10</span><span class="nt">B981</span><span class="o">;</span>
<span class="nt">--color-accent_alt</span><span class="o">:</span> <span class="nf">#F59E0B</span><span class="o">;</span>
<span class="nt">--color-text</span><span class="o">:</span> <span class="nf">#F1F5F9</span><span class="o">;</span>
<span class="nt">--color-text_muted</span><span class="o">:</span> <span class="err">#94</span><span class="nt">A3B8</span><span class="o">;</span>
<span class="nt">--color-border</span><span class="o">:</span> <span class="err">#1</span><span class="nt">E293B</span><span class="o">;</span>
<span class="nt">--text-xs</span><span class="o">:</span> <span class="nt">clamp</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">75</span><span class="nt">rem</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">25</span><span class="nt">vw</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">875</span><span class="nt">rem</span><span class="o">);</span>
<span class="nt">--text-sm</span><span class="o">:</span> <span class="nt">clamp</span><span class="o">(</span><span class="err">0</span><span class="o">.</span><span class="err">875</span><span class="nt">rem</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">15</span><span class="nt">vw</span><span class="o">,</span> <span class="err">1</span><span class="nt">rem</span><span class="o">);</span>
<span class="nt">--text-base</span><span class="o">:</span> <span class="nt">clamp</span><span class="o">(</span><span class="err">1</span><span class="nt">rem</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">3</span><span class="nt">vw</span><span class="o">,</span> <span class="err">1</span><span class="o">.</span><span class="err">125</span><span class="nt">rem</span><span class="o">);</span>
<span class="nt">--text-lg</span><span class="o">:</span> <span class="nt">clamp</span><span class="o">(</span><span class="err">1</span><span class="o">.</span><span class="err">125</span><span class="nt">rem</span><span class="o">,</span> <span class="err">0</span><span class="o">.</span><span class="err">6</span><span class="nt">vw</span><span class="o">,</span> <span class="err">1</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">);</span>
<span class="nt">--text-xl</span><span class="o">:</span> <span class="nt">clamp</span><span class="o">(</span><span class="err">1</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">,</span> <span class="err">1</span><span class="o">.</span><span class="err">5</span><span class="nt">vw</span><span class="o">,</span> <span class="err">2</span><span class="nt">rem</span><span class="o">);</span>
<span class="nt">--text-2xl</span><span class="o">:</span> <span class="nt">clamp</span><span class="o">(</span><span class="err">2</span><span class="nt">rem</span><span class="o">,</span> <span class="err">2</span><span class="o">.</span><span class="err">5</span><span class="nt">vw</span><span class="o">,</span> <span class="err">3</span><span class="nt">rem</span><span class="o">);</span>
<span class="nt">--text-3xl</span><span class="o">:</span> <span class="nt">clamp</span><span class="o">(</span><span class="err">2</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span><span class="o">,</span> <span class="err">3</span><span class="nt">vw</span><span class="o">,</span> <span class="err">4</span><span class="nt">rem</span><span class="o">);</span>
<span class="nt">--space-1</span><span class="err">…</span><span class="nt">--space-8</span><span class="o">:</span> <span class="nt">clamp-шкала</span> <span class="nt">от</span> <span class="err">0</span><span class="o">.</span><span class="err">25</span><span class="nt">rem</span> <span class="nt">до</span> <span class="err">8</span><span class="nt">rem</span>
</code></pre></div></div>
<h3 id="секции-html-9-блоков-в-main">Секции HTML (9 блоков в <code class="language-plaintext highlighter-rouge"><main></code>)</h3>
<p><strong>1. HERO</strong> (<code class="language-plaintext highlighter-rouge"><section class="hero"></code>)</p>
<ul>
<li>accent-линия 4px слева (border-left на .hero-content)</li>
<li>h1: «Профессиональная дезинсекция в Пензе и области»</li>
<li>p.hero-subtitle: «Холодный туман — микрочастицы проникают во все щели. Препараты 4-го класса — безопасны для людей и животных. Работаем по договору официально.»</li>
<li>3 буллета (.hero-features):
<ul>
<li>🧊 Холодный туман — микрочастицы 10-50 мкм, проникают в щели и за мебель</li>
<li>🛡️ Препараты 4-го класса — безопасны для детей, животных, астматиков</li>
<li>📋 Работаем официально — договор, акт выполненных работ, закрывающие документы</li>
</ul>
</li>
<li>.hero-actions: кнопка .btn-primary «Вызвать специалиста» (якорь к #cta) + телефон (JetBrains Mono, accent_alt)</li>
<li>Статистику НЕ выводить (запрещено)</li>
</ul>
<p><strong>2. УСЛУГИ</strong> (<code class="language-plaintext highlighter-rouge"><section class="section" id="services"></code>)</p>
<ul>
<li>h2: «Каких насекомых уничтожаем»</li>
<li>p.subtitle: «Работаем со всеми видами бытовых вредителей в Пензе и области»</li>
<li>.services-grid: 7 карточек .service-card, каждая — ссылка <code class="language-plaintext highlighter-rouge"><a></code> на страницу услуги:
<ul>
<li>🪳 Тараканы → /uslugi/tarakany/</li>
<li>🪲 Клопы → /uslugi/klopy/</li>
<li>🐜 Муравьи → /uslugi/muravi/</li>
<li>🦗 Блохи → /uslugi/blohi/</li>
<li>🕷️ Клещи → /uslugi/kleshchi/</li>
<li>🪰 Мухи → /uslugi/muhi/</li>
<li>🐭 Грызуны → /uslugi/gryzuny/</li>
</ul>
</li>
<li>Каждая карточка: иконка (крупно), h3 с названием, краткое описание 2-3 строки</li>
</ul>
<p><strong>3. ТЕХНОЛОГИЯ</strong> (<code class="language-plaintext highlighter-rouge"><section class="section section--alt" id="technology"></code>)</p>
<ul>
<li>h2: «Холодный туман — современный метод дезинсекции»</li>
<li>Два блока рядом (на десктопе):
<ul>
<li>Левый: как работает — генератор превращает раствор в облако частиц 10-50 мкм, которые проникают в щели, за мебель, в вентиляцию. Равномерное покрытие всех поверхностей.</li>
<li>Правый: преимущества vs опрыскивание — меньше расход препарата, глубже проникновение, быстрее обработка (40-90 минут), без потёков и разводов</li>
</ul>
</li>
<li>Место под фото оборудования (заглушка или placeholder)</li>
</ul>
<p><strong>4. БЕЗОПАСНОСТЬ</strong> (<code class="language-plaintext highlighter-rouge"><section class="section" id="safety"></code>)</p>
<ul>
<li>h2: «Безопасность для вас и ваших близких»</li>
<li>4 пункта в сетке .advantages-grid:
<ul>
<li>Препараты 4-го класса опасности — малоопасные вещества (расшифровка: 1-й класс — чрезвычайно опасные, 4-й — малоопасные, как поваренная соль)</li>
<li>Без вреда для детей и животных — после проветривания в помещении безопасно находиться</li>
<li>Без запаха — современные препараты не оставляют следов и запаха</li>
<li>Не портит мебель и покрытия — не остаётся разводов на обоях, мебели, тканях</li>
</ul>
</li>
<li>Место под сертификаты (placeholder: 2-3 прямоугольника)</li>
</ul>
<p><strong>5. ЦЕНЫ</strong> (<code class="language-plaintext highlighter-rouge"><section class="section section--alt" id="prices"></code>)</p>
<ul>
<li>h2: «Стоимость дезинсекции»</li>
<li>p.subtitle: «Цены фиксированные, без скрытых доплат»</li>
<li>Таблица в .table-wrapper (role=”region”, aria-label, tabindex=”0”):
<ul>
<li>
<table>
<tbody>
<tr>
<td>Колонки: Услуга</td>
<td>1-комнатная</td>
<td>2-комнатная</td>
<td>3-комнатная</td>
<td>Дом до 100м²</td>
</tr>
</tbody>
</table>
</li>
<li>7 строк услуг с ценами из дизайна (реальные рыночные цены для Пензы)</li>
<li>thead sticky, zebra-строки, .price-cell — JetBrains Mono accent_alt</li>
</ul>
</li>
<li>Сноска: «Цены указаны за одну обработку. Для нестандартных помещений — уточняйте по телефону.»</li>
</ul>
<p><strong>6. КАК РАБОТАЕМ</strong> (<code class="language-plaintext highlighter-rouge"><section class="section" id="how-we-work"></code>)</p>
<ul>
<li>h2: «Как проходит обработка»</li>
<li>4 шага (.steps grid):
<ul>
<li>Шаг 1: <strong>Заявка</strong> — звоните или оставляете заявку. Консультируем по методу обработки и подготовке помещения. Согласовываем удобную дату.</li>
<li>Шаг 2: <strong>Подготовка</strong> — даём рекомендации что убрать и накрыть перед приездом специалиста. Никакой специальной подготовки не требуется.</li>
<li>Шаг 3: <strong>Обработка</strong> — специалист приезжает с оборудованием. Холодный туман 40-90 минут. Проветривание после обработки.</li>
<li>Шаг 4: <strong>Рекомендации</strong> — рассказываем когда можно заходить в помещение, как проводить уборку после обработки, на что обратить внимание.</li>
</ul>
</li>
<li>НЕ упоминать: гарантию, осмотр, контрольный выезд, замер</li>
</ul>
<p><strong>7. FAQ</strong> (<code class="language-plaintext highlighter-rouge"><section class="section section--alt" id="faq"></code>)</p>
<ul>
<li>h2: «Частые вопросы»</li>
<li>7 вопросов через <code class="language-plaintext highlighter-rouge"><details><summary></code> (чистый CSS-аккордеон):
<ol>
<li>Опасно ли для детей и домашних животных?</li>
<li>Когда можно заходить в помещение после обработки?</li>
<li>Нужно ли уезжать из квартиры на время обработки?</li>
<li>Как подготовить помещение к обработке?</li>
<li>Чем холодный туман отличается от обычного опрыскивания?</li>
<li>Поможет ли обработка, если насекомые идут от соседей?</li>
<li>Работаете ли с юридическими лицами?</li>
</ol>
</li>
</ul>
<p><strong>8. CTA</strong> (<code class="language-plaintext highlighter-rouge"><section class="section" id="cta"></code>)</p>
<ul>
<li>.cta-box (border: 2px solid accent):
<ul>
<li>h2: «Остались вопросы?»</li>
<li>p: «Позвоните — проконсультируем по стоимости и методу обработки вашего помещения»</li>
<li>.cta-actions: телефон крупно + кнопка .btn-primary</li>
</ul>
</li>
</ul>
<p><strong>9. FOOTER</strong> (через <footer class="footer" role="contentinfo"></p>
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__logo">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>
<span>Дез Обработка</span>
</a>
<p class="footer__desc">Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.</p>
<div class="footer__docs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7" /><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" /></svg>
<span>Препараты 4-го класса безопасности</span>
</div>
</div>
<div class="footer__col">
<h4 class="footer__heading">Услуги</h4>
<a href="/uslugi/tarakany/">Тараканы</a>
<a href="/uslugi/klopy/">Клопы</a>
<a href="/uslugi/muravi/">Муравьи</a>
<a href="/uslugi/blohi/">Блохи</a>
<a href="/uslugi/kleshchi/">Клещи</a>
<a href="/uslugi/muhi/">Мухи</a>
<a href="/uslugi/gryzuny/">Грызуны</a>
</div>
<div class="footer__col">
<h4 class="footer__heading">Информация</h4>
<a href="/blog/">Блог</a>
<a href="/faq/">FAQ</a>
<a href="/contacts/">Контакты</a>
<a href="/privacy/">Политика конфиденциальности</a>
<a href="/karta-sajta/">Карта сайта</a>
</div>
<div class="footer__col">
<h4 class="footer__heading">Контакты</h4>
<a href="tel:+78412250177" class="footer__phone">+7 (8412) 25-01-77</a>
<a href="mailto:info@dez-obrabotka.pro">info@dez-obrabotka.pro</a>
<p class="footer__address">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>
Пенза и Пензенская область
</p>
<p class="footer__hours">Работаем ежедневно, 24/7</p>
</div>
</div>
<div class="footer__bottom">
<p>© 2026 Дез Обработка. Все права защищены.</p>
</div>
</div>
<p></footer></p>
<style>
.footer {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding-block: var(--space-8) var(--space-6);
}
.footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-7);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
text-decoration: none;
}
.footer__logo svg { width: 24px; height: 24px; color: var(--color-accent); }
.footer__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; max-width: 280px; }
.footer__docs {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-accent);
}
.footer__docs svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__heading {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--color-text);
margin-bottom: var(--space-3);
font-weight: 600;
}
.footer__col a {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.footer__col a:hover { color: var(--color-accent); }
.footer__phone {
font-family: var(--font-mono) !important;
color: var(--color-accent-alt) !important;
font-weight: 500;
}
.footer__address {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.footer__address svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer__hours { font-size: var(--text-xs); color: var(--color-text-muted); }
.footer__bottom {
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
text-align: center;
}
.footer__bottom p { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 1024px) {
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
.footer { padding-block: var(--space-6) var(--space-5); }
}
</style>
<p>)</p>
<h3 id="адаптивность">Адаптивность</h3>
<ul>
<li>Mobile-first: все гриды → 1 колонка на <640px</li>
<li>@media (min-width: 640px): header-phone крупнее, grid 2 колонки</li>
<li>@media (min-width: 1024px): hero 2-колоночный (контент + фото/буллеты), grid 3-4 колонки</li>
<li>Таблица: горизонтальный скролл на мобильных (.table-wrapper overflow-x:auto)</li>
<li>Меню: гамбургер на мобильных (CSS-only через :target или скрытый checkbox)</li>
</ul>
<h3 id="доступность">Доступность</h3>
<ul>
<li>:focus-visible outline: 3px solid accent, offset: 2px</li>
<li>prefers-reduced-motion: анимации 0.01ms</li>
<li>Все картинки/иконки: aria-hidden=”true” (декоративные)</li>
<li>Таблица: role=”region”, aria-label, tabindex=”0”</li>
</ul>
<p><strong>Критерии качества:</strong></p>
<ul>
<li>CSS без ошибок (все переменные используются, нет несуществующих классов)</li>
<li>Все 9 секций присутствуют</li>
<li>Контент не содержит запрещённых слов (гарантия, 24 часа, горячий туман, осмотр)</li>
<li>Текст заголовка hero содержит «Пенза»</li>
<li>7 карточек услуг ведут на правильные URL</li>
<li>FAQ аккордеон работает без JS</li>
<li>Таблица читаема на экране 320px</li>
</ul>
<p><strong>Нюансы:</strong></p>
<ul>
<li>Цены взять из утверждённого диапазона (рыночные для Пензы, ниже московских)</li>
<li>В CTA не писать «бесплатно»</li>
<li>Hero-буллеты: именно 3, не 4 и не 2</li>
<li>Все иконки — эмодзи (просто, без доп. зависимостей)</li>
</ul>
<p><strong>ВЫКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">design-create</code></p>
<hr />
<h2 id="шаг-4-из-7-валидация-и-исправление-ошибок">Шаг 4 из 7: Валидация и исправление ошибок</h2>
<p><strong>ВКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">validator</code> → <code class="language-plaintext highlighter-rouge">design-review</code></p>
<p><strong>Подробно:</strong></p>
<ol>
<li>Запустить validator.js на все созданные HTML-файлы:
<ul>
<li><code class="language-plaintext highlighter-rouge">index.html</code></li>
<li><code class="language-plaintext highlighter-rouge">_layouts/default.html</code></li>
<li><code class="language-plaintext highlighter-rouge">_includes/header.html</code></li>
<li><code class="language-plaintext highlighter-rouge">_includes/footer.html</code></li>
</ul>
</li>
<li>Проверить:
<ul>
<li>HTML-валидность (закрытые теги, правильная вложенность)</li>
<li>CSS-валидность (нет ошибок синтаксиса, все переменные определены)</li>
<li>Наличие всех обязательных атрибутов (alt у img, aria-роли)</li>
<li>Отсутствие пустых ссылок и кнопок без текста</li>
</ul>
</li>
<li>design-review проверить:
<ul>
<li>Контраст текста на тёмном фоне (WCAG AA: минимум 4.5:1 для body, 3:1 для крупного)</li>
<li>Иерархия заголовков (h1 → h2 → h3, без пропусков)</li>
<li>Отступы и spacing: 25%+ прыжки между уровнями</li>
<li>Кнопки: min-height 48px для тач-целей, отличие primary/outline</li>
<li>Адаптивность: нет горизонтального скролла на 320px, всё читаемо</li>
</ul>
</li>
<li>Исправить все найденные ошибки в соответствующих файлах</li>
</ol>
<p><strong>Критерии качества:</strong></p>
<ul>
<li>validator: PASS (нет ошибок)</li>
<li>design-review: не более 3 мелких замечаний (не критических)</li>
<li>Контраст accent_alt (#F59E0B) на base (#0B1120): проверить, возможно использовать на surface вместо base</li>
</ul>
<p><strong>Нюансы:</strong></p>
<ul>
<li>Если validator недоступен как отдельный скрипт — проверять вручную: смотреть HTML-структуру, искать битые теги, проверять CSS-переменные</li>
<li>Особое внимание контрасту жёлтого текста на тёмном фоне</li>
</ul>
<p><strong>ВЫКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">validator</code>, <code class="language-plaintext highlighter-rouge">design-review</code></p>
<hr />
<h2 id="шаг-5-из-7-страницы-услуг-блог-faq-контакты">Шаг 5 из 7: Страницы услуг, блог, FAQ, контакты</h2>
<p><strong>ВКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">design-create</code></p>
<p><strong>Подробно:</strong></p>
<p>Создать 10 страниц с одинаковой структурой, разным контентом. Каждая страница использует <code class="language-plaintext highlighter-rouge">layout: default</code> и встроенный <code class="language-plaintext highlighter-rouge"><style></code> для стилей страницы (минимальные — основные стили уже в главной).</p>
<h3 id="7-страниц-услуг-uslugislugindexhtml">7 страниц услуг (<code class="language-plaintext highlighter-rouge">/uslugi/[slug]/index.html</code>)</h3>
<p>Общий шаблон для каждой:</p>
<ul>
<li>frontmatter: layout, title (с ключевым словом + Пенза), description</li>
<li>Секция 1: Описание насекомого — какие виды, чем опасно, где прячутся</li>
<li>Секция 2: Как уничтожаем — холодный туман, препараты, время обработки</li>
<li>Секция 3: Цены — мини-таблица (1к, 2к, 3к, дом)</li>
<li>CTA: телефон + кнопка</li>
</ul>
<p>Для каждой услуги уникальный контент:</p>
<p><strong>Тараканы</strong> (<code class="language-plaintext highlighter-rouge">/uslugi/tarakany/</code>):</p>
<ul>
<li>«Рыжие и чёрные тараканы — переносчики инфекций, быстро размножаются»</li>
<li>«Холодный туман проникает в щели, за плинтусы, в вентиляцию где прячутся тараканы»</li>
<li>Цены: 1к=2200, 2к=2900, 3к=3700, дом=5000 ₽</li>
</ul>
<p><strong>Клопы</strong> (<code class="language-plaintext highlighter-rouge">/uslugi/klopy/</code>):</p>
<ul>
<li>«Постельные клопы — укусы, аллергия, быстрое распространение по квартире»</li>
<li>«Холодный туман находит клопов в складках мебели, под матрасом, в розетках»</li>
<li>Цены: 1к=2700, 2к=3500, 3к=4400, дом=6000 ₽</li>
</ul>
<p><strong>Муравьи</strong> (<code class="language-plaintext highlighter-rouge">/uslugi/muravi/</code>):</p>
<ul>
<li>«Фараоновы и садовые муравьи — уничтожаем колонию вместе с маткой»</li>
<li>«Препарат проникает по муравьиным тропам к гнезду»</li>
<li>Цены: 1к=1800, 2к=2300, 3к=2900, дом=4000 ₽</li>
</ul>
<p><strong>Блохи</strong> (<code class="language-plaintext highlighter-rouge">/uslugi/blohi/</code>):</p>
<ul>
<li>«Земляные и постельные блохи — укусы, риск для животных»</li>
<li>«Обработка пола, плинтусов, ковровых покрытий холодным туманом»</li>
<li>Цены: 1к=2200, 2к=2800, 3к=3500, дом=4600 ₽</li>
</ul>
<p><strong>Клещи</strong> (<code class="language-plaintext highlighter-rouge">/uslugi/kleshchi/</code>):</p>
<ul>
<li>«Иксодовые и пылевые клещи — обработка помещений и территории»</li>
<li>«Холодный туман + барьерная обработка по периметру участка»</li>
<li>Цены: 1к=2500, 2к=3200, 3к=4000, дом=5200 ₽</li>
</ul>
<p><strong>Мухи</strong> (<code class="language-plaintext highlighter-rouge">/uslugi/muhi/</code>):</p>
<ul>
<li>«Комнатные и дрозофилы — сезонная обработка мест выплода»</li>
<li>«Установка ловушек + обработка холодным туманом оконных и дверных проёмов»</li>
<li>Цены: 1к=1600, 2к=2000, 3к=2500, дом=3600 ₽</li>
</ul>
<p><strong>Грызуны</strong> (<code class="language-plaintext highlighter-rouge">/uslugi/gryzuny/</code>):</p>
<ul>
<li>«Крысы и мыши — дератизация, перекрытие путей проникновения»</li>
<li>«Механические барьеры + родентициды в недоступных для детей и животных местах»</li>
<li>Цены: 1к=3200, 2к=4200, 3к=5200, дом=6500 ₽</li>
</ul>
<h3 id="блог-blogindexhtml">Блог (<code class="language-plaintext highlighter-rouge">/blog/index.html</code>)</h3>
<ul>
<li>Заголовок: «Блог о дезинсекции»</li>
<li>Заглушка: «Скоро здесь появятся статьи о методах борьбы с насекомыми, профилактике и выборе службы дезинсекции»</li>
<li>Стиль: соответствует главной</li>
</ul>
<h3 id="faq-faqindexhtml">FAQ (<code class="language-plaintext highlighter-rouge">/faq/index.html</code>)</h3>
<ul>
<li>Те же 7 вопросов что на главной + 3-5 дополнительных</li>
<li>Доп. вопросы: «Сколько держится эффект?», «Нужно ли повторять обработку?», «Что делать если насекомые появились снова?»</li>
<li>Аккордеон через details/summary</li>
</ul>
<h3 id="контакты-contactsindexhtml">Контакты (<code class="language-plaintext highlighter-rouge">/contacts/index.html</code>)</h3>
<ul>
<li>Адрес: г. Пенза (без точного адреса, заглушка)</li>
<li>Телефон: +7 (8412) XX-XX-XX</li>
<li>Email: info@dez-obrabotka.pro</li>
<li>Режим работы: Пн-Вс</li>
<li>Место под карту (заглушка — серый прямоугольник)</li>
</ul>
<h3 id="_datapricesyml">_data/prices.yml</h3>
<p>Создать файл с данными цен для переиспользования в шаблонах:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="pi">-</span> <span class="na">slug</span><span class="pi">:</span> <span class="s">tarakany, name</span><span class="err">:</span> <span class="s">Уничтожение тараканов, 1k</span><span class="err">:</span> <span class="s">2200, 2k</span><span class="err">:</span> <span class="s">2900, 3k</span><span class="err">:</span> <span class="s">3700, house</span><span class="err">:</span> <span class="m">5000</span>
<span class="pi">-</span> <span class="na">slug</span><span class="pi">:</span> <span class="s">klopy, name</span><span class="err">:</span> <span class="s">Уничтожение клопов, 1k</span><span class="err">:</span> <span class="s">2700, 2k</span><span class="err">:</span> <span class="s">3500, 3k</span><span class="err">:</span> <span class="s">4400, house</span><span class="err">:</span> <span class="m">6000</span>
<span class="nn">...</span> <span class="s">(все 7)</span>
</code></pre></div></div>
<p><strong>Критерии качества:</strong></p>
<ul>
<li>Каждая страница услуги: title содержит [услуга] + Пенза</li>
<li>description уникален для каждой страницы</li>
<li>Цены соответствуют _data/prices.yml</li>
<li>Ссылки работают (перекрёстные проверки)</li>
</ul>
<p><strong>Нюансы:</strong></p>
<ul>
<li>На страницах услуг не упоминать гарантию</li>
<li>Не писать «бесплатный выезд» или «выезд за 24 часа»</li>
<li>Не упоминать осмотр как отдельную услугу</li>
</ul>
<p><strong>ВЫКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">design-create</code></p>
<hr />
<h2 id="шаг-6-из-7-seo-аудит">Шаг 6 из 7: SEO-аудит</h2>
<p><strong>ВКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">seo-expert</code></p>
<p><strong>Подробно:</strong></p>
<ol>
<li>Мета-теги на каждой странице:
<ul>
<li>Уникальный <code class="language-plaintext highlighter-rouge"><title></code> с ключевыми словами: [услуга] в Пензе, дезинсекция Пенза</li>
<li>Уникальный <code class="language-plaintext highlighter-rouge"><meta name="description"></code> 140-160 символов</li>
<li>Open Graph: og:title, og:description, og:type, og:url, og:image (если есть)</li>
<li>canonical URL (на случай дублей)</li>
</ul>
</li>
<li>Schema.org structured data в <code class="language-plaintext highlighter-rouge">_layouts/default.html</code>:
<ul>
<li>Organization или LocalBusiness: название, телефон, адрес (Пенза), зона обслуживания</li>
<li>На главной: WebPage + Organization</li>
<li>На страницах услуг: Service + offers (цена)</li>
</ul>
</li>
<li>Заголовки:
<ul>
<li>h1 один на страницу, содержит основное ключевое слово</li>
<li>h2 для секций, h3 для подсекций</li>
<li>Без пропусков в иерархии</li>
</ul>
</li>
<li>Семантика:
<ul>
<li><code class="language-plaintext highlighter-rouge"><main></code>, <code class="language-plaintext highlighter-rouge"><nav></code>, <code class="language-plaintext highlighter-rouge"><article></code> (карточки услуг), <code class="language-plaintext highlighter-rouge"><footer></code></li>
<li>Изображения (если есть): alt-текст</li>
</ul>
</li>
<li>Локальное SEO:
<ul>
<li>Ключевые фразы с гео: «Пенза», «Пензенская область»</li>
<li>title главной содержит «Пенза»</li>
<li>description содержит «Пенза»</li>
<li>Адрес и телефон в schema.org</li>
</ul>
</li>
<li>Техническое:
<ul>
<li>mobile-friendly (уже)</li>
<li>Скорость: минимум внешних запросов (только Google Fonts)</li>
<li>HTML валидный (уже)</li>
</ul>
</li>
</ol>
<p><strong>Критерии качества:</strong></p>
<ul>
<li>Все страницы имеют уникальный title и description</li>
<li>Schema.org валидна (проверить в https://validator.schema.org/)</li>
<li>Ключевые слова «дезинсекция Пенза», «уничтожение [насекомое] Пенза» в title/description</li>
</ul>
<p><strong>Нюансы:</strong></p>
<ul>
<li>Не переспамить ключевыми словами — естественные формулировки</li>
<li>В schema.org не указывать гарантию и фейк-рейтинг</li>
</ul>
<p><strong>ВЫКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">seo-expert</code></p>
<hr />
<h2 id="шаг-7-из-7-запуск-скриншот-и-финальная-проверка">Шаг 7 из 7: Запуск, скриншот и финальная проверка</h2>
<p><strong>ВКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">run</code> → <code class="language-plaintext highlighter-rouge">verification-before-completion</code></p>
<p><strong>Подробно:</strong></p>
<ol>
<li>Запустить Jekyll:
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">cd </span>C:<span class="se">\U</span>sers<span class="se">\A</span>dmin<span class="se">\P</span>rojects<span class="se">\d</span>ez-obrabotka
bundle <span class="nb">exec </span>jekyll serve
</code></pre></div> </div>
</li>
<li>Сделать скриншоты:
<ul>
<li>Главная страница (вся, скроллом)</li>
<li>Мобильная версия (320-375px)</li>
<li>Одна страница услуги (например, клопы)</li>
<li>FAQ-аккордеон в открытом состоянии</li>
<li>Выпадающее меню на десктопе</li>
</ul>
</li>
<li>Проверить в браузере:
<ul>
<li>Все ссылки работают</li>
<li>Меню раскрывается</li>
<li>FAQ аккордеон открывается/закрывается</li>
<li>Таблица скроллится на мобильном</li>
<li>Нет горизонтального скролла</li>
<li>Текст читаем (контраст)</li>
<li>Форма (если добавлена) отправляет</li>
</ul>
</li>
<li>verification-before-completion:
<ul>
<li>Все файлы на месте: _config.yml, design-dna.json, _layouts/default.html, _includes/header.html, _includes/footer.html, _data/prices.yml, index.html, 7 услуг, блог, FAQ, контакты</li>
<li>Контент не содержит запрещённых слов</li>
<li>CSS не содержит запрещённых цветов</li>
<li>Все 9 секций на главной присутствуют</li>
</ul>
</li>
</ol>
<p><strong>Критерии качества:</strong></p>
<ul>
<li>Jekyll запускается без ошибок</li>
<li>Все страницы открываются</li>
<li>Скриншоты показывают корректную вёрстку</li>
<li>verification-before-completion: PASS</li>
</ul>
<p><strong>Нюансы:</strong></p>
<ul>
<li>Если Jekyll не установлен — открыть index.html напрямую в браузере (как статический файл)</li>
</ul>
<p><strong>ВЫКЛЮЧИТЬ скилы:</strong> <code class="language-plaintext highlighter-rouge">run</code>, <code class="language-plaintext highlighter-rouge">verification-before-completion</code></p>
<hr />
<h2 id="завершение">ЗАВЕРШЕНИЕ</h2>
<p>ПОСЛЕ ВЫПОЛНЕНИЯ ВСЕХ 7 ШАГОВ: ВСЕ СКИЛЫ ВЫКЛЮЧЕНЫ. ЗАДАЧА ЗАВЕРШЕНА.</p>
<p><strong>Итоговые файлы проекта:</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>dez-obrabotka/
├── _config.yml
├── design-dna.json
├── index.html (главная, 9 секций)
├── _layouts/default.html
├── _includes/header.html
├── _includes/footer.html
├── _data/prices.yml
├── uslugi/ (7 страниц)
├── blog/index.html
├── faq/index.html
├── contacts/index.html
└── docs/superpowers/plans/2026-06-01-dez-obrabotka-landing.md
</code></pre></div></div>
</main>
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<a href="/" class="footer__logo">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span>Дез Обработка</span>
</a>
<p class="footer__desc">Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.</p>
<div class="footer__docs">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>
<span>Препараты 4-го класса безопасности</span>
</div>
</div>
<div class="footer__col">
<h4 class="footer__heading">Услуги</h4>
<a href="/uslugi/tarakany/">Тараканы</a>
<a href="/uslugi/klopy/">Клопы</a>
<a href="/uslugi/muravi/">Муравьи</a>
<a href="/uslugi/blohi/">Блохи</a>
<a href="/uslugi/kleshchi/">Клещи</a>
<a href="/uslugi/muhi/">Мухи</a>
<a href="/uslugi/gryzuny/">Грызуны</a>
</div>
<div class="footer__col">
<h4 class="footer__heading">Информация</h4>
<a href="/blog/">Блог</a>
<a href="/faq/">FAQ</a>
<a href="/contacts/">Контакты</a>
<a href="/privacy/">Политика конфиденциальности</a>
<a href="/karta-sajta/">Карта сайта</a>
</div>
<div class="footer__col">
<h4 class="footer__heading">Контакты</h4>
<a href="tel:+78412250177" class="footer__phone">+7 (8412) 25-01-77</a>
<a href="mailto:info@dez-obrabotka.pro">info@dez-obrabotka.pro</a>
<p class="footer__address">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
Пенза и Пензенская область
</p>
<p class="footer__hours">Работаем ежедневно, 24/7</p>
</div>
</div>
<div class="footer__bottom">
<p>© 2026 Дез Обработка. Все права защищены.</p>
</div>
</div>
</footer>
<style>
.footer {
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding-block: var(--space-8) var(--space-6);
}
.footer__grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-7);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer__logo {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--color-text);
text-decoration: none;
}
.footer__logo svg { width: 24px; height: 24px; color: var(--color-accent); }
.footer__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; max-width: 280px; }
.footer__docs {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-accent);
}
.footer__docs svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__heading {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--color-text);
margin-bottom: var(--space-3);
font-weight: 600;
}
.footer__col a {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.footer__col a:hover { color: var(--color-accent); }
.footer__phone {
font-family: var(--font-mono) !important;
color: var(--color-accent-alt) !important;
font-weight: 500;
}
.footer__address {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.footer__address svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer__hours { font-size: var(--text-xs); color: var(--color-text-muted); }
.footer__bottom {
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
text-align: center;
}
.footer__bottom p { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 1024px) {
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
.footer { padding-block: var(--space-6) var(--space-5); }
}
</style>
<!-- Scroll reveal -->
<script>
(function() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('reveal--visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
})();
</script>
</body>
</html>
- Step 2: Commit
Task 6: Premium Header — _includes/header.html
Files:
-
Modify:
_includes/header.html -
Step 1: Rewrite header
Детальная реализация: sticky header с blur-бэкграундом, десктопная навигация с выпадающим меню услуг, мобильное гамбургер-меню на CSS (без JS), телефон.
- Step 2: Commit
Task 7: Premium Footer — _includes/footer.html
Files:
-
Modify:
_includes/footer.html -
Step 1: Rewrite footer
4-колоночный грид: бренд + описание, услуги (список), информация (faq/блог/контакты/политика), контакты. SVG-иконки соцсетей.
- Step 2: Commit
Task 8: Landing Page — index.html
Files:
-
Modify:
index.html -
Step 1: Полный rewrite лендинга
9 секций с полной вёрсткой: Hero, Услуги, Технология, Безопасность, Цены, Как работаем, FAQ, CTA, Футер. Каждая секция с reveal-анимацией. SVG-иконки в карточках услуг. Таблица цен с sticky header.
-
Step 2: Проверка скриншотом через Playwright
-
Step 3: Commit
Task 9: Service Pages — uslugi/*/index.html (×7)
Files:
- Modify:
uslugi/tarakany/index.html - Modify:
uslugi/klopy/index.html - Modify:
uslugi/muravi/index.html - Modify:
uslugi/blohi/index.html - Modify:
uslugi/kleshchi/index.html - Modify:
uslugi/muhi/index.html -
Modify:
uslugi/gryzuny/index.html - Step 1: Создать единый премиум-шаблон для всех услуг
Структура: заголовок, описание проблемы, как уничтожаем (3 шага с иконками), таблица цен, CTA, преимущества (карточки), FAQ по конкретному виду.
-
Step 2: Проверка скриншотом
-
Step 3: Commit all 7
Task 10: Остальные страницы
Files:
- Modify:
faq/index.html - Modify:
contacts/index.html -
Modify:
blog/index.html -
Step 1: FAQ — стилизованный аккордеон с 10 вопросами
-
Step 2: Контакты — карточки с иконками, карта, форма
-
Step 3: Блог — сетка карточек-заглушек
- Step 4: Commit
Task 11: Генерация изображений
Files:
- Create:
assets/img/hero-bg.webp - Create:
assets/img/equipment.webp - Create:
assets/img/certificate-1.webp - Create:
assets/img/certificate-2.webp -
Create:
favicon.svg -
Step 1: Использовать seo-image-gen для генерации изображений
- Step 2: Commit
Task 12: Финальная полировка — refactoring-ui
- Step 1: 01-establish-visual-hierarchy — проверить иерархию на всех страницах
- Step 2: 02-apply-typography-scale — проверить типографику
- Step 3: 03-build-color-palette — сверить палитру с design-dna.json
- Step 4: 04-apply-consistent-spacing — проверить каждый отступ
- Step 5: 05-design-button-hierarchy — проверить иерархию кнопок
- Step 6: 06-eliminate-visual-clutter — убрать лишнее
- Step 7: 08-use-shadows-appropriately — проверить тени
- Step 8: 09-manage-color-contrast — проверить контраст
- Step 9: 10-group-related-elements — проверить группировку
- Step 10: Скриншот всех страниц на 3 разрешениях (375, 768, 1440)
Task 13: Финальная проверка
- Step 1:
bundle exec jekyll build— сборка без ошибок - Step 2: Скриншоты всех 10 страниц
- Step 3: Commit