/* # 1. Типографика */
/* Заголовки секций — общие стили (брейкпоинты TW: sm 640 / md 768 / lg 1024 / xl 1280) */
.title {
font-family: var(--f-heading);
font-weight: 700;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 2.5rem;
}
/* h1 — крупный hero */
h1.title { font-size: 6rem; font-weight: 400; }
/* h2 — заголовок секции */
h2.title { font-size: 3rem; }
/* h3 — компактный заголовок карточки */
h3.title { font-size: 2rem; margin-bottom: 0.75rem; }
@media (max-width: 1023px) {
h1.title { font-size: 4.5rem; }
h2.title { font-size: 3rem; }
h3.title { font-size: 1.5rem; }
}
@media (max-width: 767px) {
h1.title { font-size: 3rem; }
h2.title { font-size: 2.25rem; }
h3.title { font-size: 1.25rem; }
}
/* Заголовки из HTML-полей (p/ul/li) — без класса; заголовки блоков идут через .title.
font-family задаёт тема (h1-h6 → var(--f-heading)), здесь только размеры и отступы */
h1 { font-weight: 700; font-size: 2.25rem; margin-top: 2rem; margin-bottom: 1rem; }
h2 { font-weight: 700; font-size: 1.875rem; margin-top: 2rem; margin-bottom: 0.875rem; }
h3 { font-weight: 700; font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.75rem; }
/* Текстовый контент из HTML-полей (p/ul/li) — только внутри .text-content, чтобы не задеть вёрстку (например меню в header) */
.text-content p { margin-bottom: 1rem; }
.text-content p:last-child { margin-bottom: 0; }
.text-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.text-content li { margin-bottom: 0.375rem; }
/* # 2. Элементы UI */
/* ## 2.1 Формы (input, select, textarea, checkbox) */
/* Горизонтальные ленты (крошки в хиро) прокручиваются пальцем — полоса в них лишний шум.
В Tailwind такого класса нет, это плагин, поэтому правило своё. */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
background: var(--c-light);
color: var(--c-dark);
font-size: 1rem;
line-height: 1.25;
outline: 0;
border: 1px solid color-mix(in srgb, var(--c-dark) 15%, transparent);
}
.form-input::placeholder { color: color-mix(in srgb, var(--c-dark) 50%, transparent); }
.form-input:focus { box-shadow: 0 0 0 2px var(--c-primary); }
select.form-input { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px; cursor: pointer; }
/* Нативный крестик очистки — мелкий и в цвет браузера, заменяем своим */
input[type="search"].form-input::-webkit-search-cancel-button { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; cursor: pointer; background: var(--c-dark); opacity: 0.5; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
input[type="search"].form-input::-webkit-search-cancel-button:hover { opacity: 1; }
.form-check { accent-color: var(--c-primary); flex-shrink: 0; cursor: pointer; width: 1.125rem; height: 1.125rem; }
/* Мельче text-xs — Tailwind не даёт готового пресета меньше */
.text-4xs { font-size: 0.5rem; line-height: 0.7rem; }
/* Кнопка внутри формы неактивна, пока форма невалидна (required-поля пустые) */
form:invalid .btn-cta { opacity: .5; pointer-events: none; }
/* ## 2.2 Кнопки */
/* CTA-кнопка: яркая, с shine-эффектом и объёмным border-bottom (как в hero). Размеры: --s/--m/--l */
.btn-cta {
display: inline-block;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.025em;
border-radius: 0.5rem;
color: #000;
background: var(--c-primary);
border-bottom: 4px solid color-mix(in srgb, var(--c-primary) 60%, black);
cursor: pointer;
}
.btn-cta--s { padding: 0.375rem 2.5rem; }
.btn-cta--s > span:first-child { font-size: 1rem; }
.btn-cta--s > span + span { font-size: 0.75rem; }
.btn-cta--m { padding: 0.4rem 3.5rem; }
.btn-cta--m > span:first-child { font-size: 1.4rem; }
.btn-cta--m > span + span { font-size: 0.875rem; }
.btn-cta--l { padding: 0.75rem 5rem; }
.btn-cta--l > span:first-child { font-size: 1.875rem; }
.btn-cta--l > span + span { font-size: 1rem; }
@media (max-width: 767px) {
.btn-cta--s { padding: 0.375rem 1.5rem; }
.btn-cta--m { padding: 0.4rem 2rem; }
.btn-cta--l { padding: 0.75rem 3rem; }
}
.btn-cta > span:first-child { display: block; font-family: var(--f-heading); line-height: 1; font-weight: 700; }
.btn-cta > span + span { display: block; line-height: 1; font-weight: 400; text-transform: none; opacity: .8; }
/* Неактивная CTA (управляется JS, напр. квиз до ответа) */
.btn-cta.is-disabled { opacity: .5; pointer-events: none; }
/* ## 2.3 Квиз (liga-remont/quiz.html) */
/* Кликабельные элементы квиза */
.quiz-option, .quiz-msg, .quiz-back { cursor: pointer; }
/* Полоса прогресса: бар на всю ширину, позиция — через transform. Анимация идёт на компоузере
и не дёргается, пока главный поток перестраивает DOM шага (в отличие от анимации width).
Кривая = easeOutCubic, должна совпадать с easeOut в quiz.js (счётчик процентов) */
.quiz-bar { transition: transform .45s cubic-bezier(.33, 1, .68, 1); }
/* Процент в прогресс-баре */
.quiz-progress-label { color: var(--c-dark); }
/* Финал: панель консультанта скрыта, квиз на всю ширину */
.quiz-done .quiz-aside { display: none; }
.quiz-done .quiz-main { grid-column: 1 / -1; }
/* С двух колонок карточка консультанта едет вместе со страницей до конца вопросов:
шаги квиза выше её, иначе слева остаётся пустота. Отступ сверху — под липкую навигацию. */
@media (min-width: 768px) {
.quiz-aside {
position: sticky;
top: calc(var(--row2-h) + 1rem);
align-self: start;
}
}
/* Вращение pdf-кольца в таймере финала */
.quiz-spin { animation: quiz-spin 14s linear infinite; }
@keyframes quiz-spin { to { transform: rotate(360deg); } }
/* Галочка на карточке-варианте: серая → primary при выборе */
.quiz-check { color: #d1d5db; transition: color .2s; }
.quiz-option.is-selected .quiz-check { color: var(--c-primary); }
.quiz-option.is-selected .quiz-thumb { outline: 3px solid var(--c-primary); outline-offset: -1px; }
/* Индикатор выбора: single — кружок (по умолчанию rounded-full в HTML), multiple — квадрат */
.quiz-step[data-type="multiple"] .quiz-check { border-radius: .375rem; }
.quiz-check svg { width: 1.15rem; height: 1.15rem; }
/* Вариант-«чип» (шаг без картинок) */
.quiz-chip { border: 1px solid #d1d5db; border-radius: .5rem; padding: .6rem 1.25rem; background: #fff; color: var(--c-dark); transition: border-color .2s, background .2s; }
.quiz-option.is-selected.quiz-chip { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 12%, #fff); font-weight: 600; }
@media (hover: hover) {
.quiz-option:not(.is-selected):hover .quiz-check { color: #9ca3af; }
.quiz-option:not(.is-selected).quiz-chip:hover { border-color: var(--c-primary); }
}
/* Выбор мессенджера на финале: неактивные приглушены, активный — полноцветный с обводкой */
.quiz-msg .quiz-msg-circle { transition: box-shadow .2s, opacity .2s; opacity: .55; }
.quiz-msg:hover .quiz-msg-circle { opacity: 1; }
.quiz-msg.is-selected .quiz-msg-circle { opacity: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c-primary); }
/* # 3. Эффекты */
/* Плавный скролл по якорям (кнопки «к блоку»). scrollbar-gutter: место под скроллбар
зарезервировано всегда — иначе body:has(...){overflow:hidden} в header.css
(блокировка скролла под мегаменю) убирает полосу и сдвигает контент */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
* { scrollbar-width: thin; scrollbar-color: var(--c-secondary) #fff; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #fff; }
*::-webkit-scrollbar-thumb { background: var(--c-secondary); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c-secondary) 60%, white); }
/* Диагональные движущиеся полосы (прогресс-бар квиза и т.п.) — накладываются поверх background-color */
.progress-stripes {
background-image: linear-gradient(135deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent);
background-size: 1.5rem 1.5rem;
animation: progress-stripes 1.5s linear infinite;
}
@keyframes progress-stripes { from { background-position: 0 0; } to { background-position: 1.5rem 0; } }
/* Ротация hero-note: точек столько же, сколько текстов, активная разгорается.
--i (порядковый номер) приходит из HTML, --rot задаётся классом rot-N на общем родителе */
.hero-rot { display: grid; }
.hero-rot > p { grid-area: 1 / 1; }
.hero-dot { position: relative; }
.hero-dot::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: var(--c-primary); }
.hero-rot > p, .hero-dot::after { animation: var(--rot) calc(var(--n) * 4s) infinite backwards; animation-delay: calc(var(--i) * 4s); }
.rot-2 { --rot: hero-rot-2; --n: 2; }
.rot-3 { --rot: hero-rot-3; --n: 3; }
.rot-4 { --rot: hero-rot-4; --n: 4; }
.rot-5 { --rot: hero-rot-5; --n: 5; }
@keyframes hero-rot-2 { 0% { opacity: 0 } 3%, 47% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes hero-rot-3 { 0% { opacity: 0 } 2%, 31% { opacity: 1 } 33%, 100% { opacity: 0 } }
@keyframes hero-rot-4 { 0% { opacity: 0 } 2%, 23% { opacity: 1 } 25%, 100% { opacity: 0 } }
@keyframes hero-rot-5 { 0% { opacity: 0 } 1%, 19% { opacity: 1 } 20%, 100% { opacity: 0 } }
/* Эффект перелива (shine) — переиспользуемый, для кнопок и других акцентных элементов */
.shine-effect { position: relative; overflow: hidden; }
.shine-effect::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
transform: skewX(-20deg);
animation: shine-sweep 3s ease-in-out infinite;
}
@keyframes shine-sweep {
0% { left: -75%; }
50%, 100% { left: 125%; }
}
/* Появление элементов при прокрутке в зону видимости (управляется common.js) */
.fade-in { opacity: 0; transform: translateY(-30px); transition: opacity .6s ease, transform .6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
/* Слайд-подчёркивание: по умолчанию полная ширина, на ховере сужается до 50% слева. Фон вместо ::after — рисуется отдельно под каждой строкой при переносе */
.hover-underline {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 2px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-size .3s ease;
width: fit-content;
}
.hover-underline:hover { background-size: 50% 2px; }
/* # 4. Блоки */
/* ## 4.1 Хотспот (liga-remont/house.html) */
.hotspot { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; line-height: 1; user-select: none; cursor: pointer; border: none; padding: 0; animation: pulse-ring 1.6s ease-out infinite; position: relative; }
@media (max-width: 767px) {
.hotspot { width: 16px; height: 16px; font-size: 12px; }
}
/* z-index на враппере (transform создаёт stacking context), чтобы z реально сравнивался с соседними врапперами */
.hotspot-wrap { z-index: 1; }
.hotspot-wrap:hover, .hotspot-wrap:focus-within { z-index: 2; }
.hotspot-tip { z-index: -1; opacity: 0; visibility: hidden; max-width: calc(100vw - 2rem); }
@media (max-width: 767px) {
.hotspot-tip { left: calc(50vw - var(--x) * 1vw); }
}
.hotspot-wrap:hover .hotspot-tip, .hotspot-wrap:focus-within .hotspot-tip { opacity: 1; visibility: visible; }
/* Пульсирующая обводка — переиспользуемая на любых круглых кнопках (play, hotspot и т.п.) */
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-primary) 70%, transparent); }
100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-primary) 0%, transparent); }
}
.pulse-ring { animation: pulse-ring 1.6s ease-out infinite; }