из
* index.html и initServicesShader() из index-page.js.
* См. memory (glass-shader-prices-section).
* ============================================================ */
#services {
overflow: hidden;
}
#services > .container {
position: relative;
z-index: 1;
}
.services-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.services-bg canvas {
display: block;
width: 100%;
height: 100%;
opacity: 0.12;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
/* Тёмная вуаль сверху — читаемость заголовка над белыми волнами */
.services-bg::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(130% 80% at 50% 0%, rgba(5, 7, 11, 0.62) 0%, rgba(5, 7, 11, 0.18) 42%, transparent 70%);
}
/* Матовое стекло на карточках диагностики — как у цен */
.problems-grid .problem-card {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%),
rgba(10, 14, 21, 0.38);
backdrop-filter: blur(18px) saturate(135%);
-webkit-backdrop-filter: blur(18px) saturate(135%);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow:
0 14px 44px rgba(0, 0, 0, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.problems-grid .problem-card:hover {
border-color: rgba(243, 201, 105, 0.45);
box-shadow:
0 22px 60px rgba(0, 0, 0, 0.48),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
@media (prefers-reduced-motion: reduce) {
.services-bg canvas { opacity: 0.1; }
}
/* ============================================================
* Секция «Заявка» (#request-form): вся секция = форма во всю
* ширину/высоту, матовое стекло + живой Canvas2D-фон (плазма).
* ⚠ ОТКАТ: удалить этот блок,
из
* index.html и initRequestPlasma() из index-page.js.
* См. memory (glass-shader-prices-section).
* ============================================================ */
#request-form {
position: relative;
overflow: hidden;
padding: 0; /* убираем отступы секции — форма заполняет её целиком */
}
/* Контейнер больше не ограничивает ширину — форма идёт от края до края */
#request-form > .container {
position: relative;
z-index: 1;
max-width: none;
padding: 0;
}
.request-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.request-bg canvas {
display: block;
width: 100%;
height: 100%;
opacity: 0.8;
}
/* Форма во всю секцию + матовое стекло (контент центрируется внутри) */
#request-form .form-card {
width: 100%;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(48px, 7vw, 110px) clamp(20px, 5vw, 90px);
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.10);
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(8, 11, 17, 0.34);
backdrop-filter: blur(22px) saturate(130%);
-webkit-backdrop-filter: blur(22px) saturate(130%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* Контент центрируем и держим читаемой шириной */
#request-form .form-grid {
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
/* Внутренняя панель формы — чуть более выраженное стекло */
#request-form .form {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(10, 14, 21, 0.30);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
@media (prefers-reduced-motion: reduce) {
.request-bg canvas { opacity: 0.5; }
}
/* Реальные отзывы: горизонтальная лента + прокрутка длинного текста */
.reviews-grid.reviews-scroll {
display: grid;
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(320px, calc((100% - 44px) / 3));
align-items: stretch;
gap: 22px;
margin: 0 -4px;
padding: 4px 4px 18px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding-inline: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(243, 201, 105, 0.52) rgba(255, 255, 255, 0.08);
-webkit-overflow-scrolling: touch;
}
.reviews-grid.reviews-scroll::-webkit-scrollbar,
.reviews-grid.reviews-scroll .review-text::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.reviews-grid.reviews-scroll::-webkit-scrollbar-track,
.reviews-grid.reviews-scroll .review-text::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
}
.reviews-grid.reviews-scroll::-webkit-scrollbar-thumb,
.reviews-grid.reviews-scroll .review-text::-webkit-scrollbar-thumb {
background: rgba(243, 201, 105, 0.58);
border-radius: 999px;
}
.reviews-grid.reviews-scroll .review-card {
min-height: 420px;
max-height: 520px;
display: flex;
flex-direction: column;
scroll-snap-align: start;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.reviews-grid.reviews-scroll .review-text {
max-height: 310px;
margin-bottom: 22px;
padding-right: 8px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(243, 201, 105, 0.52) rgba(255, 255, 255, 0.08);
}
.reviews-grid.reviews-scroll .review-author {
margin-top: auto;
}
/* Яндекс.Карта под галереей */
.section-map {
background:
radial-gradient(circle at 16% 20%, rgba(243, 201, 105, 0.08), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0.004));
}
.map-layout {
display: grid;
grid-template-columns: minmax(0, 760px);
justify-content: center;
gap: 24px;
align-items: stretch;
}
.map-info {
position: relative;
border-radius: 26px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: var(--bg-surface);
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.map-info {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 28px;
}
.map-info-icon {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.map-info-icon .material-icons {
color: var(--gold-primary);
}
.map-info h3 {
margin: 0 0 12px;
font-size: clamp(1.18rem, 1.5vw, 1.45rem);
line-height: 1.28;
}
.map-info p {
margin: 0;
color: var(--text-secondary);
line-height: 1.65;
}
.map-route-link {
width: fit-content;
margin-top: 22px;
}
@media (max-width: 1080px) {
.reviews-grid.reviews-scroll {
grid-auto-columns: minmax(300px, calc((100% - 22px) / 2));
}
.map-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.reviews-grid.reviews-scroll {
grid-auto-columns: minmax(280px, 88%);
}
.reviews-grid.reviews-scroll .review-card {
min-height: 390px;
max-height: 480px;
}
.reviews-grid.reviews-scroll .review-text {
max-height: 260px;
}
.map-info {
flex-direction: column;
padding: 24px;
}
.map-route-link {
width: 100%;
}
}
/* Mobile paint fallback: avoid white compositor tiles during fast scrolling. */
@media (max-width: 900px), (pointer: coarse) {
html,
body,
main,
.section {
background-color: #05070b;
}
.prices-bg,
.services-bg,
.request-bg {
display: none;
}
#prices,
#services,
#request-form,
.section-dark {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
#05070b;
}
.prices-grid .price-card,
.problems-grid .problem-card,
#request-form .form-card,
#request-form .form {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}