Хотите узнать точную стоимость? Замерщик приедет бесплатно.
Вызвать замерщика
----------------------------------------------------------------- */
.fullentry .entry-content .inline-cta {
margin: 36px 0;
padding: 20px 24px;
background: #fff8da;
border-radius: 8px;
border-left: 4px solid #FFC709;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.fullentry .entry-content .inline-cta p {
margin: 0;
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
flex: 1 1 200px;
line-height: 1.5;
}
@media (max-width: 600px) {
.fullentry .entry-content .inline-cta { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
БЛОК ОБРАЩЕНИЯ РУКОВОДИТЕЛЯ — APPEAL BLOCK (финальная версия)
Добавить в конец main-old.css
========================================================================== */
/* --- 0. СБРОС p:nth-child(1) --- */
.about-company .company-description .appeal-title ~ p {
font-family: Roboto, Helvetica, Arial, sans-serif;
/* font-size: 15px;*/
line-height: 1.6;
color: #3d3d3d;
}
/* --- 1. CITY BADGE --- */
.about-company .appeal-city-badge {
display: inline-flex;
margin-bottom: 14px;
padding: 6px 12px;
background: #fff3cf;
color: #7a5200;
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 2px;
}
/* --- 2. ЗАГОЛОВОК ОБРАЩЕНИЯ --- */
.about-company .company-description .appeal-title {
margin: 0 0 18px !important;
margin-top: 0 !important;
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-size: 26px;
font-weight: 900;
line-height: 1.2;
color: #1b1b1b;
}
/* --- 3. СМЫСЛОВАЯ ПЛАШКА (.appeal-meaning) --- */
.about-company .appeal-meaning {
position: relative;
margin: 20px 0 !important;
padding: 16px 20px !important;
background: #fff5d7;
color: #1b1b1b;
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-size: 17px !important;
font-weight: 900 !important;
line-height: 1.45 !important;
}
.about-company .appeal-meaning::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: #9a1200;
border-radius: 2px 0 0 2px;
}
.about-company .appeal-meaning.small {
font-size: 15px !important;
}
/* --- 4. ЦИТАТА ДИРЕКТОРА --- */
.about-company .appeal-quote {
max-width: 100%;
margin: 24px 0 !important;
padding: 22px 26px !important;
border: 1px solid #e5d9b5;
border-left: none;
background: #fffaf0;
color: #1b1b1b;
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 900;
line-height: 1.3;
}
.about-company .appeal-quote::before {
content: "\201C";
display: block;
height: 28px;
color: #9a1200;
font-size: 56px;
line-height: 0.75;
margin-bottom: 10px;
}
/* --- 5. ФАКТЫ (.appeal-trust-facts) --- */
.about-company .appeal-trust-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 24px 0 8px;
}
.about-company .appeal-trust-facts div {
padding: 16px;
border: 1px solid #eaebea;
background: #fbfbfb;
}
.about-company .appeal-trust-facts strong,
.about-company .appeal-trust-facts span { display: block; }
.about-company .appeal-trust-facts strong {
margin-bottom: 6px;
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 900;
line-height: 1.1;
color: #9a1200;
}
.about-company .appeal-trust-facts span {
font-size: 13px;
color: #6e6e6e;
line-height: 1.4;
}
/* --- 6. ЗАГОЛОВОК И ПОДСКАЗКА РАЗДЕЛА --- */
.about-company .company-description .appeal-section-title {
margin: 28px 0 6px !important;
margin-top: 28px !important;
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-size: 19px;
font-weight: 900;
line-height: 1.25;
color: #1b1b1b;
}
.about-company .appeal-choice-hint {
font-size: 13px !important;
color: #888 !important;
margin: 0 0 12px !important;
}
/* ==========================================================================
7. CHOICE-GRID — карточки-фильтры с маркетинговым описанием
========================================================================== */
.about-company .appeal-choice-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 0 0 16px;
}
.about-company .appeal-choice-grid [data-group] {
padding: 14px 12px;
border: 2px solid #eaebea;
background: #ffffff;
cursor: pointer;
user-select: none;
border-radius: 2px;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
outline: none;
}
.about-company .appeal-choice-grid [data-group]:hover {
border-color: #c0c0c0;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.about-company .appeal-choice-grid [data-group]:focus-visible {
border-color: #9a1200;
box-shadow: 0 0 0 2px rgba(154,18,0,0.18);
}
.about-company .appeal-choice-grid b,
.about-company .appeal-choice-grid span { display: block; }
.about-company .appeal-choice-grid b {
margin-bottom: 7px;
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 900;
color: #1b1b1b;
line-height: 1.3;
transition: color 0.15s;
}
.about-company .appeal-choice-grid span {
font-size: 12px;
color: #6e6e6e;
line-height: 1.45;
}
/* Активная карточка */
.about-company .appeal-choice-grid [data-group].is-active {
border-color: #9a1200;
background: #fff5d7;
}
.about-company .appeal-choice-grid [data-group].is-active b {
color: #9a1200;
}
/* ==========================================================================
8. FENCE TAGS — чипы-ссылки + тултип СНИЗУ (десктоп)
Тултип — только CSS ::after + ::before.
JS не трогает десктопный hover.
title-атрибут намеренно убран — он давал нативный браузерный тултип
и создавал тройное дублирование описания.
========================================================================== */
.about-company .appeal-fence-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 4px;
/* overflow: visible — тултип выходит за пределы блока */
}
.about-company .appeal-fence-tags a {
position: relative; /* якорь для тултипа */
display: inline-block;
padding: 7px 13px;
border: 1px solid #d0d2d6;
background: #f7f7f7;
color: #3d3d3d;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
border-bottom-color: #d0d2d6 !important;
transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.18s, box-shadow 0.15s;
}
/* ---- Тултип: текстовый блок НИЖЕ тега ---- */
.about-company .appeal-fence-tags a::after {
content: attr(data-desc);
pointer-events: none;
/* Позиция: под тегом */
position: absolute;
top: calc(100% + 9px);
left: 50%;
transform: translateX(-50%);
/* Ширина: фиксированная, чтобы длинный текст не растягивался */
width: 240px;
padding: 9px 11px;
/* Цвета сайта: тёмно-серый фон, белый текст */
background: #5c6c84;
color: #ffffff;
font-size: 12px;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.5;
white-space: normal;
text-align: left;
border-radius: 3px;
/* Скрыт по умолчанию */
opacity: 0;
transition: opacity 0.15s;
z-index: 30;
}
/* ---- Стрелка вверх (от тега к тултипу) ---- */
.about-company .appeal-fence-tags a::before {
content: "";
pointer-events: none;
position: absolute;
top: calc(100% + 3px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: #5c6c84;
opacity: 0;
transition: opacity 0.15s;
z-index: 31;
}
/* Показываем при hover (только десктоп) */
.about-company .appeal-fence-tags a:hover::after,
.about-company .appeal-fence-tags a:hover::before {
opacity: 1;
}
/* ---- Базовый hover ---- */
.about-company .appeal-fence-tags a:hover {
border-color: #9a1200 !important;
background: #fff5d7;
color: #9a1200;
}
/* ---- Состояния фильтрации ---- */
.about-company .appeal-fence-tags a.is-highlighted {
border-color: #9a1200 !important;
background: #fff5d7;
color: #9a1200;
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-weight: 900;
box-shadow: 0 0 0 1px #9a1200;
}
.about-company .appeal-fence-tags a.is-dimmed {
opacity: 0.28;
/* Намеренно низкая opacity, но НЕ display:none —
ссылки остаются в DOM и индексируются краулером */
}
/* При наведении на приглушённый тег — показываем его полностью */
.about-company .appeal-fence-tags a.is-dimmed:hover {
opacity: 1;
}
/* ==========================================================================
9. ПРЕВЬЮ ДЛЯ МОБИЛЬНЫХ (.appeal-fence-preview)
Показывается JS только на touch-устройствах при первом тапе.
На десктопе display:none всегда.
========================================================================== */
.about-company .appeal-fence-preview {
display: none;
margin: 6px 0 16px;
padding: 10px 14px;
background: #5c6c84;
color: #ffffff;
font-size: 13px;
line-height: 1.5;
border-radius: 3px;
}
.about-company .appeal-fence-preview.is-visible {
display: block;
}
/* --- 10. ЗОНА ВЫЕЗДА --- */
.about-company .appeal-service-area {
margin: 20px 0;
padding: 14px 16px;
background: #f7f8fa;
border: 1px solid #e2e4e8;
border-radius: 4px;
}
.about-company .appeal-service-area__title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #5c6c84;
margin-bottom: 10px;
}
.about-company .appeal-service-area__cities {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.about-company .appeal-city-chip {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
background: #fff;
border: 1px solid #d0d3d9;
font-size: 13px;
color: #444;
line-height: 1.5;
white-space: nowrap;
}
.about-company .appeal-city-chip--main {
background: #9a1200;
border-color: #9a1200;
color: #fff;
font-weight: 600;
}
.about-company .appeal-city-chip--other {
color: #888;
border-style: dashed;
font-style: italic;
}
.about-company .appeal-service-area__note {
font-size: 12px;
color: #777;
line-height: 1.5;
}
/* --- 11. CTA-КНОПКИ --- */
.about-company .appeal-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 24px 0 20px;
align-items: center;
}
.about-company .appeal-actions .button-style {
min-height: 50px;
font-size: 15px;
white-space: nowrap;
text-decoration: none !important;
cursor: pointer;
box-shadow: 0 6px 12px -4px rgba(125,115,109,.35);
}
/* --- 12. ПОДПИСЬ ДИРЕКТОРА --- */
.about-company .appeal-signature {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid #eaebea;
font-size: 13px;
color: #6e6e6e;
line-height: 1.5;
}
.about-company .appeal-signature strong {
font-family: GothamProBlack, Roboto, Helvetica, Arial, sans-serif;
font-size: 15px;
font-weight: 900;
color: #1b1b1b;
}
/* ==========================================================================
АДАПТИВ
========================================================================== */
/* ≤ 1100px: choice-grid 2×2 */
@media (max-width: 1100px) {
.about-company .appeal-choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ≤ 900px */
@media (max-width: 900px) {
.about-company .appeal-trust-facts {
grid-template-columns: 1fr;
}
.about-company .company-description .appeal-title {
font-size: 22px;
}
.about-company .appeal-quote {
font-size: 17px;
}
}
/* ≤ 768px: отключаем CSS-тултип, включаем JS-превью через is-visible */
@media (max-width: 768px) {
/* CSS-тултип скрыт на мобильных — используется .appeal-fence-preview */
.about-company .appeal-fence-tags a::after,
.about-company .appeal-fence-tags a::before {
display: none !important;
}
.about-company .appeal-meaning {
font-size: 15px !important;
}
.about-company .appeal-service-area { padding: 12px 14px; }
.about-company .appeal-city-chip { font-size: 12px; padding: 3px 8px; }
.about-company .appeal-actions {
flex-direction: column;
align-items: stretch;
}
.about-company .appeal-actions .button-style {
width: 100%;
text-align: center;
}
}
/* ≤ 560px: choice-grid 1 col */
@media (max-width: 560px) {
.about-company .appeal-choice-grid {
grid-template-columns: 1fr;
}
.about-company .appeal-fence-tags a { font-size: 13px; padding: 6px 10px; }
.about-company .appeal-quote { font-size: 15px; padding: 16px 18px !important; }
.about-company .appeal-trust-facts strong { font-size: 18px; }
}