/* ══════════════════════════════════════════════════════════════════════════ ВАРИАНТ Г — «РАБОЧИЙ САЙТ» Собран на базе А/Б/В: цвет и «тихая роскошь» от А, золото от Б, навигация «от задачи» от В — но с полным, проработанным оформлением: кнопки-пилюли с иконками и состояниями, карточки, бейджи, чипы, шаги процесса, аккордеон, полный набор секций. Что осталось от трендов 2026: без карусели в hero, без звёздочек-искр (значок ИИ), градиент с зерном, контраст WCAG AA, мобильный CTA. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── фирменная палитра брендбука ── */ --mist:#EDEDED; --lavender:#7E80BD; --lilac:#C9C2F8; --amethyst:#9E74C7; /* ── рабочие производные (контраст WCAG AA) ── */ --plum:#6C4E8F; /* основной интерфейсный: кнопки, ссылки — 6,5:1 */ --plum-deep:#4E3868; /* нажатие, тёмный край градиента */ --ink:#282242; /* основной текст — 14,4:1 */ --ink-soft:#5B5578; /* вторичный — 6,7:1 */ --paper:#FFFFFF; --bg:#FBFAFD; --bg-tint:#F3F0FA; /* подложка секций */ --line:#E7E2F4; /* ── металл: три роли, три оттенка по контрасту ── */ --metal-acc:#7A749A; /* иконки и крупные акценты — 4,4:1 */ --metal-text:#5B5578; /* мелкий текст металлом — 7:1 */ --metal-soft:#BFBCD2; /* декоративные линии */ --metal-light:#D3D0E2; /* металл на градиенте и тёмном фоне */ /* ── формы ── */ --r-btn:999px; --r-card:20px; --r-lg:28px; --shadow-s:0 6px 18px rgba(78,56,104,.10); --shadow-m:0 14px 36px rgba(78,56,104,.14); --shadow-btn:0 8px 20px rgba(108,78,143,.28); --grad:linear-gradient(120deg,#6C4E8F 0%,#8A63B4 52%,#9E74C7 100%); --grad-hero:linear-gradient(126deg,#523878 0%,#664792 46%,#7E68B4 74%,#9C8AD0 100%); --f-display:'Lovelace',Georgia,serif; --f-body:'Dudka','Nunito',system-ui,-apple-system,sans-serif; --maxw:1240px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--f-body);font-size:17px;line-height:1.65;color:var(--ink);background:var(--bg); -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(108,78,143,.15)} img{max-width:100%;height:auto;display:block} a{color:var(--plum)} button,input,select{font:inherit} :focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:8px} section[id]{scroll-margin-top:112px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .center{text-align:center} .grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} /* ══ ТИПОГРАФИКА ══ */ .display{font-family:var(--f-display);font-weight:500;line-height:1.08;letter-spacing:-.012em;text-wrap:balance} h1.display{font-size:clamp(36px,4.8vw,64px)} /* Страховка от переполнения на 320–360px: минимум клампа (36px) при длинном одиночном слове (напр. «Ботулинотерапия:») может быть шире вьюпорта — переносим слово посимвольно только если оно реально не влезает целиком. */ h1.display{overflow-wrap:break-word;word-break:break-word} h2.display{font-size:clamp(28px,3.6vw,46px)} h3{font-family:var(--f-display);font-weight:500} /* Браузер сам подбирает переносы: заголовок делится на строки примерно поровну, а абзац не заканчивается одиноким словом. Раньше balance стоял только у .display — остальные заголовки и весь текст остаются без него. .sec__head — заголовок секции, размеченный тегом div, а не h* (21 штука). Названия услуг (.usl-row__name) намеренно пропущены: это span внутри строки прайса, к строчным элементам свойство не применяется. В Firefox работает balance, pretty — пока нет: там просто обычные переносы. */ h1, h2, h3, h4, .sec__head{ text-wrap:balance; } p, li{ text-wrap:pretty; } .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--plum);margin-bottom:16px} .eyebrow::before{content:"";width:34px;height:1px;background:var(--metal-acc)} .eyebrow--light{color:#fff} .eyebrow--light::before{background:var(--metal-light)} .lead{font-size:18.5px;color:var(--ink-soft);max-width:64ch} .lead--light{color:rgba(255,255,255,.92)} /* ══ КНОПКИ — единая система, 5 видов, 2 размера ══ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:54px;padding:15px 30px;border-radius:var(--r-btn);border:2px solid transparent; font-weight:700;font-size:16.5px;text-decoration:none;cursor:pointer;white-space:nowrap; background:var(--grad);color:#fff;box-shadow:var(--shadow-btn); /* position и overflow — под волну от точки нажатия (.fx-ripple, effects.js): волна лежит внутри кнопки абсолютом и обрезается по её скруглению. Кривая с перелётом (1.56) — кнопка возвращается из вдавленного состояния чуть пружиня, как настоящая клавиша. */ position:relative;overflow:hidden; transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,filter .18s ease,background-color .18s ease,border-color .18s ease; } .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(108,78,143,.36);filter:brightness(1.04)} /* Кнопка проседает под пальцем, а не просто теряет подъём от наведения. Прежнее translateY(0) на телефоне, где наведения нет вовсе, означало «ничего не происходит»: нажатие никак не подтверждалось. */ .btn:active{ transform:translateY(2px) scale(.97); box-shadow:0 5px 14px rgba(108,78,143,.3); } .btn svg{width:19px;height:19px;fill:currentColor;flex-shrink:0} .btn--outline{background:var(--paper);color:var(--plum);border-color:var(--lilac);box-shadow:var(--shadow-s)} .btn--outline:hover{border-color:var(--plum);background:#FAF8FE} /* для кнопок с длинной фразой (не короткими «Записаться»/«Позвонить») — на 320px nowrap выталкивал их за край экрана */ .btn--wrap{white-space:normal;text-align:center} .btn--light{background:#fff;color:var(--plum-deep);box-shadow:0 10px 26px rgba(30,18,58,.22)} .btn--light:hover{background:#F7F3FF} .btn--ghost-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);box-shadow:none} .btn--ghost-light:hover{background:rgba(255,255,255,.2);border-color:#fff} .btn--sm{min-height:46px;padding:11px 22px;font-size:15.5px} .btn--block{width:100%} /* ══ ШАПКА — кнопки-пилюли, как в исходном черновике, но аккуратнее ══ */ .hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px); border-bottom:1px solid var(--line);box-shadow:0 2px 16px rgba(78,56,104,.05)} .hdr__in{display:flex;align-items:center;gap:18px;min-height:84px} .hdr__logo{flex-shrink:0} .hdr__logo img{height:60px;width:auto} .nav{display:flex;gap:8px;margin:0 auto} .nav__close{display:none} .nav a{ padding:11px 20px;border-radius:var(--r-btn);border:1px solid var(--line); color:var(--ink);text-decoration:none;font-weight:600;font-size:15.5px;white-space:nowrap; transition:background-color .18s ease,border-color .18s ease,color .18s ease; } .nav a:hover{background:var(--bg-tint);border-color:var(--lilac);color:var(--plum)} .nav a.is-current{background:var(--bg-tint);border-color:var(--lavender);color:var(--plum)} .hdr__actions{display:flex;align-items:center;gap:12px;flex-shrink:0} .hdr__tel{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:var(--r-btn); border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:15.5px;white-space:nowrap} .hdr__tel svg{width:17px;height:17px;fill:var(--plum)} .hdr__tel:hover{border-color:var(--lavender);background:var(--bg-tint)} .burger{display:none;width:52px;height:52px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer; align-items:center;justify-content:center;flex-direction:column;gap:5px} .burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ══ HERO ══ */ .hero{position:relative;overflow:hidden;color:#fff;background:var(--grad-hero)} .hero__glow{position:absolute;top:-25%;right:-6%;width:min(760px,70vw);aspect-ratio:1;pointer-events:none; background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(201,194,248,.18) 45%,transparent 72%);filter:blur(4px)} .hero__in{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.4vw,60px); align-items:center;padding-block:clamp(44px,5.6vw,84px)} /* только вертикальный: горизонтальный даёт .wrap */ .chip-rating{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 20px;border-radius:999px; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);font-size:14.5px;margin-bottom:20px} .chip-rating b{font-size:17px} .chip-rating .stars{color:var(--metal-light);letter-spacing:1px} /* награда Яндекс Карт стоит рядом с оценкой оттуда же — это один источник доверия */ .chip-rating__award{display:inline-flex;align-items:center;gap:6px;padding-left:12px; border-left:1px solid var(--metal-light);color:var(--metal-light);font-weight:700} .hero h1{margin-bottom:18px} .hero__sub{font-size:18.5px;color:rgba(255,255,255,.93);max-width:50ch;margin-bottom:28px} /* Крупнее только на вебе — на мобильной (≤860px) оставляем базовые 18.5px нетронутыми. */ @media (min-width:861px){ .hero__sub{font-size:20px} } .hero__cta{display:flex;flex-wrap:wrap;gap:14px} .hero__note{margin-top:16px;font-size:14.5px;color:rgba(255,255,255,.85)} .hero__media{position:relative} .hero__media{max-width:520px;width:100%;margin-left:auto} @media (min-width:861px){ .hero__media{height:100%} } .hero__media img{width:100%;aspect-ratio:1/1.04;object-fit:cover;object-position:center 62%;border-radius:var(--r-lg); box-shadow:0 30px 60px rgba(24,14,48,.4)} /* карточка-«факт» поверх фото */ /* ══ ПОЛОСА ЦИФР ══ */ .facts{background:var(--paper);border-bottom:1px solid var(--line)} .facts__in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:34px} .fact{display:flex;align-items:center;gap:14px;justify-content:center;text-align:left;min-width:0} .fact b{font-family:var(--f-display);font-size:clamp(28px,3vw,38px);line-height:1;color:var(--plum); /* моноширинные цифры: пока счётчик набегает от нуля, ширина числа не пляшет */ font-variant-numeric:tabular-nums} .fact span{font-size:14.5px;color:var(--ink-soft);max-width:16ch} .fact + .fact{border-left:1px solid var(--line)} /* ══ СЕКЦИИ ══ */ .sec{padding:clamp(56px,6.4vw,96px) 0} .sec--tint{background:var(--bg-tint)} .sec--paper{background:var(--paper)} .sec__head{max-width:780px;margin-bottom:clamp(26px,3vw,42px)} .sec__head--center{margin-left:auto;margin-right:auto;text-align:center} .sec__head--center .eyebrow{justify-content:center} .sec__head p.lead{margin-top:12px} .zadachi__cta{display:inline-block;margin-top:20px} /* ── чипы-табы «от задачи» ── */ .tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px} .tab{min-height:48px;padding:12px 24px;border-radius:var(--r-btn);border:1px solid var(--line); background:#fff;color:var(--ink);font-weight:600;font-size:16px;cursor:pointer; transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease} .tab:hover{border-color:var(--lavender)} .tab[aria-selected="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--shadow-btn)} /* ── карточки услуг ── */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card); padding:28px 26px 26px;display:flex;flex-direction:column;overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} .card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);opacity:0;transition:opacity .2s ease} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--lilac)} .card:hover::before{opacity:1} .card__prob{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--metal-text);margin-bottom:8px} .card h3{font-size:22px;margin-bottom:8px} .card p{font-size:15.5px;color:var(--ink-soft);flex-grow:1} .card__price{margin:16px 0 14px;font-family:var(--f-display);font-size:21px;color:var(--plum-deep);font-variant-numeric:tabular-nums} .card__price small{font-family:var(--f-body);font-size:13.5px;color:var(--ink-soft)} /* Ряд карточек не должен обрываться неполной строкой (правило студии: «3 в ряд» при 5 или 8 карточках даёт «3+2»/«3+3+2» — читается как недовёрстанный блок). .is-rail разворачивает такой блок в горизонтальную ленту с дробным делением ширины (2.15/3.15 карточки) — именно дробный «хвост» и создаёт выглядывающий край-подсказку, что список продолжается вбок. На мобильной (≤860px) карточки и так уже в один столбец — там rail не нужен. */ @media (min-width:861px){ .cards.is-rail{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:14px;scrollbar-width:thin} .cards.is-rail > .card{scroll-snap-align:start;flex:0 0 calc((100% - 16px) / 2.15)} .cards.is-rail::-webkit-scrollbar{height:6px} .cards.is-rail::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:3px} } @media (min-width:1081px){ .cards.is-rail > .card{flex:0 0 calc((100% - 2*22px) / 3.15)} } /* ── шаги визита ── */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s} .step{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px} .step__n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px; border:1px solid var(--metal-acc);color:var(--metal-text);font-family:var(--f-display);font-size:19px} .step h3{font-size:19px;margin-bottom:6px} .step p{font-size:15px;color:var(--ink-soft)} /* ── до/после ── */ /* горизонтальная лента, а не сетка в несколько рядов — на любом экране, не только мобильном: карточек уже 9 (3 старых + 6 новых), в 3-колоночной сетке раздел растягивался на 3 строки в высоту. Автопрокрутку убрали 06.08.2026 по просьбе владельца — теперь чисто ручная прокрутка (свайп/трекпад/колесо), поэтому можно включить scroll-snap: каждая карточка ровно останавливается на месте. Скроллбар всё равно прячем — эстетика ленты, не факт отсутствия скролла. */ .ba{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,320px);gap:16px; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none} .ba::-webkit-scrollbar{display:none} .ba figure{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-s);scroll-snap-align:start} .ba img,.ba video{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#000} .ba figcaption{padding:16px 20px;font-size:15px;color:var(--ink-soft)} .ba figcaption b{display:block;color:var(--ink);font-size:16.5px;margin-bottom:2px} .fine{font-size:13.5px;color:var(--ink-soft);margin-top:22px;max-width:78ch} /* ── мастера ── */ .team{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .master{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden; display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .master:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)} .master img{width:100%;aspect-ratio:4/5;object-fit:cover} .master__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex-grow:1} .master h3{font-size:23px;margin-bottom:4px} .master__role{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--plum);margin-bottom:10px} .master p{font-size:15px;color:var(--ink-soft);flex-grow:1;margin-bottom:16px} /* ── отзывы ── */ .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 26px 22px;box-shadow:var(--shadow-s); display:flex;flex-direction:column} .rev__stars{color:var(--metal-text);letter-spacing:2px;margin-bottom:12px} .rev p{font-size:16px;flex-grow:1} .rev footer{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-soft)} .rev cite{font-style:normal;font-weight:700;color:var(--ink)} /* ── галерея ── 12 фото — в сетке 4 в ряд растянулись бы на 3 строки. Горизонтальная лента, как у .ba: следующая карточка выглядывает с края как подсказка к прокрутке, одинаково на любом экране (правило студии 12б — ряд не обрывать неполной строкой, карусель и на десктопе тоже). */ .gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,280px);gap:16px; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none} .gallery::-webkit-scrollbar{display:none} .gallery picture{display:block;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow-s);scroll-snap-align:start} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .gallery picture:hover img{transform:scale(1.04)} /* ── FAQ (аккордеон без JS) ── */ .faq{max-width:860px;margin:0 auto;display:grid;gap:12px} .faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} .faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;font-weight:700;font-size:17px;position:relative;min-height:56px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;margin-top:-7px; border-right:2px solid var(--plum);border-bottom:2px solid var(--plum);transform:rotate(45deg);transition:transform .2s ease} .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px} .faq details[open] summary{border-bottom:1px solid var(--line)} .faq p{padding:18px 24px 22px;color:var(--ink-soft);font-size:16px} /* ── запись ── */ .book{position:relative;overflow:hidden;color:#fff;background:var(--grad-hero)} .book__in{position:relative;z-index:3;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.4vw,56px); align-items:center;padding-block:clamp(48px,6vw,84px)} .book__ways{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .book__contacts{margin-top:22px;font-size:15px;color:rgba(255,255,255,.9)} .form{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);display:grid;gap:15px; box-shadow:0 26px 60px rgba(24,14,48,.32)} .form__t{font-family:var(--f-display);font-size:24px;font-weight:500} .form label{display:block;font-weight:700;font-size:14px;margin-bottom:7px} .form input[type=text],.form input[type=tel],.form select{ width:100%;min-height:54px;padding:15px 16px;border:1px solid var(--line);border-radius:14px; background:#fff;color:var(--ink);font-size:16.5px;transition:border-color .18s ease,box-shadow .18s ease} .form .consent{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);cursor:pointer;line-height:1.45} .form .consent input{width:21px;height:21px;flex-shrink:0;margin-top:2px;accent-color:var(--plum)} .form .note{font-size:13px;color:var(--ink-soft)} /* ── контакты ── */ .contacts{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:stretch} .contacts__list{list-style:none;display:grid;gap:18px;align-content:start} .contacts__list li{display:flex;gap:14px;align-items:flex-start} .contacts__ic{width:44px;height:44px;flex-shrink:0;border-radius:14px;display:grid;place-items:center;background:var(--bg-tint)} .contacts__ic svg{width:20px;height:20px;fill:none;stroke:var(--plum);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .contacts__list strong{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px} .contacts__area{display:inline-block;margin-top:4px;font-size:13.5px;color:var(--ink-soft)} .contacts__list a{color:var(--ink);text-decoration:none;font-weight:700; display:inline-flex;align-items:center;min-height:24px;padding:2px 0} .contacts__list a:hover{color:var(--plum)} .contacts__map{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-s);min-height:400px;border:1px solid var(--line)} .contacts__map iframe{width:100%;height:100%;min-height:400px;border:0;display:block} /* ── подвал ── */ .ftr{background:#2E2547;color:rgba(255,255,255,.82);padding:56px 0 34px} .ftr__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.15)} .ftr img{height:64px;width:auto} .ftr__tag{margin-top:12px;color:var(--metal-light);font-size:16px} .ftr h4{color:#fff;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px} .ftr a,.ftr p{color:rgba(255,255,255,.82);text-decoration:none;font-size:15px;display:block;margin-bottom:9px} .ftr a:hover{color:#fff;text-decoration:underline} .ftr__warn{padding-top:22px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.78)} /* подпись студии-разработчика — самая нижняя строка подвала */ .ftr__warn{display:flex;justify-content:space-between;align-items:flex-end;gap:10px 28px;flex-wrap:wrap} .ftr__warn-txt p{margin:0} .ftr__made{margin:0;font-size:13px;color:rgba(255,255,255,.72);white-space:nowrap} .ftr__made a{display:inline-flex;align-items:center;vertical-align:middle} .ftr__made a{color:rgba(255,255,255,.88);text-decoration:underline;text-underline-offset:3px} .ftr__made a:hover{color:#fff} /* ── липкая панель на телефоне ── */ .sticky{display:none} /* ══ АДАПТИВ ══ */ @media (max-width:1080px){ .nav{display:none} .burger{display:flex} .hdr__in{gap:12px} .nav.is-open{display:flex;position:fixed;inset:0 0 0 auto;width:min(330px,84vw);flex-direction:column;gap:6px; background:#fff;padding:100px 22px 24px;box-shadow:-18px 0 46px rgba(30,18,58,.28);z-index:70;overflow-y:auto} .nav.is-open a{width:100%;text-align:left;font-size:17px;padding:15px 18px} /* Крестик-закрытие внутри самой панели: бургер в шапке остаётся под z-index панели (родитель .hdr — свой стек-контекст, поднять бургер выше панели изнутри нельзя), поэтому видимый способ закрыть меню — кнопка внутри панели, не сам бургер. */ .nav.is-open .nav__close{display:flex;align-items:center;justify-content:center; position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%; border:1px solid var(--line);background:#fff;font-size:26px;line-height:1;color:var(--ink); cursor:pointer} .cards,.steps,.revs,.team{grid-template-columns:repeat(2,1fr)} } @media (max-width:860px){ .hero__in,.book__in,.contacts{grid-template-columns:1fr} /* элементы грида по умолчанию не сжимаются уже своего содержимого (min-width:auto) — на узких телефонах (320px) заголовок book__in по самому длинному слову раздвигал колонку шире экрана. Ставим min-width:0 всем трём на случай похожего контента. */ .hero__in > *,.book__in > *,.contacts > *{min-width:0} .hero__media{order:2;max-width:none;margin-left:0} .facts__in{grid-template-columns:repeat(2,1fr);gap:22px 16px} .fact + .fact{border-left:0} .cards{grid-template-columns:1fr} /* На мобильной карточка шире (78% экрана — следующая видна краем как подсказка) и лента выходит за паддинги .wrap до самого края экрана. */ .ba{grid-auto-columns:78%;margin:0 -24px;padding:0 24px 6px} /* «Четыре шага», «Мастера» и «Отзывы» — та же горизонтальная лента, что у .ba, только со scroll-snap (в отличие от .ba здесь нет медленной автопрокрутки из app.js, которая просит обойтись без snap — можно закрепить каждую карточку). */ .steps,.team,.revs{grid-template-columns:none;grid-auto-flow:column;gap:16px; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none; margin:0 -24px;padding:0 24px 6px} .steps::-webkit-scrollbar,.team::-webkit-scrollbar,.revs::-webkit-scrollbar{display:none} .step,.master,.rev{scroll-snap-align:start} .steps{grid-auto-columns:78%} .team{grid-auto-columns:68%} .revs{grid-auto-columns:82%} .gallery{grid-auto-columns:72%;margin:0 -24px;padding:0 24px 6px} /* Подвал на мобильной занимал слишком много места (4 блока стопкой) — держим 2 колонки вплоть до 320px (перенос длинных строк вроде телефона — нормально для футера) и уплотняем вертикальные отступы: секция, заголовки, ссылки. */ .ftr{padding:38px 0 22px} .ftr__top{grid-template-columns:1fr 1fr;gap:24px 20px;padding-bottom:22px} .ftr img{height:52px} .ftr h4{margin-bottom:9px} .ftr a,.ftr p{margin-bottom:6px} .ftr__warn{padding-top:16px} .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line)} .sticky .btn{flex:1;min-height:52px;padding:13px 18px;font-size:16px} body{padding-bottom:84px} /* На мобильной колонки складываются в одну — горизонтальный градиент фона Hero перестаёт работать (фото не видно вовсе). Вертикальный: белый вверху под текстом, фото проступает ближе к низу, где и так уже карточка-фото. */ .hero{background: linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 38%,rgba(255,255,255,.5) 62%,rgba(255,255,255,.15) 100%), url("img/hero-bg-kabinet.jpg") center 30%/cover no-repeat} } @media (max-width:620px){ /* чип переносится на две строки — вертикальная черта в этом месте выглядит случайной */ .chip-rating{border-radius:20px} .chip-rating__award{border-left:0;padding-left:0} .hdr__tel span{display:none} .hdr__tel{padding:11px 14px} .hdr__logo img{height:48px} .hdr__actions .btn{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } /* ══════════════════════════════════════════════════════════════════════════ ТЕМА «ТИХИЙ СВЕТ» — кремовая база, золото активнее всего, тёмный текст вместо белого на первом экране. Фирменная лаванда осталась акцентом кнопок, бледный сиреневый #C9C2F8 выведен из текста (на белом даёт 1,7:1) — только заливки и обводки. ══════════════════════════════════════════════════════════════════════════ */ :root{ --bg:#F7F3EC; --bg-tint:#F1EBDF; --paper:#FFFDF9; --line:#E6DFD2; --ink:#241F2E; --ink-soft:#5A5266; --plum:#6C4E8F; --plum-deep:#4E3868; --metal-acc:#7A749A; --metal-text:#5B5578; --metal-soft:#BFBCD2; --metal-light:#D3D0E2; --r-card:8px; --r-lg:12px; /* спокойнее, чем скруглённые плитки: ближе к печатному листу */ --shadow-s:0 6px 18px rgba(60,44,28,.08); --shadow-m:0 14px 36px rgba(60,44,28,.12); --shadow-btn:0 8px 20px rgba(108,78,143,.24); --grad:linear-gradient(120deg,#6C4E8F 0%,#78589B 55%,#86619F 100%); /* светлый край затемнён: белый текст 4,97:1 */ } /* первый экран: светлый, текст тёмный */ .hero{background:linear-gradient(180deg,#FBF8F2 0%,var(--bg) 100%);color:var(--ink)} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(760px 520px at 78% 18%, rgba(201,194,248,.34), transparent 66%)} .hero__glow{background:radial-gradient(closest-side,rgba(201,194,248,.42),transparent 72%)} .hero__sub{color:var(--ink-soft)} .hero__note{color:var(--ink-soft)} .hero .eyebrow--light{color:var(--plum)} .hero .eyebrow--light::before{display:none} .chip-rating{background:var(--paper);border:1px solid var(--metal-soft);color:var(--ink);box-shadow:var(--shadow-s)} .chip-rating .stars{color:var(--metal-text)} .chip-rating__src{color:var(--ink-soft)} .chip-rating__award{color:var(--metal-text);border-left-color:var(--metal-soft)} .hero .btn--light{background:var(--grad);color:#fff;box-shadow:var(--shadow-btn)} .hero .btn--light:hover{filter:brightness(1.05)} .hero .btn--ghost-light{background:var(--paper);color:var(--ink);border-color:var(--metal-acc)} .hero .btn--ghost-light:hover{background:#FBF6EC;border-color:var(--metal-text)} .hero__media img{border:1px solid var(--line);box-shadow:0 24px 50px rgba(60,44,28,.16)} /* цифры — золотом: это тот случай, когда крупный кегль его вытягивает */ .fact b{color:var(--metal-text)} .facts{background:var(--paper)} /* карточки: золотая линия сверху вместо фиолетовой */ .card::before{background:var(--metal-acc)} .card:hover{border-color:var(--metal-soft)} .step__n{border-color:var(--metal-acc);color:var(--metal-text)} .rev__stars{color:var(--metal-text)} .master__role{color:var(--metal-text)} .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);box-shadow:none} /* блок записи — светлый, форма в золотой рамке */ .book{background:var(--bg-tint);color:var(--ink)} .book .eyebrow--light{color:var(--plum)} .book .eyebrow--light::before{background:var(--metal-acc)} .book .lead--light{color:var(--ink-soft)} .book__contacts{color:var(--ink-soft)} .book .btn--light{background:var(--grad);color:#fff;box-shadow:var(--shadow-btn)} .book .btn--ghost-light{background:var(--paper);color:var(--ink);border-color:var(--metal-acc)} .book .btn--ghost-light:hover{background:#FBF6EC} .form{border:1px solid var(--metal-soft);box-shadow:var(--shadow-m)} .sticky{background:rgba(247,243,236,.97);border-top-color:var(--line)} .nav.is-open{background:var(--paper)} .ftr{background:#241F2E} /* ══ СЛУЖЕБНОЕ: скрытая ловушка, ошибки формы, cookie-баннер ══ */ .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .form__err{color:#B3261E;font-size:14px;margin-top:-4px;display:none} .form__err.is-on{display:block} .form__done{font-weight:700;color:var(--plum-deep);margin:0} .ftr__link-btn{background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left; color:inherit;text-decoration:underline;text-underline-offset:3px} .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:760px;margin:0 auto; background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card); box-shadow:var(--shadow-m);padding:22px 26px;display:none;gap:20px;align-items:center;flex-wrap:wrap} .cookie.is-open{display:flex} .cookie__text{flex:1 1 340px;font-size:15.5px;line-height:1.5;color:var(--ink)} .cookie__text a{color:var(--plum);text-decoration:underline;text-underline-offset:3px} .cookie__actions{display:flex;gap:12px;flex-shrink:0} @media (max-width:860px){ /* Раньше 78px — запас над .sticky-панелью «Позвонить/Записаться», чтобы баннер не перекрывал её. Пока баннер открыт, .sticky теперь всегда скрыта (html.has-cookiebar .sticky{display:none} ниже) — запас под неё больше не нужен, опускаем баннер к обычному отступу от края (16px, как на десктопе, + отступ под «чёлку»/домашний индикатор iPhone). Это не служебный элемент из юридической механики — просто позиция контейнера. */ .cookie{left:10px;right:10px;bottom:calc(16px + env(safe-area-inset-bottom));padding:18px} .cookie__actions{width:100%} .cookie__actions .btn{flex:1} } /* ⚠️ На узких и КОРОТКИХ телефонах (320–412px, высота 568–732px) сам баннер занимал почти половину экрана (текст в 5–6 строк + ряд кнопок ≈ 210–235px из 568px) — форма записи (#zapis) ниже по странице при обычной прокрутке вниз на части пути попадала под него (замерено на этих ширинах). Уменьшаем ФУТПРИНТ баннера — компактность (паддинги/интервал/ кегль/высота кнопок), текст и вес кнопок «Да»/«Нет» не меняем; кегль не ниже 13.5px (обычный минимум читаемости, легче основного текста подвала — 13px) и высота кнопки не ниже 44px (нижняя граница тач-таргета WCAG 2.2). Вместе с подъёмом bottom-отступа выше это увеличивает свободную зону над баннером, в которой чекбокс согласия и кнопка формы одновременно видны и не перекрыты. */ @media (max-width:480px){ .cookie{padding:11px 13px;gap:8px} .cookie__text{font-size:13.5px;line-height:1.32} .cookie__actions{gap:8px} .cookie__actions .btn{min-height:44px;padding:9px 12px;font-size:14.5px} } /* ⚠️ Пока .cookie виден, он position:fixed и висит НАД подвалом — при докрутке страницы до конца перекрывает юр-ссылки колонки «Документы» (Согласие, Настройки куки). Замерено 15.08.2026 на 360/412px — запас между ссылкой и баннером всего ~70px, баннер вообще не резервирует место в потоке документа. Резервируем под ним место на подвале — на всю его ФАКТИЧЕСКУЮ высоту. Не хардкодим числом: --cookiebar-h кладёт скрипт (app.js) как innerHeight−rect.top баннера, т.е. сразу и высоту, и отступ от края экрана — bottom-офсет баннера чуть разный на десктопе (16px) и мобильной (16px + safe-area отступ «чёлки»/домашнего индикатора), одним числом это не выразить константой. Добавляется ПОВЕРХ штатного нижнего отступа подвала, не вместо него — оба значения (34px/22px) совпадают с .ftr{padding:…} и её мобильной версией ниже. */ html.has-cookiebar .ftr{padding-bottom:calc(34px + var(--cookiebar-h,0px))} @media (max-width:860px){ html.has-cookiebar .ftr{padding-bottom:calc(22px + var(--cookiebar-h,0px))} } /* На короткой мобильной (высота вьюпорта меньше запаса+подвала) этот же резерв поднимает низ подвала так высоко, что под него подъезжает ПРИЛИПШАЯ шапка (.hdr — position:sticky) — перекрытие переезжает с баннера на шапку, замерено 15.08.2026 (360×740, 390×844: «Согласие»/ «Политика» под .hdr после наивного резерва). Пока баннер открыт — на это время шапке прилипание не нужно (посетитель занят ответом на баннер, а не навигацией), поэтому временно отключаем sticky. Как только html.has-cookiebar снимается (ответ дан), шапка прилипает как обычно. */ html.has-cookiebar .hdr{position:relative} /* Та же логика для нижней sticky-панели «Позвонить/Записаться» на телефоне (.sticky, см. @media max-width:860px выше): пока баннер открыт, она — ВТОРОЙ fixed-оверлей у самого низа экрана, вплотную под баннером, и вместе они закрывают почти половину короткого экрана (568–732px). Форма записи ниже по странице (#zapis, тот же смысл записи, что и на этой панели) — на время ответа на баннер дублирующая кнопка не нужна, а место освобождает ощутимо (~77px + safe-area). Как только html.has-cookiebar снимается — панель возвращается. */ html.has-cookiebar .sticky{display:none} /* ══ МЕТАЛЛИЧЕСКАЯ ОБВОДКА — по всем блокам и кнопкам ══ Выбор владельца 01.08.2026 из четырёх примерок: серебро, тонированное фирменной лавандой, — холодное к холодной базе, одной температуры с логотипом. Роли: --metal (#A9A6C0) рамка блоков и кнопок, --metal-hi (#8A86A8) наведение, --metal-acc (#7A749A, 4,4:1) иконки и крупные акценты, --metal-text (#5B5578, 7:1) мелкий текст — звёзды, «№1», цифры шагов. */ :root{ --metal:#A9A6C0; /* рамки блоков и кнопок */ --metal-hi:#8A86A8;/* наведение */ } /* блоки-карточки — только рамка, они не интерактивные */ .card,.step,.ba figure,.master,.rev,.faq details,.contacts__map, .cookie,.hero__media img,.form,.chip-rating, .form input[type=text],.form input[type=tel],.form select{border-color:var(--metal)} .card:hover,.master:hover,.rev:hover{border-color:var(--metal-hi)} /* :focus идёт ПОСЛЕ металлической обводки — иначе тот же селектор по специфичности перебивает фокус (реальный баг: контраст индикатора фокуса падал до ~1,2:1) */ .form input:focus,.form select:focus{border-color:var(--plum);box-shadow:0 0 0 3px rgba(108,78,143,.14);outline:none} /* интерактивные элементы — та же рамка, что у блоков. Контраст границы 2,4:1 при норме 3:1; компенсируем тёмным текстом внутри и кольцом фокуса. Строго по норме проходит только --metal-acc, но сплошная рамка им выглядит тяжело — на наведении она к нему и уходит. */ .btn--outline,.tab,.nav a,.hdr__tel,.burger{ border-color:var(--metal); box-shadow:none; } .btn--outline:hover,.tab:hover,.nav a:hover,.hdr__tel:hover{ border-color:var(--metal-hi);background:#FCF8F0; } .nav a.is-current{border-color:var(--metal-hi);background:#FCF8F0;color:var(--plum)} .burger{box-shadow:none} /* кнопки с заливкой: рамка металлом, внутренняя линия не нужна — их и так отделяет от фона сама заливка */ .btn{border-color:var(--metal)} .btn:hover{border-color:var(--metal-hi)} .btn--light{border-color:var(--metal)} .btn--light:hover{border-color:var(--metal-hi)} .btn--ghost-light{border-color:var(--metal)} .btn--ghost-light:hover{border-color:#fff} /* ══ ФИРМЕННЫЙ ФОН ПО БРЕНДБУКУ (стр. 17, 20) ══ Кремовая база варианта А совпала с фоном ещё двух наших сайтов — три разных бренда выглядели одинаково. Возвращаем то, что записано в брендбуке: серый фоновый #EDEDED и «светлые холодные оттенки» фотостиля, плюс фирменный паттерн звёзд деликатной подложкой. Золото и лаванда остаются акцентами. */ :root{ --bg:#EDEDED; /* серый фоновый брендбука, как есть */ --bg-tint:#E6E4F0; /* подложка секций: сиреневый #C9C2F8, разбелённый */ --paper:#FFFFFF; /* карточки — чистый белый, без кремового оттенка */ --line:#DCD9E6; /* холодная линия вместо тёплой бежевой */ --shadow-s:0 6px 18px rgba(56,44,86,.09); --shadow-m:0 14px 36px rgba(56,44,86,.13); } /* фирменный паттерн звёзд — очень слабо, чтобы серое полотно не было пустым */ body{background-image:url("img/pattern-stars.png");background-size:520px auto; background-repeat:repeat;background-attachment:fixed} body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg);opacity:.86;pointer-events:none} /* тёплые заливки наведения — на холодные */ .btn--outline:hover,.tab:hover,.nav a:hover,.hdr__tel:hover,.nav a.is-current{background:#F4F2FA} .sticky{background:rgba(255,255,255,.97)} /* первый экран уходил в тёплый кремовый — переводим в холодную гамму брендбука */ .hero{background: linear-gradient(100deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 22%,rgba(255,255,255,.3) 42%,rgba(255,255,255,.06) 58%,transparent 72%), url("img/hero-bg-kabinet.jpg") center 38%/cover no-repeat} .hero .btn--ghost-light:hover,.book .btn--ghost-light:hover{background:#F4F2FA} /* фирменный паттерн звёзд — не сплошной подложкой всей страницы (её всё равно перекрывают заливки секций), а на двух прозрачных секциях */ body{background-image:none} body::before{display:none} #zadachi,#otzyvy{position:relative} #zadachi::before,#otzyvy::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:url("img/pattern-stars.png") repeat;background-size:460px auto;opacity:.5} #zadachi>*,#otzyvy>*{position:relative;z-index:1} /* две пилюли-регалии друг под другом: рейтинг Яндекс Карт и место на Zoon. Раньше «№1» висела поверх фото и мешала лицу */ .hero__chips{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:22px} .chip-rating--zoon b{font-family:var(--f-display);font-size:22px;color:var(--metal-text);line-height:1} /* ══ КАРУСЕЛЬ ФОТО В ПЕРВОМ ЭКРАНЕ ══ Слайды лежат друг на друге, переключаются прозрачностью; листает app.js (там же авто-прокрутка, пауза при наведении и уважение prefers-reduced-motion). */ .hero__slides{position:relative;width:100%;aspect-ratio:1/1.04;border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--metal);box-shadow:0 24px 50px rgba(60,44,28,.16)} @media (min-width:861px){ .hero__slides{aspect-ratio:auto;height:100%} } .hslide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease} .hslide.is-active{opacity:1} .hslide img,.hslide picture{width:100%;height:100%;display:block} .hslide img{object-fit:cover;object-position:center 28%;border:0;border-radius:0;box-shadow:none} .hero__dots{display:flex;gap:9px;justify-content:center;margin-top:14px} .hero__dots button{position:relative;width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer; border:1px solid var(--metal);background:transparent;transition:background-color .2s ease,transform .2s ease} /* Видимая точка остаётся 9px, но тач-цель расширена невидимой областью до WCAG 2.5.8 (≥24px) */ .hero__dots button::after{content:"";position:absolute;inset:-8px;border-radius:50%} .hero__dots button.is-active{background:var(--metal-acc);transform:scale(1.25);border-color:var(--metal-acc)} @media (prefers-reduced-motion:reduce){ .hslide{transition:none} } /* ══ ШАПКА-КАПСУЛА — по образцу салона цветов ══ Плавающая капсула, отделённая от краёв экрана; зазор от контура до логотипа слева и до кнопки справа одинаковый (10 px), высота элементов внутри подогнана под капсулу. Полупрозрачная с размытием — сквозь неё виден контент. */ .hdr{position:sticky;top:14px;z-index:60;margin:14px auto 0; max-width:1240px;width:calc(100% - 32px); background:none;border-bottom:0;box-shadow:none;backdrop-filter:none} .hdr__in{max-width:none;width:100%;min-height:0;height:78px;gap:10px; padding:0 10px;border-radius:44px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border:1px solid var(--metal); box-shadow:0 12px 34px rgba(78,56,104,.14)} /* без размытия — плотный фон, иначе текст ляжет на контент под шапкой */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hdr__in{background:rgba(255,255,255,.97)} } .hdr__logo img{height:56px} .hdr__tel,.nav a{padding-block:10px} .hdr .btn--sm{min-height:52px} .burger{width:52px;height:52px;border-radius:50%} /* меню центрируется распоркой, а не auto-margin: с ним свободное место уходило в левый зазор и кнопка вылезала за правый край капсулы */ .hdr__in{justify-content:space-between} .nav{margin:0;gap:6px} .nav a{padding-inline:16px} /* 02.08.2026: был короткий эпизод с 7-м пунктом меню «Все услуги» в шапке — на экранах ≥1321px ломал капсулу (кнопка «Записаться» вылезала за край). Пункт убран обратно (перенесён кнопкой «Посмотреть все услуги» внутрь блока «Начнём с задачи»), меню снова из 6 пунктов — уплотнение под 7-й пункт тоже убрано. Заодно нашёлся и ЧУЖОЙ, более старый баг того же типа: комментарий ниже считал запас только в точке «капсула = 1240px» (виден с 1272px и шире), но капсула УЖЕ ищет книзу от неё — calc(100% − 32px) — и на 1181–1210px (сразу выше исходного порога 1180px, ещё без скидки на скрытие текста телефона) она уже теснее, чем нужно шести пунктам с текстом телефона: кнопка «Записаться» вылезала за капсулу до 28px. Прежняя комплексная проверка это не ловила — прыгала с 1180 сразу на 1280, минуя щель. Порог сдвинут до 1215px — с запасом выше замеренной границы 1211px, где наложение уходит в 0. */ @media (max-width:1215px){ .hdr__tel span{display:none} .hdr__tel{padding-inline:14px} } @media (max-width:1024px){ .nav{display:none} .burger{display:flex} } @media (max-width:1080px){ .hdr{top:8px;margin-top:8px;width:calc(100% - 20px)} .hdr__in{height:70px} .hdr__logo img{height:48px} } .step__n{border-color:var(--metal)} /* ══════════════════════════════════════════════════════════════════════════ ЮРИДИЧЕСКИЕ СТРАНИЦЫ (politika.html, soglasie.html) — перенесено из прежней темы, токены переведены на текущую палитру (--plum вместо --violet-deep, --bg-tint вместо --wash-lilac). Отдельного top-padding не нужно: шапка sticky, а не fixed, — браузер сам резервирует под неё место в потоке. ══════════════════════════════════════════════════════════════════════════ */ .legal{padding:64px 0 80px;background:var(--paper)} .legal__title{ font-family:var(--f-display);font-weight:500; font-size:clamp(30px,4.4vw,44px);line-height:1.12; color:var(--ink);margin:10px 0 14px; } .legal__meta{color:var(--ink-soft);font-size:15.5px;margin-bottom:34px} .legal__box{ background:var(--bg-tint);border-radius:var(--r-lg); padding:24px 28px;margin-bottom:40px; border-left:4px solid var(--metal-acc); } .legal__box p{margin:0} .legal h2{ font-family:var(--f-display);font-weight:500; font-size:clamp(22px,2.6vw,27px);line-height:1.2; color:var(--ink);margin:38px 0 14px; } .legal p{margin-bottom:14px} .legal ul{margin:0 0 18px 0;padding-left:22px} .legal li{margin-bottom:9px} .legal a{color:var(--plum);text-decoration:underline;text-underline-offset:3px} .legal a:hover{color:var(--plum-deep)} .legal__accent{ background:var(--bg-tint);border-radius:16px; padding:18px 22px;margin:22px 0; } /* table-layout:fixed — без него длинный текст в ячейке («Самозанятая (плательщик налога на профессиональный доход)») раздвигал таблицу шире экрана вместо переноса по словам: table-layout:auto считает ширину колонок по контенту и игнорирует width:100% родителя, если контент не помещается. */ .legal__table{width:100%;table-layout:fixed;border-collapse:collapse;margin:6px 0 22px} .legal__table th,.legal__table td{ text-align:left;vertical-align:top;padding:12px 14px; border-bottom:1px solid var(--line);font-size:16.5px; overflow-wrap:break-word;word-break:break-word; } .legal__table th{width:38%;font-weight:700;color:var(--ink-soft)} .legal__back{margin-top:46px} /* ══════════════════════════════════════════════════════════════════════════ СТРАНИЦА «ВСЕ УСЛУГИ» (uslugi.html) — прайс-лист из выгрузки YCLIENTS, 335 позиций в 9 группах: чипы-фильтр + поиск + аккордеон категорий. ══════════════════════════════════════════════════════════════════════════ */ .usl-tools{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-start;margin-bottom:22px} .usl-search{flex:1 1 260px;min-width:0} .usl-search input{ width:100%;min-height:52px;padding:14px 18px;border:1px solid var(--line);border-radius:14px; background:var(--paper);color:var(--ink);font-size:16.5px;font-family:var(--f-body); transition:border-color .18s ease,box-shadow .18s ease; } .usl-search input:focus{border-color:var(--plum);box-shadow:0 0 0 3px rgba(108,78,143,.14);outline:none} .usl-chips{flex:2 1 480px;margin-bottom:0} .usl-count{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px} .usl-empty{padding:28px 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card); color:var(--ink-soft);text-align:center} .usl-groups{display:grid;gap:40px} .usl-group__title{font-size:clamp(19px,2vw,23px);margin-bottom:14px} .usl-cats{display:grid;gap:12px} .usl-cat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} .usl-cat summary{list-style:none;cursor:pointer;padding:18px 56px 18px 22px;font-weight:700;font-size:16.5px; position:relative;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:14px} .usl-cat summary::-webkit-details-marker{display:none} .usl-cat summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;margin-top:-6px; border-right:2px solid var(--plum);border-bottom:2px solid var(--plum);transform:rotate(45deg);transition:transform .2s ease} .usl-cat[open] summary::after{transform:rotate(-135deg);margin-top:-2px} .usl-cat[open] summary{border-bottom:1px solid var(--line)} .usl-cat__count{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--ink-soft); background:var(--bg-tint);border-radius:999px;padding:3px 11px} .usl-rows{list-style:none;margin:0;padding:0} .usl-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:14px 22px;border-bottom:1px solid var(--line)} .usl-row:last-child{border-bottom:0} .usl-row__main{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;flex:1 1 220px;min-width:0} .usl-row__name{font-weight:600} .usl-row__dur{color:var(--ink-soft);font-size:13.5px} .usl-row__dur::before{content:"· "} .usl-row__price{margin-left:auto;font-family:var(--f-display);font-size:17px;color:var(--plum-deep); white-space:nowrap;font-variant-numeric:tabular-nums} .usl-row__book{flex-shrink:0;padding:7px 16px;border-radius:var(--r-btn);border:1px solid var(--metal-acc); color:var(--plum);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap; transition:background-color .18s ease,border-color .18s ease} .usl-row__book:hover{background:var(--bg-tint);border-color:var(--plum)} .usl-row__info{flex-basis:100%;order:3;text-align:left;background:none;border:0;padding:0;margin-top:2px; font-size:13.5px;color:var(--plum);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .usl-row__desc{flex-basis:100%;order:4;margin:6px 0 0;color:var(--ink-soft);font-size:15px;line-height:1.55} .usl-cta{text-align:center} .usl-cta .lead{margin:14px auto 0;max-width:56ch} .usl-cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px} @media (max-width:620px){ .usl-chips .tab{padding:10px 16px;font-size:14px;min-height:42px} .usl-cat summary{padding:16px 44px 16px 18px} .usl-cat summary::after{right:18px} .usl-cat__count{display:none} .usl-row{padding:13px 18px} .usl-row__price{font-size:16px} .usl-row__book{padding:6px 13px;font-size:13px} } /* ══════════════════════════════════════════════════════════════════════════ РАЗДЕЛ «О КРАСОТЕ» (o-krasote.html + статьи) — текстовое тело статьи. Типографика повторяет .legal (те же токены), но своим классом: .legal — для юр. документов, .artc — для информационных статей, смешивать не надо. ══════════════════════════════════════════════════════════════════════════ */ .artc{max-width:760px;margin:0 auto} .artc h2{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.6vw,27px); line-height:1.2;color:var(--ink);margin:34px 0 14px} .artc h2:first-child{margin-top:0} .artc p{margin-bottom:14px} .artc ul{margin:0 0 18px 0;padding-left:22px} .artc li{margin-bottom:9px} .artc a{color:var(--plum);text-decoration:underline;text-underline-offset:3px} .artc a:hover{color:var(--plum-deep)} /* ══════════════════════════════════════════════════════════════════════════ ПОЯВЛЕНИЕ БЛОКОВ ПРИ ПРОКРУТКЕ (классы вешает app.js) ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:no-preference){ .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease} .rv.is-vis{opacity:1;transform:none} } /* ═══════════════════════════════════════════════════════════════════════════ ВИТРИННЫЕ ЭФФЕКТЫ (логика — в effects.js). Перенесены с сайта студии 21.08.2026, селекторы подобраны под структуру этого сайта. Всё — только для мыши и только если посетитель не просил в системе уменьшить анимацию. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Плавные переходы между страницами (View Transitions API) ── Встроенная возможность браузера, не библиотека: при переходе по внутренней ссылке страница мягко уезжает вверх, новая всплывает снизу — вместо белой вспышки. Шапка и подвал названы отдельно, иначе мигали бы вместе со страницей. Браузеры без поддержки (Firefox) просто грузят страницу как раньше. Параметры — канон студии из каталога «Эффекты и анимации», карточка 01 (принят 07.09.2026 живым показом). Правило @view-transition обязано стоять в общем styles.css: если оно есть только на одной из двух страниц перехода, эффекта не будет вообще. ⚠ Имя перехода обязано быть уникальным на странице. На главной ЧЕТЫРЕ тега