с тем же текстом. */
.treat-panel p {
max-width: 76ch;
margin: 0 0 9px;
color: var(--muted);
font-size: 16px;
font-weight: 500;
line-height: 1.62;
}
.treat-panel p:last-child {
margin-bottom: 0;
}
/* Ноутбук и планшет: в трёх колонках плашка сужается до ~310px, и описание перестаёт
влезать в отведённые две строки — начинает обрезаться. Поэтому уже с 1120px две
колонки: координаты --col2/--row2 из разметки. */
@media (max-width: 1120px) {
.treat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.treat-tile {
grid-column: var(--col2);
grid-row: var(--row2);
}
.treat-panel {
grid-row: var(--row2);
}
}
/* Ниже 860px даже две колонки дают плашку ~340px, и описание уже не влезает в две строки
(длинные слова вроде «грязеотталкивающая» рвут строку раньше срока). Поэтому здесь одна
колонка и АВТОразмещение: жёсткие координаты сбрасываем, и панель сама встаёт ровно под
своей плашкой — в разметке они идут парами. */
@media (max-width: 860px) {
.treat-grid {
grid-template-columns: 1fr;
}
.treat-tile,
.treat-panel {
grid-column: 1;
grid-row: auto;
}
}
.treatment-card {
padding: clamp(28px, 3vw, 40px);
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--warm-white);
box-shadow: var(--card-shadow);
}
.treatment-card h3,
.why-grid h3 {
margin-bottom: 18px;
font-size: 19px;
}
ul,
ol {
margin: 0;
padding: 0;
}
.treatment-card ul,
.info-grid ul {
display: grid;
gap: 13px;
list-style: none;
}
.treatment-card li,
.info-grid li {
position: relative;
padding-left: 24px;
color: var(--muted);
font-size: 16px;
font-weight: 500;
line-height: 1.6;
}
.treatment-card li b,
.info-grid li b {
color: var(--ink);
font-weight: 700;
}
.treatment-card li::before,
.info-grid li::before {
content: "";
position: absolute;
top: 9px;
left: 0;
width: 8px;
height: 8px;
background: var(--gold);
transform: rotate(45deg);
}
/* ============ TWO-COL (test / partners / about) ============ */
.two-col {
display: grid;
grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1fr);
gap: clamp(40px, 6vw, 88px);
align-items: start;
}
.two-col p {
margin: 18px 0 28px;
}
.test-section {
background: var(--white);
}
.test-steps {
display: grid;
gap: 0;
list-style: none;
}
.test-steps li {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
align-items: center;
gap: 20px;
padding: clamp(18px, 1.4vw, 22px) 2px;
border-bottom: 1px solid var(--line);
}
.test-steps li:first-child {
border-top: 1px solid var(--line);
}
.test-steps .step-num {
color: var(--gold);
font-family: var(--font-heading);
font-size: 34px;
font-weight: 600;
line-height: 1;
text-align: center;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
}
.test-steps .step-text {
color: var(--ink);
font-size: 17px;
font-weight: 500;
line-height: 1.5;
}
/* ============ WHY ============ */
.why {
background: var(--soft);
}
.why-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.why-grid article {
padding: clamp(28px, 2.6vw, 36px);
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--warm-white);
box-shadow: var(--card-shadow);
}
.why-grid p {
font-size: 16px;
line-height: 1.6;
}
/* ============ HOW WE WORK ============ */
.work {
background: var(--white);
display: none;
}
#work-title {
white-space: nowrap;
}
.work-steps {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
list-style: none;
}
.work-steps li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 16px;
row-gap: 18px;
padding: 4px clamp(12px, 1.1vw, 20px);
border-right: 1px solid var(--line);
}
.work-steps li:first-child {
padding-left: 0;
}
.work-steps li:last-child {
padding-right: 0;
border-right: 0;
}
.work-steps .step-num {
color: var(--gold);
font-family: var(--font-heading);
font-size: 32px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
}
.work-steps p {
grid-column: 1 / -1;
color: var(--ink);
font-size: 14px;
font-weight: 500;
line-height: 1.45;
}
/* ============ BRAND PANELS ============ */
.brand {
background: var(--soft);
}
.brand-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.brand-panel {
min-height: 410px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
padding: clamp(32px, 4vw, 56px);
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--warm-white);
box-shadow: var(--card-shadow);
}
.brand-panel::before {
content: "МАТТЕКС";
position: absolute;
top: 84px;
left: 56%;
right: auto;
white-space: nowrap;
color: rgba(167, 154, 132, 0.16);
font-family: var(--font-heading);
font-size: clamp(110px, 12vw, 180px);
font-weight: 500;
letter-spacing: 0;
transition: color 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-panel.trial::before {
content: "01";
left: auto;
right: 30px;
}
/* Фото ткани с логотипом внутри первой панели (owner, 2026-08-07). Раздел «Ткань
с логотипом» ушёл из сетки каталога, и его кадр переехал сюда — тот же приём, что
в hero: фотография под вуалью, поэтому заголовок и абзац читаются так же, как раньше
на чистом фоне. Вуаль плотнеет к низу, где стоят текст и кнопка. */
.brand-photo {
position: absolute;
inset: 0;
z-index: 0;
background-image: url("../assets/catalog/firmennaya-tkan/custom-logo-fabric.webp");
background-size: cover;
background-position: center;
}
.brand-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.86) 44%, rgba(255, 255, 255, 0.97) 100%);
}
/* На панели с фотографией водяной знак «МАТТЕКС» не нужен — его роль играет сам кадр.
Класс именно `with-photo`, а НЕ `logo`: `.logo` в этом файле — логотип в шапке, и он
жёстко задаёт `width: 218px`, из-за чего панель схлопывалась в узкую колонку. */
.brand-panel.with-photo::before {
display: none;
}
/* Текст и кнопка — над фотографией. */
.brand-panel > *:not(.brand-photo) {
position: relative;
z-index: 1;
}
.brand-panel p:not(.eyebrow) {
max-width: 580px;
margin: 18px 0 30px;
}
/* ============ CLIENTS ============ */
.clients {
background: var(--soft);
display: none;
}
.scroll-tick[data-section="work"],
.scroll-tick[data-section="clients"] {
display: none;
}
.clients-grid {
display: grid;
grid-template-columns: minmax(320px, 0.58fr) minmax(0, 1fr);
gap: clamp(34px, 5vw, 72px);
align-items: start;
}
.clients-grid p {
margin-top: 16px;
}
.client-tags {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.client-tags article {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 4px clamp(18px, 1.8vw, 30px);
border-right: 1px solid var(--line);
}
.client-tags article:first-child {
padding-left: 0;
}
.client-tags article:last-child {
padding-right: 0;
border-right: 0;
}
.client-tags h3 {
color: var(--ink);
font-size: 17px;
font-weight: 600;
line-height: 1.32;
}
.client-tags p {
color: var(--muted);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
/* ============ PARTNERS ============ */
.partners {
background: var(--white);
overflow: hidden;
}
.partners-copy {
max-width: 980px;
margin-bottom: 34px;
}
.partners-copy p:not(.eyebrow) {
max-width: 780px;
}
.partner-marquee {
position: relative;
overflow: hidden;
width: 100%;
padding: clamp(7px, 0.8vw, 12px) 0;
border: 0;
border-radius: 0;
background: var(--white);
box-shadow: none;
}
.partner-marquee::before,
.partner-marquee::after {
content: "";
position: absolute;
top: 0;
z-index: 2;
width: clamp(44px, 7vw, 112px);
height: 100%;
pointer-events: none;
}
.partner-marquee::before {
left: 0;
background: linear-gradient(90deg, var(--white) 0%, rgba(255, 255, 255, 0) 100%);
}
.partner-marquee::after {
right: 0;
background: linear-gradient(270deg, var(--white) 0%, rgba(255, 255, 255, 0) 100%);
}
/* Лента логотипов. Длину шага и время задаёт JS (main.js): он копирует набор столько раз,
чтобы лента заведомо перекрывала экран, и сдвигает ровно на ШИРИНУ ОДНОГО набора — тогда
на стыке кадр совпадает сам с собой и рывка нет. Значения ниже — запасные, на случай если
скрипт не отработал. */
.partner-marquee-track {
display: flex;
width: max-content;
animation: partnerMarquee var(--marquee-duration, 42s) linear infinite;
will-change: transform;
}
.partner-logo-set {
display: flex;
align-items: center;
gap: clamp(2px, 0.22vw, 4px);
flex: none;
padding-right: clamp(2px, 0.22vw, 4px);
}
.partner-logo-set figure {
display: grid;
place-items: center;
flex: 0 0 auto;
height: clamp(42px, 4vw, 60px);
padding: 0 clamp(2px, 0.28vw, 5px);
background: transparent;
}
.partner-logo-set img {
display: block;
width: auto;
max-width: clamp(108px, 9.2vw, 154px);
max-height: clamp(36px, 3.4vw, 52px);
object-fit: contain;
}
@keyframes partnerMarquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-1 * var(--marquee-shift, 50%)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.partner-marquee-track {
animation: none;
}
}
/* ============ PARTNER PRODUCTS ============ */
.partner-products {
background: var(--soft);
}
.partner-products .section-head {
max-width: 1120px;
}
.partner-products .section-head p:not(.eyebrow) {
max-width: 1120px;
}
.text-line-keep {
white-space: nowrap;
}
.partner-product-carousel {
margin-top: clamp(22px, 3vw, 34px);
}
.partner-product-track {
grid-auto-columns: minmax(300px, 34%);
scroll-padding-inline: 33%;
padding: 0 33%;
}
.partner-product-track img {
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
/* ============ ABOUT ============ */
.about {
background: var(--white);
}
.about-layout {
display: grid;
grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
gap: clamp(34px, 4.6vw, 64px);
align-items: center;
}
.about-founder {
margin: 0;
overflow: hidden;
width: min(100%, 460px);
justify-self: start;
}
.about-founder img {
display: block;
width: 100%;
height: auto;
}
.about-copy {
display: flex;
flex-direction: column;
justify-content: center;
max-width: none;
}
.about-copy h2 {
max-width: 980px;
margin-bottom: 34px;
font-size: clamp(31px, 2.35vw, 38px);
line-height: 1.12;
}
.about-copy .text-stack {
max-width: 960px;
}
.about-title-line {
white-space: nowrap;
}
/* These nowrap spans force a nice line break on wide desktop only. Below ~1120 the two-column
about / partner-products blocks give the text column too little room, so the nowrap line
overflows and scrolls the page sideways (seen at 1024 & 768) — release the nowrap here. */
@media (max-width: 1120px) {
.text-line-keep,
.about-title-line {
white-space: normal;
}
}
.text-stack {
display: grid;
gap: 18px;
}
.text-stack p {
margin: 0;
font-size: 18px;
}
.about-signature {
display: grid;
gap: 4px;
margin-top: 28px;
color: var(--ink);
}
.about-signature strong {
font-family: var(--font-heading);
font-size: clamp(23px, 1.9vw, 30px);
font-weight: 600;
line-height: 1.15;
}
.about-signature span {
color: var(--gold);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ============ INFO STRIP (guarantees / delivery / offers) ============ */
.info-strip {
padding: clamp(76px, 8vw, 118px) 0;
background: var(--soft);
}
.info-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 0.9fr;
gap: 20px;
}
.info-grid article {
padding: clamp(28px, 3vw, 38px);
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--warm-white);
box-shadow: var(--card-shadow);
}
.info-grid h2 {
margin-bottom: 18px;
font-size: clamp(26px, 2.1vw, 32px);
}
.info-grid p {
font-size: 16px;
}
/* ============ CONSULT ============ */
.consult {
background: var(--white);
}
.consult-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: clamp(34px, 4vw, 56px);
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--warm-white);
box-shadow: var(--card-shadow);
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease;
}
.consult-inner p:not(.eyebrow) {
margin-top: 12px;
}
/* ============ FAQ ============ */
.faq {
background: var(--soft);
}
.faq .section-head {
margin-bottom: clamp(36px, 3.4vw, 52px);
}
.faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(40px, 5vw, 84px);
align-items: start;
}
.faq-col {
display: flex;
flex-direction: column;
}
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-col .faq-item:first-child {
border-top: 1px solid var(--line);
}
.faq-item > summary {
list-style: none;
cursor: var(--cur-hand), pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: clamp(18px, 1.4vw, 22px) 2px;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
line-height: 1.45;
letter-spacing: 0.01em;
color: var(--ink);
transition: color 160ms ease;
}
.faq-item > summary::-webkit-details-marker {
display: none;
}
.faq-item > summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
margin-right: 3px;
border-right: 2px solid var(--gold);
border-bottom: 2px solid var(--gold);
transform: translateY(-2px) rotate(45deg);
transition: transform 220ms ease;
}
.faq-item[open] > summary::after {
transform: translateY(2px) rotate(-135deg);
}
.faq-item > summary:hover,
.faq-item[open] > summary {
color: var(--gold);
}
.faq-answer {
padding: 0 56px clamp(20px, 1.5vw, 24px) 2px;
}
.faq-answer p {
margin: 0;
font-size: 16px;
line-height: 1.62;
color: var(--muted);
}
/* ============ LEGAL PAGE ============ */
.legal-page main {
background:
linear-gradient(180deg, var(--white) 0%, var(--soft) 100%);
}
.legal-hero {
padding: clamp(104px, 10vw, 136px) 0 clamp(30px, 4vw, 48px);
background:
linear-gradient(135deg, rgba(53, 80, 107, 0.10), rgba(130, 117, 93, 0.08)),
var(--white);
border-bottom: 1px solid var(--line-soft);
}
.legal-hero-inner {
max-width: 1040px;
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 28px;
color: var(--muted);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.breadcrumbs a {
color: var(--wine);
transition: color 180ms ease;
}
.breadcrumbs a:hover {
color: var(--wine-dark);
}
.breadcrumbs span[aria-hidden="true"] {
color: var(--gold);
}
.legal-hero h1 {
max-width: 980px;
margin: 0;
font-family: var(--font-heading);
font-size: clamp(30px, 2.55vw, 42px);
font-weight: 600;
line-height: 1.15;
color: var(--ink);
}
.legal-date {
margin: 18px 0 0;
color: var(--muted);
font-size: 18px;
}
.legal-section {
padding: clamp(38px, 5vw, 68px) 0 clamp(72px, 8vw, 120px);
}
.legal-layout {
display: block;
max-width: 1040px;
}
.legal-content {
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.legal-content section + section {
margin-top: 28px;
padding-top: 0;
border-top: 0;
}
.legal-content h2 {
margin: 0 0 14px;
font-family: var(--font-body);
font-size: clamp(20px, 1.35vw, 24px);
font-weight: 700;
line-height: 1.34;
color: var(--ink);
}
.legal-content p,
.legal-content li {
color: var(--muted);
font-size: clamp(17px, 1.12vw, 19px);
line-height: 1.7;
}
.legal-content p {
margin: 0 0 14px;
}
.legal-content p:last-child {
margin-bottom: 0;
}
.legal-content ul {
display: grid;
gap: 8px;
margin: 16px 0 20px;
padding-left: 22px;
}
.legal-content li::marker {
color: var(--gold);
}
.legal-content b {
color: var(--ink);
font-weight: 700;
}
.legal-content a {
color: var(--wine);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-home-row {
width: min(100%, 720px);
margin-top: clamp(34px, 5vw, 62px);
}
/* ============ 404 ERROR PAGE (same design as legal pages, centered) ============ */
.error-hero {
padding: clamp(120px, 15vw, 210px) 0 clamp(96px, 12vw, 170px);
text-align: center;
}
.error-inner {
max-width: 820px;
margin: 0 auto;
display: grid;
justify-items: center;
}
.error-eyebrow {
margin: 0 0 18px;
color: var(--gold);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Это H1 страницы 404 — поэтому вес и семейство задаём явно, чтобы браузерный
дефолт заголовка не сделал строку жирной и не сбил ритм блока. */
.error-lead {
margin: 0;
color: var(--muted);
font-family: var(--font-body);
font-size: clamp(20px, 2.1vw, 30px);
font-weight: 500;
line-height: 1.3;
}
.error-code {
margin: clamp(4px, 1vw, 12px) 0 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: clamp(128px, 24vw, 320px);
line-height: 0.92;
letter-spacing: 0.01em;
background: linear-gradient(135deg, var(--wine), var(--gold));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--wine);
}
/* Пояснение под заголовком страницы /thankyou/ — она собрана на той же вёрстке, что и 404. */
.thankyou-note {
max-width: 620px;
margin: 18px 0 0;
color: var(--muted);
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.6;
}
.error-home-row {
margin-top: clamp(30px, 4vw, 50px);
}
/* ============ SUB-PAGES (contacts / about / deals / delivery / fabric-logo / catalog) ============ */
/* Breadcrumb bar that clears the fixed header on pages that reuse a main-page section as-is. */
.subpage-crumbs {
padding-top: clamp(104px, 10vw, 132px);
}
.subpage-crumbs .breadcrumbs {
margin-bottom: 0;
}
.subpage-crumbs + section {
padding-top: clamp(24px, 3.4vw, 40px);
}
/* Contacts page — standalone contacts block + large language-aware map. */
.contacts-standalone {
display: grid;
gap: 14px;
max-width: 640px;
}
.contacts-standalone p,
.contacts-standalone a {
color: var(--muted);
font-size: clamp(17px, 1.12vw, 19px);
font-weight: 500;
line-height: 1.6;
transition: color 180ms ease;
}
.contacts-standalone b { color: var(--ink); }
.contacts-standalone a:hover { color: var(--wine); }
.contacts-standalone .footer-messengers { margin-top: 10px; }
.contacts-map-band {
margin-top: clamp(34px, 4.5vw, 56px);
}
.contacts-map {
position: relative;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid var(--card-border);
background: var(--soft);
box-shadow: var(--card-shadow);
min-height: clamp(380px, 48vw, 580px);
}
.contacts-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Language-aware map: Yandex for RU, Google Maps for KK / EN. is set by i18n.js. */
html[lang="ru"] .contacts-map--google { display: none; }
html[lang="kk"] .contacts-map--yandex,
html[lang="en"] .contacts-map--yandex { display: none; }
/* Deals + fabric-logo — text + image two-column (mirrors the About grid rhythm). */
.media-copy-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
gap: clamp(34px, 4.6vw, 64px);
align-items: center;
}
.media-copy-copy > * { margin: 0; }
.media-copy-copy .lead-strong {
font-size: clamp(21px, 1.7vw, 27px);
line-height: 1.35;
color: var(--ink);
font-weight: 600;
font-family: var(--font-heading);
}
.media-copy-copy p:not(.lead-strong) {
margin-top: 22px;
color: var(--muted);
font-size: clamp(17px, 1.12vw, 19px);
line-height: 1.7;
}
.media-figure {
margin: 0;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid var(--card-border);
box-shadow: var(--card-shadow);
justify-self: end;
width: min(100%, 460px);
}
.media-figure img {
display: block;
width: 100%;
height: auto;
}
/* Square-cropped image (portrait source → crop top & bottom, keep the centre). */
.media-figure.is-square { aspect-ratio: 1 / 1; }
.media-figure.is-square img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.fabric-logo-layout {
grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
align-items: center;
}
.fabric-logo-layout .media-figure {
justify-self: start;
width: min(100%, 430px);
}
.fabric-logo-layout .media-copy-copy {
max-width: 820px;
}
.fabric-logo-layout .media-copy-copy p:not(.lead-strong) {
margin-top: 0;
}
.fabric-logo-bullets {
display: grid;
gap: 10px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.fabric-logo-bullets li {
position: relative;
padding-left: 22px;
color: var(--muted);
font-size: clamp(16px, 1vw, 18px);
line-height: 1.55;
}
.fabric-logo-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 8px;
height: 8px;
background: var(--gold);
transform: rotate(45deg);
}
.fabric-logo-cta {
width: fit-content;
margin-top: clamp(22px, 2.4vw, 34px);
}
@media (max-width: 900px) {
.media-copy-layout { grid-template-columns: 1fr; }
.media-figure { justify-self: start; order: -1; }
.fabric-logo-layout .media-figure { width: min(100%, 430px); }
.contacts-map { min-height: clamp(300px, 70vw, 460px); }
}
/* ============ CATALOG DETAIL PAGES ============ */
.catalog-page main {
background:
linear-gradient(180deg, var(--white) 0%, var(--soft) 100%);
}
.catalog-hero {
position: relative;
overflow: hidden;
min-height: clamp(150px, 16vw, 205px);
display: grid;
align-items: center;
padding: clamp(30px, 3.6vw, 44px) 0;
background: var(--white);
border-bottom: 1px solid var(--line-soft);
}
.catalog-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.catalog-hero-bg::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(236, 244, 249, 0.94) 0%, rgba(230, 240, 247, 0.76) 42%, rgba(218, 232, 241, 0.32) 100%),
linear-gradient(180deg, rgba(53, 80, 107, 0.12), rgba(92, 122, 153, 0.16));
}
.catalog-hero.menu-hero .catalog-hero-bg::after {
background:
linear-gradient(90deg, rgba(250, 244, 234, 0.95) 0%, rgba(245, 235, 219, 0.78) 44%, rgba(232, 214, 190, 0.34) 100%),
linear-gradient(180deg, rgba(184, 153, 111, 0.12), rgba(126, 82, 58, 0.08));
}
/* Фотография в шапке подстраницы ведёт себя как фон hero-блока на главной: тот же
минимальный запас масштаба (чтобы сдвиг не оголял края) и то же сглаживание движения. */
.catalog-hero-bg img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
filter: saturate(0.86) contrast(0.96);
transform: scale(1.04);
transform-origin: center;
transition: transform 0.3s ease-out;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.catalog-hero-bg img {
transform: none;
transition: none;
}
}
.catalog-hero-inner {
position: relative;
z-index: 1;
max-width: none;
}
.catalog-hero h1 {
margin: 0;
font-family: "Playfair", "Playfair Display", "Times New Roman", serif;
font-size: clamp(38px, 3.05vw, 52px);
font-weight: 600;
line-height: 1.14;
color: var(--ink);
}
.catalog-detail-section {
padding: clamp(30px, 4vw, 56px) 0 clamp(72px, 8vw, 118px);
}
.catalog-detail-layout {
max-width: none;
}
.catalog-detail-intro {
max-width: 920px;
margin-bottom: clamp(24px, 3.4vw, 42px);
}
.catalog-detail-intro h2 {
margin: 0;
max-width: 980px;
font-family: var(--font-heading);
font-size: clamp(22px, 1.55vw, 28px);
font-weight: 500;
line-height: 1.18;
color: var(--ink);
}
.catalog-detail-intro p {
margin: 18px 0 0;
max-width: 780px;
color: var(--muted);
font-size: clamp(17px, 1.12vw, 19px);
line-height: 1.7;
}
.product-feature-grid {
display: grid;
gap: 0;
border-top: 1px solid var(--line);
}
.product-feature {
display: grid;
grid-template-columns: minmax(0, 390px) minmax(320px, 520px);
gap: clamp(46px, 6vw, 82px);
align-items: start;
min-height: 300px;
padding: clamp(30px, 3.7vw, 48px) 0;
border-bottom: 1px solid var(--line);
background: transparent;
box-shadow: none;
}
.product-feature figure {
margin: 0;
display: flex;
width: 390px;
max-width: 100%;
aspect-ratio: 4 / 3;
justify-self: start;
align-self: start;
align-items: center;
justify-content: center;
overflow: visible;
border-radius: 0;
background: transparent;
}
.product-feature--text figure {
overflow: hidden;
}
.product-feature--no-image {
grid-template-columns: minmax(0, 760px);
}
.product-feature img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transition: none;
}
.product-feature--text img {
object-fit: cover;
object-position: center;
}
/* ЗДЕСЬ БЫЛО `.product-feature:hover img { transform: none }` — и это ломало 3D.
Правило специфичнее (0,2,1), чем `.tilt3d img` (0,1,1), поэтому в момент, когда курсор
заходил в блок, оно ОБНУЛЯЛО трансформацию картинки: та мгновенно теряла и наклон, и
запас масштаба (12%) — визуально это выглядело как резкий скачок и «3D нет вообще»
(owner). Правило удалено; за поведение картинки при наведении отвечает только
механизм 3D-рамок в main.js. Если когда-нибудь понадобится отключить эффект у этих
картинок — снимайте селектор из FRAMES в main.js, а не гасите transform в CSS. */
.product-feature-copy h3 {
margin: 0 0 16px;
color: var(--gold);
font-size: clamp(20px, 1.65vw, 28px);
font-weight: 700;
line-height: 1.18;
}
.product-feature-copy h2,
.catalog-text-block h2,
.catalog-section-head h2 {
margin: 0 0 16px;
color: var(--gold);
font-size: clamp(20px, 1.65vw, 28px);
font-weight: 700;
line-height: 1.18;
}
.product-feature-copy p {
margin: 0 0 8px;
color: var(--ink);
font-size: 16px;
line-height: 1.5;
}
.product-feature-copy dl {
display: grid;
gap: 9px;
margin: 22px 0 0;
}
.product-feature-copy dl div {
display: grid;
grid-template-columns: 104px minmax(0, 1fr);
gap: 14px;
align-items: baseline;
}
.product-feature-copy dt {
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.product-feature-copy dd {
margin: 0;
color: var(--ink);
font-size: 16px;
font-weight: 600;
line-height: 1.45;
}
.catalog-bullet-list {
display: grid;
gap: 10px;
margin: 20px 0 0;
padding: 0;
list-style: none;
color: var(--ink);
}
.catalog-bullet-list li {
position: relative;
padding-left: 24px;
color: var(--ink);
font-size: 16px;
font-weight: 600;
line-height: 1.55;
}
.catalog-bullet-list li::before {
content: "";
position: absolute;
top: 0.72em;
left: 2px;
width: 8px;
height: 8px;
background: var(--gold);
transform: rotate(45deg);
}
.catalog-detail-intro .catalog-bullet-list {
max-width: 760px;
}
.catalog-text-block {
max-width: 980px;
padding: clamp(30px, 4vw, 48px) 0;
border-bottom: 1px solid var(--line);
}
.catalog-text-block:first-of-type {
border-top: 1px solid var(--line);
}
.catalog-text-block p {
margin: 0 0 14px;
color: var(--muted);
font-size: clamp(17px, 1.12vw, 19px);
line-height: 1.7;
}
.catalog-gallery-section {
margin-top: clamp(34px, 5vw, 62px);
}
.catalog-section-head {
max-width: 980px;
margin-bottom: 22px;
}
.catalog-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(22px, 3vw, 34px);
}
/* Никакой линии под фотографией: owner попросил убрать «подчёркивание» из-под картинок. */
.catalog-gallery-grid figure {
margin: 0;
}
.catalog-gallery-grid--wide figure {
padding-bottom: 0;
border-bottom: 0;
}
.catalog-gallery-grid img {
width: 100%;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.catalog-gallery-grid--wide {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.catalog-gallery-grid--wide img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Визуализации готовых решений — картинки С НАДПИСЯМИ, поэтому 3D-эффекта у них нет:
он работает через запас масштаба и срезал бы текст (owner). Вместо него — тот же ховер,
что у карточек каталога на главной: кадр мягко приподнимается, появляется окантовка
и тень. Значения скопированы из .fabric-card:hover, чтобы ощущение было одинаковым. */
.catalog-gallery-grid--wide figure {
overflow: hidden;
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--warm-white);
box-shadow: var(--card-shadow);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.catalog-gallery-grid--wide figure:hover {
transform: translateY(-4px);
border-color: rgba(167, 154, 132, 0.42);
box-shadow: var(--glass-edge), 0 22px 52px rgba(40, 38, 34, 0.16);
}
@media (prefers-reduced-motion: reduce) {
.catalog-gallery-grid--wide figure {
transition: none;
}
.catalog-gallery-grid--wide figure:hover {
transform: none;
}
}
.catalog-gallery-grid--contain img {
aspect-ratio: auto;
object-fit: contain;
}
/* Портретные фотографии тканей: все ячейки одной высоты, кадр заполняется целиком —
поэтому белых полей по краям не бывает даже у снимков с другим соотношением. */
.catalog-gallery-grid--portrait img {
aspect-ratio: 3 / 4;
object-fit: cover;
}
.catalog-note {
margin: clamp(38px, 5vw, 68px) 0 clamp(28px, 4vw, 48px);
max-width: 980px;
}
.catalog-note p {
margin: 0;
color: var(--muted);
font-size: clamp(17px, 1.12vw, 19px);
line-height: 1.7;
}
.product-carousel-section {
margin-top: clamp(28px, 4vw, 52px);
}
.product-carousel {
position: relative;
overflow: hidden;
}
.product-feature-copy {
width: min(100%, 520px);
justify-self: start;
align-self: start;
}
.carousel-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(520px, 54%);
gap: clamp(18px, 2.4vw, 32px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 23%;
scroll-behavior: smooth;
padding: 0 23%;
background: transparent;
scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar {
display: none;
}
/* Притушенные боковые кадры — только в каруселях каталога. Партнёрская карусель на главной
(.partner-product-track) показывает ВСЕ фото в полную силу, как центральное (user, 2026-07-29). */
.carousel-track:not(.partner-product-track) figure {
margin: 0;
scroll-snap-align: center;
opacity: 0.34;
transition: opacity 220ms ease;
}
.partner-product-track figure {
margin: 0;
scroll-snap-align: center;
}
.carousel-track:not(.partner-product-track) figure.is-active {
opacity: 1;
}
.carousel-track img {
width: 100%;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.carousel-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
margin-top: 18px;
}
.carousel-dots button {
width: 11px;
height: 11px;
padding: 0;
border: 1px solid rgba(53, 80, 107, 0.38);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.carousel-dots button:hover {
transform: scale(1.18);
border-color: var(--wine);
}
.carousel-dots button.is-active {
background: var(--wine);
border-color: var(--wine);
}
.carousel-control {
position: absolute;
top: 50%;
z-index: 2;
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--card-border);
border-radius: 50%;
background: rgba(255, 255, 255, 0.82);
color: var(--wine);
box-shadow: 0 14px 32px rgba(40, 38, 34, 0.14);
cursor: pointer;
transform: translateY(-50%);
transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.carousel-prev {
left: 18px;
}
.carousel-next {
right: 18px;
}
.carousel-control:hover {
background: var(--wine);
color: #fff8ed;
transform: translateY(-50%) scale(1.04);
}
.carousel-control svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.catalog-cta-row {
display: flex;
justify-content: center;
margin-top: clamp(34px, 5vw, 62px);
}
.catalog-cta-row .button {
min-width: min(100%, 280px);
}
@media (max-width: 1120px) {
.product-feature,
.product-feature:nth-child(even) {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}
/* Single column: the image figure must be fluid, not a fixed 390px — a fixed width sets the
grid track's min-content to 390 and pushes the card past narrow phones (horizontal cut-off). */
.product-feature figure {
width: 100%;
}
}
/* ============ FOOTER ============ */
.site-footer {
padding: 76px 0 30px;
background: var(--soft-2);
color: var(--ink);
}
.footer-grid {
display: grid;
/* Колонки и gap совпадают с .lead-section-layout, поэтому правая колонка (карта) выходит
ровно той же ширины, что и кнопка «Оставить заявку» (она на всю ширину той сетки). */
grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1fr);
gap: clamp(36px, 6vw, 86px);
padding-top: 44px;
border-top: 1px solid var(--line);
}
.footer-logo {
width: 218px;
margin-bottom: 26px;
}
/* Theme-swapped footer logo — show EXACTLY ONE (both were rendering → logo appeared twice).
Light theme → light-top logo; dark theme → white-top logo (matteks-logo-white.png). */
.footer-logo.logo-dark { display: none; }
[data-theme="dark"] .footer-logo.logo-light { display: none; }
[data-theme="dark"] .footer-logo.logo-dark { display: block; }
.footer-map {
align-self: stretch;
position: relative;
min-height: 360px;
transition: grid-column 220ms ease, min-height 220ms ease;
}
.footer-map.is-expanded {
grid-column: 1 / -1;
min-height: min(62vh, 620px);
}
.map-expand {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--card-border);
background: rgba(255, 255, 255, 0.78);
color: var(--wine);
cursor: pointer;
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.map-expand:hover {
transform: translateY(-2px);
border-color: rgba(53, 80, 107, 0.42);
background: var(--wine);
color: #fff8ed;
}
.map-expand svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-frame {
position: relative;
overflow: hidden;
height: 100%;
min-height: 360px;
background: var(--soft);
}
.footer-map.is-expanded .map-frame {
min-height: inherit;
}
.map-fallback {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.82) contrast(0.94);
}
.map-frame iframe {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
min-height: inherit;
display: block;
border: 0;
background: transparent;
}
.footer-form .footer-question textarea {
height: 52px;
min-height: 52px;
padding: 14px 16px;
line-height: 1.4;
resize: none;
overflow: hidden;
}
.footer-form .consent {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 10px;
color: var(--muted);
font-size: 15px;
}
.footer-form .consent span {
text-transform: none;
letter-spacing: 0;
font-size: 12px;
font-weight: 500;
}
.footer-form .consent a {
color: #8a817a;
text-decoration: underline;
text-underline-offset: 2px;
}
.footer-form .consent a:hover {
color: var(--wine);
}
.footer-form .consent input {
width: 18px;
height: 18px;
min-height: 18px;
margin: 0;
accent-color: var(--wine);
}
.footer-form .consent input:focus,
.footer-form .consent input:focus-visible {
box-shadow: none;
border-color: var(--card-border);
outline: 2px solid rgba(53, 80, 107, 0.45);
outline-offset: 2px;
}
.footer-form button {
grid-column: 1 / -1;
}
/* Ответ формы после нажатия «Оставить заявку»: «Отправляем…», подтверждение или причина
отказа. Пустой элемент не занимает места, поэтому вёрстка блока не дёргается. */
.footer-form .form-status {
grid-column: 1 / -1;
margin: 0;
font-size: 14px;
line-height: 1.45;
font-weight: 500;
color: var(--muted);
}
.footer-form .form-status:empty {
display: none;
}
.footer-form .form-status[data-state="success"] {
color: var(--wine);
font-weight: 600;
}
.footer-form .form-status[data-state="error"] {
color: #a4362f;
}
[data-theme="dark"] .footer-form .form-status[data-state="success"] { color: #9dc0e2; }
[data-theme="dark"] .footer-form .form-status[data-state="error"] { color: #e79b94; }
.lead-section {
padding: clamp(62px, 7vw, 104px) 0;
background: var(--white);
border-top: 1px solid var(--line-soft);
}
.lead-section-layout {
display: grid;
grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1fr);
gap: clamp(36px, 6vw, 86px);
align-items: start;
}
.lead-section-copy {
max-width: 620px;
}
.lead-section-copy h2 {
max-width: 620px;
}
.lead-section-copy p:not(.eyebrow) {
max-width: 560px;
margin: 18px 0 0;
color: var(--muted);
font-size: 18px;
}
.lead-section-side {
display: grid;
gap: 22px;
}
.lead-section-form {
max-width: none;
}
.legal-home-button {
min-height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 30px;
border: 1px solid transparent;
border-radius: var(--radius);
background: var(--wine);
box-shadow: var(--glass-edge-btn), 0 14px 34px rgba(53, 80, 107, 0.22);
color: #fff8ed;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.25;
text-align: center;
text-transform: uppercase;
transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.legal-home-button:hover {
transform: translateY(-2px);
background: var(--wine-dark);
box-shadow: var(--glass-edge-btn), 0 20px 42px rgba(53, 80, 107, 0.28);
}
.footer-contacts {
display: grid;
align-content: start;
gap: 16px;
}
.footer-contacts h2,
.footer-contacts h3 {
font-size: 18px;
}
.footer-contacts p,
.footer-contacts a {
color: var(--muted);
font-size: 16px;
font-weight: 500;
transition: color 180ms ease;
}
.footer-contacts b {
color: var(--ink);
}
.footer-messengers {
display: grid;
gap: 10px;
margin-top: 2px;
}
.footer-messengers > span {
color: var(--ink);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.messenger-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.footer-contacts .messenger-link {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 42px;
padding: 0 14px;
border: 1px solid var(--card-border);
border-radius: var(--radius);
background: var(--warm-white);
color: var(--wine);
box-shadow: 0 10px 24px rgba(40, 38, 34, 0.08);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
text-transform: uppercase;
transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.footer-contacts .messenger-link svg {
width: 18px;
height: 18px;
flex: none;
}
.footer-contacts .messenger-link--telegram svg {
width: 17px;
height: 17px;
}
/* Знак WhatsApp плотнее остальных — чуть уменьшаем, чтобы в ряду он не выглядел крупнее. */
.footer-contacts .messenger-link--whatsapp svg {
width: 17px;
height: 17px;
}
.footer-contacts .messenger-link:hover {
transform: translateY(-2px);
border-color: rgba(53, 80, 107, 0.42);
background: var(--wine);
color: #fff8ed;
box-shadow: var(--glass-edge-btn), 0 18px 34px rgba(53, 80, 107, 0.20);
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
margin-top: 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.footer-nav a:hover,
.footer-contacts a:hover,
.footer-bottom a:hover {
color: var(--wine);
}
.footer-bottom {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 12px 24px;
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid var(--line);
color: #6e655f;
font-size: 13px;
}
.footer-legal {
max-width: 640px;
color: var(--muted);
font-size: 13px;
line-height: 1.65;
}
.footer-links {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px 22px;
}
.footer-bottom a {
font-size: 13px;
font-weight: 600;
color: #8a817a;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ============ RESPONSIVE (kept; full adaptive pass is a later stage) ============ */
/* ============ SCROLL-IN ANIMATIONS (заимствованный приём) ============ */
/* Якорные секции не прячутся под липким хедером при переходе по навигации/снапе.
Единый отступ 86px для всех целей-якорей (совпадает с .section-anchor и scroll-padding-top). */
section[id] {
scroll-margin-top: 86px;
}
/* Reveal — через @keyframes-АНИМАЦИЮ, а не transition: так собственный
transition элементов (hover-подъём карточек/кнопок) остаётся нетронутым
и плавным. Задержка стаггера — через --rev-delay (только на анимацию). */
html.anim-ready .reveal {
opacity: 0;
}
html.anim-ready .reveal.is-visible {
animation: revealUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--rev-delay, 0ms) both;
}
/* Хедер появляется сверху (лого/меню/переключатели). */
html.anim-ready .reveal-down.is-visible {
animation-name: revealDown;
}
@keyframes revealUp {
from { opacity: 0; translate: 0 34px; scale: 0.99; }
to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes revealDown {
from { opacity: 0; translate: 0 -16px; }
to { opacity: 1; translate: 0 0; }
}
/* Иконки внутри появляющихся блоков мягко «вырастают» следом. */
html.anim-ready .reveal .line-icon,
html.anim-ready .reveal .card-icon {
opacity: 0;
scale: 0.5;
transition: opacity 0.5s ease 0.18s,
scale 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.18s;
}
html.anim-ready .reveal.is-visible .line-icon,
html.anim-ready .reveal.is-visible .card-icon {
opacity: 1;
scale: 1;
}
/* Мягкий акцент по завершении счётчика фактоида */
html.anim-ready .stats-grid strong.count-done {
animation: factCountDone 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes factCountDone {
0% { transform: scale(1); }
45% { transform: scale(1.07); color: var(--gold); }
100% { transform: scale(1); color: var(--wine); }
}
/* --- Hero: появление как на PalantirDent — плавный подъём с лёгким флипом (целыми элементами, без по-словной разбивки) --- */
html.anim-ready .hero-copy { perspective: 1000px; }
html.anim-ready .hero-grid { perspective: 1200px; }
html.anim-ready .hero-copy > .eyebrow,
html.anim-ready .hero-lead,
html.anim-ready .hero-bullets li,
html.anim-ready .hero-actions {
opacity: 0;
transform: translate3d(0, 28px, 0) rotateX(8deg);
transform-origin: left bottom;
}
html.anim-ready .hero-media {
opacity: 0;
transform: translate3d(34px, 18px, 0) scale(0.97) rotateY(-5deg);
transform-origin: right center;
}
html.anim-ready body.hero-in .hero-copy > .eyebrow,
html.anim-ready body.hero-in .hero-lead,
html.anim-ready body.hero-in .hero-bullets li,
html.anim-ready body.hero-in .hero-actions,
html.anim-ready body.hero-in .hero-media {
opacity: 1;
transform: none;
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html.anim-ready body.hero-in .hero-copy > .eyebrow { transition-delay: 0.2s; }
html.anim-ready body.hero-in .hero-lead { transition-delay: 0.92s; }
html.anim-ready body.hero-in .hero-bullets li { transition-delay: calc(1.16s + var(--hero-i, 0) * 120ms); }
html.anim-ready body.hero-in .hero-actions { transition-delay: 1.5s; }
html.anim-ready body.hero-in .hero-media { transition-delay: 0.36s; }
/* H1 — появление по словам (как PalantirDent). Слова статичны в HTML → раскладка стабильна, без сдвига */
html.anim-ready #hero-title { perspective: 900px; }
html.anim-ready #hero-title .tw-word {
display: inline-block;
opacity: 0;
transform: translate3d(0, 0.72em, 0) rotateX(28deg) rotateY(-4deg);
transform-origin: left bottom;
clip-path: inset(0 0 100% 0);
}
html.anim-ready body.hero-in #hero-title .tw-word {
animation: heroWordIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(0.4s + var(--word-i) * 42ms);
}
@keyframes heroWordIn {
0% {
opacity: 0;
transform: translate3d(0, 0.72em, 0) rotateX(28deg) rotateY(-4deg);
clip-path: inset(0 0 100% 0);
}
100% {
opacity: 1;
transform: none;
clip-path: inset(0 0 0 0);
}
}
/* --- CTA: мягкое градиентное переливание через ~5с (яркость в пределах вина, без сдвига тона) --- */
.button-primary,
.button-secondary {
position: relative;
isolation: isolate;
}
.button-primary::before,
.button-secondary::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(110deg, transparent 30%, rgba(255, 236, 216, 0.34) 50%, transparent 70%);
background-size: 220% 100%;
background-position: 0% 50%;
opacity: 0;
pointer-events: none;
}
/* Плавное непрерывное переливание-сияние: появляется через ~5с
(класс вешает JS) и мягко продолжает двигаться туда-обратно. */
html.anim-ready .button-primary.cta-attention::before,
html.anim-ready .button-secondary.cta-attention::before {
opacity: 1;
animation: btnSheen 3.6s ease-in-out infinite alternate;
}
@keyframes btnSheen {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
html.anim-ready .button-primary.cta-attention::before,
html.anim-ready .button-secondary.cta-attention::before { animation: none; opacity: 0; }
}
/* ============ ЕДИНЫЙ HOVER ДЛЯ ВСЕХ БЛОКОВ ============ */
/* Карточные блоки: подъём + усиленная тень */
.treatment-card,
.why-grid article,
.info-grid article,
.brand-panel {
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 240ms ease, border-color 240ms ease;
}
.treatment-card:hover,
.why-grid article:hover,
.info-grid article:hover,
.brand-panel:hover {
transform: translateY(-5px);
box-shadow: 0 24px 54px rgba(40, 38, 34, 0.18);
/* бордер не трогаем — он уже хорошо выглядит */
}
.treatment-card:hover,
.why-grid article:hover,
.info-grid article:hover,
.brand-panel:hover,
.consult-inner:hover {
border-color: rgba(167, 154, 132, 0.38);
}
.consult-inner:hover {
transform: translateY(-4px);
box-shadow: 0 24px 54px rgba(40, 38, 34, 0.16);
}
.brand-panel:hover::before {
color: rgba(167, 154, 132, 0.23);
transform: translateX(-8px);
}
/* Линейные блоки: лёгкий подъём */
.benefit-card,
.client-tags article,
.work-steps li,
.test-steps li {
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), background-color 240ms ease;
}
.benefit-card:hover,
.client-tags article:hover,
.work-steps li:hover,
.test-steps li:hover {
transform: translateY(-3px);
background: linear-gradient(180deg, rgba(167, 154, 132, 0.045), rgba(167, 154, 132, 0));
}
/* Иконки и короткие тексты получают общий тонкий отклик от родительского hover. */
.ic,
.card-icon,
.line-icon,
.client-icon,
.work-steps .step-icon,
.stats-grid strong,
.stats-grid span,
.treatment-card h3,
.why-grid h3,
.info-grid h2,
.benefit-card h3,
.client-tags h3,
.work-steps .step-num,
.test-steps .step-num {
transition: color 220ms ease, background-color 220ms ease, text-shadow 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-bullets li,
.stats-grid div {
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-bullets li:hover {
transform: translateX(4px);
}
/* Наведение на карточку/контейнер меняет ТОЛЬКО саму карточку (бордер/тень/подъём).
Внутренние иконки, заголовки и тексты реагируют лишь на СВОЙ прямой hover (ниже). */
.stats-grid div:hover {
transform: translateY(-2px);
}
/* Фактоид при наведении не только приподнимается: цифра слегка вырастает и перекрашивается
в контрастный цвет (owner). В светлой теме — тёмно-медный, как у иконок; в тёмной — белый,
вместо денимового. Точка масштаба слева, чтобы цифры не «уезжали» из своей колонки. */
.stats-grid strong,
.stats-grid span {
transform-origin: left center;
transition:
color 220ms ease,
text-shadow 220ms ease,
transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.stats-grid div:hover strong {
color: #8a5a35;
transform: scale(1.07);
text-shadow: 0 4px 12px rgba(110, 66, 34, 0.30);
}
.stats-grid div:hover span {
color: #8a5a35;
}
@media (prefers-reduced-motion: reduce) {
.stats-grid strong,
.stats-grid span {
transition: color 220ms ease;
}
.stats-grid div:hover strong {
transform: none;
}
}
/* Тексты и отдельные иконки: второй, более точный уровень hover.
Работает только на устройствах с точным курсором, чтобы touch-экраны не получали лишние состояния. */
@media (hover: hover) and (pointer: fine) {
.eyebrow,
.hero-lead,
.hero-bullets li span,
.fabric-card p,
.section-head p:not(.eyebrow),
.quote-layout p:not(.eyebrow),
.benefit-card p,
.treatment-card li,
.info-grid li,
.test-steps .step-text,
.why-grid p,
.work-steps p,
.brand-panel p:not(.eyebrow),
.client-tags p,
.text-stack p,
.info-grid p,
.consult-inner p:not(.eyebrow),
.faq-answer p,
.footer-form span,
.footer-contacts p,
.footer-bottom span,
h1,
h2,
h3 {
transition: color 220ms ease, text-shadow 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ic,
.card-icon,
.line-icon,
.client-icon,
.work-steps .step-icon {
cursor: var(--cur-hand), pointer;
transition: color 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), filter 220ms ease;
}
.ic:hover,
.card-icon:hover,
.line-icon:hover,
.client-icon:hover,
.work-steps .step-icon:hover {
color: var(--wine);
filter: drop-shadow(0 10px 18px rgba(53, 80, 107, 0.18));
transform: translateY(-3px) scale(1.06);
}
h1:hover,
h2:hover,
h3:hover {
transform: translateY(-2px);
text-shadow: 0 10px 24px rgba(167, 154, 132, 0.14);
}
.eyebrow:hover {
color: var(--gold);
text-shadow: 0 8px 18px rgba(167, 154, 132, 0.14);
}
.hero-lead:hover,
.section-head p:not(.eyebrow):hover,
.quote-layout p:not(.eyebrow):hover,
.brand-panel p:not(.eyebrow):hover,
.text-stack p:hover,
.consult-inner p:not(.eyebrow):hover,
.footer-contacts p:hover,
.footer-bottom span:hover {
transform: translateY(-1px);
text-shadow: 0 8px 18px rgba(167, 154, 132, 0.10);
}
.hero-bullets li span:hover,
.fabric-card p:hover,
.benefit-card p:hover,
.treatment-card li:hover,
.info-grid li:hover,
.test-steps .step-text:hover,
.why-grid p:hover,
.work-steps p:hover,
.client-tags p:hover,
.info-grid p:hover,
.faq-answer p:hover {
transform: translateY(-1px);
text-shadow: 0 8px 18px rgba(167, 154, 132, 0.12);
}
.treatment-card li:hover b,
.info-grid li:hover b {
color: var(--wine);
}
.faq-item > summary:hover {
text-shadow: 0 8px 18px rgba(167, 154, 132, 0.12);
}
.footer-form label:hover span {
color: var(--wine);
}
}
/* Карточка дилера Bekaert в hero — тоже приподнимается */
.dealer-card {
transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
}
.dealer-card:hover {
transform: translateY(-5px);
box-shadow: 0 56px 112px rgba(20, 28, 38, 0.52), 0 16px 34px rgba(20, 28, 38, 0.34);
}
@media (prefers-reduced-motion: reduce) {
html .reveal,
html.anim-ready .hero-copy > .eyebrow,
html.anim-ready #hero-title .tw-word,
html.anim-ready .hero-lead,
html.anim-ready .hero-bullets li,
html.anim-ready .hero-actions,
html.anim-ready .hero-media {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
animation: none !important;
}
.button-primary.cta-attention,
.button-secondary.cta-attention,
.button-primary.cta-attention::before,
.button-secondary.cta-attention::before { animation: none !important; }
}
/* ---------- Large / high-res screens (≥2K) — FullHD parity (DPR=1 / no OS scaling).
1920 and below stay UNTOUCHED (golden protected — zoom starts only at 2000). Uniform
`zoom` scales the WHOLE design system together (type, spacing, images, cards, radii);
capped ≈1.6 per skill §4E so it never becomes billboard-sized. The content column keeps
its `min(86vw,1540px)` cap, so ultrawide/4K get a centered FullHD-scaled composition with
the full-bleed hero background expanding to the edges — never a tiny island in empty margin. */
/* Standard big screens (≈16:9 / 16:10) — scale to FullHD-WIDTH parity: zoom ≈ physWidth/1920.
A DPR=1 2K/4K/5K then lays out the 1920 composition at the SAME visual proportion as FullHD
(e.g. 3840 → 1920×1080 logical), so the hero FILLS the height like 1920×1080 instead of being
stranded at the top with a huge empty fabric strip below. This is true FullHD parity. */
/* Each step also DIVIDES the hero-grid min-height by its own zoom, so the hero fills EXACTLY one
screen under zoom (svh stays PHYSICAL under :root{zoom}, so an undivided 100svh × zoom would make
the hero ~2× too tall — the "fabric photo stretched to full height" bug). Same technique as the
FullHD-DOWN parity band. Result: logical hero height ≈ golden 1080 → 2K/4K look identical to FullHD. */
@media (min-width: 2000px) { :root { zoom: 1.05; } .hero-grid { min-height: calc((100svh - 60px) / 1.05); } }
@media (min-width: 2240px) { :root { zoom: 1.18; } .hero-grid { min-height: calc((100svh - 60px) / 1.18); } }
@media (min-width: 2560px) { :root { zoom: 1.33; } .hero-grid { min-height: calc((100svh - 60px) / 1.33); } }
@media (min-width: 2800px) { :root { zoom: 1.46; } .hero-grid { min-height: calc((100svh - 60px) / 1.46); } }
@media (min-width: 3100px) { :root { zoom: 1.62; } .hero-grid { min-height: calc((100svh - 60px) / 1.62); } }
@media (min-width: 3440px) { :root { zoom: 1.79; } .hero-grid { min-height: calc((100svh - 60px) / 1.79); } }
@media (min-width: 3840px) { :root { zoom: 2.0; } .hero-grid { min-height: calc((100svh - 60px) / 2.0); } }
@media (min-width: 4400px) { :root { zoom: 2.3; } .hero-grid { min-height: calc((100svh - 60px) / 2.3); } }
@media (min-width: 5120px) { :root { zoom: 2.67; } .hero-grid { min-height: calc((100svh - 60px) / 2.67); } }
/* Ultrawide / super-wide (aspect > 2:1) — width parity would over-scale here (the screen is
short, so logical height would collapse). Scale to FullHD-HEIGHT parity instead, gentler;
the content column stays capped and the full-bleed background expands to the edges. */
@media (min-aspect-ratio: 2/1) and (min-width: 2400px) { :root { zoom: 1.25; } .hero-grid { min-height: calc((100svh - 60px) / 1.25); } }
@media (min-aspect-ratio: 2/1) and (min-width: 3600px) { :root { zoom: 1.4; } .hero-grid { min-height: calc((100svh - 60px) / 1.4); } }
/* ============ FullHD-DOWN parity (laptops shorter than the golden 1920×900) ============
Same universal rule as the big-screen ladder, applied DOWNWARD: the 1920×900 layout is the
reference; on a SHORT laptop we scale the WHOLE design down with `zoom` so every important
section (catalog, «Обработки…», «Склад, документы…») fits the viewport like it does on FullHD,
instead of the content blocks (~940–1010px tall here) overrunning the fold. Empty space below
a section is acceptable (per brief). Keyed to the viewport HEIGHT (that's what's scarce) and
gated to laptop widths — max-width:1919 leaves the golden 1920 and all bigger screens (handled
by the up-ladder above) completely untouched. Steps roughly zoom ≈ availableHeight ÷ ~915
(tallest content section). Ordered tallest→shortest so the most restrictive (smallest) height
wins via source order. `--container: 80%` is the KEY companion to the down-zoom: the default
`--container` is `min(80vw,1540px)`, but under `:root{zoom}` `vw` resolves to the PHYSICAL
viewport (1280), so it would collapse the container to ~1024px in the larger LOGICAL viewport
and strand it in centered margins (also cramping the header → nav collides with the switchers).
Switching to a percentage makes the container fill 80% of the logical width — the same inset as
FullHD — so the header and grid scale cleanly. `.hero-grid` min-height is divided by the zoom so
the hero still FILLS the first screen (factoids stay on the second screen) despite `svh` staying
physical under zoom. */
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 910px) {
:root { zoom: 0.88; --container: 80%; }
.hero-grid { min-height: calc((100svh - 60px) / 0.88); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 850px) {
:root { zoom: 0.84; --container: 80%; }
.hero-grid { min-height: calc((100svh - 60px) / 0.84); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 800px) {
:root { zoom: 0.80; --container: 80%; }
.hero-grid { min-height: calc((100svh - 60px) / 0.80); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 760px) {
:root { zoom: 0.77; --container: 80%; }
.hero-grid { min-height: calc((100svh - 60px) / 0.77); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 720px) {
:root { zoom: 0.73; --container: 80%; }
.hero-grid { min-height: calc((100svh - 60px) / 0.73); }
}
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 690px) {
:root { zoom: 0.69; --container: 80%; }
.hero-grid { min-height: calc((100svh - 60px) / 0.69); }
}
/* FullHD parity of the HEADINGS: the fluid clamps (h1/h2/lead use `vw`) shrink the type at
1280–1440 BEFORE the zoom is applied, so after the down-zoom the headings looked smaller than
on the 1920 reference. Pin them to their DESKTOP (1920) sizes inside the parity band so the
zoomed result matches — or slightly exceeds — the FullHD scale. Body/buttons are already fixed
px (parity-correct under zoom), so only the fluid headings need pinning. */
@media (min-width: 1025px) and (max-width: 1919px) and (max-height: 910px) {
h1 { font-size: 52px; }
h2 { font-size: 42px; }
.hero-lead { font-size: 23px; }
}
/* ---------- ≤1560: the 7-item nav + phone gets tight beside the switchers → drop the
(secondary) phone first and tighten nav gaps so the header row keeps air (skill §9). ---------- */
@media (max-width: 1560px) {
.header-phone { display: none; }
.main-nav { gap: clamp(13px, 1.3vw, 22px); }
}
@media (max-width: 1320px) {
.header-inner {
grid-template-columns: 200px minmax(0, 1fr) auto;
}
.logo,
.logo img {
width: 196px;
}
.main-nav {
gap: 16px;
}
}
@media (max-width: 1120px) {
.header-inner {
grid-template-columns: auto auto;
justify-content: space-between;
}
.main-nav {
position: fixed;
left: var(--side);
right: var(--side);
top: 92px;
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
padding: 12px 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow);
/* menu must never exceed the viewport and must scroll if tall (skill §9, mobile landscape) */
max-height: calc(100svh - 110px);
overflow-y: auto;
}
[data-theme="dark"] .main-nav {
background: rgba(22, 22, 20, 0.98);
}
.main-nav a {
padding: 15px 0;
}
.main-nav a::after {
bottom: 10px;
}
body.nav-open .main-nav {
display: grid;
}
.hero-grid {
grid-template-columns: minmax(0, 0.6fr) minmax(260px, 0.4fr);
}
.treatment-grid,
.why-grid,
.fabric-grid,
.work-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.info-grid {
grid-template-columns: 1fr;
}
/* Header controls on the burger/tablet zone. Hamburger is BORDERLESS and height-matched
to the language/theme pills — no taller outlined button (user). Flex-centered 3-line icon. */
.nav-toggle {
width: 46px;
height: 36px;
border: 0;
background: transparent;
border-radius: 0;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 9px;
}
.nav-toggle span { width: 26px; height: 3px; margin: 0; }
/* Unified header height on tablets: logo, language + theme pills and burger all ≈36px. */
.logo, .logo img { width: 218px; }
.lang-option { height: 30px; }
.theme-option { height: 30px; }
.theme-option svg { width: 20px; height: 20px; }
/* Hero CTAs: equal width; one row when both fit, otherwise stacked full-width AND equal
(flex-basis ≈ the longer label's natural width). Satisfies the equal-when-stacked /
one-row-when-space rules. Desktop (>1120) keeps its approved natural layout. */
.hero-actions .button { flex: 1 1 290px; min-width: 0; width: auto; }
}
/* ---------- ≤1024 tablet landscape: release the forced single-line headings
(root cause of mobile H1/H2 horizontal overflow) and bring headings into the tablet
range. Cards stay 2-col → tablet density, not an oversized mobile (skill §15). ---------- */
/* Планшеты и узкие ноутбуки: блок заявки перестаёт быть двухколоночным.
Причина — замеры: на 1024px форма получала 436px, на 834px (планшет вертикально) 337px,
на 768px — 288px, и поля ввода внутри двухколоночной сетки формы сжимались до 136px.
Подписи-подсказки в них не помещались, вводить было неудобно (owner). Теперь на этих
ширинах текст идёт сверху, форма — во всю ширину контейнера, поля остаются комфортными.
Сама двухколоночная сетка ПОЛЕЙ сохраняется, пока в неё влезает минимум 260px на поле. */
@media (max-width: 1080px) {
.lead-section-layout {
grid-template-columns: minmax(0, 1fr);
gap: clamp(28px, 4vw, 44px);
}
.lead-section-copy,
.lead-section-copy h2,
.lead-section-copy p:not(.eyebrow) {
max-width: 760px;
}
.lead-section-form {
max-width: 100%;
}
.footer-form {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
max-width: none;
}
}
@media (max-width: 1024px) {
h1 span,
.catalog-head h2,
#work-title { white-space: normal; }
h1 { font-size: clamp(40px, 5.2vw, 50px); line-height: 1.16; }
h2 { font-size: clamp(32px, 4.3vw, 42px); }
.section-head { margin-bottom: 38px; }
.hero-grid { grid-template-columns: minmax(0, 0.62fr) minmax(220px, 0.38fr); }
/* Hero CTAs: keep the label on ONE line (user rule — no 2-line buttons on small screens);
shrink the font/side-padding fluidly instead of wrapping. */
.hero-actions .button {
white-space: nowrap;
font-size: clamp(12px, 1.5vw, 13.5px);
padding-left: clamp(16px, 3vw, 32px);
padding-right: clamp(16px, 3vw, 32px);
}
/* 6-step work strip → 2 columns with horizontal dividers (no odd vertical rule) */
.work-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(24px, 4vw, 44px);
}
.work-steps li {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 16px 0;
}
}
/* Single-column stacked layout: all phones/small tablets (≤900), PLUS every portrait tablet up to
1024 (e.g. 1024×1366 iPad Pro) — a portrait tablet must stack like mobile, never keep the 2-col
hero that mangled the H1 and unbalanced the page. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1024px) {
.hero {
min-height: auto;
}
.hero-grid {
min-height: auto;
grid-template-columns: 1fr;
padding: 66px 0 50px;
}
/* drop the 1.08 parallax zoom on touch (no parallax here) → no decorative h-overflow */
.hero-bg {
background-position: 70% 54%;
transform: scale(1);
}
/* Mobile/tablet-portrait: lighten the veil so the hero photograph is actually visible
behind the stacked hero (was washed to ~white). Kept strong enough up top that the
dark H1/lead stay readable, fades to reveal more fabric toward the CTA. */
.hero::after {
background:
linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.64) 50%, rgba(255,255,255,0.46) 100%);
}
.hero-media {
justify-content: flex-start;
padding-top: 8px;
width: 100%;
}
/* Bekaert plate (single wide brand lockup) on the stacked hero → full-width but capped &
centred; logo on top, role + note below. The short horizontal logo keeps the plate low. */
.dealer-card {
width: 100%;
max-width: 520px;
margin-inline: auto;
padding: clamp(18px, 3.4vw, 24px) clamp(22px, 4vw, 30px);
gap: clamp(11px, 2.2vw, 15px);
}
.dealer-brand { width: min(288px, 72%); }
.dealer-role { font-size: clamp(12px, 1.6vw, 13px); }
.dealer-note { max-width: none; padding-top: clamp(13px, 2.4vw, 16px); }
.quote-layout,
.two-col,
.about-layout,
.brand-grid,
.clients-grid,
.info-grid,
.faq-grid,
.footer-grid {
grid-template-columns: 1fr;
}
/* The section-pad floor (72px) is too tall on small screens → oversized empty gaps between
every section (user). Scale it down here, plus the footer top padding and the stacked-FAQ
column gap (was 40–84px splitting the list in the middle). */
.section-pad { padding: clamp(38px, 8vw, 62px) 0; }
.site-footer { padding: clamp(40px, 8vw, 56px) 0 28px; }
.faq-grid { gap: 0; }
.footer-map,
.footer-map.is-expanded {
min-height: clamp(320px, 58vw, 440px);
}
.quote-layout,
.two-col,
.about-layout,
.clients-grid {
gap: 34px;
}
.about-founder {
max-width: 520px;
}
.quote-action { justify-content: flex-start; }
/* Quote band: cut the oversized mobile whitespace (was ~70px top/bottom + 34px gap → huge
empty area around the CTA, user report). Tighten section padding and the text→button gap. */
.quote-band { padding: clamp(40px, 8vw, 56px) 0; }
.quote-layout { gap: clamp(20px, 4vw, 26px); }
/* 4 factoids → tidy 2×2 (not a tall single stack) */
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 0;
}
.stats-grid div { padding: 0 clamp(16px, 4vw, 40px); }
.stats-grid div:nth-child(2n) { border-right: 0; padding-right: 0; }
.stats-grid div:nth-child(2n+1) { padding-left: 0; }
/* 3 benefit cards → stacked list w/ bottom dividers (3-col is far too narrow ≤900).
Layout = icon LEFT, text (h3 + p) RIGHT — the icon must sit at the TOP of its column, never
drift below the text (default `p { grid-column: 1/-1 }` pulled the copy under the icon). */
.point-grid { grid-template-columns: 1fr; }
.benefit-card {
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
align-items: start;
column-gap: clamp(14px, 2.5vw, 20px);
row-gap: 6px;
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 28px 0;
}
.benefit-card .line-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.benefit-card h3 { grid-column: 2; grid-row: 1; }
.benefit-card p { grid-column: 2; grid-row: 2; }
/* Even vertical rhythm: every card keeps the full top+bottom padding so the gap from the section's top line to the
first card, between cards (divider sits midway), and from the last card to the bottom line are all equal — the
first/last cards are no longer cramped against the frame. */
.benefit-card:last-child { border-bottom: 0; }
/* client tag strip → stacked list with bottom dividers (headings fit fully) */
.client-tags {
grid-template-columns: 1fr;
}
.client-tags article {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 18px 0;
}
.client-tags article:last-child { border-bottom: 0; }
}
@media (max-width: 680px) {
:root {
--side: 18px;
--container: 91vw;
}
/* .text-line-keep and .about-title-line release nowrap earlier (≤1120, see above). */
#work-title {
white-space: normal;
}
/* Phone header: logo, language switch and burger spaced EVENLY across the row (equal gaps
logo↔lang↔burger). We dissolve the .header-actions wrapper (display:contents) so those three
become direct flex siblings of the header row, then space-between distributes them evenly. */
.header-inner {
min-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.header-actions { display: contents; }
/* Bigger logo on phones — height matched to the language pill. Sized by HEIGHT via the 6.07:1
aspect: width scales with the viewport and caps so it never collides with the burger.
Governs ≤430/≤360 too (those brackets no longer pin an explicit width). */
.logo { width: auto; }
.logo img {
width: clamp(120px, 46vw, 188px); /* height ≈ the lang pill (~30px @393) — logo/pill/burger equal */
height: auto;
display: block;
}
/* Hamburger: box height = the lang pill, icon lines enlarged to fill it → same height as the
logo and language switch, and big/easy to tap (user). */
.nav-toggle { width: 46px; height: 33px; gap: 9px; }
.nav-toggle span { width: 27px; height: 3px; }
.theme-switch {
grid-template-columns: repeat(2, 28px);
}
.language-switch {
grid-template-columns: repeat(3, 30px);
}
.lang-option {
width: 30px;
height: 27px;
font-size: 9px;
}
.theme-option {
width: 28px;
height: 27px;
}
.main-nav {
top: 80px;
grid-template-columns: 1fr;
}
/* Phone H1 = exactly 3 lines (each logical on ONE line), no orphan word.
The three spans are «Стабильные поставки тканей» / «для матрасов и мебели» /
«со склада в России». Font shrunk so the longest span («…поставки тканей», 26
chars) fits the ~91vw container at every phone width (320–430) → the natural
wrap keeps each span whole (nowrap-pair binds «поставки тканей»); no forced
nowrap, so nothing can overflow horizontally. Reads clearly at this size. */
h1 {
font-size: clamp(19px, 6.1vw, 26px);
line-height: 1.2;
}
h2 {
font-size: clamp(25px, 7vw, 30px);
line-height: 1.2;
}
.section-head { margin-bottom: 30px; }
.section-head p:not(.eyebrow) { font-size: 16px; }
.hero-grid {
padding: 34px 0 34px;
}
.eyebrow { margin-bottom: 16px; }
/* Description: small enough to stay tight, but airier line-height so it never reads
cramped (user). The forced desktop breaks flow INLINE on phones so each line fills
the width (no short «и мягкой мебели» stub) — natural wrap + nbsp keep phrases whole. */
.hero-lead {
font-size: clamp(13px, 3.7vw, 14px);
line-height: 1.66;
margin-top: 16px;
}
/* Only the FIRST break flows inline (fills line 2 with «…— от мастерской»); the last
sentence «Всегда в наличии под ваш продукт.» stays on its own line so nothing dangles. */
.hero-lead .lead-break:first-of-type { display: inline; }
.hero-bullets {
grid-template-columns: 1fr;
margin-top: 26px; /* air — hero was too cramped */
gap: 14px; /* breathing room between bullets */
}
/* Bullets: font ≤ the description, each on ONE line, with smaller icons (user). */
.hero-bullets li {
grid-template-columns: 28px minmax(0, 1fr);
min-height: 28px;
font-size: clamp(12px, 3.3vw, 13px);
gap: 10px;
}
.hero-bullets .ic { width: 28px; height: 28px; }
.hero-actions {
gap: 12px;
margin-top: 30px; /* air, but both CTAs still well within the first screen */
}
.button {
width: 100%;
min-width: 0; /* release the 300px desktop floor so full-width CTAs never overflow narrow phones */
white-space: nowrap; /* full-width CTAs → label stays on one line (no 2-line buttons on phones) */
}
/* benefit-card icon-left layout is handled by the ≤900/portrait rule above (covers ≤680 too) */
.benefit-card { padding: 26px 0; }
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 0;
}
.stats-grid div {
padding: 0 18px;
}
.stats-grid div:nth-child(2) {
border-right: 0;
}
.stats-grid div:nth-child(3) {
padding-left: 0;
}
.footer-form,
.fabric-grid,
.treatment-grid,
.why-grid,
.work-steps,
.lead-section-layout {
grid-template-columns: 1fr;
}
.footer-map {
padding: 18px;
}
.map-frame,
.footer-map.is-expanded .map-frame {
min-height: clamp(230px, 74vw, 330px);
}
.fabric-photo { height: clamp(200px, 56vw, 260px); }
/* keep the card arrow level with the title: track the (variable) mobile photo height instead
of the fixed desktop 242px (taller phone photos were pushing the title below the arrow). */
.card-go { top: calc(clamp(200px, 56vw, 260px) + 18px); }
.brand-panel {
min-height: 320px;
}
.brand-panel::before { font-size: clamp(86px, 22vw, 130px); }
.faq-answer { padding-right: 24px; }
.consult-inner {
align-items: stretch;
flex-direction: column;
}
.footer-bottom {
grid-template-columns: 1fr;
align-items: start;
gap: 18px;
}
.footer-links {
justify-content: flex-start;
}
.legal-content {
padding: 0;
}
.legal-content ul {
padding-left: 18px;
}
.catalog-hero {
min-height: clamp(170px, 45vw, 230px);
}
.catalog-hero-bg::after {
background:
linear-gradient(180deg, rgba(236, 244, 249, 0.94) 0%, rgba(230, 240, 247, 0.82) 58%, rgba(218, 232, 241, 0.48) 100%),
linear-gradient(180deg, rgba(53, 80, 107, 0.12), rgba(92, 122, 153, 0.16));
}
.catalog-detail-intro h2 {
font-size: clamp(26px, 8vw, 34px);
}
.product-feature {
padding: 24px 0;
}
.product-feature-copy dl div {
grid-template-columns: 1fr;
gap: 3px;
}
.catalog-gallery-grid,
.catalog-gallery-grid--wide {
grid-template-columns: 1fr;
}
.carousel-track img {
aspect-ratio: 1.7 / 1;
}
.carousel-control {
width: 40px;
height: 40px;
}
}
/* ---------- ≤430 small mobile: header stays one clean row; tighten switchers ---------- */
@media (max-width: 430px) {
:root { --container: calc(100% - 28px); }
.header-inner { min-height: 60px; gap: 8px; }
.header-actions { gap: 6px; }
/* logo governed by the ≤680 height-matched clamp (42vw, cap 172px) */
.language-switch { grid-template-columns: repeat(3, 26px); gap: 0; padding: 2px; }
.lang-option { width: 26px; height: 26px; font-size: 9.5px; }
.theme-switch { grid-template-columns: repeat(2, 26px); gap: 0; padding: 2px; }
.theme-option { width: 26px; height: 26px; }
.theme-option svg { width: 15px; height: 15px; }
.nav-toggle { width: 44px; height: 30px; } /* box = ≤430 pill (26 + 4); big icon fills it */
.main-nav { top: 72px; }
.stats-grid strong { font-size: clamp(36px, 12vw, 48px); }
.test-steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.test-steps .step-num { font-size: 28px; }
}
/* ---------- ≤360 (incl. 320 iPhone SE): one more notch so the header never overflows ---------- */
@media (max-width: 360px) {
.header-actions { gap: 5px; }
/* logo governed by the ≤680 height-matched clamp (42vw, cap 172px) */
.language-switch { grid-template-columns: repeat(3, 23px); }
.lang-option { width: 23px; height: 25px; font-size: 9px; }
.theme-switch { grid-template-columns: repeat(2, 23px); }
.theme-option { width: 23px; height: 25px; }
.nav-toggle { width: 42px; height: 29px; } /* box = ≤360 pill (25 + 4); big icon fills it */
}
/* ---------- Mobile landscape: single-column compact hero (skill §15 — common failure point).
A 2-col hero on a ~375px-tall landscape phone cut the Bekaert plate off the right edge, so we
stack: copy on top, CTAs, then the partner plate as a FULL-WIDTH horizontal strip that can
never be clipped. Vertical rhythm stays tight so the CTA sits near the first screen. ---------- */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 900px) {
.hero { min-height: auto; }
.hero-grid {
grid-template-columns: 1fr;
min-height: auto;
padding: 20px 0 22px;
gap: 14px;
}
.hero-media { justify-content: stretch; padding-top: 4px; width: 100%; }
/* Bekaert plate (single wide lockup) → full-width, ultra-compact centred stack for the short
landscape hero, so it can never be clipped at the right edge. */
.dealer-card {
width: 100%;
max-width: 460px;
margin-inline: auto;
padding: 12px clamp(18px, 3.5vw, 26px);
gap: 8px;
}
.dealer-brand { width: min(232px, 66%); }
.dealer-role { font-size: 11.5px; }
.dealer-note { max-width: none; padding-top: 9px; }
h1 { font-size: clamp(26px, 4.6vw, 32px); }
.hero-lead { margin-top: 10px; }
.hero-bullets { margin-top: 12px; }
.hero-actions { margin-top: 18px; }
.hero-actions .button { min-width: 0; width: auto; }
}
/* ---------- Landscape tablets, short viewport (≤1024 wide, 561–820 tall). The ≥1025 down-zoom
ladder can't reach these widths, so the 2-col hero's fixed vertical rhythm pushed the CTA below
the fold (1024×768, 960×600, 1007×601…). Compact H1 + inter-row margins so header + H1 + lead +
bullets + BOTH CTAs stay on the first screen, without touching portrait or FullHD. ---------- */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1120px) and (max-height: 900px) {
/* Wide-but-short landscape tablets (960×600, 1007×601, 1024×768, 1080×810 …) → the user's
reference: a scaled-down FullHD hero. Balanced 2-col ALWAYS (never the single-column phone
layout that stranded content left with a dead right half). `zoom:1` cancels the ≥1025 down-zoom
ladder (its pinned 52px H1 overran the card at ~1080). Big-ish H1, full CTA labels, airy
vh-based rhythm that still fits the short height, and the card aligned to the H1 top. */
:root { zoom: 1; }
.hero { min-height: auto; }
.hero-grid {
grid-template-columns: minmax(0, 0.62fr) minmax(220px, 0.38fr);
align-items: start;
min-height: calc(100svh - 60px);
padding: clamp(22px, 4.5vh, 56px) 0 clamp(22px, 4vh, 48px);
gap: clamp(24px, 3vw, 48px);
}
h1 { font-size: clamp(28px, 4.6vh, 42px); line-height: 1.15; }
.hero-lead { margin-top: clamp(14px, 2.5vh, 24px); font-size: clamp(15px, 2.1vh, 18px); line-height: 1.55; }
.hero-bullets { margin-top: clamp(16px, 3vh, 32px); gap: clamp(8px, 1.6vh, 14px); }
.hero-bullets li { min-height: 38px; font-size: clamp(15px, 2vh, 17px); }
.hero-bullets .ic { width: 38px; height: 38px; }
.hero-actions { margin-top: clamp(18px, 4.4vh, 48px); flex-wrap: nowrap; } /* a touch more air → CTAs sit lower */
/* both CTAs on ONE row, FULL labels (reference keeps «Получить консультацию») — kept single-line
by trimming font + side padding (this range is above the ≤1024 nowrap block) */
.hero-actions .button {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
font-size: clamp(12px, 1.4vh, 13.5px);
padding-left: clamp(16px, 2vw, 30px);
padding-right: clamp(16px, 2vw, 30px);
}
/* card top aligned with the H1 top (below the eyebrow), like the reference — balanced 2-col */
.hero-media { align-items: flex-start; justify-content: flex-end; padding-top: clamp(60px, 8vh, 64px); }
/* Bekaert card a touch smaller here (user: «карточку можно было бы уменьшить») + shorter, so the
CTA row keeps bottom air even on the shortest (Adaptive-Checker-trimmed) heights. */
.dealer-card { width: min(344px, 100%); padding: clamp(16px, 2.6vh, 24px) clamp(22px, 2.4vw, 30px); gap: clamp(9px, 1.6vh, 14px); }
.dealer-brand { width: min(236px, 84%); }
.dealer-role { font-size: clamp(11px, 1.5vh, 12.5px); }
.dealer-note { font-size: clamp(12px, 1.7vh, 13.5px); }
}
/* ---------- Portrait tablets (560–900 wide): tighten the stacked hero's vertical rhythm and keep
both CTAs on ONE row so the WHOLE hero — copy + CTAs + the Bekaert strip — fits the screen
without the plate being clipped at the bottom (real-device browser chrome eats ~100px, so leave
margin). ---------- */
@media (orientation: portrait) and (min-width: 560px) and (max-width: 900px) {
.hero-grid {
padding: clamp(28px, 4vh, 48px) 0 clamp(20px, 3vh, 36px);
gap: clamp(14px, 2vh, 22px);
}
.hero-lead { margin-top: clamp(14px, 2vh, 22px); }
.hero-bullets { margin-top: clamp(16px, 2.4vh, 26px); }
.hero-actions { margin-top: clamp(18px, 2.8vh, 34px); flex-wrap: nowrap; }
/* one row (overrides the ≤680 phone full-width stack for 600/601 small tablets) → saves a row
so the partner strip clears the fold */
.hero-actions .button { flex: 1 1 0; min-width: 0; width: auto; }
}
/* ============ CUSTOM SCROLLBAR + SCROLL INDICATOR ============ */
/* Прячем нативную полосу прокрутки — навигацию даёт правый индикатор */
html {
scrollbar-width: none;
-ms-overflow-style: none;
}
html::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* Правый индикатор прокрутки — тонкие риски по секциям */
.scroll-progress {
position: fixed;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 12px;
z-index: 90;
transition: filter 0.3s ease;
}
/* Над фото-фоном hero тонкие риски сливаются — пока рейл над hero,
даём им небольшую тень для читаемости; на остальных секциях фильтра
нет (иначе в тёмной теме светлые риски размывались бы ореолом). */
.scroll-progress.over-hero {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.legal-scroll-progress .scroll-tick {
height: 7px;
}
.legal-scroll-progress .scroll-tick-minor {
height: 4px;
}
.scroll-to-hero {
width: 30px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
padding: 0;
border: 0;
background: transparent;
color: var(--wine);
cursor: var(--cur-hand), pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(6px);
transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-to-hero svg {
width: 24px;
height: 24px;
display: block;
}
.scroll-to-hero.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.scroll-to-hero:hover {
transform: translateY(-2px);
}
/* Тонкие элегантные риски; невидимая зона клика крупнее самой риски */
.scroll-tick,
.scroll-tick-minor {
display: block;
position: relative;
width: 28px;
cursor: var(--cur-hand), pointer;
}
.scroll-tick {
height: 9px;
}
.scroll-tick-minor {
height: 6px;
pointer-events: none;
}
.scroll-tick::before,
.scroll-tick-minor::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 1px;
border-radius: 4px;
transition: width 0.25s ease, background-color 0.25s ease;
}
.scroll-tick::before {
width: 15px;
background-color: rgba(18, 16, 14, 0.78);
}
.scroll-tick-minor::before {
width: 7px;
background-color: rgba(18, 16, 14, 0.5);
}
.scroll-tick:hover::before {
width: 20px;
background-color: var(--gold);
}
.scroll-tick.active::before {
width: 26px;
height: 4px;
background-color: var(--wine);
}
/* Подсказка-стрелка «листайте вниз» внизу hero */
.scroll-hint {
position: fixed;
left: 50%;
bottom: 26px;
transform: translate3d(-50%, 6px, 0);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: var(--wine);
cursor: var(--cur-hand), pointer;
z-index: 80;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}
.scroll-hint svg {
width: 40px;
height: 40px;
display: block;
}
.scroll-hint.is-shown {
opacity: 1;
visibility: visible;
transform: translate3d(-50%, 0, 0);
animation: scrollHintBounce 2.4s ease-in-out infinite;
}
.scroll-hint:hover svg {
transform: scale(1.12);
}
@keyframes scrollHintBounce {
0%, 100% { transform: translate3d(-50%, -5px, 0); }
50% { transform: translate3d(-50%, 8px, 0); }
}
/* Индикатор и стрелка — только на десктопе с мышью/трекпадом */
@media (max-width: 1240px) {
.scroll-progress,
.scroll-hint {
display: none;
}
}
@media (hover: none), (pointer: coarse) {
.scroll-progress,
.scroll-hint {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.scroll-hint.is-shown {
animation: none;
}
}
/* ============================================================
ТЁМНАЯ ТЕМА — модификация той же страницы через токены.
Светлая тема НЕ меняется: всё ниже scoped под [data-theme="dark"].
============================================================ */
[data-theme="dark"] {
--white: #1a1a18; /* фон страницы/секций — графит */
--warm-white: #232220; /* поверхность карточек */
--soft: #1f1e1c; /* чередующийся фон секций */
--soft-2: #211f1d;
--ink: #ece7df; /* основной светлый текст */
--muted: #a8a299; /* приглушённый светлый */
--line: rgba(236, 231, 223, 0.16);
--line-soft: rgba(236, 231, 223, 0.08);
--card-border: rgba(236, 231, 223, 0.16);
/* Glass edge for dark theme: a translucent light rim on the dark navy surfaces. */
--glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
--switch-active-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
--card-shadow: var(--glass-edge), 0 16px 40px rgba(0, 0, 0, 0.45);
--gold: #bcaf97;
--gold-soft: #cdc5b8;
--gold-tint: rgba(188, 175, 151, 0.14);
--wine: #556f8e;
--wine-dark: #3e5c7a;
--shadow: 0 22px 64px rgba(0, 0, 0, 0.5);
--dark-accent-shadow-core: 0 4px 9px rgba(0, 0, 0, 0.82);
--dark-accent-shadow-deep: 0 14px 30px rgba(0, 0, 0, 0.48);
--dark-accent-shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.68);
/* Иконки: та же тень, но в ~1.5 раза слабее по плотности (user, 2026-07-29).
Отдельные токены, чтобы фактоиды, номера шагов и кнопки сохранили прежнюю тень. */
--dark-icon-shadow-core: 0 4px 9px rgba(0, 0, 0, 0.55);
--dark-icon-shadow-deep: 0 14px 30px rgba(0, 0, 0, 0.32);
--dark-icon-shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
/* Тёмная тема: настоящая чёрная тень без цветного свечения. */
[data-theme="dark"] .ic,
[data-theme="dark"] .card-icon,
[data-theme="dark"] .line-icon,
[data-theme="dark"] .client-icon,
[data-theme="dark"] .work-steps .step-icon {
color: #6c8cad; /* dark theme: icons in indigo/denim (was greige) — user */
filter:
drop-shadow(var(--dark-icon-shadow-core))
drop-shadow(var(--dark-icon-shadow-deep));
}
[data-theme="dark"] .ic::after,
[data-theme="dark"] .card-icon::after,
[data-theme="dark"] .line-icon::after,
[data-theme="dark"] .client-icon::after,
[data-theme="dark"] .work-steps .step-icon::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-color: rgba(0, 0, 0, 0.48);
opacity: 0.32; /* мягче в ~1.5 раза вместе с drop-shadow иконок (user, 2026-07-29) */
transform: translate(2px, 4px);
filter: blur(5px);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: var(--ic);
mask-image: var(--ic);
}
/* Логотип: единый для обеих тем (Lgo Matteks.webp) */
/* Шапка и навигация */
[data-theme="dark"] .site-header { background: rgba(22, 22, 20, 0.86); }
[data-theme="dark"] .main-nav { color: var(--ink); }
[data-theme="dark"] .header-phone { color: var(--ink); }
[data-theme="dark"] .lang-option,
[data-theme="dark"] .theme-option { color: rgba(255, 255, 255, 0.82); } /* white labels — visible on dark (user) */
[data-theme="dark"] .lang-option.is-active,
[data-theme="dark"] .theme-option.is-active { color: #ffffff; } /* active label crisp white on the pill */
/* Switch border hidden for now (kept for easy restore): was rgba(188,175,151,.6) greige on dark.
Dark theme: darken the whole switch so it reads as its own recessed panel against the header, and give the
inactive segments a faint lighter fill (equal height to the active wine pill, no border). */
[data-theme="dark"] .language-switch,
[data-theme="dark"] .theme-switch { border-color: transparent; background: transparent; } /* no outer wrapper */
[data-theme="dark"] .lang-option:not(.is-active):not(:hover),
[data-theme="dark"] .theme-option:not(.is-active):not(:hover) { background: rgba(255, 255, 255, 0.08); }
/* Hero: тёмная вуаль вместо белой (читаемость текста слева) */
[data-theme="dark"] .hero::after {
background:
linear-gradient(90deg, rgba(20, 20, 18, 0.97) 0%, rgba(20, 20, 18, 0.92) 34%, rgba(20, 20, 18, 0.6) 56%, rgba(20, 20, 18, 0.08) 84%),
linear-gradient(180deg, rgba(20, 20, 18, 0.45), rgba(20, 20, 18, 0.04));
}
[data-theme="dark"] .hero-lead { color: #d8d2c9; }
/* Точечные текстовые цвета, захардкоженные под свет */
[data-theme="dark"] .benefit-card h3 { color: var(--ink); }
[data-theme="dark"] .stats-grid span { color: var(--muted); }
/* «Партнёры» в тёмной теме держали `--soft` — и вместе с соседями (лого-ткань сверху, продукция
партнёров снизу) давали ТРИ одинаковых блока подряд (owner, 2026-07-31). Секция возвращается к
общему `--white` (в тёмной теме это более тёмный графит), и чередование фонов восстанавливается. */
[data-theme="dark"] .partner-marquee {
background: #fff;
}
[data-theme="dark"] .partner-marquee::before {
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
[data-theme="dark"] .partner-marquee::after {
background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
[data-theme="dark"] .footer-bottom { color: var(--muted); }
[data-theme="dark"] .footer-bottom a,
[data-theme="dark"] .footer-form .consent a { color: #b9b1a8; }
[data-theme="dark"] .legal-hero {
background:
linear-gradient(135deg, rgba(85, 111, 142, 0.18), rgba(188, 175, 151, 0.08)),
var(--white);
}
[data-theme="dark"] .catalog-hero-bg::after {
background:
linear-gradient(90deg, rgba(24, 30, 38, 0.94) 0%, rgba(24, 30, 38, 0.78) 42%, rgba(24, 30, 38, 0.38) 100%),
linear-gradient(180deg, rgba(85, 111, 142, 0.18), rgba(188, 175, 151, 0.08));
}
[data-theme="dark"] .catalog-hero {
background: var(--white);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .catalog-hero.menu-hero .catalog-hero-bg::after {
background:
linear-gradient(90deg, rgba(24, 30, 38, 0.98) 0%, rgba(24, 30, 38, 0.92) 48%, rgba(24, 30, 38, 0.72) 100%),
linear-gradient(180deg, rgba(85, 111, 142, 0.22), rgba(188, 175, 151, 0.08));
}
[data-theme="dark"] .catalog-hero-bg img {
filter: saturate(0.72) contrast(0.92) brightness(0.52);
}
[data-theme="dark"] .catalog-hero .breadcrumbs {
color: var(--muted);
}
[data-theme="dark"] .catalog-hero .breadcrumbs a {
color: #86a9cd;
}
[data-theme="dark"] .catalog-hero .breadcrumbs span[aria-hidden="true"],
[data-theme="dark"] .catalog-hero .eyebrow {
color: var(--gold);
}
[data-theme="dark"] .catalog-hero h1 {
color: var(--ink);
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.36);
}
[data-theme="dark"] .product-feature,
[data-theme="dark"] .product-feature-grid {
border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .product-feature {
background: transparent;
border-color: rgba(255, 255, 255, 0.12);
box-shadow: none;
}
[data-theme="dark"] .product-feature figure {
background: transparent;
}
[data-theme="dark"] .carousel-track {
background: transparent;
border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .carousel-control {
background: rgba(0, 0, 0, 0.32);
color: #d3e2f3;
border-color: rgba(255, 255, 255, 0.16);
box-shadow: var(--dark-accent-shadow-core);
}
[data-theme="dark"] .carousel-control:hover {
background: var(--wine);
color: #fff;
}
[data-theme="dark"] .carousel-dots button {
border-color: rgba(211, 226, 243, 0.42);
}
[data-theme="dark"] .carousel-dots button.is-active {
background: #6c8cad;
border-color: #6c8cad;
}
[data-theme="dark"] .error-code {
background: linear-gradient(135deg, #6c8cad, var(--gold));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #6c8cad;
}
[data-theme="dark"] .legal-content {
background: transparent;
}
[data-theme="dark"] .legal-content a {
color: #b9cce2;
}
[data-theme="dark"] .lead-section {
background: var(--white);
}
[data-theme="dark"] .legal-home-button {
box-shadow:
var(--glass-edge-btn),
var(--dark-accent-shadow-core),
var(--dark-accent-shadow-deep);
}
[data-theme="dark"] .map-expand {
background: rgba(0, 0, 0, 0.24);
border-color: rgba(255, 255, 255, 0.18);
color: #d3e2f3;
}
[data-theme="dark"] .map-expand:hover {
background: var(--wine);
border-color: rgba(211, 226, 243, 0.46);
color: #fff;
}
[data-theme="dark"] .map-frame {
border-color: rgba(255, 255, 255, 0.14);
background: #1f1e1c;
}
[data-theme="dark"] .map-frame iframe {
filter: saturate(0.78) contrast(0.92) brightness(0.86);
}
[data-theme="dark"] .map-fallback {
filter: saturate(0.68) contrast(0.9) brightness(0.72);
}
/* Вино как ТЕКСТ/тонкий элемент плохо читается на графите → золото */
/* Фактоиды в тёмной теме: мягкая короткая тень без тяжёлой подложки. */
[data-theme="dark"] .stats-grid strong {
color: #6c8cad; /* dark theme: factoids in indigo/denim (was greige) — user */
text-shadow:
var(--dark-accent-shadow-core),
var(--dark-accent-shadow-deep);
}
[data-theme="dark"] .test-steps .step-num,
[data-theme="dark"] .work-steps .step-num {
text-shadow:
var(--dark-accent-shadow-core),
var(--dark-accent-shadow-deep);
}
[data-theme="dark"] .stats-grid div:hover strong {
color: #ffffff;
text-shadow: var(--dark-accent-shadow-core), var(--dark-accent-shadow-deep);
}
[data-theme="dark"] .stats-grid div:hover span {
color: #e9f0f8;
}
html.anim-ready[data-theme="dark"] .stats-grid strong.count-done {
animation-name: factCountDoneDark;
}
@keyframes factCountDoneDark {
0% { transform: scale(1); color: #6c8cad; }
45% { transform: scale(1.07); color: #d3e2f3; }
100% { transform: scale(1); color: #6c8cad; }
}
/* Шкала прокрутки и стрелка «листайте вниз»: в тёмной теме тоже СИНИЕ, как в светлой
(запрос владельца, 2026-07-31) — бежево-золотой оттенок здесь больше не используется.
Взят денимовый акцент тёмной темы (#6c8cad, тот же, что у иконок): чистый --wine (#556f8e)
на графите читается слабее нужного, а тон остаётся тем же синим семейством, что и кнопка. */
[data-theme="dark"] .scroll-hint { color: #6c8cad; }
[data-theme="dark"] .scroll-tick.active::before { background-color: #6c8cad; }
[data-theme="dark"] .scroll-tick:hover::before { background-color: #8fb0d1; }
/* Кнопка «вернуться к началу» — в том же синем, чтобы шкала не была двухцветной */
[data-theme="dark"] .scroll-to-hero { color: #6c8cad; }
/* Риски индикатора прокрутки — приглушённый синий вместо светло-бежевого */
[data-theme="dark"] .scroll-tick::before { background-color: rgba(139, 165, 194, 0.72); }
[data-theme="dark"] .scroll-tick-minor::before { background-color: rgba(139, 165, 194, 0.45); }
/* Вторичная (outline) кнопка: в тёмной теме hover медный, без белого фона. */
/* Dark theme: gold border+text so «Запросить прайс» is clearly visible and doesn't fight the
wine-filled primary for attention (white would). Soft shadow for depth. */
[data-theme="dark"] .button-outline {
color: #fff8ed; /* cream label (user); gold border keeps it distinct from the primary */
border-color: rgba(167, 154, 132, 0.42); /* ещё прозрачней: DPR1 не рисует тоньше 1 физ.px,
«тоньше» = светлее линия (user ×3) */
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
/* Filled CTAs: same neutral shadow as the outline button on dark — navy glow only on hover. */
[data-theme="dark"] .button-primary,
[data-theme="dark"] .button-secondary {
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .button-primary:hover,
[data-theme="dark"] .button-secondary:hover {
box-shadow: 0 20px 44px rgba(53, 80, 107, 0.42);
}
[data-theme="dark"] .button-outline:hover {
background: transparent;
border-color: #c4b7a0;
}
/* Названия технологий на плашках обработок — белые (owner, 2026-08-07). Только в тёмной
теме: в светлой плашка сама почти белая (--warm-white), и белый текст на ней исчез бы,
поэтому там название остаётся медным. */
[data-theme="dark"] .treat-tile-name {
color: #fff;
}
/* Тёмная тема: ховер-тень карточек — чисто чёрная. Тёплая rgba(40,38,34,.18) светлой темы
на тёмном navy-фоне СВЕТЛЕЕ фона → читалась как свечение под карточкой (user: «убрать
свечение снизу, тень оставить»). Бордер-подсветка на ховере (rgba(255,255,255,.38)) не тронута. */
[data-theme="dark"] .treat-tile:hover,
[data-theme="dark"] .treatment-card:hover,
[data-theme="dark"] .why-grid article:hover,
[data-theme="dark"] .info-grid article:hover,
[data-theme="dark"] .brand-panel:hover {
box-shadow: var(--glass-edge), 0 24px 54px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .consult-inner:hover {
box-shadow: var(--glass-edge), 0 24px 54px rgba(0, 0, 0, 0.5);
}
/* Вуаль над фотографией ткани с логотипом в тёмной теме: та же плотность, но графитовая
(в светлой она белая), иначе панель светилась бы белым пятном посреди тёмной секции. */
[data-theme="dark"] .brand-photo::after {
background: linear-gradient(180deg, rgba(26, 26, 24, 0.66) 0%, rgba(26, 26, 24, 0.9) 44%, rgba(26, 26, 24, 0.97) 100%);
}
[data-theme="dark"] .fabric-card:hover {
box-shadow: var(--glass-edge), 0 22px 52px rgba(0, 0, 0, 0.55);
}
/* В тёмной теме автопривлечение CTA отключено: кнопки не должны становиться белыми. */
html.anim-ready[data-theme="dark"] .button-primary.cta-attention,
html.anim-ready[data-theme="dark"] .button-secondary.cta-attention {
animation: none;
}
html.anim-ready[data-theme="dark"] .button-primary.cta-attention::before,
html.anim-ready[data-theme="dark"] .button-secondary.cta-attention::before {
opacity: 0;
animation: none;
}
/* Тёмная тема — hover. Прямые ссылки меняют цвет только при своём наведении. */
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .header-phone:hover {
color: var(--gold-soft);
}
/* Каталог: заголовок не перекрашивается от hover карточки; только шеврон-индикатор. */
[data-theme="dark"] .fabric-card:hover .card-go {
color: #fff8ed;
}
[data-theme="dark"] .footer-messengers > span {
color: #fff8ed;
}
[data-theme="dark"] .footer-contacts .messenger-link {
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: #d3e2f3;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .footer-contacts .messenger-link:hover {
border-color: rgba(205, 197, 184, 0.34);
background: var(--wine);
color: #fff8ed;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38);
}
@media (hover: hover) and (pointer: fine) {
[data-theme="dark"] .ic:hover,
[data-theme="dark"] .card-icon:hover,
[data-theme="dark"] .line-icon:hover,
[data-theme="dark"] .client-icon:hover,
[data-theme="dark"] .work-steps .step-icon:hover {
color: #fff8ed;
filter:
drop-shadow(var(--dark-icon-shadow-hover))
drop-shadow(var(--dark-icon-shadow-deep));
transform: translateY(-4px) scale(1.06);
}
[data-theme="dark"] .ic:hover::after,
[data-theme="dark"] .card-icon:hover::after,
[data-theme="dark"] .line-icon:hover::after,
[data-theme="dark"] .client-icon:hover::after,
[data-theme="dark"] .work-steps .step-icon:hover::after {
opacity: 0.62;
transform: translate(4px, 6px);
filter: blur(6px);
}
[data-theme="dark"] .eyebrow:hover {
color: #fff8ed;
text-shadow: 0 8px 18px rgba(255, 248, 237, 0.12);
}
[data-theme="dark"] h2:hover,
[data-theme="dark"] h3:hover,
[data-theme="dark"] .hero-lead:hover,
[data-theme="dark"] .hero-bullets li span:hover,
[data-theme="dark"] .section-head p:not(.eyebrow):hover,
[data-theme="dark"] .quote-layout p:not(.eyebrow):hover,
[data-theme="dark"] .benefit-card p:hover,
[data-theme="dark"] .treatment-card li:hover,
[data-theme="dark"] .info-grid li:hover,
[data-theme="dark"] .test-steps .step-text:hover,
[data-theme="dark"] .why-grid p:hover,
[data-theme="dark"] .work-steps p:hover,
[data-theme="dark"] .brand-panel p:not(.eyebrow):hover,
[data-theme="dark"] .client-tags p:hover,
[data-theme="dark"] .text-stack p:hover,
[data-theme="dark"] .info-grid p:hover,
[data-theme="dark"] .consult-inner p:not(.eyebrow):hover,
[data-theme="dark"] .faq-item > summary:hover,
[data-theme="dark"] .faq-answer p:hover,
[data-theme="dark"] .fabric-card p:hover,
[data-theme="dark"] .treatment-card li:hover b,
[data-theme="dark"] .info-grid li:hover b,
[data-theme="dark"] .footer-form label:hover span,
[data-theme="dark"] .footer-contacts p:hover,
[data-theme="dark"] .footer-contacts a:hover,
[data-theme="dark"] .footer-bottom span:hover,
[data-theme="dark"] .footer-bottom a:hover,
[data-theme="dark"] .footer-form .consent a:hover {
color: var(--gold-soft);
text-shadow: 0 8px 18px rgba(205, 197, 184, 0.12);
}
[data-theme="dark"] .fabric-card h2:hover,
[data-theme="dark"] .fabric-card h3:hover,
[data-theme="dark"] .fabric-card:hover h3:hover {
color: #fff8ed;
text-shadow: 0 8px 18px rgba(255, 248, 237, 0.12);
}
}
/* ==========================================================================
ГЛУБИНА — 3D за курсором и параллакс при скролле (owner, 2026-07-31)
Тот же приём, что на Мирazонит и FlippingStroy. Ключевое правило: РАМКА
СТОИТ НА МЕСТЕ. Двигается только внутри неё, а рамка обрезает — поэтому
у фотографий Ирины и Алины края кадра не шевелятся, параллакс идёт внутри.
Все значения пишет один rAF-цикл в main.js в виде CSS-переменных, CSS их
только складывает — трансформация остаётся одной операцией композитора.
========================================================================== */
.tilt3d {
overflow: hidden;
/* Рамка — сцена: перспектива живёт здесь, наклон происходит внутри неё. */
perspective: 1000px;
}
.tilt3d img {
/* Запас масштаба обязателен: картинка, точно равная рамке, при наклоне и при
параллаксе утаскивает собственные углы внутрь и открывает пустую полоску.
Было 8% — и этого НЕ хватало: у рамки высотой 257px запас составлял 10px, а
вертикальное движение (наклон 4px + параллакс при скролле 10px) доходило до 14px,
картинка упиралась в край и это читалось щелчком (owner: «картинки скачут»).
Теперь 12% запаса плюс уменьшенная амплитуда параллакса в main.js (10px → 6px):
движение гарантированно происходит ВНУТРИ кадра на всех рамках сайта. */
transform:
perspective(1000px)
rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
translate3d(var(--tx, 0px), calc(var(--ty, 0px) + var(--sy, 0px)), 0)
scale(calc(var(--zoom, 1.12) * var(--tz, 1)));
transform-origin: 50% 50%;
}
/* Портретные фотографии в галереях каталога: запас чуть больше, чем базовые 8%, —
при наклоне и параллаксе край кадра не должен открываться. */
.catalog-gallery-grid figure.tilt3d img { --zoom: 1.12; }
@media (prefers-reduced-motion: reduce) {
.tilt3d img { transform: none !important; }
}
/* Фото Алины: у левого края кадра видна светлая полоса стены — она читается как
«фотография не доходит до края». Кадрируем сильнее и смещаем точку масштаба вправо,
поэтому лишнее уходит именно слева, а сама Алина остаётся в кадре целиком (owner). */
#manager .about-founder img {
--zoom: 1.13;
transform-origin: 76% 50%;
}
/* Карточки каталога: переменные наклона пишутся на саму .fabric-photo, а
внутри читает
их по наследованию — общее правило `.tilt3d img` выше. Рамка карточки не двигается: она
режет, наклон и параллакс идут внутри неё. Отдельных правил для ::before больше нет —
обложка стала настоящей картинкой в разметке (см. .fabric-photo img). */
/* Логотип в шапке отвечает на курсор: короткий подъём и лёгкое увеличение (owner).
Тень подобрана по теме — синяя на графите, чтобы белый знак не выглядел приклеенным. */
.logo {
transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1), filter 380ms ease;
}
.logo:hover {
transform: translateY(-2px) scale(1.03);
filter: drop-shadow(0 8px 18px rgba(53, 80, 107, 0.18));
}
[data-theme="dark"] .logo:hover {
filter: drop-shadow(0 8px 20px rgba(108, 140, 173, 0.4));
}
/* Тёмная тема: подчёркивание пунктов меню — синее вместо золотого (owner).
Светлая тема не меняется. */
[data-theme="dark"] .main-nav a::after {
background: #6c8cad;
}
@media (prefers-reduced-motion: reduce) {
.logo:hover { transform: none; }
}