/* ============================================================
SVITLO — beauty studio, головна сторінка
Побудовано на спільних токенах проєкту: молочний, айворі,
пісок, графіт і один приглушений глиняний акцент.
============================================================ */
.salon{
/* ---------- шрифтова пара ----------
Inter — все: інтерфейс, заголовки, картки, ціни, форми.
Playfair Display Italic — тільки акцентні фрази всередині великих
заголовків. Обидва мають кириличний сабсет Google Fonts (U+0400–045F
та U+0490–0491), тож і ї є ґ І Ї Є Ґ рендеряться самим шрифтом,
а не фолбеком. */
--font-sans:'Inter','Helvetica Neue',Arial,sans-serif;
--font-serif:'Playfair Display',Georgia,serif;
/* старі імена лишаються аліасами: весь код уже ходить через них,
і жоден компонент не задає сімейство напряму */
--ui:var(--font-sans);
--display:var(--font-sans);
--accent-face:var(--font-serif);
/* ---------- ролі типографіки ----------
Одне місце, де задано сімейство для кожної ролі — компоненти
беруть токен, а не назву шрифту. */
/* Заголовки цілком на Playfair: ліва частина — пряме накреслення,
акцентна — курсив того самого шрифту. Контраст тримає пара
roman × italic, а не два різні шрифти — тож рядок читається як одна
система. Картки, текст, лейбли й кнопки лишаються на Inter. */
--f-display:var(--font-serif); /* герой сторінки */
--f-section:var(--font-serif); /* заголовки секцій */
--f-accent:var(--font-serif); /* акцентна фраза у них */
--f-card:var(--font-sans); /* заголовки карток */
--f-body:var(--font-sans); /* описи й абзаци */
--f-small:var(--font-sans); /* дрібний текст */
--f-label:var(--font-sans); /* капсові лейбли */
--f-button:var(--font-sans); /* кнопки й текстові CTA */
/* заголовок і опис — одна текстова група, тож відступ між ними вдвічі
менший за типовий; повітря до контенту лишається за .sec-head */
--space-sub:clamp(14px,1.5vw,19px);
/* ---------- розмір тексту ----------
Описи піднято на два пункти, заголовки й лейбли не чіпаємо.
Токени перевизначені всередині .salon, тож решта сторінок
проєкту лишається на спільній шкалі. */
--t-body:clamp(1rem,.3vw + .92rem,1.1875rem); /* 16 → 19 */
--t-meta:clamp(.875rem,.14vw + .83rem,.9375rem); /* 14 → 15 */
/* Жоден читний текст не менший за 14px. Цей токен годує капсові
лейбли по всій сторінці — від ейброу до підписів у формі запису. */
--t-label:.875rem;
/* трекінг на 14px має бути скромніший: .14em на більшому кеглі
розганяє рядок настільки, що короткі лейбли починають переноситися */
--ls-label:.1em;
--ls-ui:.08em;
/* цифри лишаються на попередній шкалі: ціни й час підросли б
разом з описами, а їх збільшувати не треба */
--t-num:clamp(.9375rem,.25vw + .86rem,1.0625rem);
/* Inter трохи щільніший за замовчуванням — забираємо волосину трекінгу */
letter-spacing:-.003em;
/* жодних синтетичних ваг: краще сусідня справжня, ніж підроблена */
font-synthesis-weight:none;
/* radius-система: що більший блок, то м'якший кут.
Дрібні контроли лишаються стриманими, круглі — круглими. */
--radius-sm:10px; /* кнопки, дрібні лейбли */
--radius-ctl:12px; /* дата, час, опції у формі запису */
--radius-md:16px; /* фото, картки, карта, сертифікат */
--radius-lg:20px; /* панель онлайн-запису */
--radius-xl:22px; /* модальне вікно */
/* ---------- палітра ----------
bone + warm white + espresso + cognac + deep chocolate.
Усе перевизначено тут, усередині .salon, а не в tokens.css:
токени спільні для всього проєкту, і ця сторінка не має права
міняти колір іншим. */
/* головне світле тло сторінки */
--bone:#F3F0E9;
/* поверхня картки — майже білий, але теплий */
--milk:#FCFAF6;
/* плейсхолдер під фото й світлий hover */
--ivory:#EDE8DF;
--ivory-2:#E6E0D4;
--stone:#E4DED2;
--sand:#D8CEBE;
/* текст: espresso замість чорного */
--ink:#1F1A16;
--ink-70:#574E45;
/* Вторинний текст. Був #7D746C — на головному тлі сторінки це 4.02:1,
тобто нижче за норму AA для звичайного кегля (4.5), а на кремовій
картці сертифіката лише 3.44. Тон потемнів рівно настільки, щоб
пройти 4.5 на всіх світлих поверхнях сайту (bone 5.32, milk 5.80,
ivory 4.96, картка 4.55) — відтінок і характер ті самі, на темному
тлі цей токен ніде не стоїть. */
--ink-45:#6A615A;
--ink-25:#A89F95;
--on-dark:#F3F0E9;
/* роздільники — лише натяк на лінію */
--line:rgba(42,32,25,.12);
--line-soft:rgba(42,32,25,.10);
--rule:rgba(42,32,25,.10);
--line-dark:rgba(243,240,233,.16);
/* cognac — єдиний акцент; світла версія — для темних секцій */
--accent:#A86F48;
/* Робочий варіант акценту для двох випадків, де --accent не добирає
контрасту: білий текст на заливці (5.2:1) і сам цей тон на
кремовому тлі (4.6:1). На --accent обидва дають близько 4.0:1. */
--accent-fill:#95603C;
/* Акцент, яким пишуть текст. Окремий від --accent-fill, бо в того
лишався всього десятий відсотка запасу над нормою (4.59 проти
4.5), і будь-яке потемніння тла — наприклад, світлова пляма під
заголовком прайсу — опускало пару нижче. Цей тон тримає 5.2 під
плямою й 4.6 навіть у центрі піщаної плями, тож фон можна
вести далі, не звіряючись із кожним лейблом. */
--accent-text:#875637;
--accent-soft:#C99570;
/* deep chocolate — темні секції й футер */
--dark:#211A16;
--brown:#2E231B;
--graphite:#211A16;
--graphite-2:#2A211B;
--on-graphite:#F3F0E9;
--line-g:rgba(243,240,233,.16);
/* діаметр кола соцмережі: контакти, футер і мобільне меню — один розмір,
не менший за комфортну зону натискання */
--soc-size:44px;
--mcta-h:0px;
/* єдиний розмір заголовка картки — напрямів, послуг і всього,
що стоїть на цьому ж рівні. 32px від 1024px і вище, плавно
до 24px на телефоні. Будь-яка нова картка бере цей токен,
а не свій clamp — інакше знову з’являться 32/34px поруч. */
--t-card-t:clamp(1.5rem,1.47vw + 1.06rem,2rem);
/* ---------- контраст кеглів ----------
Спільна рампа розрахована на весь проєкт і дає заголовки секцій
близько 45px — для editorial-розвороту замало. Піднімаємо два
щаблі так, щоб відстань між заголовком секції й заголовком
картки читалася одразу, а не вгадувалася. */
--d2:clamp(2.1rem,4.1vw,3.75rem); /* заголовок секції — 59px на 1440 */
--d4:clamp(1.3rem,2vw,1.625rem); /* заголовок картки — 26px */
/* кегль навігації в звичайному регістрі */
--t-nav:.9375rem;
/* ---------- фонові шари ----------
Дві логіки, обидві — тільки на псевдоелементах: розмітка
сторінки не змінюється жодним рядком.
1. Зерно паперу. Одна дрібна плитка fractalNoise, замощена по
кожній секції поверх її фону, але під вмістом. Робить і
світле, і темне тло не ідеально рівним — саме цим кремовий
папір відрізняється від залитого кольором прямокутника.
Прозорість запечена в сам SVG, бо окремий шар background
власної непрозорості не має; для темних смуг є міцніший
варіант, інакше сірий шум на майже чорному не читається.
Важливо, що шар лежить ПІД текстом: плівка поверх літер
з'їдала б частку контрасту, а на межових парах кольорів
сайту та частка була б помітна.
2. Ботанічний контур. Тонка однотовщинна лінія — гілочка, дуга.
Лише в чотирьох місцях, лише у вільних полях і ніколи під
текстом.
3. Ботанічний контур. Тонка однотовщинна лінія — гілочка, дуга,
стеблина. Лише там, де є справжня порожнеча, і ніколи під
текстом.
Усі три лежать під вмістом (isolation + z-index:-1) і не ловлять
ні кліків, ні фокуса. */
--bg-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
--bg-grain-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.085'/%3E%3C/svg%3E");
--bg-sprig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 420' fill='none' stroke='%23A86F48' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M86 6C72 92 64 196 68 300c1 34 4 70 9 108'/%3E%3Cpath d='M75 70C58 66 44 54 36 34c22 1 38 11 47 29'/%3E%3Cpath d='M71 118c18-6 31-18 38-38-22 2-37 14-45 33'/%3E%3Cpath d='M67 174C48 171 32 160 22 139c23-1 41 9 52 29'/%3E%3Cpath d='M65 226c19-5 33-17 41-37-23 1-39 13-48 32'/%3E%3Cpath d='M66 282C47 280 31 270 20 249c23 0 41 10 53 29'/%3E%3Cpath d='M70 334c18-7 30-20 36-41-22 3-36 16-43 36'/%3E%3C/svg%3E");
--bg-arc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420' fill='none' stroke='%23A86F48' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M410 210A200 200 0 0 0 210 10'/%3E%3Cpath d='M410 210A200 200 0 0 1 210 410'/%3E%3Cpath d='M352 210A142 142 0 0 0 210 68'/%3E%3Cpath d='M296 210A86 86 0 0 1 210 296'/%3E%3C/svg%3E");
--bg-stem:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 150' fill='none' stroke='%23A86F48' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M6 112C92 98 196 90 300 94c34 1 70 4 108 9'/%3E%3Cpath d='M70 101C66 84 54 70 34 62c1 22 11 38 29 47'/%3E%3Cpath d='M118 97c-6-18-18-31-38-38 2 22 14 37 33 45'/%3E%3Cpath d='M174 93C171 74 160 58 139 48c-1 23 9 41 29 52'/%3E%3Cpath d='M226 91c-5-19-17-33-37-41 1 23 13 39 32 48'/%3E%3Cpath d='M282 92C280 73 270 57 249 46c0 23 10 41 29 53'/%3E%3C/svg%3E");
/* лейбл «від» перед сумою — один на всі компоненти з цінами */
--t-from:clamp(.875rem,.08vw + .855rem,1rem);
}
/* ---------- доповнення до спільного UI-кіта ----------
Одна мова кнопок на всю сторінку: кожен прямокутний CTA — pill.
Правило прив'язане до .salon, тож решта сторінок проєкту лишається
на своїх радіусах. Форми, картки й модалки не чіпаємо: округлюємо
саме контроли, а не контейнери. */
.salon .btn{border-radius:999px}
/* ---------- шкала висот кнопок ----------
52px — головний CTA секції (базовий .btn зі спільного кіта);
48px — компактний: вторинні дії, кнопки в рядку з текстом;
56px — головна дія панелі запису, де кнопка стоїть сама;
58px — липка смуга й мобільне меню: зона великого пальця;
42px — кнопка у верхній смузі, яку обмежує її висота.
Інших значень бути не повинно: саме через них однакові на вигляд
кнопки виявлялися різної висоти в сусідніх секціях. */
.btn--sm{height:48px;padding:0 26px}
/* Суцільний акцентний CTA. Заливка на півтона темніша за --accent:
на самому --accent білий текст дає 4.0:1, тобто нижче за норму для
основного тексту. Тут 4.7:1, а колір лишається тією самою глиною. */
.btn--accent{background:var(--accent-fill);color:#FFF}
.btn--accent::after{background:#8A5C3B}
.btn--accent:hover{color:#FFF}
.btn--ghost{
background:transparent;color:var(--on-dark);
box-shadow:inset 0 0 0 1px rgba(243,240,233,.45);
}
.btn--ghost:hover{color:var(--ink)}
.btn--ghost::after{background:var(--on-dark)}
.btn--full{width:100%}
.link--sm{font-size:var(--t-label)}
/* ---------- верхня панель ----------
Один елемент у двох станах. Угорі сторінки панелі візуально немає:
жодного фону, рамки чи тіні — тільки світлий текст поверх фотографії
героя. Після скролу під нею вмикається суцільне світло сторінки,
а текст темнішає. Ні висота, ні ширина, ні позиція не змінюються
між станами, тож перехід не рухає жодного елемента.
Кольори тексту йдуть через --bar-fg / --bar-fg-soft: стан перемикає
дві змінні, а не десяток селекторів. */
.salon .topbar{padding:0}
.salon .topbar .bar{
/* Оболонка йде від краю до краю екрана: стелі ширини немає, бічних
полів немає, кути прямі — фон доходить до обох країв у будь-якому
стані. Сам рядок усередині лишається на напрямних контейнера
(.bar__in — звичайний .wrap), тож логотип і кнопка стоять на тих
самих вертикалях, що заголовки й картки всіх секцій. */
width:100%;max-width:none;margin-inline:0;
height:var(--bar-h);
--bar-fg:var(--on-dark);
--bar-fg-soft:rgba(243,240,233,.78);
/* Акцент смуги: над знімком сам глиняний тон темніший за фотографію,
тож тут його світліша версія, розведена кремовим (--accent-soft
із --on-dark): той самий теплий відтінок, але 6:1 проти кадру
замість 4:1. На світлій смузі акцент береться міцніший. */
--bar-accent:#DCBEA6;
background:transparent;color:var(--bar-fg);
border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
transition:background-color .3s var(--ease),color .3s var(--ease);
}
/* Логотип ліворуч, телефон і кнопка праворуч — дві крайні зони.
Меню вийняте з потоку: у сітці 'auto 1fr auto' воно центрувалося всередині
середньої колонки, а та рівна центру лише тоді, коли логотип і права
частина однакової ширини — а вони різні. Тепер меню стоїть на реальній
осі панелі й не залежить від ширини сусідів. */
.salon .bar__in{
position:relative;
grid-template-columns:auto auto;
justify-content:space-between;
gap:clamp(16px,3vw,48px);
}
.salon .bar__mark{font-size:19px;font-weight:600;letter-spacing:.08em;justify-self:start}
.salon .nav{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
gap:clamp(20px,2.6vw,38px);
}
.salon .util{justify-self:end;gap:clamp(16px,2vw,30px)}
/* телефон — спокійний другорядний елемент, без власної плашки */
.salon .bar__tel{
font-size:.9375rem;letter-spacing:.01em;font-variant-numeric:tabular-nums;
color:var(--bar-fg-soft);opacity:1;gap:8px;
transition:color .3s var(--ease);
}
.salon .bar__tel svg{
width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
stroke-linecap:round;stroke-linejoin:round;
}
.salon .bar__tel:hover{color:var(--bar-fg)}
/* кнопка запису — єдиний колірний акцент у хедері */
.salon .bar__cta{
background:var(--accent-fill);color:#FFF;
height:42px;padding:0 26px;
}
.salon .bar__cta::after{background:#8A5C3B}
.salon .bar__cta:hover{color:#FFF}
.salon .bar__cta svg{transition:transform .35s var(--slow)}
.salon .bar__cta:hover svg{transform:translateX(3px)}
/* При скролі з'являється тільки фон — те саме світло, що й у сторінки,
без скла й без тіні. Висота й позиція ті самі, що були. */
.salon .topbar.is-stuck .bar{
--bar-fg:var(--ink);
--bar-fg-soft:#6F6861;
--bar-accent:var(--accent-fill);
/* чистий білий, а не молочний тон сторінки: смуга читається світлішою
за полотно під нею й без тіні */
background:#FFF;
box-shadow:none;border:0;
}
/* Відкрите мобільне меню — світла панель на весь екран, і шапка стає
її ж заголовком: той самий фон і темний текст, без лінії між ними. */
.salon .topbar.is-menu .bar{
--bar-fg:var(--ink);
--bar-fg-soft:#6F6861;
--bar-accent:var(--accent-fill);
background:var(--milk);
box-shadow:none;border:0;
}
.mmenu__foot .btn{margin-bottom:4px}
/* ============================================================
HERO
============================================================ */
.hero{
position:relative;isolation:isolate;overflow:hidden;
min-height:min(96vh,940px);
display:flex;align-items:flex-end;
padding-top:calc(var(--bar-h) + clamp(40px,7vw,96px));
padding-bottom:clamp(96px,10vw,150px);
background:var(--graphite);
color:var(--on-dark);
}
.hero__bg{position:absolute;inset:0;z-index:-2}
/* фото скомпоноване під текст: порожня освітлена стіна ліворуч, обличчя праворуч.
На широкому екрані тримаємо стіну під заголовком, на вузькому — обличчя у кадрі. */
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:45% 50%}
.hero__scrim{
position:absolute;inset:0;z-index:-1;
background:
linear-gradient(180deg,rgba(20,18,15,.52) 0%,rgba(20,18,15,.12) 26%,rgba(20,18,15,0) 46%),
linear-gradient(8deg,rgba(20,18,15,.9) 4%,rgba(20,18,15,.58) 34%,rgba(20,18,15,.1) 72%);
}
.hero__in{
display:grid;grid-template-columns:repeat(12,1fr);
gap:clamp(20px,2.4vw,40px);align-items:end;width:100%;
}
.hero__text{grid-column:1/8;display:grid;justify-items:start;gap:clamp(16px,1.8vw,26px)}
.hero__t{
font-family:var(--display);font-weight:400;
font-size:clamp(2.5rem,2.45vw + 3rem,5.75rem);
/* Переноси більше не прибиті : від них третій рядок лишався
коротким хвостиком з одного слова. Міра задає, скільки влазить у
рядок, а balance ділить фразу на рівні частини — на десктопі й
планшеті виходить два рядки, на телефоні три, але жоден з них
уже не висить одним словом. */
max-width:13ch;text-wrap:balance;
}
/* повітря від заголовка до опису більше за спільний крок блока */
.hero__t{margin-bottom:clamp(10px,1.2vw,16px)}
.hero__sub{
font-size:var(--t-lead);color:rgba(243,240,233,.84);max-width:40ch;text-wrap:pretty;
}
.hero__act{display:flex;gap:12px;flex-wrap:wrap;padding-top:clamp(4px,1vw,12px)}
/* Службовий рядок: один рядок, тихий тон, крапки-розділювачі.
Це довідка, а не ще одна секція, тож ні лінії зверху, ні великих іконок. */
.hero__meta{
grid-column:1/13;display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;
margin-top:clamp(24px,3.4vw,44px);
}
.hero__meta li{
display:inline-flex;align-items:center;gap:8px;
color:rgba(243,240,233,.76);font-size:.9375rem;letter-spacing:.01em;
}
.hero__meta li+li::before{content:"·";margin-inline:clamp(9px,.9vw,13px);opacity:.42}
.hero__meta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.2;opacity:.55}
.hero__meta b{font-weight:400;font-size:inherit;letter-spacing:inherit}
/* ============================================================
ШВИДКИЙ ЗАПИС
============================================================ */
/* --overlap — наскільки панель заходить на герой. Величина потрібна
двічі: як від'ємний марджин самої секції й як верхня межа зернового
шару нижче, щоб зерно починалося рівно там, де закінчується герой. */
.quick{position:relative;z-index:3;--overlap:clamp(-120px,-9vw,-72px);margin-top:var(--overlap)}
/* Зерно під панеллю запису.
Між нижнім краєм героя й початком «Послуг» лежить смуга світлого
тла заввишки з непокриту частину .quick. Зерно там не малювало
нічого: воно живе на ::before кожної секції, а .quick своєї заливки
не має. Виміряно: зерно темнить bone рівно на два рівні (243,240,233
→ 241,239,232), тож ця смуга виходила на два рівні світлішою за все
інше світле поле сторінки — з чіткою межею по всій ширині там, де
починаються «Послуги». Збоку від панелі, де її нічим не перекрито,
це й читалося як смуга й нерівний відтінок.
Той самий токен зерна, та сама щільність — просто продовжений на
ділянку, якій він не діставався. Жодного нового шару поверх фону:
площина стає однією. */
.quick::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
/* старт рівно під героєм: --overlap від'ємний, тож міняємо знак */
top:calc(-1 * var(--overlap));
z-index:-1;
pointer-events:none;
background:var(--bg-grain) 0 0 / 160px 160px repeat;
}
/* Межу панелі тримає волосінь, глибину — дві м'які тіні.
Тут раніше стояла одна, 0 12px 40px: при зміщенні 12px і розмитті
40 вона розходилася вгору майже так само, як униз, і на панелі
завширшки 1240px читалася не як тінь картки, а як сіра хмара на
все світле поле. Ці дві інші: зміщення більше за половину розмиття,
тож тінь падає вниз, а не обводить картку колом; тон теплий
(45,35,28), а не нейтрально-чорний; щільність на межі помітного —
.045 і .035. Разом вони дають глибину, не чіпаючи тла по боках. */
.quick__panel{
background:#fff;
border:1px solid var(--line-soft);
border-radius:var(--radius-lg);
box-shadow:
0 16px 40px rgba(45,35,28,.045),
0 32px 70px rgba(45,35,28,.035);
padding:clamp(20px,2.2vw,32px) clamp(20px,2.4vw,36px) clamp(18px,1.8vw,26px);
}
.quick__head{
display:flex;align-items:baseline;justify-content:space-between;gap:16px 24px;
flex-wrap:wrap;margin-bottom:clamp(10px,1.1vw,16px);
}
/* 25px на телефоні → 33.5px на десктопі: помітний, але вже не змагається
з секційними заголовками. Вага й композиція ті самі. */
.quick__t{
font-family:var(--display);
font-size:clamp(1.59rem,.88vw + 1.38rem,2.2rem);
}
.quick__hint{
font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
color:var(--ink-45);white-space:nowrap;
}
/* Один горизонтальний рядок із чотирьох кроків. Верхня волосінь проходить
через усі поля й зв'язує їх; вертикальні лінії ділять кроки. */
.quick__form{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;
align-items:stretch;
/* Волосіні зверху й знизу тримають увесь блок як одне ціле: нижня
йде під усіма полями й кнопкою, від краю до краю панелі, і нічого
всередині не ділить — для цього є вертикальні лінії між кроками. */
border-block:1px solid var(--line-soft);
}
.qf{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;
text-align:left;position:relative;
padding:16px clamp(12px,1.4vw,18px) 16px 0;
transition:color .3s var(--ease);
}
.qf__l{grid-column:1/-1}
.qf+.qf{padding-left:clamp(14px,1.6vw,22px);border-left:1px solid var(--line-soft)}
/* акцентна лінія підсвічує крок, на який наведено */
.qf::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
transform:scaleX(0);transform-origin:left;transition:transform .45s var(--slow);
}
.qf:hover::after{transform:scaleX(1)}
.qf__l{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-45)}
.qf__v{font-size:var(--t-body);color:var(--ink-70);transition:color .3s var(--ease)}
/* строго на одній осі зі значенням, а не з висотою всієї комірки */
.qf__ico{
grid-column:2;align-self:center;width:12px;height:12px;
stroke:var(--ink-25);fill:none;stroke-width:1.4;
transition:transform .4s var(--slow),stroke .3s;
}
.qf:hover .qf__ico{stroke:var(--accent);transform:translateY(3px)}
.qf:hover .qf__v{color:var(--ink)}
/* Кнопка легша за попередню: нижча, вужча, тепло-коричнева замість чорної. */
.quick__go{
align-self:center;margin-left:clamp(14px,1.8vw,26px);
height:48px;padding:0 24px;background:var(--ink);
}
.quick__note{
display:flex;align-items:flex-start;gap:9px;
margin-top:16px;font-size:var(--t-label);line-height:1.6;color:var(--ink-45);
}
.quick__note svg{
width:13px;height:13px;flex:none;margin-top:3px;
stroke:var(--accent);fill:none;stroke-width:1.6;
}
/* ============================================================
КАТЕГОРІЇ
============================================================ */
.cats__head{display:grid;gap:var(--space-sub);max-width:100%}
/* На десктопі заголовок тримається одним рядком: у ряді .sec-head його
рядок плюс стрілки займають менше за контейнер із великим запасом.
Нижче 1024px запасу вже немає — там дозволяємо природний перенос. */
@media (min-width:1024px){
.cats__t{white-space:nowrap}
}
.rail-side{display:flex;align-items:center;gap:10px;align-self:flex-end}
/* ---------- стрілки стрічки майстрів ----------
Стандарт один для всіх стрічок сайту: на планшеті й телефоні стрілки
стоять праворуч унизу, під усією карткою — під фото, іменем і роллю.
Тому в розмітці вони лежать після стрічки, звичайним потоком, без
absolute. На десктопі той самий елемент піднімається на рядок
заголовка: обидва контейнери стоять в одній комірці сітки секції,
тож обидва тримаються напрямних контейнера. Порожня частина
верхнього шару не ловить кліки — pointer-events вмикаються назад
лише на самій парі кнопок. */
.team__nav{
display:flex;justify-content:flex-end;
/* 20px на телефоні, 24px на планшеті — замір від нижнього краю
картки, а не від боксу стрічки */
margin-top:clamp(20px,2.2vw,24px);
}
/* Стрілки піднімаються до заголовка рівно там, де стрічка стає
чотирикартковою — на 1101px, а не на 1024px. Доти в кадрі дві
картки, і пара стрілок мусить лишатися під ними, як у відгуках:
інакше в смузі 1024–1100px керування висіло б через пів екрана від
того, чим керує, і два сусідні слайдери поводилися б по-різному. */
@media (min-width:1101px){
.salon .team{display:grid;grid-template-columns:minmax(0,1fr)}
.salon .team > .wrap:first-child{grid-row:1;grid-column:1}
.salon .team__slider{grid-row:2;grid-column:1}
.salon .team__nav{
grid-row:1;grid-column:1;align-self:center;
margin-top:0;pointer-events:none;
}
.salon .team__nav .rail-side{pointer-events:auto}
}
@media (min-width:1024px){
/* Ім'я майстра на десктопі — фіксовані 24px замість ramp'а
clamp(1.4rem,2vw,1.95rem), що давав 28.8px на 1440 і 22.4px на 1024:
тепер усі шість карток однакові за будь-якої ширини десктопа.
Нижче 1024px ramp лишається чинним. Специфічність 0,3,0 —
інтерліньяж карткових заголовків задає спільне правило
наприкінці файлу, яке інакше перебило б цей рядок. */
.salon .team .mst__n{font-size:24px;line-height:1.25}
}
/* круглі кнопки: тонкий контур, прозорий фон, заливка на наведенні.
10px у парі — той самий крок, що й у стрілках відгуків. */
.rail-arrows{gap:10px}
.rail-arrows button{width:46px;height:46px;color:var(--ink-70);
transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.rail-arrows button:hover{background:var(--ink);color:var(--milk);box-shadow:none}
.rail-arrows svg{width:15px;height:15px;stroke-width:1.2}
/* ---------- напрями ----------
Шість однакових горизонтальних карток 50/50 у сітці 2×3. Ритм дає
лише дзеркальне чергування: у лівій колонці фото ліворуч, у правій
праворуч — шахівниця без різних розмірів і типів. */
/* вертикальний ритм саме цієї секції: трохи більше повітря згори й
помітно більше від заголовка до сітки. Спільне правило .sec-head
не чіпаємо — решта сторінки лишається на своєму ритмі. */
.cats{padding-top:clamp(64px,7.2vw,96px)}
/* найбільший заголовок сторінки — і відступ на крок більший */
.salon .cats .sec-head{margin-bottom:var(--head-gap)}
.mos{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(12px,1.3vw,18px);
}
/* Шість однакових коробок читалися як меню навігації, а не як напрями
студії. Два перші напрями — найбільші за прайсом (по п'ять позицій
проти чотирьох і однієї) — беруть картку на всю висоту кадру, решта
лишаються компактними рядками. Сітка та сама, ритм усередині різний. */
.mos__c{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
/* саме height: при min-height висота лишається невизначеною і кожен
рядок тягнеться під пропорцію свого знімка */
height:clamp(186px,17.4vw,224px);
overflow:hidden;border-radius:var(--radius-md);background:var(--milk);
/* контур замість тіні: картка в спокої нічого не підіймає над полотном */
box-shadow:inset 0 0 0 1px var(--line-soft);
transition:box-shadow .3s var(--ease);
}
.mos__c:hover{box-shadow:inset 0 0 0 1px var(--line)}
.mos__fig{display:block;overflow:hidden}
/* кадр не масштабується на наведенні: реагує тільки тінь картки */
.mos__fig img{width:100%;height:100%;object-fit:cover;display:block}
/* дзеркальний варіант: текст ліворуч, фото праворуч */
.mos__c--flip{grid-template-columns:repeat(2,minmax(0,1fr))}
.mos__c--flip .mos__fig{order:2}
/* провідна картка: кадр на всю ширину й більшу частину висоти,
підпис під ним — знімок нарешті має розмір, на якому щось видно */
.mos__c--lead{
grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
height:clamp(300px,30vw,400px);
}
.mos__c--lead .mos__t{font-size:clamp(1.75rem,1.6vw + 1.25rem,2.4rem)}
.mos__body{
/* заголовок і стрілка в одному рядку, опис під ними. Раніше стрілку
притискало margin-top:auto, і між описом та нею лишалася дірка
у півсотні пікселів — найслабше місце всього блока. */
display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;
gap:6px clamp(10px,1.1vw,16px);
padding:clamp(18px,1.75vw,24px);
background:var(--milk);
}
/* заголовок картки лишається espresso й на наведенні: карамель
бережемо для акцентів, а не для кожного заголовка */
.mos__t{grid-column:1;grid-row:1;font-family:var(--display);font-size:var(--t-card-t);align-self:center}
.mos__d{grid-column:1;grid-row:2;font-size:var(--t-meta);color:var(--ink-70);text-wrap:pretty}
.mos .go-i{
grid-column:2;grid-row:1;align-self:center;
flex:none;width:36px;height:36px;
box-shadow:inset 0 0 0 1px var(--line-soft);
}
.mos .go-i svg{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
.mos__c:hover .go-i{
background:var(--accent);color:var(--milk);
box-shadow:inset 0 0 0 1px var(--accent);
}
/* ============================================================
ПОПУЛЯРНІ ПОСЛУГИ
============================================================ */
.pop__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,46px) clamp(18px,2vw,34px)}
/* CTA під картками: pill із тонкою глиняною обводкою й порожнім нутром.
Доти це посилання стояло в шапці секції й на телефоні вставало окремим
широким рядком між заголовком і першою карткою — розривало те, що
мало читатися разом. Унизу воно завершує блок. */
.pop__more{display:flex;justify-content:flex-end;margin-top:clamp(26px,2.6vw,40px)}
.pop__more a,
.price__all{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:0 30px;border-radius:999px;
background:transparent;color:var(--ink);
box-shadow:inset 0 0 0 1px rgba(168,111,72,.45);
font-size:var(--t-meta);font-weight:500;letter-spacing:.01em;
transition:background-color .35s var(--ease),color .35s var(--ease),
box-shadow .35s var(--ease);
}
.pop__more svg,
.price__all svg{
width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
stroke-linecap:round;stroke-linejoin:round;
transition:transform .4s var(--slow);
}
.pop__more a:hover,
.price__all:hover{
background:var(--accent-fill);color:#FFF;
box-shadow:inset 0 0 0 1px var(--accent-fill);
}
.pop__more a:hover svg,
.price__all:hover svg{transform:translateX(3px)}
.pop__more a:focus-visible,
.price__all:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* position:relative тримає розтягнуте посилання кнопки: клікається вся
картка, а керування лишається одне — та сама кнопка запису */
.svc{display:grid;grid-template-rows:auto 1fr;position:relative}
.svc__fig{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--ivory);margin:0}
.svc__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* Вертикальний ритм картки задано поелементно, а не спільним gap:
заголовок з описом — одна група (11px), а до кадру згори й до
волосіні знизу потрібно помітно більше. Спільний gap тримав би
усі чотири проміжки однаковими. */
.svc__body{display:flex;flex-direction:column;padding-top:clamp(20px,2vw,28px)}
.svc__t{font-family:var(--display);font-size:var(--t-card-t)}
/* Опис тримається в одному рядку на широкому десктопі: 14px замість
плаваючих 14→15 плюс трохи щільніший трекінг, — на 1440px найдовший
опис займає 377px у колонці 382px. Нижче ~1390px жодне з двох не
рятує: колонка коротша за сам рядок, тож там опис переноситься.
min-height немає: однакову висоту карток ряду тримає розтягування
сітки, а нижній рядок і так притиснутий через margin-top:auto, —
заданий мінімум лише резервував би місце під другий рядок там,
де його вже немає. Текст ніколи не ріжеться: ні clamp, ні overflow. */
.svc__d{
font-size:.875rem;letter-spacing:-.025em;color:var(--ink-70);
margin-top:clamp(9px,.8vw,11px);margin-bottom:clamp(18px,1.7vw,24px);
}
/* Ціна й запис живуть одним рядком — окрема кнопка картці не потрібна.
Волосінь над рядком структурує картку без рамки навколо неї. */
.svc__meta{
display:flex;align-items:center;justify-content:space-between;
gap:clamp(10px,1.2vw,18px);
/* під волосінню рівно стільки ж повітря, скільки над нею:
рядок із ціною не притискається до опису */
margin-top:auto;padding-top:clamp(18px,1.7vw,24px);
border-top:1px solid var(--line-soft);
}
/* Ціна — єдиний вміст лівої половини рядка: тривалості в картці більше
немає, тож ні обгортки, ні заданої висоти під другий рядок не треба.
Інтерліньяж щільний (1.2 замість 1.6, що тримав стос із двох рядків) —
інакше бокс ціни лишився б вищим за саму цифру й нижній рядок картки
носив би порожні 10px. Рівну висоту карток ряду тримає не цей блок,
а min-height опису й margin-top:auto на .svc__meta. */
.svc__price{
font-size:clamp(1.375rem,.55vw + 1.24rem,1.8rem);
line-height:1.2;font-weight:500;
font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.015em;
}
/* Один вигляд ціни на всьому сайті: «від» читається, але лишається
службовим — дрібніший за суму й приглушений. Обидва елементи
інлайнові в одному рядку, тож стоять на спільній базовій лінії самі. */
.svc__price,
.prow__p,
.bopt__p{
display:inline-flex;align-items:baseline;gap:clamp(8px,.6vw,10px);
}
.svc__price i,
.prow__p i,
.bopt__p i{
font-style:normal;font-weight:500;font-size:var(--t-from);
letter-spacing:.01em;color:var(--ink-45);
}
/* CTA без підкреслення й без кнопкового контейнера: простий текст
і тонке коло зі стрілкою праворуч. Текст нерухомий — на наведенні
заливається тільки коло. */
.svc__go{
display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
font-size:var(--t-meta);font-weight:500;color:var(--ink);
}
/* розтягнуте посилання: вся картка веде в запис, але в дереві
доступності лишається одна кнопка з тією самою назвою */
.svc__go::before{content:"";position:absolute;inset:0;z-index:1}
.svc__go > *{position:relative;z-index:2}
/* ---------- кругла стрілка ----------
Спільний компонент: картки послуг і текстові CTA користуються ним разом.
Дві однакові стрілки, перша їде праворуч за межу кола, друга заходить
зліва на її місце; коло й текст нерухомі. */
.go-i{
position:relative;overflow:hidden;
width:34px;height:34px;flex:none;border-radius:50%;color:var(--ink);
box-shadow:inset 0 0 0 1px var(--line);
transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.go-i svg{
position:absolute;top:50%;left:50%;margin:-6.5px 0 0 -6.5px;
width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.3;
transition:transform .36s cubic-bezier(.22,.61,.36,1);
}
.go-i svg:last-child{transform:translateX(-180%)}
.svc:hover .go-i,.svc__go:hover .go-i{
background:var(--ink);color:var(--milk);box-shadow:none;
}
.svc:hover .go-i svg:first-child,.svc__go:hover .go-i svg:first-child,
.mos__c:hover .go-i svg:first-child{transform:translateX(180%)}
.svc:hover .go-i svg:last-child,.svc__go:hover .go-i svg:last-child,
.mos__c:hover .go-i svg:last-child{transform:translateX(0)}
/* ---------- простір студії ----------
Тепла кремова смуга всередині молочної сторінки: окремий warm-момент,
а не просто ще одна секція. Два елементи й більше нічого: текст
про студію й один lifestyle-кадр.
Тонована смуга потребує більше внутрішнього повітря, ніж звичайна
секція: інакше колір підходить упритул до тексту. */
.space{
position:relative;background:var(--ivory);
padding-top:clamp(66px,6.8vw,104px);
padding-bottom:clamp(74px,7.6vw,116px);
}
/* Дві колонки на всю корисну ширину контейнера. Раніше після фото
лишалося 7% порожнечі — це врівноважувало вертикальну виноску в
лівому гаттері. Виноски більше немає, тож компенсувати нічого:
текст і кадр стоять на краях контейнера, а бокові поля тримає сам .wrap. */
.space__in{
position:relative;z-index:1;
/* 45 / 55 із повітрям 48–64px між ними: фотосітка тепер несе чотири
кадри, тож їй потрібна більша частка, ніж одному знімку. */
display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);
column-gap:clamp(48px,4.4vw,64px);
row-gap:clamp(18px,2.2vw,32px);align-items:center;
}
.space__text{
/* обидві колонки по центру вертикалі: висоту рядка задає сітка фото,
і текст стоїть навпроти її середини */
align-self:center;position:relative;z-index:3;
display:grid;gap:clamp(14px,1.5vw,22px);
}
/* заголовок несе основну вагу лівої частини */
.space__t{
font-family:var(--display);
/* Спільний ramp заголовків секцій. Власний clamp давав 60.6px проти
59px у решти — різниця невидима оком, але це ще одна окрема
шкала там, де достатньо спільної. */
font-size:var(--d2);
/* міру дає сама колонка: balance ділить рядок навпіл, тож заголовок
лягає двома рівними рядками, а не вузьким стовпчиком */
text-wrap:balance;
}
/* текст трохи більший і вільніший, але не стіна тексту */
.space__p{max-width:54ch;font-size:clamp(1.0625rem,.14vw + 1.02rem,1.125rem);line-height:1.68;
color:rgba(243,240,233,.76)}
/* єдиний CTA блока — невеликий відступ після списку */
.space__cta{margin-top:clamp(14px,1.6vw,22px)}
.space__f{margin:0;overflow:hidden;border-radius:20px}
.space__f img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- акцентна сітка ----------
Один високий кадр ліворуч і три дрібні стовпчиком праворуч, разом —
один прямокутник: верхні й нижні межі збігаються, бо великий кадр
проходить усі три рядки, а самі рядки рівні (1fr) і розведені тим
самим проміжком, що й колонки. Висоту блока задає пропорція
великого кадру, тож порожнього місця під сіткою не лишається. */
.space__grid{
display:grid;
grid-template-columns:minmax(0,77fr) minmax(0,23fr);
grid-template-rows:repeat(3,minmax(0,1fr));
gap:11px;
}
/* головне фото — другий акцент секції: вище, вужче й м'якше в кутах.
Кадр тягнеться рівно на висоту текстової колонки, тож обидві
колонки починаються й закінчуються на одній лінії і під фото не
лишається порожнього місця. Фіксована пропорція дала б тут дірку:
текст у цій ширині завжди вищий за кадр 3:4. */
.space__f--a{
position:relative;
grid-column:1;grid-row:1/-1;
/* пропорція кадру задає висоту всієї сітки */
aspect-ratio:4/5;
}
.space__f--s{grid-column:2}
/* висоту задає рядок, а не пропорція кадру */
/* Наведення — тільки масштаб, без затемнень і фільтрів. Селектор
із .space потрібен для 0,4,0: правило відкриття кадру
(.salon [data-rv-img].in img) лежить нижче у файлі й інакше
перебило б цей transform. Тач-екранів це не стосується. */
@media (hover:hover){
.salon .space .space__f img{transition:transform .6s var(--slow),clip-path 1.05s var(--slow)}
.salon .space .space__f:hover img{transform:scale(1.02)}
}
/* контурний CTA на темному: прозорий, тонкий бронзовий контур,
світлий текст; заливка приходить лише на наведенні */
.space__go{
color:var(--on-dark);
box-shadow:inset 0 0 0 1px rgba(201,149,112,.5);
}
.space__go::after{background:var(--accent-soft)}
.space__go:hover,
.space__go:focus-visible{color:var(--dark)}
.space__go svg{transition:transform .45s var(--slow)}
.space__go:hover svg{transform:translateX(5px)}
@media (max-width:980px){
/* Колонки складаються: на 768px текстова колонка в 45% мала б лише
~300px під заголовок у 38px — вужче, ніж це витримує рядок. Тож
текст іде на всю ширину, а сітка лишається тією самою. */
.space__in{grid-template-columns:1fr}
/* на всю ширину контейнера кадр 4/5 був би надто високим */
.space__f--a{aspect-ratio:1/1}
}
/* телефон: великий кадр згори, три дрібні рядком під ним */
@media (max-width:767px){
.space__grid{
grid-template-columns:repeat(3,minmax(0,1fr));
grid-template-rows:auto auto;
gap:11px;
}
.space__f--a{grid-column:1/-1;grid-row:1;aspect-ratio:4/5}
.space__f--s{grid-column:auto;grid-row:2;aspect-ratio:1/1}
}
/* ---------- чотири причини ----------
Колонка — цілісний вертикальний модуль: лінія → номер → заголовок →
опис → іконка. Рядки вирівнює subgrid, тож іконки всіх чотирьох
пунктів стоять на одній лінії, але відразу під своїм описом, а не
біля нижнього краю секції. */
/* Заголовок секції йде на всю ширину контейнера: спільна стеля
.sec-head__t у 820px ламала цей рядок надвоє без потреби. Логіка
та сама, що й у «Результат говорить сам за себе». */
.salon .why .sec-head__t{max-width:none}
.salon .why .sec-title{
/* Спільний кегль секцій, без знижки. Доти тут стояло 80% «бо рядок
довгий» — замір це спростував: на 1440 рядок просить 821px, а
контейнер дає 1208, на 1024 просить 584 проти 886. Через ту
знижку секція й виглядала простішою за сусідні: заголовок був на
чверть легший за кожен інший на сторінці, хоч стоїть на тому ж
рівні ієрархії. */
/* balance тут ні до чого: рядок має бути один */
text-wrap:normal;
}
/* на desktop — суворо один рядок; нижче 1024px кегль уже менший
за вьюпорт, тож переносити дозволено */
@media (min-width:1024px){
.salon .why .sec-title{white-space:nowrap}
}
.why__grid{
/* Чотири колонки в ряд — композиція секції. Щоб вони не тиснулися,
ширший простір між ними; відповідно й колонка вужча, тож кегль
заголовка стелиться під неї, а не навпаки. */
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:clamp(30px,4.6vw,66px);row-gap:0;
}
.why__i{
position:relative;border-top:1px solid var(--line);
padding-top:clamp(20px,1.8vw,28px);
/* три спільні рядки — малюнок, заголовок, опис — щоб усі чотири
колонки стояли на тих самих горизонталях. row-gap тут нульовий,
тож він не ділиться всередині самої колонки. */
grid-row:span 3;display:grid;grid-template-rows:subgrid;
align-items:start;justify-items:start;
}
/* там, де subgrid недоступний, колонка просто складається стовпчиком */
@supports not (grid-template-rows:subgrid){
.why__i{display:flex;flex-direction:column;align-items:flex-start;grid-row:auto}
}
.why__i:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
/* акцентна лінія промальовується поверх базової */
.why__i::before{
content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--accent);
transform:scaleX(0);transform-origin:left;transition:transform .7s var(--slow);
}
/* Стеля кегля стоїть не «на око», а з заміру: найдовший заголовок має
11.23em, тож у колонці 254px він тримається в один рядок лише до
22.6px. Один рядок на всі чотири — єдине, що вирівнює і верх, і низ
колонок без порожнеч усередині. */
.why__t{
font-family:var(--display);font-size:clamp(1.25rem,1.5vw,1.4rem);line-height:1.2;
margin-top:16px;
}
.why__d{
font-size:.875rem;color:var(--ink-70);text-wrap:pretty;
line-height:1.68;margin-top:12px;
}
/* Планшет: пари. У колонці вужчій за 240px заголовок у 20 знаків
ламається надвоє, а дворядковий заголовок у двох пунктах із чотирьох
розтягує спільний рядок і лишає під короткими заголовками порожнечу. */
@media (max-width:1359px){
.why__grid{
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:clamp(40px,7vw,96px);row-gap:clamp(50px,5.6vw,80px);
}
.why__i{display:flex;flex-direction:column;align-items:flex-start;grid-row:auto}
/* колонка вдвічі ширша, тож стеля, розрахована під 254px, тут уже
ні до чого — заголовок повертається до свого повного кегля */
.why__t{font-size:clamp(1.45rem,1.85vw,1.95rem)}
}
/* ---------- іконки ----------
Одна авторська система: товщина штриха 1.3, круглі закінчення,
рівно один карамельний елемент на кожну іконку. */
/* Іконка очолює колонку, а не замикає її. Унизу вона читалася як
довісок і лишала над собою порожнє поле; угорі вона одразу дає
кожному пункту власний знак. order працює і в subgrid, і у
flex-фолбеку, тож порядок у розмітці лишається семантичним.
По лівій осі з заголовком і текстом: у розмітці кожен малюнок
зсунутий до нуля свого viewBox, тут лишається лише масштаб. */
.why__ico{
order:-1;display:block;width:112px;height:112px;
/* Малюнок займає лише середину квадрата: згори й знизу коробки лишається
по ≈19px порожнечі. Відʼємні поля знімають частину її, щоб відстань
до лінії та до заголовка міряла сам малюнок, а не рамку. */
margin-top:-11px;margin-bottom:-7px;
color:var(--ink-70);transition:color .45s var(--ease);
}
.why__ico svg{
width:100%;height:100%;overflow:visible;
fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
/* --k доводить кожен малюнок до спільної оптичної висоти: у спільному
viewBox календар і флакони дрібніші за лотос і чек. Товщина ділиться
на той самий --k, тож штрих у всіх чотирьох рендериться однаковий. */
transform:scale(calc(1.2 * var(--k,1)));transform-origin:left center;
stroke-width:calc(1.03 / var(--k,1));
}
/* fill-box: точка масштабу лишається в центрі самої крапки, хоч би куди
її зсунув батьківський translate */
.ic__day{fill:var(--accent);stroke:none;transform-box:fill-box;transform-origin:center}
.ic__cursor{fill:currentColor;stroke:none}
.ic__accent{stroke:var(--accent)}
/* Точки опори. Три пелюстки сходяться в одній точці (40,63): центральна
стоїть на ній серединою низу, бічні — своїми нижніми кутами, тож на
наведенні вони розходяться віялом, а не зсуваються всім тілом. */
.ic__leaf--c{transform-origin:50% 100%}
.ic__leaf--l{transform-origin:100% 100%}
.ic__leaf--r{transform-origin:0% 100%}
/* лінії подовжуються вправо, від свого лівого краю */
.ic__rule{transform-origin:0% 50%}
.ic__check{transform-origin:50% 50%}
/* гілочка нахиляється від місця, де торкається баночки */
.ic__sprig{transform-origin:0% 100%}
.ic__cap{transform-origin:50% 100%}
/* ---------- рух ----------
Іконка намальована повністю завжди — ні в спокої, ні на наведенні
контур не з'являється з нуля. Рухаються лише окремі деталі всередині
вже готового малюнка: пелюстка підростає, галочка підскакує, крапка
набирає вагу. Усе на transform/opacity, тож рух іде на композиторі
й не чіпає розкладку сусідів.
Кожна деталь рахує свій transform від власної рамки (fill-box),
а origin ставиться в ту точку, з якої рух виглядає природним:
основа пелюстки, лівий край лінії, низ флакона. */
.ic__leaf,.ic__rule,.ic__check,.ic__cap,.ic__sprig,.ic__day,.ic__cursor{
transform-box:fill-box;
transition:transform .55s var(--slow),opacity .55s var(--slow);
}
/* спільний стан наведення: курсор на картці, клавіатурний фокус або —
на сенсорних екранах, де hover не існує, — поява пункту в кадрі
(is-iconmove, одноразовий: JS знімає його, і деталі їдуть назад) */
.why__i:hover .ic__leaf--c,
.why__i:focus-visible .ic__leaf--c,
.why__i.is-iconmove .ic__leaf--c{transform:scale(1.04,1.1)}
.why__i:hover .ic__leaf--l,
.why__i:focus-visible .ic__leaf--l,
.why__i.is-iconmove .ic__leaf--l{transform:rotate(-5deg)}
.why__i:hover .ic__leaf--r,
.why__i:focus-visible .ic__leaf--r,
.why__i.is-iconmove .ic__leaf--r{transform:rotate(5deg)}
.why__i:hover .ic__check,
.why__i:focus-visible .ic__check,
.why__i.is-iconmove .ic__check{transform:translateY(-1.6px) scale(1.1)}
.why__i:hover .ic__rule,
.why__i:focus-visible .ic__rule,
.why__i.is-iconmove .ic__rule{transform:scaleX(1.07)}
.why__i:hover .ic__day,
.why__i:focus-visible .ic__day,
.why__i.is-iconmove .ic__day{transform:scale(1.28)}
.why__i:hover .ic__cursor,
.why__i:focus-visible .ic__cursor,
.why__i.is-iconmove .ic__cursor{transform:translate(-2.4px,-1.8px)}
.why__i:hover .ic__cap,
.why__i:focus-visible .ic__cap,
.why__i.is-iconmove .ic__cap{transform:translateY(-1.8px)}
.why__i:hover .ic__sprig,
.why__i:focus-visible .ic__sprig,
.why__i.is-iconmove .ic__sprig{transform:rotate(-6deg)}
/* стан усієї колонки */
.why__i:hover::before,.why__i:focus-visible::before,.why__i.is-live::before{transform:scaleX(1)}
/* малюнок набирає повну щільність штриха, лінія згори — карамель.
Фон, тінь і масштаб колонки не чіпаються: рухається тільки тон. */
.why__i:hover .why__ico,.why__i:focus-visible .why__ico,.why__i.is-live .why__ico{color:var(--ink)}
/* ============================================================
МАЙСТРИ
============================================================ */
/* ---------- майстри ----------
Та сама стрічка, що й у напрямах: ті самі круглі стрілки, та сама
лінія позиції, те саме перетягування. Два різні слайдери на одній
сторінці читалися б як дві різні системи. */
/* тепла смуга на всю секцію: між білими сусідами вона сама відділяє
блок майстрів. Сама смуга лишається теплою й без рамок — контраст
створюють самі картки, які лежать на ній світлими підкладками. */
.team{
background:var(--ivory);
padding-block:clamp(64px,7.8vw,104px);
}
/* як і в напрямах: рівно чотири картки в контейнері, ширина рахується
від самої стрічки, стрілки ходять по одній картці */
/* Стрічка виходить за контейнер праворуч: ліва межа збігається із
заголовком, а права йде до краю вьюпорта. Поки сторінка вужча за --max,
це рівно мінус гаттер; ширше — додається половина бічного поля. */
/* Стрічка ліворуч стоїть на сітці разом із заголовком, а праворуч
йде за контейнер до краю екрана — ряд ніби йде за горизонт.
Це власне ліве поле, а не негативний марджин: так блок ніколи не
ширший за вьюпорт і не дає горизонтального скролу сторінки.
100% тут — ширина секції без смуги прокрутки, на відміну від 100vw. */
.team__slider{
--g:clamp(14px,1.5vw,22px);
/* скільки карток має вміститися в сітку контейнера */
--n:4;
/* 100%, а не 100vw: ширина секції вже без смуги прокрутки, тоді як
100vw її враховує — через те стрічка сідала на 5px вужче за
контейнер і не збігалася із заголовком. */
--pad:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));
/* Поле з обох боків, а не лише ліворуч: доти стрічка йшла за контейнер
до краю вьюпорта, і п'ята з шостою карткою визирали збоку — ряд
читався обрізаним, а не продовженим. Тепер видима смуга стрічки
дорівнює контейнеру, тобто рівно чотирьом карткам, а все далі
ховає власний overflow скрол-контейнера. */
padding-inline:var(--pad);
}
.team__rail{
gap:var(--g);
scroll-padding-inline:0;
align-items:stretch;
}
/* Рівно чотири картки в сітці контейнера; п’ята починається уже за його
правою межею й з’являється лише при гортанні. */
.team__rail>*{width:calc((100% - var(--g) * (var(--n) - 1)) / var(--n))}
/* Скільки карток у сітці на кожній ширині. Окремий блок поруч із
самою формулою, а не розкиданий по чужих медіа-блоках: інакше легко
покласти значення не в той діапазон і не помітити цього. */
@media (max-width:1100px){ .team__slider{--n:2} }
/* телефон: рівно одна картка в кадрі — далі гортають стрілками */
@media (max-width:620px){ .team__slider{--n:1} }
/* Кожен майстер — кадр і текст під ним прямо на тлі секції.
Жодної підкладки, рамки чи тіні під описом: карткою читається
лише саме фото, тож радіус переїхав на нього. */
.mst{
display:flex;flex-direction:column;scroll-snap-align:start;
background:none;position:relative;
}
/* Перехід у профіль більше не ховається в одному 44-піксельному колі:
data-mst висить і на самій картці, тож той самий делегований
обробник відкриває профіль з будь-якої її точки. Кнопка лишається
на місці — вона несе доступну назву й працює з клавіатури. */
.mst{cursor:pointer}
.mst__fig{
position:relative;margin:0;width:100%;overflow:hidden;
border-radius:22px;background:var(--ivory);
/* Верхній ряд кадру (плашка ліворуч, два кола праворуч) мусить
вкладатися в саму картку, а її ширина залежить не від вьюпорта,
а від того, скільки карток стоїть у ряду. Тож запити нижче
міряють кадр, а не екран. */
container-type:inline-size;container-name:mstfig;
}
.mst__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
/* ---------- підсування кадру на наведенні ----------
Одна реалізація на картки майстрів, напрямів і популярних послуг;
різниця лише в глибині зуму, яку задає --zoom. overflow:hidden на
фігурах тримає кадр у межах скруглення, тож ні картка, ні сусіди
не рухаються.
На сенсорних екранах правило не вмикається взагалі: там hover
залипає після тапу й заважав би переходу. */
.mst__fig{--zoom:1.03}
.mos__fig{--zoom:1.05}
.svc__fig{--zoom:1.05}
.mos__fig img,.svc__fig img{transition:transform .5s var(--slow)}
/* кадр майстра їде довше за решту: 620ms замість 500 — рух має бути
не помічений, а відчутий */
.mst__fig img{transition:transform .62s var(--slow)}
/* Тепле світло замість кольорового оверлея: ледь помітне сяйво знизу
кадру, тим самим глиняним тоном, що й акцент сторінки. На спокої
його немає взагалі, тож фото лишається тим, чим було. */
.mst__fig::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(130% 80% at 50% 108%,rgba(168,111,72,.16),transparent 68%);
opacity:0;transition:opacity .62s var(--slow);
}
@media (hover:hover){
.mst:hover .mst__fig img,
.mos__c:hover .mos__fig img,
.svc:hover .svc__fig img{transform:scale(var(--zoom))}
.mst:hover .mst__fig::before{opacity:1}
/* плашка теплішає на пів тону: з чистого білого в молочний */
.mst:hover .mst__exp{background:#FBF5EE}
}
/* Кнопки видно завжди, тож і підкладка під ними постійна — але
настільки слабка, що саме фото вона не темнить: потрібна лише
для стабільної читності кружечок на світлих знімках. */
.mst__fig::after{
content:"";position:absolute;inset:0 0 auto;height:25%;pointer-events:none;
background:linear-gradient(to bottom,rgba(0,0,0,.08),transparent 100%);
}
/* Дії живуть на самому кадрі й видні завжди: щоб побачити доступні
дії, на картку не треба наводити. Наведення на картку їх ніяк
не змінює — реагує лише сама кнопка. */
.mst__ctl{
position:absolute;z-index:2;top:14px;right:14px;
display:flex;gap:8px;
}
.mst__cb{
position:relative;
width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
background:#FFF;color:var(--ink);
border:0;padding:0;cursor:pointer;
transition:background-color .4s var(--slow),color .4s var(--slow);
}
.mst__cb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round}
/* без scale: міняється лише колір і глибина тіні */
.mst__cb:hover,.mst__cb:focus-visible{background:var(--accent);color:#FFF}
/* підказка розгортається під кнопкою, тож лишається в межах картки */
.mst__tip{
position:absolute;top:calc(100% + 8px);right:0;
padding:5px 10px;border-radius:999px;white-space:nowrap;
background:var(--ink);color:var(--milk);
font-size:var(--t-label);letter-spacing:.04em;
opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
}
.mst__cb:hover .mst__tip,.mst__cb:focus-visible .mst__tip{opacity:1}
/* текст лежить прямо на тлі секції, тож відстань до нього задає
відступ від кадру, а не поле підкладки */
.mst__body{padding:0;margin-top:clamp(22px,1.9vw,27px)}
/* ім’я лишається повністю статичним: наведення живе лише у контролах,
градієнті та тіні картки */
.mst__n{
font-family:var(--display);
font-size:clamp(1.4rem,2vw,1.95rem);line-height:1.04;
}
/* роль і стаж — один рядок, спеціалізації — другий, і картка на цьому закінчується */
.mst__r{font-size:var(--t-meta);color:var(--ink-70);margin-top:10px;line-height:1.5}
/* Стаж — плашка на самому кадрі, ліворуч угорі. Ті самі 14px від краю,
що й у кнопок справа, і спільна з ними вісь: 34px плашки проти 44px
кола дають top на 5px нижчий, інакше дрібна плашка висіла б вище
за кнопки. Біла, як і кнопки, — цей матеріал на кадрі вже є, тож
третього не з'являється. Під фото лишаються лише ім'я і роль. */
.mst__exp{
position:absolute;z-index:2;left:14px;top:19px;
display:inline-flex;align-items:center;height:34px;padding:0 14px;
border-radius:999px;background:#FFF;color:var(--ink);
font-size:var(--t-label);letter-spacing:.04em;line-height:1;white-space:nowrap;
transition:background-color .55s var(--slow);
}
/* Два ступені стиснення верхнього ряду. Повна плашка — 140px, два кола
з полями — 124px: разом 264px, тож у кадр вужчий за ~290px вони вже
не стають вільно (запас під 16px проміжку). Спершу стискається сама
плашка (13px, нижча, тісніші поля) — цього вистачає до ~255px. Ще вужче — зникає слово «досвіду»:
«7 років» на кадрі майстра читається так само, а повний рядок лишається
в картці профілю. Плашка нікуди не з'їжджає й лишається на фото. */
@container mstfig (max-width:279px){
.mst__exp{top:18px;left:11px;height:30px;padding:0 11px;font-size:.8125rem}
.mst__ctl{top:11px;right:11px;gap:6px}
}
@container mstfig (max-width:254px){
.mst__exp-x{display:none}
}
/* ============================================================
КАРТКА МАЙСТРА
Будова й поведінка ті самі, що в онлайн-записі: тепле біле тло,
м'який кут, тонка рамка, одна дуже легка тінь.
============================================================ */
.mp{position:fixed;inset:0;z-index:95;display:grid;place-items:center;pointer-events:none}
.mp__scrim{
position:absolute;inset:0;background:rgba(18,15,12,.52);backdrop-filter:blur(3px);
opacity:0;transition:opacity .45s var(--ease);
}
.mp__panel{
position:relative;width:min(840px,calc(100vw - var(--gutter) * 2));
max-height:min(88vh,760px);
display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
background:var(--milk);border-radius:var(--radius-xl);overflow:hidden;
box-shadow:inset 0 0 0 1px var(--line-soft),0 40px 90px -46px rgba(14,12,10,.5);
opacity:0;transform:translateY(22px) scale(.985);
transition:opacity .45s var(--ease),transform .55s var(--slow);
}
.mp.is-open{pointer-events:auto}
.mp.is-open .mp__scrim{opacity:1}
.mp.is-open .mp__panel{opacity:1;transform:none}
/* На телефоні дві колонки дають кадр у 134px — це вже не фото, а смужка.
Одна колонка: кадр згори стрічкою, інформація під ним. */
@media (max-width:620px){
.mp__panel{grid-template-columns:minmax(0,1fr);max-height:92vh;overflow-y:auto}
.mp__fig{height:auto}
.mp__fig img{aspect-ratio:3/2;height:auto}
}
.mp__x{
position:absolute;top:clamp(14px,1.4vw,20px);right:clamp(14px,1.4vw,20px);z-index:2;
width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
background:var(--milk);box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--ink-45);
transition:background .3s var(--ease),color .3s var(--ease);
}
.mp__x svg{width:13px;height:13px}
.mp__x:hover{background:var(--ink);color:var(--milk)}
.mp__fig{margin:0;height:100%;overflow:hidden;background:var(--ivory)}
.mp__fig img{width:100%;height:100%;object-fit:cover;display:block}
.mp__body{
display:grid;align-content:start;gap:0;
padding:clamp(24px,2.6vw,38px);overflow-y:auto;
}
.mp__n{font-family:var(--display);font-size:var(--d3);line-height:1.04;padding-right:44px}
.mp__r{font-size:var(--t-meta);color:var(--ink-70);margin-top:8px}
.mp__exp{
display:flex;align-items:center;gap:8px;
font-size:var(--t-label);letter-spacing:.04em;color:var(--ink-45);margin-top:6px;
}
.mp__exp::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.mp__bio{font-size:var(--t-body);line-height:1.6;color:var(--ink-70);margin-top:clamp(16px,1.6vw,22px);text-wrap:pretty}
.mp__grp{margin-top:clamp(18px,1.9vw,26px);padding-top:clamp(16px,1.6vw,22px);border-top:1px solid var(--line-soft)}
.mp__grp .label{color:var(--ink-45)}
.mp__sk{display:grid;gap:7px;margin-top:11px}
.mp__sk li{
position:relative;padding-left:20px;
font-size:var(--t-meta);color:var(--ink);
}
.mp__sk li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:1px;background:var(--accent)}
.mp__way{font-size:var(--t-meta);line-height:1.55;color:var(--ink-70);margin-top:10px;text-wrap:pretty}
.mp__go{margin-top:clamp(22px,2.4vw,32px)}
/* ============================================================
ДО / ПІСЛЯ
============================================================ */
/* під заголовком нічого немає, тож повітря до кейсу задаємо тут —
спільне правило .sec-head лишається недоторканим */
.salon .ba .sec-head{margin-bottom:var(--head-gap)}
/* 65 / 35: порівняння несе блок, інформація його пояснює */
/* Кейс — дві колонки 60 / 40: зліва сам результат, справа те, що його
пояснює. minmax(0,...) тримає колонки від розпирання довгим рядком,
а gap лишається в кроці сайта. */
.ba__case{
display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);
gap:clamp(22px,3vw,48px);align-items:start;
}
/* На вузькому десктопі й планшеті права колонка потребує більше місця
під картки переваг, тож пропорція м’якшає до 55 / 45. */
@media (max-width:1200px){
.ba__case{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
}
.ba__view{
position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--ivory);
aspect-ratio:16/11;--pos:50%;touch-action:pan-y;
transition:opacity .22s var(--ease);
}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__tag{
position:absolute;top:16px;z-index:3;padding:7px 13px;border-radius:999px;
font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
background:rgba(252,250,246,.9);color:var(--ink);backdrop-filter:blur(4px);
}
.ba__tag--l{left:16px}
.ba__tag--r{right:16px}
.ba__range{
position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
appearance:none;background:none;
}
/* роздільник і ручка — різні елементи: лінія тримає всю висоту, коло
прив'язане рівно до середини й до самої лінії, тож при перетягуванні
нікуди не з'їжджає по вертикалі */
.ba__handle{
position:absolute;top:0;bottom:0;left:var(--pos);z-index:4;width:2px;margin-left:-1px;
background:rgba(252,250,246,.9);pointer-events:none;
}
.ba__handle svg{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:34px;height:34px;padding:9px;border-radius:50%;
background:var(--milk);color:var(--ink);
box-shadow:0 6px 18px rgba(14,12,10,.26);
}
/* ---------- інформація про кейс ---------- */
.ba__info{display:flex;flex-direction:column;transition:opacity .22s var(--ease),transform .26s var(--slow)}
.ba__view.is-swap,.ba__info.is-swap{opacity:0}
.ba__info.is-swap{transform:translateY(6px)}
/* перемикач кейсів живе поруч із самим кейсом, а не в шапці секції:
так одразу видно, що кнопки міняють саме цю картку результату */
.ba__pick{display:flex;gap:11px;width:max-content;margin-bottom:clamp(16px,1.6vw,22px)}
.ba__dot{
position:relative;width:50px;height:50px;flex:none;border-radius:50%;
display:grid;place-items:center;cursor:pointer;background:none;border:0;
font-family:var(--display);font-size:1rem;font-weight:500;color:var(--ink);
box-shadow:inset 0 0 0 1px var(--line);
transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.ba__dot:hover{box-shadow:inset 0 0 0 1px var(--accent);background:var(--ivory)}
.ba__dot.is-on{
background:var(--accent);color:var(--milk);box-shadow:inset 0 0 0 1px var(--accent);
}
/* підказка з повною назвою: круглої літери самої по собі замало */
.ba__dot::after{
content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;
transform:translate(-50%,4px);white-space:nowrap;pointer-events:none;
padding:5px 9px;border-radius:var(--radius-sm);
background:var(--ink);color:var(--milk);
font-family:var(--ui);font-size:var(--t-label);letter-spacing:.04em;font-weight:400;
opacity:0;transition:opacity .25s var(--ease),transform .3s var(--ease);
}
.ba__dot:hover::after,.ba__dot:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.ba__cat{color:var(--accent)}
.ba__t{
font-family:var(--display);font-size:var(--d3);line-height:1.08;
margin-top:10px;text-wrap:balance;
}
/* чотири факти сіткою 2×2: лише тонка тепла рамка, жодних тіней */
.ba__facts{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(8px,0.9vw,12px);margin-top:clamp(18px,1.8vw,26px);
}
/* Іконка ліворуч, два рядки тексту праворуч від неї: заголовок несе
суть, пояснення її уточнює. Іконка вирівняна по першому рядку, а не
по центру пари — так вона читається як маркер заголовка.
Висоту рядка задає його власний вміст: обидві картки одного рядка
рівні між собою (стандартний stretch), але рядок з однорядковим
поясненням не добирає висоту сусіднього — інакше під текстом
лишається порожнє поле й нижній ряд читається «проваленим». */
.ba__fact{
display:grid;grid-template-columns:auto minmax(0,1fr);
align-items:start;align-content:start;gap:0 11px;
padding:clamp(12px,1.1vw,16px) clamp(12px,1.1vw,16px);
border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--line-soft);
}
.ba__fact-t{display:grid;gap:4px;min-width:0}
/* ---------- факти на телефоні ----------
У дві колонки картка завширшки ~165px ламає і заголовок, і пояснення,
а сусіди в ряду вирівнюються за вищим — звідси порожнє поле під
коротшим текстом. Одна колонка знімає і перенос, і цю порожнечу:
кожен рядок має висоту власного вмісту, тож усі чотири картки
однакові за внутрішньою будовою, а проміжки між ними — рівні. */
@media (max-width:767px){
.ba__facts{grid-template-columns:1fr;gap:8px}
.ba__fact{padding:10px 12px;gap:0 10px}
.ba__fact-t{gap:3px}
}
/* один токен на всі чотири: у «галочки» stroke заданий атрибутом
currentColor просто в розмітці спрайта, тож самого stroke тут мало —
колір їй задає саме color */
.ba__fact svg{
width:16px;height:16px;
/* опускаємо іконку на оптичну вісь першого рядка заголовка */
margin-top:2px;
fill:none;color:var(--accent);stroke:var(--accent);
stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
}
.ba__fact b{font-size:var(--t-meta);font-weight:500;line-height:1.3;text-wrap:pretty}
.ba__fact-t span{font-size:.875rem;line-height:1.45;color:var(--ink-45);text-wrap:pretty}
.ba__d{
font-size:var(--t-meta);color:var(--ink-70);text-wrap:pretty;
margin-top:clamp(16px,1.6vw,22px);padding-top:clamp(14px,1.4vw,20px);
border-top:1px solid var(--line-soft);
}
/* CTA блока — outline pill: контур і текст глиняні, заливка приходить
лише на наведенні тією самою шторкою, що й у решті кнопок */
.ba__go{
justify-self:start;margin-top:clamp(18px,1.8vw,26px);
padding:0 clamp(30px,3vw,44px);
background:transparent;color:var(--accent);
box-shadow:inset 0 0 0 1px var(--accent);
transition:color .28s var(--ease);
}
.ba__go::after{background:var(--accent);transition:transform .3s var(--slow)}
.ba__go:hover{color:var(--milk)}
/* та сама підміна двох стрілок, що й у круглих CTA, лише без кола */
.ba__go-i{position:relative;overflow:hidden;width:15px;height:13px;flex:none}
.ba__go-i svg{
position:absolute;top:50%;left:0;margin-top:-6.5px;width:13px;height:13px;
stroke:currentColor;fill:none;stroke-width:1.3;
transition:transform .36s cubic-bezier(.22,.61,.36,1);
}
.ba__go-i svg:last-child{transform:translateX(-180%)}
.ba__go:hover .ba__go-i svg:first-child{transform:translateX(180%)}
.ba__go:hover .ba__go-i svg:last-child{transform:translateX(0)}
/* ============================================================
ТЕМНІ СЕКЦІЇ
============================================================
Дві секції сторінки живуть на глибокому шоколаді — «Простір»
і «Результат». Кольори беруться з палітри, а не дублюються
в кожній: --dark, --on-dark, --accent-soft і --line-g уже тримають
саме ці значення, тож обидві секції гарантовано однакові. */
.salon .space,
.salon .ba,
.salon .revs{background:var(--dark);color:var(--on-dark)}
/* ---------- відгуки на тоні ----------
Секція читається в парі з «До / Після»: те саме полотно, та сама
карамель. Усе, що на світлі було ink-45, тут стає приглушеним
молочним — свого набору кольорів секція не заводить. */
.salon .revs .sec-title{color:var(--on-dark)}
.salon .revs .stars__track{color:rgba(243,240,233,.22)}
.salon .revs .stars__fill{color:var(--accent-soft)}
/* тонка карамельна рамка — єдине, що тримає картку на темному */
.salon .rev{
background:rgba(243,240,233,.04);
box-shadow:inset 0 0 0 1px rgba(168,111,72,.38);
}
@media (hover:hover){
.salon .rev:hover{box-shadow:inset 0 0 0 1px rgba(201,149,112,.65)}
}
.salon .rev__fig{background:rgba(243,240,233,.07)}
.salon .rev__mark{color:var(--accent-soft)}
.salon .rev__q{color:var(--on-dark)}
.salon .rev__who{border-top-color:var(--line-g)}
.salon .rev__name{color:var(--on-dark)}
.salon .rev__date{color:rgba(243,240,233,.52)}
/* ---------- дія секції ----------
Єдина кнопка: повністю скруглена пігулка в карамелі, стрілка праворуч.
На наведенні фон світлішає на крок палітри, стрілка відходить управо. */
/* ---------- панель керування слайдером ----------
Три елементи в один рядок: посилання на Google, кругла «+» і стрілки.
Усі круглі кнопки одного діаметра, тож рядок читається як один блок. */
.revs{
--revs-ctl:46px; /* той самий діаметр, що в .rail-arrows button */
--revs-add:#B77950; /* акцент самої кнопки «+» */
}
.revs__g{
height:var(--revs-ctl);min-height:0;padding:0 20px;gap:9px;
font-size:var(--t-meta);
}
/* кольоровий знак Google не підпорядковується спільному .btn svg:
у нього власні заливки й жодного контуру */
.revs__g-i{
width:17px;height:17px;flex:none;
fill:initial;stroke:none;
}
/* кругла кнопка додавання: той самий діаметр, що й у стрілок */
.revs__add{
width:var(--revs-ctl);height:var(--revs-ctl);flex:none;
display:grid;place-items:center;border-radius:50%;
background:var(--revs-add);color:#FFF;border:0;cursor:pointer;
transition:background .3s var(--ease);
}
.revs__add svg{
width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;
stroke-linecap:round;
transition:transform .35s var(--slow);
}
/* плюс довертається на чверть оберту — рух, якого вистачає, і жодного
масштабування самої кнопки */
.revs__add:hover{background:#A2673F}
.revs__add:hover svg{transform:rotate(90deg)}
.revs__add:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.revs__add svg{transition:none}
.revs__add:hover svg{transform:none}
}
/* стрілки на темному: контур і колір — зі світлої сторони палітри */
.salon .revs .rail-nav button{
box-shadow:inset 0 0 0 1px var(--line-g);
color:rgba(243,240,233,.72);
}
.salon .revs .rail-nav button:hover{background:var(--accent);color:var(--milk);box-shadow:none}
.salon .revs .rail-nav button[disabled]{opacity:.3}
/* Заголовок секції — один сильний рядок на велику частину ширини.
Спільний .sec-head__t обмежений 820px, а рядкові треба 826px — саме ці
шість пікселів і ламали заголовок надвоє, тож тут стелю знімаємо. */
.salon .ba .sec-head__t{max-width:none}
.salon .ba .sec-title{
color:var(--on-dark);
line-height:1;letter-spacing:-.022em;
/* balance тут ні до чого: рядок має бути один */
text-wrap:normal;
}
/* на desktop — суворо один рядок; нижче 1024px кегль уже менший
за вьюпорт, тож переносити дозволено */
@media (min-width:1024px){
.salon .ba .sec-title{white-space:nowrap}
}
.salon .ba .sec-title em{color:var(--accent-soft)}
.salon .ba__cat{color:var(--accent-soft)}
.salon .ba__t{color:var(--on-dark)}
.salon .ba__d{color:rgba(243,240,233,.62);border-top-color:var(--line-g)}
.salon .ba__fact{box-shadow:inset 0 0 0 1px var(--line-g)}
.salon .ba__fact b{color:var(--on-dark)}
.salon .ba__fact-t span{color:rgba(243,240,233,.54)}
.salon .ba__fact svg{color:var(--accent-soft);stroke:var(--accent-soft)}
/* плейсхолдер під фото — на тон світліший за тло секції */
.salon .ba__view{background:#2A211B}
/* круглі перемикачі категорій */
.salon .ba__dot{color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--line-g)}
.salon .ba__dot:hover{background:rgba(243,240,233,.06);box-shadow:inset 0 0 0 1px rgba(243,240,233,.34)}
.salon .ba__dot.is-on{
background:var(--accent-soft);color:var(--dark);
box-shadow:inset 0 0 0 1px var(--accent-soft);
}
.salon .ba__dot::after{background:var(--on-dark);color:var(--dark)}
/* outline CTA: контур бронзою, заливка приходить на наведенні */
.salon .ba__go{color:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-soft)}
.salon .ba__go::after{background:var(--accent-soft)}
.salon .ba__go:hover{color:var(--dark)}
/* ============================================================
ЦІНИ
============================================================ */
.price{
background:var(--ivory);
--t-prow-n:clamp(1.2rem,.56vw + 1.08rem,1.65rem);
--t-prow-p:clamp(1.08rem,.36vw + 1.0rem,1.4375rem);
--t-prow-d:clamp(.875rem,.05vw + .86rem,.9375rem);
/* роздільники майже зникають: вони лише допомагають сканувати */
--price-line:rgba(42,32,25,.08);
/* на скільки підсвітка рядка виходить за колонки */
--prow-bleed:clamp(10px,1.2vw,18px);
/* тепле молоко замість чистого білого: плашка лишається світлішою
за тло секції, але вже з того самого кінця палітри. Це тло картки
на телефоні — там рядок мусить читатися як окрема підкладка. */
--prow-plate:#FFFCF7;
/* Підсвітка рядка на десктопі — окремий, тихіший тон: та сама плашка,
що й на телефоні, читалася тут як біла плита поверх кремового тла.
Різниця з тлом секції лишається, але вона на дотик, а не в очі. */
--prow-wash:#FBF7F0;
/* заливка кола — окремий тон, трохи світліший за --accent */
--prow-go-fill:#AD754D;
--prow-t:.26s;
--prow-t-slow:.28s;
}
/* секція дихає ширше за звичайний крок --sec */
.salon .price{
padding-top:clamp(62px,8.1vw,126px);
padding-bottom:clamp(62px,8.1vw,126px);
}
/* прайс домінує, консультація — вузький supporting-елемент */
/* колонки стоять поруч, а не через порожню зону: права картка читається
продовженням тієї самої секції */
/* грід-айтем із типовим min-width:auto розтягується під найширший
неперенесений вміст — саме через це рядок категорій, що має гортатися
вбік, розпирав колонку замість того, щоб скролитися всередині неї */
.price__main{min-width:0}
.price__in{
display:grid;grid-template-columns:minmax(0,74fr) minmax(300px,26fr);
column-gap:clamp(26px,2.9vw,46px);align-items:start;
}
/* Заголовок більше не живе в лівій колонці: він тримає всю ширину секції,
і прайс читається як окремий розворот, а не як список із підписом. */
.price__head{grid-column:1/-1;margin-bottom:var(--head-gap)}
.salon .price .sec-head{margin-bottom:var(--head-gap)}
/* Заголовок займає всю доступну ширину й стоїть одним рядком. Саме
обмеження ширини розбивало його надвоє, тож достатньо його зняти:
примусовий nowrap тут зайвий і на вузькому екрані давав би
горизонтальний виліт — без нього рядок переноситься рівно тоді,
коли інакше не вміщається. */
.salon .price .sec-title{max-width:none}
/* Спільний .sec-head__t має стелю 820px і стискається до ширини тексту,
бо .sec-head — flex. Рядку потрібно 772px, тобто запас усього 48px —
те саме обмеження вже знято в «Чотири причини» та «До / Після». */
.salon .price__head .sec-head__t{max-width:none;flex:1 1 100%;min-width:0}
/* ---------- перемикачі категорій ----------
Не кнопки, а рядок назв на спільній лінії: активна набирає колір
акценту й тягне під собою власну риску. Перехід плавний, бо риска
не з'являється, а розтягується з лівого краю. */
.salon .price__tabs{
border-bottom:1px solid var(--price-line);
overflow:visible;flex-wrap:wrap;
gap:clamp(2px,1vw,10px) clamp(20px,2.4vw,38px);
padding:0;margin-bottom:clamp(20px,2vw,30px);
}
.salon .price__tabs .tab{
position:relative;height:auto;padding:0 0 13px;
display:inline-flex;align-items:center;border-radius:0;
background:none;box-shadow:none;
font-size:var(--t-meta);font-weight:500;letter-spacing:.012em;text-transform:none;
color:var(--ink-45);
transition:color .28s var(--ease);
}
/* спільне правило .tab::after малює свою смужку — перевизначаємо її під риску */
.salon .price__tabs .tab::after{
content:"";display:block;position:absolute;left:0;right:0;bottom:-1px;top:auto;
height:2px;background:var(--accent);border-radius:2px;
transform:scaleX(0);transform-origin:left center;
transition:transform .38s var(--slow);
}
.salon .price__tabs .tab:hover{color:var(--ink)}
/* Активна категорія — текст, а не оздоба, тож міцніший варіант
акценту: --accent дає 3.67:1 на тлі сторінки, --accent-fill 4.59. */
.salon .price__tabs .tab.is-on{color:var(--accent-text)}
.salon .price__tabs .tab.is-on::after{transform:scaleX(1)}
/* ---------- список послуг ----------
У спокойному стані рядки лежать на тлі секції без власного фону;
на наведенні під рядком з’являється біла плашка з легкою тінню.
Номер і стрілка — два кола по краях рядка. */
.plist{display:block}
/* Панель перемикається через [hidden], тобто виходить з display:none —
а з нього анімація запускається заново щоразу. Саме тому зміна
категорії читається як поява списку, а не як підміна. */
@keyframes prow-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.plist:not([hidden]) .prow{animation:prow-in .42s var(--ease) both}
.plist:not([hidden]) .prow:nth-child(1){animation-delay:0ms}
.plist:not([hidden]) .prow:nth-child(2){animation-delay:45ms}
.plist:not([hidden]) .prow:nth-child(3){animation-delay:90ms}
.plist:not([hidden]) .prow:nth-child(4){animation-delay:135ms}
.plist:not([hidden]) .prow:nth-child(5){animation-delay:180ms}
.plist:not([hidden]) .prow:nth-child(n+6){animation-delay:215ms}
@media (prefers-reduced-motion:reduce){
.plist:not([hidden]) .prow{animation:none}
}
/* Рядок цілком — одна кнопка: клік і наведення працюють у будь-якій
точці ширини, а не лише на стрілці.
тримає тільки роздільник. */
.prow{border-bottom:1px solid var(--price-line)}
.prow__b{
position:relative;
display:grid;width:100%;
/* Кожен рядок — окрема сітка, тож жодна колонка праворуч не може бути
auto: ширина ціни різна, й треки роз’їхалися б від рядка до рядка.
Фіксовані колонки дають три спільні направляючі: початок тривалості,
права лінія цін і колонка стрілок. */
/* Колонка тривалості підросла під годинник, колонка ціни — під
пілюлю: «від 3 900 ₴» разом із її полями ширший за старі 120px. */
grid-template-columns:clamp(40px,3vw,44px) minmax(0,1fr) clamp(104px,8.6vw,124px) clamp(130px,11vw,160px) clamp(42px,3.1vw,46px);
align-items:center;column-gap:22px;
padding:clamp(20px,1.6vw,24px) 0;
background:none;border:0;cursor:pointer;
font-family:inherit;color:inherit;text-align:left;
}
.prow__b:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
/* Підсвітка — ледь тепліша за саме тло смуга під рядком. Вона згасає
однією opacity, тож рядок нікуди не зсувається й не міняє розміру:
плашка лежить на псевдоелементі поза потоком. */
.prow__b::before{
content:"";position:absolute;z-index:0;
inset:1px calc(var(--prow-bleed) * -1) 1px;
background:var(--prow-wash);border-radius:17px;
opacity:0;transition:opacity var(--prow-t) var(--ease);
}
.prow__b > *{position:relative;z-index:1}
/* номер у тонкому колі — ритм списку, а не акцент */
.prow__i{
width:clamp(40px,3vw,44px);height:clamp(40px,3vw,44px);
display:grid;place-items:center;border-radius:50%;
/* обводка глиняна від самого початку, на підсвітці лише щільнішає */
box-shadow:inset 0 0 0 1px rgba(168,111,72,.3);
/* Номер рядка читають, тож міцніший варіант акценту (4.59:1
замість 3.67). Обводка кола лишається світлішою — вона оздоба. */
font-size:.875rem;letter-spacing:.06em;color:var(--accent-text);
font-variant-numeric:tabular-nums;
transition:color var(--prow-t) var(--ease),box-shadow var(--prow-t) var(--ease);
}
.prow__n{
font-family:var(--display);font-size:clamp(1.375rem,1.7vw,1.5rem);line-height:1.25;
padding-right:clamp(10px,1.4vw,20px);
transition:color var(--prow-t) var(--ease);
}
/* бокс облягає текст (line-height:1), тож align-items:center вирівнює самі
літери, а не різновисокі рядкові коробки */
.prow__d{
display:inline-flex;align-items:center;gap:7px;
font-size:.9375rem;letter-spacing:.06em;line-height:1.2;
text-transform:uppercase;color:var(--ink-45);white-space:nowrap;
justify-self:start;
}
/* маленький годинник ліворуч від часу — без власної плашки */
.prow__d svg{
display:block;width:15px;height:15px;flex:none;
fill:none;stroke:currentColor;stroke-width:1.3;
stroke-linecap:round;stroke-linejoin:round;
}
/* Ціна в м'якій персиково-бежевій пілюлі однакової висоти в усіх
рядках: висота задана, а не виміряна вмістом, тож «900 ₴» і
«від 3 900 ₴» стоять однаковими плашками. Тон світліший за кнопку,
тож головною дією лишається коло зі стрілкою. */
.prow__p{
padding:11px 20px;border-radius:999px;
background:rgba(168,111,72,.09);
font-size:1.1875rem;font-weight:600;line-height:1;
font-variant-numeric:tabular-nums;white-space:nowrap;justify-self:end;
}
/* кругла outline-кнопка запису: заливається разом із усім рядком */
.prow__go{
position:relative;overflow:hidden;
/* Розмір кола живе в змінній, бо від нього рахується й виніс стрілок:
у відсотках від самої іконки (180%) він давав 25.2px, тобто правий
край стрілки, що чекає, зупинявся за 4px до лівої межі кола — і цей
шматок було видно. Тепер виніс рахується від кола: радіус + півстрілки
+ 4px запасу, тож за будь-якого розміру кола обидві стрілки стоять
за межею кадру, а не впритул до неї. */
--go-size:clamp(42px,3.1vw,46px);
--go-travel:calc(var(--go-size) / 2 + 11px);
width:var(--go-size);height:var(--go-size);
display:grid;border-radius:50%;justify-self:end;
color:var(--ink-45);pointer-events:none;
box-shadow:inset 0 0 0 1px var(--price-line);
transition:background var(--prow-t) var(--ease),color var(--prow-t) var(--ease),
box-shadow var(--prow-t) var(--ease);
}
/* Та сама механіка, що й у .go-i на картках послуг: дві однакові стрілки
одна поверх одної, перша їде праворуч за межу кола, друга заходить
зліва точно на її місце — у підсумку стрілка стоїть по центру, а не
правіше. Коло не рухається, overflow ховає обидві за його краєм.
Тайминг і крива — ті самі, що в кнопках «Записатися». */
.prow__go svg{
position:absolute;top:50%;left:50%;margin:-7px 0 0 -7px;
width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;
stroke-linecap:round;stroke-linejoin:round;
transition:transform .36s cubic-bezier(.22,.61,.36,1);
}
.prow__go svg:last-child{transform:translateX(calc(var(--go-travel) * -1))}
/* ---------- підсвічений рядок ----------
Два набори селекторів замість одного списку. Клавіатурний фокус і
натискання працюють скрізь, зокрема на тачі, де :hover лишається
«прилиплим» після тапа — тож саме наведення живе окремо, у
@media (hover:hover), і сенсорного екрана не стосується. */
.prow__b:focus-visible::before,
.prow__b:active::before{opacity:1}
/* Номер: обводка кола стає помітнішою, сама цифра лишається в тому ж
глиняному тоні — рухається одна властивість, а не дві. */
.prow__b:focus-visible .prow__i,
.prow__b:active .prow__i{box-shadow:inset 0 0 0 1px rgba(168,111,72,.7)}
.prow__b:focus-visible .prow__n,
.prow__b:active .prow__n{color:var(--accent)}
/* Коло заливається від підсвітки будь-де в рядку, а стрілка в ньому —
біла: stroke у неї currentColor, тож достатньо 'color'. */
.prow__b:focus-visible .prow__go,
.prow__b:active .prow__go{
background:var(--prow-go-fill);color:#FFF;
box-shadow:inset 0 0 0 1px var(--prow-go-fill);
}
.prow__b:focus-visible .prow__go svg:first-child,
.prow__b:active .prow__go svg:first-child{transform:translateX(var(--go-travel))}
.prow__b:focus-visible .prow__go svg:last-child,
.prow__b:active .prow__go svg:last-child{transform:translateX(0)}
@media (hover:hover){
.prow__b:hover::before{opacity:1}
.prow__b:hover .prow__i{box-shadow:inset 0 0 0 1px rgba(168,111,72,.7)}
.prow__b:hover .prow__n{color:var(--accent)}
.prow__b:hover .prow__go{
background:var(--prow-go-fill);color:#FFF;
box-shadow:inset 0 0 0 1px var(--prow-go-fill);
}
.prow__b:hover .prow__go svg:first-child{transform:translateX(var(--go-travel))}
.prow__b:hover .prow__go svg:last-child{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
/* без руху друга стрілка лишається за межею кола, а перша — по центру */
.prow__go svg{transition:none}
.prow__b:focus-visible .prow__go svg:first-child,
.prow__b:active .prow__go svg:first-child,
.prow__b:hover .prow__go svg:first-child{transform:none}
}
/* Кнопка під прайсом — той самий pill, що й під картками популярних
послуг: підкреслене текстове посилання читалося тут як виноска, а не
як дія. Вигляд описаний разом із .pop__more нижче, тут лишається
тільки те, що належить саме цій кнопці. */
/* Кнопка під прайсом — та сама pill-форма, що й під картками послуг,
але залита: це головна дія секції, а не другорядне посилання. */
.price__all{
margin-top:clamp(24px,2.6vw,34px);border:0;cursor:pointer;font-family:inherit;
/* залита кнопка не потребує обводки свого ж кольору — вона лише
читалася б як тінь */
background:var(--accent-fill);color:#FFF;box-shadow:none;
}
.price__all:hover{background:#8A5C3B;color:#FFF;box-shadow:none}
/* ---------- картка консультації ----------
Акуратний supporting-елемент, а не другий герой секції: вузька,
з кадром згори й кремовою частиною нижче. Тіней немає — лише контур. */
/* теплий ivory замість чистого білого, жодного контуру — лише м’яка тінь.
Верх картки стоїть на рівні першого рядка прайсу. */
/* Біла картка на бежевому тлі секції, без контуру — відділяє її лише
м’яка тінь. Sticky тримається нижче закріпленої панелі: її висота у
стислому стані — близько 66px плюс 13px відступу згори, тож беремо
це плюс комфортний просвіт. Межа прилипання — сама колонка сітки,
тож поза секцією картка зупиняється сама. */
/* Права колонка тягнеться на всю висоту рядка — саме вона є межею,
у якій картка прилипає. Без цього вкладеного рівня sticky ніде не їхав би:
елемент сам собі дорівнював би висоті свого контейнера. */
.price__side{align-self:stretch}
/* Картка тримається на контурі й пропорціях, не на тіні. Кадр іде
на всю ширину, а текстова частина підіймається на нього — зсув у
кілька десятків пікселів і дає ту саму композицію, заради якої
інакше довелося б малювати градієнт. */
.price__help{
background:var(--milk);border-radius:18px;overflow:hidden;
box-shadow:inset 0 0 0 1px var(--line-soft);
/* нижче закріпленої панелі (у стислому стані ≈ 66px + 13px відступу)
плюс комфортний просвіт */
position:sticky;top:108px;
}
.price__help-fig{margin:0;background:var(--ivory)}
.price__help-fig img{
/* кадр ширший за високий: картка доповнює список, а не переростає його */
width:100%;aspect-ratio:4/3;object-fit:cover;object-position:62% 34%;display:block;
}
.price__help-body{
display:grid;gap:10px;padding:clamp(20px,1.8vw,26px);
position:relative;z-index:1;
margin-top:clamp(-40px,-2.6vw,-26px);
background:var(--milk);border-radius:18px 18px 0 0;
}
.price__help-l{
/* --t-label, а не власні 12px: у блоці токенів прямо сказано, що
жоден читний текст на сторінці не дрібніший за 14px, і цей токен
годує капсові лейбли всюди. Два лейбли — тут і в картці «як нас
знайти» — були єдиними винятками з того правила. */
font-size:var(--t-label);letter-spacing:var(--ls-label);
text-transform:uppercase;color:var(--accent-text);
}
.price__help-t{
font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.02em;
font-size:clamp(1.6rem,1.5vw + 1.1rem,2.3rem);text-wrap:balance;
}
.price__help-p{color:var(--ink-70);font-size:var(--t-meta);line-height:1.5}
/* «Отримати консультацію» у вузькій колонці не стає в один рядок,
тож кнопка росте під текст, а не ріже його фіксованою висотою */
.price__help-go{
height:auto;min-height:52px;width:100%;margin-top:6px;
padding:13px 18px;line-height:1.3;text-align:center;
}
.price__help-go svg{transition:transform .45s var(--slow)}
.price__help-go:hover svg{transform:translateX(5px)}
/* ============================================================
ВІДГУКИ
============================================================ */
/* ---------- рейтинг як окремий елемент ----------
Не рядок тексту збоку від заголовка, а невелика плашка: оцінка
великим кеглем, під нею джерело. Стоїть у правому слоті .sec-head,
тож вирівняна по нижньому краю заголовка. */
/* Один компонент зірок на всю сторінку: порожні лежать треком, залиті —
шаром поверх, обрізаним по --fill. 4,9 з 5 — це 98%, тож п'ята зірка
свідомо неповна: показувати п'ять суцільних означало б округлити
оцінку вгору. Розмір задає --star, щоб той самий рядок працював і в
заголовку секції, і всередині картки. */
.stars{position:relative;display:inline-block;line-height:0;--star:15px;--fill:100%}
.stars__track,
.stars__fill{display:flex;gap:3px}
.stars__track{color:var(--sand)}
.stars__fill{position:absolute;inset:0;overflow:hidden;width:var(--fill);color:var(--accent)}
.stars svg{width:var(--star);height:var(--star);flex:none}
/* ---------- картки ----------
Тепло-молочна плашка з волосінню замість голої лінії зверху:
відгук має читатися як окремий об'єкт. Лапка — єдина декорація,
і вона ж тримає карамель у секції. */
/* Рейка на спільному механізмі: той самий .rail і той самий rail.js,
що веде слайдер майстрів. Скільки карток у кадрі — каже --n, решта
рахується від неї, тож брейкпоінт міняє одне число. */
.revs__rail{
--n:4;
--g:clamp(18px,1.8vw,26px);
gap:var(--g);
align-items:stretch;
scroll-snap-type:x mandatory;
}
.revs__rail>*{flex:0 0 calc((100% - var(--g) * (var(--n) - 1)) / var(--n))}
/* ---- шапка секції: дії та стрілки праворуч від заголовка ----
Блок дій не стискається й не переноситься всередині себе, а заголовок
бере рештки рядка: на вузькому екрані він піде у два рядки, але дії
лишаться в одному ряду з ним, як і задумано. */
.revs .sec-head{flex-wrap:nowrap;align-items:center;gap:clamp(20px,2.4vw,40px)}
.revs .sec-head__t{flex:1 1 0;min-width:0}
/* Заголовок і панель — один рядок сітки, стрічка карток — другий.
Панель винесена з .sec-head саме заради цього: на вузькому екрані
вона просто змінює order і стає під картками. */
.revs__wrap{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
row-gap:var(--head-gap);column-gap:clamp(20px,2.4vw,40px);
}
/* Крок від заголовка до стрічки задає row-gap сітки — і тільки він.
Власний margin-bottom у .sec-head тут подвоював би відступ, а заразом
роздував би перший рядок сітки, через що панель керування з'їжджала
вниз від заголовка. Селектор на рівень специфічніший за спільне
.salon .sec-head, тож порядок правил у файлі вже не вирішує. */
.salon .revs__wrap > .sec-head{grid-column:1;grid-row:1;margin-bottom:0}
/* align-items:center сітки ставить панель по центру рядка — а рядок це
рядковий бокс заголовка разом із напівінтерліньяжем зверху. Фарба літер
лежить нижче: при 59px верх виносних елементів ~12px від верху боксу,
низ підрядкових ~69px, тож центр того, що видно, на ~7px нижчий за центр
боксу — звідси відчуття, що кнопки висять зависоко. Зсув оптичний: на
розкладку не впливає й нічого не рухає. Саме top, а не transform —
transform на цьому елементі вже зайнятий появою [data-rv]. */
.revs__side{
grid-column:2;grid-row:1;justify-self:end;position:relative;
top:clamp(5px,.56vw,8px);
display:flex;align-items:center;flex-wrap:nowrap;gap:14px;
}
/* Стрічка гортається всередині себе, тож їй потрібен явний min-width:0:
типовий min-width:auto в flex- і grid-елементі дає їй розтягнутися
до внутрішньої ширини всіх карток замість того, щоб скролитися. */
.revs__wrap > .revs__rail{grid-column:1/-1;grid-row:2;min-width:0}
/* пара стрілок — один елемент керування, тож усередині неї крок
менший, ніж між самостійними кнопками панелі */
.revs__side .rail-nav{margin-left:0;gap:10px}
.rev{
/* Фото зверху, під ним текстове тіло. Сама картка — два рядки, друге
тягнеться, тож усі картки ряду однакової висоти. */
display:grid;grid-template-rows:auto 1fr;gap:0;
border-radius:var(--radius-md);overflow:hidden;
transition:box-shadow .4s var(--ease),transform .45s var(--slow);
}
/* Фото — єдиний елемент керування: клікається весь кадр, а значок
збільшення в кутку лише показує, що буде по кліку. */
.rev__fig{
position:relative;display:block;width:100%;padding:0;border:0;margin:0;
background:var(--ivory);cursor:zoom-in;overflow:hidden;
border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.rev__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .55s var(--slow)}
@media (hover:hover){
.rev:hover{transform:translateY(-4px)}
.rev__fig:hover img{transform:scale(1.05)}
}
.rev__zoom{
position:absolute;z-index:2;top:12px;right:12px;
width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
background:rgba(252,250,246,.92);color:var(--ink);
transition:background-color .25s var(--ease),color .25s var(--ease);
}
.rev__zoom svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}
.rev__fig:hover .rev__zoom,
.rev__fig:focus-visible .rev__zoom{background:var(--accent);color:var(--milk)}
.rev__fig:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rev__body{
display:grid;grid-template-rows:auto 1fr auto;
padding:clamp(18px,1.7vw,26px);
}
/* У верхівці лишилася сама лапка — єдина декорація картки. */
.rev__top{display:block;margin-bottom:clamp(8px,.9vw,12px)}
.rev__mark{
font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:.62;
color:var(--accent);display:block;
}
.rev__q{
font-family:var(--display);font-weight:400;font-size:var(--t-lead);
line-height:1.42;letter-spacing:-.01em;text-wrap:pretty;margin:0;
}
/* Підвал картки: імʼя ліворуч, оцінка праворуч на одній лінії з ним,
дата — під імʼям другим планом. Підвал притиснутий до низу картки
рядком 1fr у .rev__body, тож у всьому ряду він стоїть на одній
висоті, хоч би якої довжини були самі відгуки. */
.rev__who{
/* Сітка, а не flex: імʼя і зірки стоять в одному рядку, дата — у
другому під імʼям. Так зірки вирівняні саме по лінії імені, а не
по центру пари «імʼя + дата». */
display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:center;gap:4px 14px;
margin-top:clamp(16px,1.5vw,22px);padding-top:clamp(13px,1.2vw,17px);
border-top:1px solid var(--line-soft);
}
.rev__name{grid-column:1;font-weight:500;font-size:var(--t-meta);line-height:1.3;color:var(--ink)}
.rev__who .stars{grid-column:2;grid-row:1}
.rev__date{grid-column:1;font-size:.875rem;line-height:1.4;color:var(--ink-45);font-variant-numeric:tabular-nums}
/* трохи компактніші за ті, що були у верхівці, але все ще добре читані */
.rev__who .stars{flex:none;--star:17px}
.rev__who .stars__track,
.rev__who .stars__fill{gap:4px}
/* ---------- модалка відгуку ----------
Те саме полотно, що й у секції відгуків: темне тло, карамельна
волосінь, сериф у заголовку. Без тіні — глибину дає сам тон. */
.rf{
position:fixed;inset:0;z-index:115;display:grid;place-items:center;
padding:clamp(16px,4vw,48px);
opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
}
.rf.is-open{opacity:1;pointer-events:auto}
.rf__scroll::-webkit-scrollbar-thumb{background:var(--accent);background-clip:padding-box}
.rf__scroll::-webkit-scrollbar-thumb:hover{background:var(--accent-soft);background-clip:padding-box}
.rf__scrim{position:absolute;inset:0;width:100%;height:100%;background:rgba(14,11,9,.82);border:0;padding:0;cursor:pointer}
/* Панель більше не прокручується сама: overflow живе на крок глибше,
у .rf__scroll. Доти смуга стояла на краю самої панелі — йшла від
верху до низу просто поверх скруглень і накривала волосінь рамки.
Тепер overflow:hidden панелі обрізає її тими ж кутами, а 2px поля
праворуч відсувають її від рамки. Контент нічого не втрачає:
обрізається лише те, що й так за межами скруглення. */
.rf__panel{
position:relative;width:min(560px,100%);max-height:min(90vh,760px);
display:flex;flex-direction:column;overflow:hidden;padding-right:2px;
background:var(--dark);color:var(--on-dark);
border-radius:var(--radius-lg);
box-shadow:inset 0 0 0 1px rgba(168,111,72,.45);
transform:translateY(18px) scale(.985);
transition:transform .45s var(--slow);
}
/* Світлий повзунок з базового набору був би тут найяскравішою плямою,
тож на темному тлі він бере сам акцент, а на наведенні — світлу версію.
position:relative тримає хрестик там само, де й був: він лежить
усередині обгортки й так само їде з контентом. */
.rf__scroll{
position:relative;flex:1 1 auto;min-height:0;
overflow-y:auto;overscroll-behavior:contain;
padding:clamp(26px,3.4vw,44px);
scrollbar-color:var(--accent) transparent;
}
.rf.is-open .rf__panel{transform:none}
.rf__x{
position:absolute;z-index:2;top:clamp(14px,1.6vw,20px);right:clamp(14px,1.6vw,20px);
width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
background:rgba(243,240,233,.08);color:var(--on-dark);border:0;cursor:pointer;
transition:background-color .25s var(--ease),color .25s var(--ease);
}
.rf__x:hover,.rf__x:focus-visible{background:var(--accent);color:var(--milk)}
.rf__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.rf__eyebrow{color:var(--accent-soft)}
.rf__t{
font-family:var(--f-section);font-weight:400;
font-size:clamp(1.6rem,1.5vw + 1.2rem,2.1rem);line-height:1.14;letter-spacing:-.014em;
margin-top:clamp(10px,1vw,14px);color:var(--on-dark);
}
.rf__d{
font-size:var(--t-meta);line-height:1.55;color:rgba(243,240,233,.72);
margin-top:10px;max-width:46ch;text-wrap:pretty;
}
.rf__fields{display:grid;gap:clamp(16px,1.8vw,22px);margin-top:clamp(20px,2.2vw,28px)}
.rf__group{display:grid;gap:9px;border:0;padding:0;margin:0;min-width:0}
.rf__l{
font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
color:rgba(243,240,233,.55);padding:0;
}
/* ---- вибір оцінки ---- */
.rf__pick{display:flex;gap:6px}
.rf__star{
width:34px;height:34px;display:grid;place-items:center;
background:none;border:0;padding:0;cursor:pointer;
color:rgba(243,240,233,.22);
transition:color .2s var(--ease),transform .25s var(--slow);
}
.rf__star svg{width:22px;height:22px}
.rf__star:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* підсвічені зірки — завжди «усі до n-ї»: один клас на обидва стани */
.rf__star.is-on{color:var(--accent-soft)}
@media (hover:hover){
.rf__star:hover{transform:scale(1.08)}
}
/* ---- поля ---- */
.rf__in{
width:100%;font:inherit;font-size:var(--t-meta);color:var(--on-dark);
background:rgba(243,240,233,.05);border:0;border-radius:var(--radius-sm);
box-shadow:inset 0 0 0 1px var(--line-g);
padding:13px 15px;
transition:box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.rf__in::placeholder{color:rgba(243,240,233,.38)}
.rf__in:focus{outline:0;box-shadow:inset 0 0 0 1px var(--accent-soft);background:rgba(243,240,233,.08)}
.rf__area{resize:vertical;min-height:112px;line-height:1.55}
/* пояснення під полем — тим самим кеглем, що й дрібні підписи сайта */
.rf__hint{font-size:.875rem;line-height:1.45;color:rgba(243,240,233,.48);text-wrap:pretty}
/* ---- фото до відгуку ----
Область кидання — той самий тон і волосінь, що й у полів форми,
лише штрихова рамка підказує, що сюди можна перетягнути файл.
Сам input лежить поверх прозорим шаром, тож клік по всій області
відкриває вибір файлів і нічого не треба підміняти скриптом. */
.rf__drop{
position:relative;display:grid;justify-items:center;gap:5px;
padding:clamp(18px,2vw,24px) 16px;
border-radius:var(--radius-sm);
background:rgba(243,240,233,.04);
box-shadow:inset 0 0 0 1px var(--line-g);
outline:1px dashed rgba(243,240,233,.18);outline-offset:-7px;
transition:background-color .25s var(--ease),box-shadow .25s var(--ease),outline-color .25s var(--ease);
}
.rf__drop.is-over,
.rf__drop:focus-within{
background:rgba(201,149,112,.1);
box-shadow:inset 0 0 0 1px var(--accent-soft);
outline-color:var(--accent-soft);
}
.rf__file{
position:absolute;inset:0;width:100%;height:100%;
opacity:0;cursor:pointer;
}
.rf__drop-i{color:var(--accent-soft)}
.rf__drop-i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3}
.rf__drop-t{font-size:var(--t-meta);color:var(--on-dark)}
.rf__drop-d{font-size:.875rem;line-height:1.4;color:rgba(243,240,233,.45)}
/* мініатюри: квадрат із кнопкою зняття в кутку */
.rf__thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.rf__thumb{position:relative;width:76px;height:76px;border-radius:var(--radius-sm);overflow:hidden;
box-shadow:inset 0 0 0 1px var(--line-g);background:rgba(243,240,233,.06)}
.rf__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rf__thumb button{
position:absolute;top:5px;right:5px;width:22px;height:22px;
display:grid;place-items:center;border-radius:50%;border:0;cursor:pointer;
background:rgba(14,11,9,.74);color:var(--on-dark);
transition:background-color .2s var(--ease);
}
.rf__thumb button:hover,.rf__thumb button:focus-visible{background:var(--accent)}
.rf__thumb button svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8}
/* кнопка без стрілки: сама пігулка, розміри й падінги ті самі */
/* згода: той самий .bcheck, що у формі запису, лише в темній палітрі */
.rf__consent{gap:7px}
.rf__consent .bcheck__box{background:rgba(243,240,233,.06);box-shadow:inset 0 0 0 1px var(--line-g)}
.rf__consent .bcheck__t{color:rgba(243,240,233,.72)}
.rf__consent .bcheck__t a{color:var(--on-dark);text-decoration-color:rgba(243,240,233,.4)}
.rf__consent .bcheck__t a:hover{color:var(--accent-soft)}
.rf__consent .bcheck input:checked + .bcheck__box{background:var(--accent);color:var(--milk)}
.rf__go{background:var(--accent-fill);color:#FFF;justify-self:start;margin-top:2px}
.rf__go[disabled]{opacity:.55;pointer-events:none}
.rf__go::after{background:var(--accent-soft)}
.rf__go:hover{color:var(--dark)}
.rf__err{font-size:.875rem;line-height:1.4;color:#E0907A}
.rf__err--send{margin-top:-6px}
.rf__group:has(.rf__err:not([hidden])) .rf__in{box-shadow:inset 0 0 0 1px rgba(224,144,122,.6)}
/* ---- подяка ---- */
.rf__done{display:grid;justify-items:start;animation:rf-in .5s var(--slow)}
@keyframes rf-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rf__tick{
width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
background:rgba(201,149,112,.16);color:var(--accent-soft);margin-bottom:clamp(14px,1.6vw,20px);
}
.rf__tick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
@media (prefers-reduced-motion:reduce){
.rf,.rf__panel,.rf__star{transition:none}
.rf__done{animation:none}
}
/* ---------- lightbox ----------
Один шар на всю сторінку: фото роботи у великому розмірі без рамок
і підписів. Закривається хрестиком, кліком повз знімок і Escape —
три звичні шляхи, жодного нового. */
.lb{
position:fixed;inset:0;z-index:110;display:grid;place-items:center;
padding:clamp(16px,4vw,56px);
opacity:0;pointer-events:none;
transition:opacity .35s var(--ease);
}
.lb.is-open{opacity:1;pointer-events:auto}
.lb__back{
position:absolute;inset:0;width:100%;height:100%;
background:rgba(14,11,9,.88);border:0;padding:0;cursor:zoom-out;
}
.lb__fig{
position:relative;margin:0;max-width:100%;max-height:100%;
transform:scale(.97);transition:transform .4s var(--slow);
}
.lb.is-open .lb__fig{transform:none}
.lb__fig img{
display:block;max-width:100%;max-height:calc(100vh - clamp(32px,8vw,112px));
width:auto;height:auto;object-fit:contain;
border-radius:var(--radius-md);background:var(--dark);
}
.lb__x{
position:absolute;z-index:2;
top:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px);
width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
background:rgba(243,240,233,.1);color:var(--on-dark);border:0;cursor:pointer;
transition:background-color .25s var(--ease),color .25s var(--ease);
}
.lb__x:hover,.lb__x:focus-visible{background:var(--accent);color:var(--milk)}
.lb__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
@media (prefers-reduced-motion:reduce){
.lb,.lb__fig{transition:none}
}
/* ============================================================
СЕРТИФІКАТИ
============================================================ */
.gift{background:var(--graphite);color:var(--on-graphite);padding-block:clamp(56px,7vw,110px);overflow:hidden}
/* Колонки майже однакової ваги: текст лишає собі трохи менше, бо
сертифікат тепер головний акцент блока. */
.gift__in{
/* трохи більше лівій колонці: на попередній ширині заголовок ламався
натроє, і другий рядок закінчувався тире, що висіло в повітрі */
display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
gap:clamp(32px,4.4vw,72px);align-items:center;
}
.gift__text{display:grid;justify-items:start;gap:clamp(14px,1.6vw,22px)}
.gift .label{color:rgba(243,240,233,.62)}
.gift__t{font-family:var(--display);font-weight:400;font-size:var(--d2);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.gift__p{color:rgba(243,240,233,.76);max-width:42ch;text-wrap:pretty}
.gift__amounts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.gchip{
height:46px;padding:0 22px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-g);
font-size:var(--t-meta);letter-spacing:.03em;color:rgba(243,240,233,.8);
font-variant-numeric:tabular-nums;
transition:background .35s var(--ease),color .35s var(--ease),
box-shadow .35s var(--ease),transform .35s var(--slow);
}
@media (hover:hover){
.gchip:hover{box-shadow:inset 0 0 0 1px rgba(243,240,233,.45);color:var(--on-graphite)}
}
/* Обраний номінал — суцільна карамель. Світлою пігулкою він виглядав
точно так само, як головна кнопка «Придбати сертифікат», тобто вибір
і дія були одним і тим самим об'єктом. Тепер вибір позначає акцент,
а світла пігулка лишається тільки за кнопкою.
Заливка темніша за --accent: під білим текстом 15px потрібно 4.5:1. */
.gchip.is-on{
background:var(--accent-fill);color:#FFF;box-shadow:none;transform:translateY(-1px);
}
@media (hover:hover){
.gchip.is-on:hover{box-shadow:none;color:#FFF}
}
/* ---- довільна сума ---- */
.gown{display:grid;gap:7px;justify-items:start;width:min(100%,260px)}
.gown__l{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:rgba(243,240,233,.55)}
.gown__field{position:relative;width:100%}
.gown__i{
width:100%;font:inherit;font-size:var(--t-meta);color:var(--on-graphite);
background:rgba(243,240,233,.05);border:0;border-radius:var(--radius-sm);
box-shadow:inset 0 0 0 1px var(--line-g);
padding:13px 34px 13px 15px;font-variant-numeric:tabular-nums;
transition:box-shadow .25s var(--ease),background-color .25s var(--ease);
}
.gown__i::placeholder{color:rgba(243,240,233,.32)}
.gown__i:focus{outline:0;box-shadow:inset 0 0 0 1px var(--accent-soft);background:rgba(243,240,233,.08)}
.gown__cur{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:rgba(243,240,233,.45);font-size:var(--t-meta)}
.gown__h{font-size:.875rem;line-height:1.4;color:rgba(243,240,233,.42)}
.gift__go{margin-top:2px}
/* ---- три переваги одним рядком ---- */
.gperks{
display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
margin-top:clamp(4px,.8vw,10px);padding:0;list-style:none;
}
.gperks li{
display:flex;align-items:center;gap:10px;
/* умови використання — не виноска дрібним сірим: на темному тлі
.6 давало близько 4:1, тобто нижче норми для такого кегля */
font-size:.875rem;line-height:1.4;color:rgba(243,240,233,.82);white-space:nowrap;
}
/* карамельна риска-роздільник перед кожним пунктом, крім першого */
.gperks li + li::before{
content:"";width:14px;height:1px;background:var(--accent-soft);opacity:.5;flex:none;
}
/* ---- сертифікат ----
Конверт лежить під карткою й визирає кутом — це дає сцені глибину
без тіней. Сама картка імітує щільний матовий папір: дуже тонка
«сітка» волокон поверх теплої основи плюс м’який відблиск. */
.gift__card{display:grid;justify-items:center}
/* На одній колонці картка стає трохи меншою: у ряд із текстом вона була
головним акцентом, а під ним такий самий розмір уже тисне. */
.gpack{position:relative;width:100%;max-width:500px}
@media (max-width:1100px){
.gpack{max-width:min(440px,100%)}
}
.gpack__env{
position:absolute;z-index:0;inset:auto -14px -22px -14px;height:72%;
border-radius:var(--radius-md);
background:#2A211B;
box-shadow:inset 0 0 0 1px rgba(243,240,233,.1);
transform:rotate(1.6deg);
}
/* клапан конверта */
.gpack__env::after{
content:"";position:absolute;inset:0 0 auto;height:54%;
background:#332821;
border-radius:var(--radius-md) var(--radius-md) 0 0;
clip-path:polygon(0 0,100% 0,50% 100%);
box-shadow:inset 0 0 0 1px rgba(243,240,233,.07);
}
.gcard{
position:relative;z-index:1;
width:100%;aspect-ratio:8/5;border-radius:var(--radius-md);
background:
/* волокна паперу: дві майже невидимі сітки під різними кутами */
repeating-linear-gradient(64deg,rgba(120,96,72,.05) 0 1px,transparent 1px 3px),
repeating-linear-gradient(-26deg,rgba(120,96,72,.04) 0 1px,transparent 1px 4px),
/* м’який відблиск від верхнього лівого кута */
radial-gradient(120% 90% at 18% 6%,rgba(255,252,246,.9),rgba(255,252,246,0) 62%),
#E8DECF;
color:var(--ink);
padding:clamp(24px,2.6vw,38px);
display:grid;align-content:space-between;gap:clamp(14px,1.6vw,22px);
box-shadow:inset 0 0 0 1px rgba(42,32,25,.14);
transform:rotate(-2deg);
transition:transform .8s var(--slow);
}
/* тонка внутрішня рамка — класичний знак сертифіката */
.gcard::before{
content:"";position:absolute;inset:10px;border-radius:calc(var(--radius-md) - 6px);
box-shadow:inset 0 0 0 1px rgba(42,32,25,.12);
pointer-events:none;
}
@media (hover:hover){
.gift__card:hover .gcard{transform:rotate(-.8deg) translateY(-5px)}
}
.gcard__top{display:grid;gap:7px}
.gcard__mark{font-family:var(--display);font-size:22px;letter-spacing:.05em}
.gcard__mark sup{font-family:var(--ui);font-size:8px;opacity:.5}
.gcard__l{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-45)}
.gcard__v{
font-family:var(--display);font-weight:400;
font-size:clamp(2.6rem,4.6vw,3.9rem);line-height:1;
font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
/* зміна номіналу: короткий підйом, а не перемальовування картки */
.gcard__v.is-new{animation:gv-in .45s var(--slow)}
@keyframes gv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gcard__foot{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
border-top:1px solid var(--line);padding-top:clamp(10px,1.2vw,14px);
}
.gcard__f{font-size:var(--t-label);color:var(--ink-45);text-wrap:pretty}
/* Номер сертифіката — це текст, який читають. На --ink-25 він давав
1.96:1 проти кремового тла картки, тобто був майже невидимий. */
.gcard__no{font-size:var(--t-label);color:var(--ink-45);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
.gcard,.gchip{transition:none}
.gcard__v.is-new{animation:none}
}
/* ============================================================
FAQ
============================================================ */
/* бічна колонка тримає заголовок одним рядком: Playfair ширший за
попередні гротески, і на 300px «Часті запитання» розірвалося надвоє */
.faq__in{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:stretch}
/* Ліва колонка стоїть по центру висоти списку. Раніше вона була
sticky, закінчувалася на третині секції й лишала під собою близько
400px порожнечі. Притискати посилання до низу не можна — воно
відповідає на речення просто над ним, тож колонка зміщується
цілком. Шість питань не довші за екран, прилипання тут нічого
не додавало. */
.faq__side{
display:grid;gap:var(--space-sub);justify-items:start;
align-content:center;align-self:center;
}
.faq__acc{border-top:1px solid var(--line)}
/* питання читається як рядок тексту, а не як підпис у віджеті */
.salon .faq__acc summary{font-size:clamp(1.125rem,1vw + .95rem,1.5rem);font-weight:400;letter-spacing:-.012em}
.salon .faq__acc .acc__i{border-bottom-color:var(--line-soft)}
/* ---------- розкрите питання ----------
Жодної підкладки: відповідь розкривається просто на тлі секції.
Світлий прямокутник зі скругленням робив із пункту картку віджета —
відкрите питання позначає сам колір рядка, а межі пунктів тримають
ті самі тонкі лінійки, що й у закритому стані. */
.salon .faq__acc .acc__i[open] > summary{color:var(--accent-fill)}
.salon .faq__acc .acc__i[open] > summary .acc__ico{color:var(--accent-fill)}
/* повітря під відповіддю більше, ніж над нею: так відповідь належить
своєму питанню, а лінійка знизу відділяє пункт від наступного.
Праворуч — лише стільки, щоб рядок не впирався у плюс над ним;
міри тут немає, відповідь іде на всю ширину колонки. */
/* Нижній відступ лежить не на самій панелі, а на останньому абзаці
всередині неї. Причина не косметична: рядок 0fr складається до висоти
padding-box свого елемента, бо вміст панелі overflow:hidden обрізає, а
власний padding — ні. З відступом на панелі рядок упирався у 26px і не
міг дійти до нуля: складання зупинялося за крок до кінця, а решту
пункт дострибував ривком, коли браузер прибирав вміст разом з [open].
min-height:0 тут не допомагає — padding не входить у content-box.
Усередині ж цей самий відступ обрізається разом з текстом. */
.salon .faq__acc .acc__body>div{
padding-bottom:0;
padding-right:clamp(16px,2.6vw,44px);
}
.salon .faq__acc .acc__body>div>*:last-child{
padding-bottom:clamp(26px,2.5vw,36px);
}
.salon .faq__acc .acc__body p,
.salon .faq__acc .acc__body li{max-width:none}
.salon .faq__acc .acc__body p{line-height:1.62}
/* ---------- плюс, що стає мінусом ----------
Хрестик (повернутий плюс) читається як «закрити», а не як «згорнути».
Вертикальний штрих просто стискається до нуля — лишається мінус. */
.salon .faq__acc .acc__ico{
width:16px;height:16px;fill:none;stroke:currentColor;
stroke-width:1.3;stroke-linecap:round;
}
.salon .faq__acc .acc__ico-v{
transform-box:fill-box;transform-origin:center;
transition:transform .45s var(--slow);
}
.salon .faq__acc .acc__i[open] .acc__ico{transform:none} /* замість повороту */
.salon .faq__acc .acc__i[open] .acc__ico-v{transform:scaleY(0)}
@media (prefers-reduced-motion:reduce){
.salon .faq__acc .acc__ico-v{transition:none}
}
/* ============================================================
КОНТАКТИ
============================================================ */
.cont{
/* ключові дані звучать більшим кеглем за звичайний lead */
--t-cont-key:clamp(1.25rem,.78vw + 1.07rem,1.6rem);
}
/* Заголовок, CTA і контент — одна сітка на рівні .wrap. Кнопка живе
поряд із заголовком, а не всередині .sec-head: так на мобільному вона
стає окремим рядком і їде в кінець секції одним order, без дублювання. */
.cont__wrap{
display:grid;grid-template-columns:minmax(0,1fr) auto;
/* Проміжок між шапкою секції та вмістом тут один — цей row-gap.
Доти його було два: сітка давала --head-gap і стільки ж додавав
margin-bottom спільного правила .salon .sec-head, яке перебивало
локальне margin-bottom:0 (однакова специфічність, але воно нижче
у файлі). Разом виходило 115px замість 58. */
align-items:center;row-gap:clamp(60px,4.6vw,68px);column-gap:clamp(18px,2.4vw,36px);
}
.salon .cont__wrap .cont__head{grid-column:1;grid-row:1;margin-bottom:0}
.cont__cta{grid-column:2;grid-row:1;justify-self:end}
/* 23 / 50 / 27 — карта вдвічі ширша за будь-яку сусідню колонку й
лишається візуальним центром. Ліва колонка розбита на два блоки:
ключові дані згори, зв'язок — під ними, тож на вузькому екрані їх
можна розвести по різних місцях порядку. */
.cont__in{
grid-column:1/-1;grid-row:2;
display:grid;grid-template-columns:minmax(0,22fr) minmax(0,50fr) minmax(0,24fr);
grid-template-rows:auto 1fr;
/* проміжки з'їдають близько 4% ширини, тож частки підібрані так, щоб
фактичні частки лишилися в межах 22 / 50 / 25 */
column-gap:clamp(16px,1.6vw,24px);row-gap:clamp(22px,2.4vw,34px);
}
.cont__list{grid-column:1;grid-row:1;display:grid;gap:clamp(20px,2vw,28px);align-content:start}
.cont__contact{grid-column:1;grid-row:2;align-self:start;
display:grid;gap:clamp(16px,1.6vw,22px);
/* єдиний роздільник у колонці */
border-top:1px solid var(--line-soft);padding-top:clamp(18px,1.8vw,24px)}
.cont__list li,.cont__tel{display:grid;gap:5px}
/* ключові дані звучать на повний голос, підписи під ними — тихіше й щільніше */
.cont__list b,.cont__tel b{
font-weight:400;font-size:var(--t-cont-key);line-height:1.22;
font-family:var(--display);letter-spacing:-.015em;text-wrap:balance;
}
.cont__list a:hover,.cont__tel a:hover{color:var(--accent)}
.cont__note{font-size:.8125rem;color:var(--ink-45);line-height:1.45}
.cont__socw{display:grid;gap:9px;justify-items:start}
/* Іконка в колі замість підписаного посилання: назва мережі не додавала
нічого до її ж знака, а два підписи з'їдали рядок під телефоном.
Коло — той самий елемент, що в мобільному меню й футері. */
.cont__soc{display:flex;flex-wrap:wrap;gap:10px}
.cont__soc a{
display:inline-flex;align-items:center;justify-content:center;
width:var(--soc-size);height:var(--soc-size);border-radius:50%;
color:var(--ink-70);box-shadow:inset 0 0 0 1px var(--line);
transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.cont__soc svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3;flex:none}
.cont__soc a:hover{
color:var(--accent-fill);background:rgba(168,111,72,.07);
box-shadow:inset 0 0 0 1px rgba(168,111,72,.45);
}
.cont__soc a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* карта тягнеться на обидва рядки лівої колонки — вона тут головна */
.cont__map{
grid-column:2;grid-row:1/3;position:relative;
border-radius:var(--radius-md);overflow:hidden;background:var(--ivory);
min-height:clamp(340px,30vw,480px);
}
.map{width:100%;height:100%;display:block}
/* суцільна світла пілюля замість контурної: помітна, але не сперечається
з акцентним «Записатися» угорі */
.cont__route{
position:absolute;left:clamp(14px,1.6vw,22px);bottom:clamp(14px,1.6vw,22px);
/* 48px, як у решти компактних кнопок: 46 тут було випадковим
числом, і поруч із кнопкою «Записатися» різниця впадала в око. */
background:#FFF;color:var(--ink);height:48px;padding:0 22px;
}
.cont__route::after{background:var(--accent)}
.cont__route:hover{color:var(--milk)}
.cont__route svg{width:14px;height:14px}
/* ---------- картка «Як нас знайти» ---------- */
.cont__door{
grid-column:3;grid-row:1/3;margin:0;
display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(14px,1.4vw,18px);
}
.cont__door img{width:100%;height:100%;min-height:200px;object-fit:cover;border-radius:var(--radius-md)}
.cont__door figcaption{display:grid;gap:7px;align-content:start}
.cont__door-l{
justify-self:start;font-size:var(--t-label);letter-spacing:var(--ls-label);
text-transform:uppercase;
color:var(--accent-text);
}
.cont__door b{font-family:var(--display);font-weight:400;font-size:var(--t-lead);
line-height:1.18;letter-spacing:-.015em}
.cont__door-p{font-size:var(--t-label);color:var(--ink-45);line-height:1.55}
/* ============================================================
FOOTER
============================================================ */
/* ---------- підвал ----------
Deep chocolate закриває сторінку: після довгої світлої стрічки
потрібна точка, а не ще одна світла секція з тонкою лінією згори. */
.foot{
/* Повітря під волосінню і повітря під самим рядком — одна величина,
тож нижній рядок стоїть рівно посередині між лінією та краєм
підвалу. Доти над рядком було 22px, а під ним — 43px, і він
помітно тулився до лінії. Величина середня між тими двома:
висота підвалу лишилася та сама, симетрію дає рівність. */
--foot-end:clamp(26px,2.4vw,36px);
background:var(--dark);color:var(--on-dark);
padding-block:clamp(52px,5.6vw,88px) var(--foot-end);
}
.foot__top{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(30px,5vw,80px)}
.foot__brand{display:grid;justify-items:start;gap:16px;align-content:start}
.foot__mark{font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.04em;line-height:1}
.foot__mark sup{font-family:var(--ui);font-size:9px;letter-spacing:.1em;opacity:.5}
.foot__tag{font-size:var(--t-meta);color:rgba(243,240,233,.66);line-height:1.65}
/* Контакти в підвалі. Їх тут не було зовсім, хоча підвал — останнє
місце, де їх шукають. Дані ті самі, що в секції контактів; телефон
стоїть на півтора кроки більшим кеглем, бо це єдине, що звідси
набирають. */
.foot__contact{display:grid;gap:5px;font-style:normal;margin-top:4px}
.foot__tel{
font-family:var(--display);font-weight:400;letter-spacing:-.01em;
font-size:clamp(1.25rem,.5vw + 1.12rem,1.5rem);line-height:1.2;
color:var(--on-dark);transition:color .3s var(--ease);
}
.foot__tel:hover{color:var(--accent-soft)}
.foot__where,.foot__when{font-size:var(--t-meta);color:rgba(243,240,233,.68);line-height:1.5}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,40px)}
.foot .label{color:rgba(243,240,233,.5)}
.foot__col ul{display:grid;gap:9px;margin-top:16px}
.foot__col a{font-size:var(--t-meta);color:rgba(243,240,233,.7);transition:color .3s var(--ease)}
.foot__col a:hover{color:var(--accent-soft)}
/* Три зони одного рядка. Саме 1fr auto 1fr, а не space-between:
бічні колонки однакової ширини, тож юридичні сторінки стоять по
центру всієї ширини підвалу, а не там, куди їх випхав копірайт. */
.foot__bot{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:14px clamp(20px,2.4vw,40px);
margin-top:clamp(36px,4.4vw,64px);border-top:1px solid var(--line-g);
padding-top:var(--foot-end);
}
/* капс: трекінг під нього тут уже був, тож рядок не розповзається */
.foot__cr{font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;
color:rgba(243,240,233,.5)}
/* Юридичні сторінки стояли в колонці «Клієнтам» упереміш із FAQ та
сертифікатами. Їхнє місце — у нижньому рядку, між копірайтом і підписом. */
.foot__docs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px clamp(16px,1.6vw,24px)}
/* Підпис розробника: службовий рядок тим самим кеглем, що й копірайт,
клікабельна лише назва студії. Тонке підкреслення одразу каже, що це
посилання, — без нього в сірому рядку його ніхто не знайде. */
.foot__dev{
justify-self:end;text-align:right;min-width:0;
font-size:var(--t-label);letter-spacing:.06em;color:rgba(243,240,233,.5);
}
.foot__dev a{
color:rgba(243,240,233,.72);
text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:3px;text-decoration-color:rgba(243,240,233,.28);
transition:color .3s var(--ease),text-decoration-color .3s var(--ease);
}
.foot__dev a:hover{color:var(--accent-soft);text-decoration-color:var(--accent-soft)}
.foot__dev a:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
.foot__docs a{
font-size:var(--t-label);color:rgba(243,240,233,.56);
transition:color .3s var(--ease);
}
.foot__docs a:hover{color:var(--accent-soft)}
/* ті самі кружки, що в контактах і в меню, лише в темній гамі.
Місце — під кнопкою в блоці бренду: у нижньому рядку вони відбирали
увагу в підпису розробника. */
/* Кнопка запису й мережі стоять одним рядком, по спільній осі:
доти це були два окремі рівні блоку бренду. 18px до кружків
відділяють їх від кнопки, 10px між самими кружками тримають їх
однією групою. wrap — лише страховка: у колонці 340px рядок
займає 253px і на жодній ширині не ламається. */
.foot__act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot__soc{display:flex;gap:10px}
.foot__soc a{
display:inline-flex;align-items:center;justify-content:center;
width:var(--soc-size);height:var(--soc-size);border-radius:50%;
color:rgba(243,240,233,.72);box-shadow:inset 0 0 0 1px var(--line-g);
transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.foot__soc svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.3}
.foot__soc a:hover{
color:var(--accent-soft);background:rgba(243,240,233,.06);
box-shadow:inset 0 0 0 1px rgba(201,150,109,.45);
}
.foot__soc a:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
/* ============================================================
STICKY CTA (мобільна версія)
============================================================ */
.mcta{
position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
background:rgba(252,250,246,.94);backdrop-filter:blur(14px);
border-top:1px solid var(--line-soft);
padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
transform:translateY(102%);transition:transform .5s var(--slow);
}
.mcta.is-on{transform:none}
.mcta__in{display:flex;align-items:center;gap:14px}
.mcta__txt{display:grid;gap:2px;min-width:0}
.mcta__txt b{font-weight:500;font-size:var(--t-meta);white-space:nowrap}
.mcta__txt span{font-size:var(--t-label);color:var(--ink-45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcta__btn{flex:0 0 auto;width:auto;min-width:160px;height:48px}
/* ============================================================
BOOKING FLOW
============================================================ */
.bk{position:fixed;inset:0;z-index:90;display:grid;place-items:center;pointer-events:none}
.bk__scrim{
position:absolute;inset:0;background:rgba(18,15,12,.52);backdrop-filter:blur(3px);
opacity:0;transition:opacity .45s var(--ease);
}
.bk__panel{
position:relative;width:min(680px,calc(100vw - var(--gutter) * 2));
max-height:min(86vh,780px);display:grid;grid-template-rows:auto auto 1fr auto;
background:var(--milk);border-radius:var(--radius-xl);overflow:hidden;
box-shadow:0 50px 100px -40px rgba(14,12,10,.6);
opacity:0;transform:translateY(22px) scale(.985);
transition:opacity .45s var(--ease),transform .55s var(--slow);
}
.bk.is-open{pointer-events:auto}
.bk.is-open .bk__scrim{opacity:1}
.bk.is-open .bk__panel{opacity:1;transform:none}
.bk__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,30px) 16px}
.bk__step{font-size:var(--t-meta);color:var(--ink-70);margin-top:6px}
.bk__x{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--ink-45);
transition:background .3s var(--ease),color .3s var(--ease)}
.bk__x svg{width:13px;height:13px}
.bk__x:hover{background:var(--ink);color:var(--milk)}
.bk__bar{height:1px;background:var(--stone);margin-inline:clamp(20px,2.4vw,30px)}
.bk__bar span{display:block;height:100%;width:25%;background:var(--accent);transition:width .55s var(--slow)}
.bk__body{overflow-y:auto;padding:clamp(16px,1.8vw,22px) clamp(20px,2.4vw,30px) clamp(18px,2vw,24px);overscroll-behavior:contain}
.bk__h{font-family:var(--display);font-size:var(--d4);line-height:1.1;margin-bottom:clamp(12px,1.2vw,16px)}
.bk__opts{display:grid;gap:6px}
.bopt{
display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;width:100%;text-align:left;
padding:14px 16px;border-radius:var(--radius-ctl);box-shadow:inset 0 0 0 1px var(--line-soft);
transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.bopt:hover{box-shadow:inset 0 0 0 1px var(--ink-25)}
.bopt.is-on{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--ivory)}
.bopt__n{display:grid;gap:3px;min-width:0}
.bopt__n b{font-weight:500;font-size:var(--t-num)}
.bopt__n span{font-size:var(--t-label);color:var(--ink-70);letter-spacing:.03em}
.bopt__p{font-size:var(--t-meta);color:var(--ink-70);font-variant-numeric:tabular-nums;white-space:nowrap}
.bopt__av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.bk__opts--mst .bopt{grid-template-columns:auto 1fr auto}
/* Дати — компактні однакові картки, зібрані зліва, а не розтягнуті
між краями модалки. */
.bk__days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bday{
width:100%;height:110px;display:grid;gap:4px;align-content:center;justify-items:center;
border-radius:var(--radius-ctl);box-shadow:inset 0 0 0 1px var(--line-soft);
transition:box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.bday:hover{box-shadow:inset 0 0 0 1px var(--accent);background:var(--ivory)}
.bday.is-on{background:var(--ink);color:var(--milk);box-shadow:inset 0 0 0 1px var(--ink)}
.bday.is-on:hover{background:var(--ink)}
/* День без вільних годин. Прибирати його зі списку не можна —
тоді зникає відчуття тижня й незрозуміло, чому дат стало менше.
Тому день лишається на місці, але видно, що він недоступний. */
.bday.is-off{opacity:.38;cursor:not-allowed;background:transparent}
.bday.is-off:hover{box-shadow:inset 0 0 0 1px var(--line-soft);background:transparent}
.bday em{font-style:normal;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.bday b{font-family:var(--display);font-weight:400;font-size:1.625rem;line-height:1.05;font-variant-numeric:tabular-nums}
.bday i{font-style:normal;font-size:.875rem;letter-spacing:.04em;text-transform:uppercase;opacity:.6}
/* Час — рівна сітка однакових кнопок, а не вузькі смужки. */
.bk__times{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.btime{
height:50px;width:100%;display:grid;place-items:center;border-radius:var(--radius-ctl);
font-size:var(--t-meta);font-variant-numeric:tabular-nums;
box-shadow:inset 0 0 0 1px var(--line-soft);
transition:box-shadow .3s var(--ease),background .3s var(--ease),color .3s}
.btime:hover{box-shadow:inset 0 0 0 1px var(--accent);background:var(--ivory)}
.btime.is-on,.btime.is-on:hover{background:var(--ink);color:var(--milk);box-shadow:inset 0 0 0 1px var(--ink)}
.btime[disabled]{
opacity:.35;text-decoration:line-through;cursor:not-allowed;
box-shadow:inset 0 0 0 1px var(--line-soft);background:none;
}
.bk__hint{margin-top:16px;font-size:var(--t-label);color:var(--ink-45);line-height:1.6}
.bk__foot{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
gap:clamp(12px,1.6vw,20px);
padding:14px clamp(20px,2.4vw,30px) calc(14px + env(safe-area-inset-bottom));
border-top:1px solid var(--line-soft);background:var(--milk);
}
/* Підсумок переносить рядок, а не ховає слова за трьома крапками. */
.bk__sum{display:grid;gap:3px;min-width:0;font-size:var(--t-label);color:var(--ink-45);line-height:1.5}
.bk__sum b{display:block;font-weight:500;font-size:var(--t-meta);color:var(--ink);
white-space:normal;overflow-wrap:anywhere}
/* обидві кнопки однієї висоти; довгий напис розтягує кнопку вшир,
а не вгору, і не з'їдає місце під підсумком */
.bk__nav{display:flex;align-items:stretch;justify-content:flex-end;gap:10px;flex:none}
.bk__nav .btn{height:56px}
.bk__nav [data-bk-back]{width:170px;padding:0}
.bk__nav [data-bk-next]{min-width:210px;padding:0 26px;white-space:nowrap}
.bk__nav [data-bk-next]:disabled{
background:var(--stone);color:var(--ink-45);cursor:not-allowed;
}
.bk__nav [data-bk-next]:disabled::after{display:none}
/* Галочка, заголовок і текст читаються як одна група, далі — підсумок
на всю ширину й кнопка в ту саму ширину. */
/* ---------- крок контактних даних ----------
Та сама мова, що й решта форми: тепле тло, волосина контуру,
фокус у карамелі. Поля високі й зручні для пальця. */
.bk__form{display:grid;gap:clamp(14px,1.6vw,20px)}
.bk__lead{font-size:var(--t-meta);color:var(--ink-70);margin-top:-6px}
.bfield{display:grid;gap:7px}
.bfield__l{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-45)}
.bfield__i{
height:58px;width:100%;padding:0 18px;
border:0;border-radius:var(--radius-ctl);
background:var(--milk);box-shadow:inset 0 0 0 1px var(--line-soft);
font-family:inherit;font-size:var(--t-body);color:var(--ink);
transition:box-shadow .25s var(--ease);
}
.bfield__i::placeholder{color:var(--ink-25)}
.bfield__i:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.bfield__i[aria-invalid="true"]{box-shadow:inset 0 0 0 1px #B4553F}
.bfield__e{font-size:var(--t-label);color:#B4553F;line-height:1.5}
/* власний чекбокс: справжній input лишається на місці для клавіатури
й скрінрідерів, а малюється квадратик поруч */
.bcheck{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;cursor:pointer}
.bcheck input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bcheck__box{
width:22px;height:22px;flex:none;border-radius:7px;margin-top:1px;
display:grid;place-items:center;
background:var(--milk);box-shadow:inset 0 0 0 1px var(--line);
color:transparent;
transition:background .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease);
}
.bcheck__box svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.bcheck input:checked + .bcheck__box{background:var(--accent);box-shadow:none;color:var(--milk)}
.bcheck input:focus-visible + .bcheck__box{box-shadow:inset 0 0 0 2px var(--accent)}
.bcheck__t{font-size:var(--t-meta);color:var(--ink-70);line-height:1.5}
.bcheck__t a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bcheck__t a:hover{color:var(--accent)}
.bk__done{display:grid;justify-items:stretch;gap:0;padding-block:0 clamp(4px,1vw,10px)}
.bk__tick{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
justify-self:start;margin-bottom:12px;background:var(--accent);color:var(--milk)}
.bk__tick svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.bk__done .bk__h{margin-bottom:5px}
/* ширину більше не обмежуємо: опис використовує всю ширину контенту
модалки, інакше «SMS.» зривається в окремий рядок */
.bk__done-p{
color:var(--ink-70);font-size:var(--t-meta);max-width:none;text-wrap:pretty;
margin-bottom:clamp(16px,2vw,24px);
}
.bk__recap{display:grid;gap:0;width:100%;margin-bottom:clamp(16px,2vw,24px);
border-top:1px solid var(--line-soft)}
.bk__recap div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding:12px 0;border-bottom:1px solid var(--line-soft)}
.bk__recap dt{font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-45)}
.bk__recap dd{margin:0;font-size:var(--t-meta);font-weight:500;text-align:right}
body.bk-open{overflow:hidden}
/* ============================================================
АДАПТИВ
============================================================ */
@media (max-width:1280px){
.hero__text{grid-column:1/9}
}
@media (max-width:1100px){
.salon .bar__tel{display:none}
.salon .bar__in{grid-template-columns:1fr auto}
.salon .bar__cta{height:40px;padding:0 18px}
.revs__rail{--n:2}
/* менший екран — дії переходять під заголовок цілим рядом */
/* планшет: панель керування їде під стрічку карток і притискається
праворуч — заголовок лишається сам на своєму рядку */
/* align-items:center з десктопної сітки в колонці діє вже на
горизонталь — стрічка переставала тягнутися на ширину контейнера
й ставала завширшки з усі свої картки. Тут вісь інша, тож і
вирівнювання повертаємо до stretch. */
.revs__wrap{display:flex;flex-direction:column;row-gap:0;align-items:stretch}
.salon .revs__wrap > .sec-head{order:1;margin-bottom:var(--head-gap);flex-wrap:wrap}
.revs .sec-head__t{flex:1 1 100%}
.revs__wrap > .revs__rail{order:2}
.revs__side{
order:3;width:auto;align-self:flex-end;justify-content:flex-end;
/* той самий крок, що й над стрілками майстрів */
margin-top:clamp(20px,2.2vw,24px);
/* під стрічкою панель стоїть власним рядком — вирівнювати нема з чим */
top:0;
}
/* картка консультації йде під прайс і більше не прилипає */
.price__in{grid-template-columns:1fr}
.price__help{position:static;max-width:none;justify-self:stretch}
/* на всю ширину кадр 4/3 дав би ~700px самої лише фотографії —
тут вона стає широкою смугою, як і на телефоні */
.price__help-fig img{aspect-ratio:2.6/1}
.faq__in{grid-template-columns:1fr}
.faq__side{position:static}
/* планшет: дані ліворуч, карта велика праворуч, картка — широким рядком під ними */
.cont__in{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
.cont__list{grid-column:1;grid-row:1}
.cont__contact{grid-column:1;grid-row:2}
.cont__map{grid-column:2;grid-row:1/3;min-height:clamp(320px,38vw,440px)}
.cont__door{grid-column:1/-1;grid-row:3;
grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:auto;
align-items:center;gap:clamp(18px,2.4vw,32px)}
.cont__door img{height:auto;min-height:0;aspect-ratio:4/3}
.foot__top{grid-template-columns:1fr}
}
@media (max-width:980px){
.hero{min-height:auto;padding-bottom:clamp(76px,12vw,120px)}
.hero__text{grid-column:1/13}
.quick__form{grid-template-columns:repeat(2,minmax(0,1fr))}
.qf+.qf{border-left:0;padding-left:0}
.qf:nth-child(2n){padding-left:clamp(14px,2.4vw,22px);border-left:1px solid var(--line-soft)}
.qf:nth-child(n+3){border-top:1px solid var(--line-soft)}
.quick__go{grid-column:1/-1;margin-left:0;margin-top:18px;width:100%}
.pop__grid{grid-template-columns:repeat(2,1fr)}
/* планшет і нижче: кнопки на всю доступну ширину */
.pop__more a,.price__all{width:100%}
/* у дві колонки опис переноситься за будь-якого трекінгу —
тож він повертається до звичайного, щоб текст не був щільнішим
за решту дрібного набору сторінки */
.svc__d{letter-spacing:inherit}
.ba__case{grid-template-columns:1fr;align-items:start}
.space__in{grid-template-columns:1fr}
.space__text{margin-bottom:clamp(2px,1.4vw,12px)}
.space__cta{gap:16px}
.gift__in{grid-template-columns:1fr;gap:clamp(30px,5vw,48px)}
.gift__card{justify-items:start}
/* Нижче 980px три зони в один рядок уже не вміщаються: проміжок між
юридичними сторінками й підписом падає до нуля, а далі підпис
наповзає на них. Тож рядок розкладається на два: копірайт і підпис
по краях, сторінки — окремим рядком, так само по центру. */
.foot__bot{grid-template-columns:1fr auto;gap:18px clamp(16px,2.4vw,28px)}
.foot__cr{grid-column:1;grid-row:1}
.foot__dev{grid-column:2;grid-row:1}
.foot__docs{grid-column:1/-1;grid-row:2}
}
/* На планшеті шапка секції контактів стоїть ближче до вмісту;
межа 1023 замість 980, щоб смуга збіглася з планшетною. */
@media (max-width:1023px){
.cont__wrap{row-gap:44px}
}
@media (max-width:980px){
.mcta{display:block}
.salon main{padding-bottom:0}
body.salon{padding-bottom:clamp(78px,14vw,96px)}
/* мобільний порядок: заголовок → адреса й години → карта → маршрут →
«Як нас знайти» → телефон і соцмережі → «Записатися».
Кнопка маршруту виходить з-під карти у звичайний потік, тож іде
одразу за нею, а секційний CTA стає останнім рядком. */
.cont__wrap{display:flex;flex-direction:column;align-items:stretch;gap:44px}
.cont__head{order:1}
.cont__in{order:2;display:flex;flex-direction:column;gap:clamp(26px,5vw,36px)}
.cont__cta{order:3;width:100%}
.cont__list{order:1}
.cont__map{order:2;display:grid;gap:12px;min-height:0;
background:none;border-radius:0;overflow:visible}
.map{aspect-ratio:4/3;border-radius:var(--radius-md);background:var(--ivory)}
/* position:relative, а не static. У .btn заливка наведення — це
::after з inset:0 і translateY(101%); у static-кнопки він рахує
ці 101% від найближчого позиціонованого предка, тобто від усієї
.cont__map (323px), і на наведенні глиняна пляма накривала і карту,
і фото, і підпис картки. Саме це читалося як «обірваний коричневий
фон». relative лишає кнопку в потоці й повертає заливку в її межі. */
.cont__route{position:relative;left:auto;bottom:auto;width:100%}
/* Картка «Як нас знайти» стає справжньою карткою: світла підкладка,
волосінь по контуру, фото й текст усередині одного об'єкта. Доти
це були просто знімок і підпис під ним, нічим не зв'язані. */
.cont__door{
order:3;grid-template-columns:1fr;grid-template-rows:auto auto;
gap:14px;padding:12px 12px 16px;
background:var(--milk);border-radius:20px;
box-shadow:inset 0 0 0 1px var(--line-soft);
}
.cont__door img{height:auto;min-height:0;aspect-ratio:16/10;border-radius:10px}
/* текст картки лишається в її полях */
.cont__door figcaption{padding-inline:4px}
.cont__contact{order:4;align-self:stretch}
}
@media (max-width:860px){
/* одна картка в ряд, split зберігається */
.mos{grid-template-columns:1fr}
}
@media (max-width:720px){
.hero{padding-top:calc(var(--bar-h) + 56px)}
.hero__bg img{object-position:62% 50%}
.hero__scrim{
background:
linear-gradient(180deg,rgba(20,18,15,.5) 0%,rgba(20,18,15,.1) 22%,rgba(20,18,15,0) 40%),
linear-gradient(0deg,rgba(20,18,15,.92) 10%,rgba(20,18,15,.66) 44%,rgba(20,18,15,.14) 78%);
}
.salon .bar__cta{display:none}
.hero__act{display:grid;grid-auto-flow:row;width:100%;gap:10px}
.hero__act .btn{width:100%}
.hero__meta{display:none}
.quick{--overlap:-48px}
/* на телефоні картка майже на всю ширину екрана, тож та сама тінь
розходилася б до самих країв: тримаємо її ближче до картки й
слабшою */
.quick__panel{
box-shadow:
0 10px 24px rgba(45,35,28,.04),
0 20px 44px rgba(45,35,28,.028);
}
/* Нижня волосінь форми на десктопі проходить під усіма полями й
кнопкою як спільна межа блоку. На телефоні, де кнопка стоїть
окремим рядком, та сама лінія читається як роздільник між нею
і текстом підтвердження — тож тут її немає. */
/* Заголовок форми тримається в один рядок.
Ширина, доступна рядку, тут завжди дорівнює ширині екрана мінус
78px (поля .wrap плюс поля панелі), а сам рядок при letter-spacing
-.02em просить 13.44 кегля завширшки. Звідси й вираз: 7.29vw мінус
5.69px — це та сама ширина з запасом близько 2%.
min() лишає оригінальний кегль там, де рядок і так уміщається
(приблизно від 430px і вище), тож заголовок меншає рівно настільки,
наскільки бракує місця, і ніде більше. nowrap не ставимо навмисно:
нижче 320px рядок уже не вміщається за жодного розумного кегля,
і тоді перенос — правильна поведінка, а не горизонтальний скрол.
Родина, вага й колір — ті самі.
Специфічність 0,3,0: спільний типографічний шар наприкінці файлу
перебив би правило з однією назвою класу. */
.salon .quick__panel .quick__t{
font-size:min(clamp(1.59rem,.88vw + 1.38rem,2.2rem),max(17.6px,7.29vw - 5.69px));
letter-spacing:-.02em;
}
.quick__form{grid-template-columns:1fr;border-bottom:0}
/* 22px над кнопкою і стільки ж під нею: рядок підтвердження стоїть
на тій самій відстані, що й кнопка від останнього поля */
.quick__go{margin-top:22px}
.quick__note{margin-top:22px}
.qf,.qf:nth-child(2n){padding-left:0;border-left:0}
.qf+.qf{border-top:1px solid var(--line-soft)}
.pop__grid{grid-template-columns:1fr;gap:clamp(26px,7vw,40px)}
.pop__more{margin-top:clamp(24px,6.6vw,32px)}
/* на телефоні колонки прайсу стають одна під одною без проміжку,
тож повітря під кнопкою задає вона сама — інакше вона впритул
торкалася б картки консультації під собою */
.price__all{width:100%;margin-bottom:clamp(28px,7vw,40px)}
/* ---------- «Чотири причини» на телефоні ----------
Замір показав, у чому саме була розбалансованість: заголовок секції
26.9px стояв усього на 3.7px вище за заголовки пунктів (23.2px),
тобто двох рівнів не читалося зовсім; опис у 14px лишався
найдрібнішим у блоці, хоча саме його й читають; а малюнок у 112px
займав третину ширини колонки. Тож кроки розведено: 32 / 26 / 18.
Заголовок секції тут не меншає, а більшає — інакше після того, як
заголовки пунктів пішли у просимі 26–28px, він опинився б дрібнішим
за них і ієрархія перевернулася б. */
/* Ритм пункту задають його власні поля, а не проміжок сітки:
row-gap:0 — і кожна волосінь дістає однакове повітря згори й
знизу від сусідніх полів. Замір ink-у, а не боксів: 21px зверху
дають 27.7px до самого малюнка (коробка іконки має ще ~16px
власної порожнечі), 24px знизу дають ті самі ~28px від тексту. */
.why__grid{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:26px}
.salon .why .sec-title{font-size:2rem;line-height:1.14}
/* −18%: малюнок лишається знаком пункту, а не його головною подією.
Відʼємні поля зменшено в тій самій пропорції, бо разом із коробкою
стиснулася й порожнеча всередині неї. Сам малюнок, стиль і товщина
штриха не змінені — тільки розмір коробки. */
.why__ico{width:92px;height:92px;margin-top:-9px;margin-bottom:-6px}
/* Ті самі значення, що в картці майстра, узяті з її ж правил, а не
підібрані: заголовок пункту = ім'я (.mst__n — той самий ramp,
вага 500, інтерліньяж 1.22, трекінг -.016em), опис = спеціалізація
(.mst__r — --t-meta, 1.45, --ink-70). Крок між ними теж той самий
10px, що й ім'я → роль. Селектор із .why обов'язковий: спільні
правила карткових заголовків і описів лежать нижче у файлі й
інакше перебили б і інтерліньяж, і кегль. */
.salon .why .why__t{
font-size:clamp(1.4rem,2vw,1.95rem);
line-height:1.22;letter-spacing:-.016em;
/* 18px поля плюс ~16px власної порожнечі коробки іконки дають
28px від малюнка до заголовка — стільки ж, скільки над малюнком */
margin-top:18px;
}
.salon .why .why__d{
font-size:var(--t-meta);line-height:1.45;margin-top:12px;
}
.why__i{padding:21px 0 24px}
/* Рівно одна картка в кадрі — як у стрічці майстрів.
Доти наступна визирала краєм на 25px, щоб показати: є куди
гортати. На ділі ця смужка різала фотографію й текст посеред
слова, і читалася вона не як підказка, а як помилка верстки.
Підказку й так дають стрілки під стрічкою — ті самі, що в
майстрів, де картка теж рівно одна. */
.revs__rail{--n:1;--g:14px}
/* на телефоні ряд дій перелітає під заголовок і розтягується на ширину */
.revs .sec-head{flex-wrap:wrap}
.revs .sec-head__t{flex:1 1 100%}
/* телефон: у рядок усе ще вміщається, але без запасу — тож панель
бере всю ширину, Google ліворуч, круглі кнопки праворуч */
.revs__side{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:10px}
.revs__side .rail-nav{margin-left:0;gap:10px}
.revs__g{padding:0 15px;gap:8px}
/* ---- телефон: рядок стає карткою ----
Без плашки другий рядок ні до чого не кріпився: тривалість
починалася від лівого краю екрана, назва — з відступом за колом,
а стрілка висіла сама по собі праворуч. Пункт читався як два
окремі рядки замість однієї послуги. Картка збирає їх в один
об'єкт, ставить увесь текст на спільну ліву вісь і дає стрілці
місце, якому вона належить. */
.plist{display:grid;gap:12px}
.prow{border-bottom:0}
.prow__b{
/* Два рядки: назва згори на всю ширину, під нею плашка часу
ліворуч, плашка ціни та кругла кнопка праворуч. Нумерація на
телефоні не виводиться зовсім. */
grid-template-columns:auto minmax(0,1fr) auto;
row-gap:16px;column-gap:10px;
padding:18px;
background:var(--prow-plate);
border-radius:var(--radius-lg);
box-shadow:inset 0 0 0 1px var(--price-line);
transition:box-shadow var(--prow-t) var(--ease);
}
/* плашка й бічна риска були станом наведення для рядка — у картки
цю роботу робить вона сама, а риска ще й стирчала б за її край */
.prow__b::before{display:none}
/* натиск: картка набирає карамельний контур; коло та стрілка
міняють колір за спільними правилами :active вище */
.prow__b:active,.prow__b:focus-visible{box-shadow:inset 0 0 0 1px rgba(168,111,72,.5)}
/* номер послуги: 01, 02… нічого не додавали, крім ваги в картці */
.prow__i{display:none}
/* натиск: коло темнішає, картка бере карамельний контур */
.prow__b:active .prow__go,
.prow__b:focus-visible .prow__go{background:#8A5C3B;box-shadow:none}
/* категорії гортаються вбік, а не переносяться на другий рядок */
.salon .price__tabs{
flex-wrap:nowrap;overflow-x:auto;
gap:0 22px;
/* overflow-x:auto робить і overflow-y обчислено auto, тож риска
активної категорії, що лежала на 1px нижче рядка, зрізалася
краєм контейнера. Поле знизу повертає її в кадр.
Поле праворуч лишає останній назві просвіт у кінці прокрутки,
а не зріз упритул до краю. */
padding:0 16px 1px 0;
margin-bottom:clamp(20px,3vw,28px);
scroll-padding-inline-end:16px;
}
.salon .price__tabs .tab{font-size:1rem;padding-bottom:12px}
.salon .price__tabs .tab::after{bottom:0}
/* На телефоні кадр стає квадратним і головним акцентом картки:
2/1 на всю ширину давав вузьку смугу, у якій обличчя губилося.
Фокус трохи вище центру, щоб у квадраті не зрізало обличчя. */
.price__help-fig img{aspect-ratio:1/1;object-position:62% 28%}
/* Заголовок секції на телефоні: спільний ramp давав тут 33.6px —
менше, ніж у сусідніх секціях, і прайс починався тихіше за решту
сторінки. Родина та накреслення ті самі (Playfair, em курсивом). */
.salon .price .sec-title{font-size:2.5rem}
/* Два рядки й один правий стовпчик: назва згори на всю ширину,
під нею тривалість ліворуч і ціна праворуч, стрілка тримає обидва
рядки. Так назва читається першою, ціна знаходиться поглядом по
правому краю, а тривалість лишається службовим рядком під назвою
й не сперечається з ціною — вона дрібніша, капсом і приглушена. */
/* Один кегль і одна вага в усіх картках, незалежно від довжини
назви: 20px/600 при інтерліньяжі 1.3. Саме назва — перший рівень
ієрархії картки, тож вона важча за ціну на вагу, а не на кегль. */
.prow__n{
grid-row:1;grid-column:1/-1;padding-right:0;
font-size:1.25rem;font-weight:600;line-height:1.3;
}
/* Тривалість — просто годинник і текст, без власної плашки: у рядку
з пілюлею ціни дві плашки поспіль читалися як два однакові об'єкти,
хоча ціна важливіша. Тепер плашка в рядку одна. */
.prow__d{
grid-row:2;grid-column:1;justify-self:start;align-self:center;
display:inline-flex;align-items:center;gap:7px;
padding:0;background:none;border-radius:0;
color:var(--ink-70);
font-size:.875rem;font-weight:400;letter-spacing:.06em;line-height:1;
}
.prow__d svg{
display:block;width:14px;height:14px;flex:none;
fill:none;stroke:currentColor;stroke-width:1.3;
stroke-linecap:round;stroke-linejoin:round;
}
/* Ціна в м'якій персиково-бежевій пілюлі: помітна, але світліша за
саму кнопку, тож головною дією лишається коло зі стрілкою. */
.prow__p{
grid-row:2;grid-column:2;justify-self:end;margin-left:0;
padding:6px 14px;border-radius:999px;
background:rgba(168,111,72,.09);
font-size:1.25rem;font-weight:600;line-height:1.2;
}
/* «від» стоїть на спільній базовій лінії із сумою (плашка —
inline-flex із align-items:baseline), але лишається службовим:
14px і звичайна вага проти 20px/600 самої суми. */
.prow__p i{font-size:.875rem;font-weight:400}
/* Коло — єдина дія картки, тож на телефоні воно одразу залите
глиняним, зі світлою стрілкою. Обидві стрілки й механіка їхньої
зміни лишаються ті самі. */
.prow__go{
grid-row:2;grid-column:3;align-self:center;
--go-size:44px;
background:var(--prow-go-fill);color:#FFF;
box-shadow:none;
}
.ba__handle svg{width:34px;height:34px;padding:9px}
.gcard{transform:none;aspect-ratio:7/5}
.gift__card:hover .gcard{transform:translateY(-3px)}
.foot__cols{grid-template-columns:1fr 1fr;gap:28px 20px}
/* телефон: три зони стають трьома рядками по лівому краю —
центрований текст у вузькій колонці читається гірше */
.foot__bot{grid-template-columns:minmax(0,1fr);gap:16px}
/* планшетна розкладка на два рядки тут скасовується — інакше
grid-column:2 у підпису дорисував би другу колонку */
.foot__cr,.foot__docs,.foot__dev{grid-column:auto;grid-row:auto}
.foot__docs{justify-content:flex-start;gap:8px 18px}
.foot__dev{justify-self:start;text-align:left}
.bk__panel{
width:100%;max-width:none;max-height:92vh;align-self:end;
border-radius:var(--radius-xl) var(--radius-xl) 0 0;transform:translateY(40px);
}
.bk{place-items:end stretch}
.bk__days{grid-template-columns:repeat(3,1fr);gap:10px;justify-content:stretch}
.bday{height:98px}
.bk__times{grid-template-columns:repeat(3,1fr);gap:10px}
/* футер стає вертикальним: підсумок, під ним кнопки */
.bk__foot{grid-template-columns:1fr;align-items:stretch;gap:12px}
/* «Назад» лишається вузьким, «Далі» забирає решту рядка —
і сам по собі, коли «Назад» ще прихований */
.bk__nav{display:flex;gap:8px}
.bk__nav [data-bk-back]{flex:0 0 auto;width:120px}
.bk__nav [data-bk-next]{min-width:0}
.bk__nav [data-bk-next]{flex:1}
.mcta__txt span{display:none}
}
@media (max-width:620px){
.ba__go{width:100%;justify-content:center}
}
/* Кадр порівняння на телефоні — квадрат. 4/5 витягував його так, що на
390px він з'їдав майже дві третини екрана, а ручка опинялася нижче
зручної зони великого пальця. Квадрат тримає обидва знімки цілими
(object-fit:cover, без полів) і лишає ручку в середині кадру.
767px — межа: планшетні 16/11 від 768px лишаються незмінними. */
@media (max-width:767px){
.ba__view{aspect-ratio:1/1}
}
@media (max-width:440px){
.mcta__txt{display:none}
.mcta__btn{width:100%;min-width:0}
.gift__amounts .gchip{height:42px;padding:0 16px}
}
/* на телефоні шапка стоїть ще ближче до вмісту */
@media (max-width:767px){
.cont__wrap{gap:30px}
}
/* Межа запасної розкладки — 374px, за виміром, а не на око. Найтісніша
пара в нижньому рядку — «ВІД 180 ХВ» і «від 3 900 ₴»: на 375px між
ними лишається 12.5px, на 365px — 2.5px, а на 360px вони вже
налазять одна на одну на 2.5px. Тож нижче 375px ціна з кнопкою
беруть власний рядок праворуч: склад картки той самий (назва →
тривалість → ціна → кнопка), лише в три рядки, і перемикає його
ширина екрана, а не конкретна послуга. */
@media (max-width:374px){
.prow__b{grid-template-columns:minmax(0,1fr) auto;row-gap:12px}
.prow__n{grid-row:1;grid-column:1/-1}
.prow__d{grid-row:2;grid-column:1/-1;justify-self:start}
.prow__p{grid-row:3;grid-column:1;justify-self:end}
.prow__go{grid-row:3;grid-column:2}
}
@media (max-width:520px){
/* ширини на split уже не вистачає: фото зверху, текст знизу */
.mos__c{grid-template-columns:1fr;grid-template-rows:auto auto;height:auto}
.mos__c--flip .mos__fig{order:0}
.mos__fig img{aspect-ratio:16/10;height:auto}
}
@media (prefers-reduced-motion:reduce){
.mos__fig img,.svc__fig img,.space__f img,.mst__fig img,.gcard{transition:none}
.bk__panel{transition:opacity .01ms}
/* іконки лишаються у своєму завершеному стані, без руху */
.why__ico *,.why__i::before{
animation:none!important;transition:none!important;transform:none!important;
opacity:1!important;
}
}
/* ============================================================
ТИПОГРАФІЧНИЙ ШАР
Inter несе інтерфейс, текст і цифри, Manrope — заголовки.
Ієрархію тримають кегль, інтерліньяж і контраст ваг, а не
одна тонка лінія: великі заголовки легкі, картки й цифри —
середні, кнопки й навігація — щільні.
Усі правила йдуть від .salon, тож решта сайту не зачеплена.
============================================================ */
/* опис живе у grid-групі з власним gap — власний margin додавав би
той самий відступ удруге */
.salon .sec-sub{margin-top:0}
/* ---------- інтерліньяж описів ----------
Довгі описи дихають вільніше, короткі рядки карток лишаються
щільнішими: однакові 1.6 там виглядали б розрідженими. */
.salon .sec-sub,
.salon .space__p,
.salon .gift__p,
.salon .acc__body p,
.salon .cont__card p{line-height:1.58}
.salon .why__d,
.salon .mos__d,
.salon .svc__d,
.salon .mp__way{line-height:1.5}
/* ============================================================
ВЕРТИКАЛЬНИЙ РИТМ
============================================================
Весь крок між секціями живе в одному токені --gap усередині .salon,
тож ритм міняється лише на цій сторінці й жодна інша сторінка
проєкту його не бачить. Самі правила — нижче, разом із токеном. */
/* ============================================================
ПОВЕРХНІ
============================================================
Одне світле тло на всю сторінку замість кількох близьких бежевих
відтінків: контраст дають темні секції й тепло-білі картки,
а не півтонові смуги, які око ледь розрізняє. */
.salon{background:var(--bone)}
.salon main{background:var(--bone)}
/* «Ціни» раніше були окремою айворі-смугою — тепер це той самий канвас,
що й решта світлої сторінки. «Простору» тут немає: він темний. */
.salon .price{background:var(--bone)}
/* Стрічка майстрів — найсвітліша секція сторінки: чистий білий під
тепло-білими картками. Від сусідніх секцій її відділяє повітря, а не лінія. */
.salon .team{background:#FFF}
/* ---------- вертикальний ритм ----------
Одна величина на весь сайт: --gap — це те, що око читає як відстань
між сусідніми секціями. 60px на телефоні, 80 на планшеті, 110 на
1440 і 120 як стеля.
Далі діє рівно два правила:
• обидві сусідки на тому самому тоні — кожна платить половину,
разом виходить один повний крок;
• між ними зміна кольору — світла секція платить повний крок, бо
падінг тонованої смуги лежить усередині її кольору й проміжком
не читається; сама смуга теж бере повний крок як внутрішнє повітря.
Два токени замість п'яти й жодного числа на місцях. */
.salon{
--gap:clamp(56px,4.8vw + 41px,120px);
--gap-half:calc(var(--gap) / 2);
/* заголовок → контент */
--head-gap:clamp(32px,4vw,58px);
/* Бічні відступи контейнера. Той самий --gutter, що й у базових
токенах, але на десктопі ширший: 110px на 1440 і стеля 120. Нижче
~616px значення те саме, що було (18px), тож телефон не змінився.
Міняємо саме токен — сітка лишається спільною для всіх секцій,
інакше одна з них поїхала б відносно сусідів. */
--gutter:clamp(18px,11.2vw - 51px,120px);
}
/* —— межа зі зміною тону: світла секція платить повний крок ——
Тоновані смуги сторінки — «Простір», «Результат», «Сертифікат»,
фінальне CTA й футер (темні) та «Майстри» (чистий білий). */
.salon .pop{padding-bottom:var(--gap)} /* нижче — темний «Простір» */
.salon .why{padding-block:var(--gap)} /* вище темний «Простір», нижче біла стрічка */
.salon .team{padding-block:var(--gap)} /* сама біла смуга: повітря всередині тону */
.salon .price{padding-block:var(--gap) var(--gap)} /* темне з обох боків: «До / після» і «Відгуки» */
.salon .faq{padding-block:var(--gap)} /* між двома темними смугами */
.salon .cont{padding-block:var(--gap)} /* вище сертифікат, нижче футер */
/* —— темні смуги: їхній падінг — це внутрішнє повітря, не проміжок —— */
.salon .space,
.salon .ba,
.salon .gift{padding-block:var(--gap)}
/* —— дві світлі сусідки поспіль: кожна платить половину —— */
.salon .cats{padding-bottom:var(--gap-half)}
.salon .pop{padding-top:var(--gap-half)}
/* Порядок смуг: ціни → відгуки → питання → сертифікат → контакти.
Тонованих сусідів поряд більше немає, тож кожна межа — звичайна зміна
кольору, і обидві сусідки платять повний крок. */
.salon .revs{padding-block:var(--gap)}
/* Перша секція після hero: картка швидкого запису насунута на hero
й власних падінгів не має, тож увесь проміжок до «Послуг» несе
сама секція — повний крок, а не половина. */
.salon .cats{padding-top:var(--gap)}
/* один відступ від заголовка до контенту всюди: великий заголовок,
короткий опис — і одразу візуальний блок */
.salon .sec-head{margin-bottom:var(--head-gap)}
/* ---------- ролі сімейств ----------
Кожна роль бере свій токен, а не назву шрифту — пару міняємо
в одному місці, у блоці токенів вгорі файлу. */
.salon .hero__t{font-family:var(--f-display)}
.salon .sec-title,
.salon .space__t,
.salon .gift__t,
.salon .quick__t,
.salon .price__help-t,
.salon .bk__h{font-family:var(--f-section)}
.salon .mos__t,
.salon .svc__t,
.salon .why__t,
.salon .mst__n,
.salon .ba__t,
.salon .prow__n,
.salon .mp__n{font-family:var(--f-card)}
.salon .label,
.salon .tab,
.salon .prow__d,
.salon .btn,
.salon .link{font-family:var(--f-button)}
/* ---------- великі заголовки ----------
Серифу потрібен зовсім інший трекінг, ніж гротеску: ті самі −.04em
стиснули б Playfair до нечитанності. І висота рядка трохи більша —
у нього довші виносні елементи. */
.salon .hero__t{font-weight:400;letter-spacing:-.018em}
/* три рядки героя стоять щільніше за решту великих заголовків */
.salon .hero__t{line-height:.99}
.salon .sec-title,
.salon .space__t,
.salon .gift__t{font-weight:400;line-height:1.12;letter-spacing:-.014em}
.salon .quick__t,
.salon .price__help-t,
.salon .bk__h{font-weight:500;line-height:1.18;letter-spacing:-.012em}
/* ---------- заголовки карток і рядків ---------- */
.salon .mos__t,
.salon .svc__t,
.salon .why__t,
.salon .mst__n,
.salon .ba__t,
.salon .prow__n{font-weight:500;line-height:1.22;letter-spacing:-.016em}
/* ---------- акцент усередині заголовка ----------
Manrope не має курсиву, а синтетичний нахил виглядає дешево.
Акцентну фразу несе справжній курсив Inter — легша вага, щільніший
трекінг і акцентний колір, тож вона читається як інша інтонація,
а не як інший розмір. Курсивом іде тільки , ніколи весь рядок. */
.salon h1 em,
.salon h2 em,
.salon h3 em{
font-family:var(--f-accent);
font-style:italic;
/* тільки Regular Italic: Bold Italic зробив би акцент важким */
font-weight:400;
/* обидві частини — один шрифт із спільними метриками, тож компенсувати
кегль більше нічого: курсив тієї самої висоти відрізняється лише
нахилом і пластикою, а не розміром */
font-size:1em;
letter-spacing:-.012em;
color:var(--accent);
}
/* на темних смугах глина темніє — беремо світліший відтінок */
.salon .hero__t em,
.salon .gift__t em{color:var(--accent-soft)}
/* у великому заголовку простору сериф може дозволити собі більше місця —
кегль, не вага */
.salon .space__t{color:var(--on-dark)}
.salon .space__t em{font-size:.99em;color:var(--accent-soft)}
/* якщо курсив раптом не доїхав, краще прямий, ніж підроблений нахил */
.salon{font-synthesis-style:none}
/* ---------- відгуки ---------- */
.salon .rev__q{
font-family:var(--display);font-style:normal;font-weight:400;
line-height:1.5;letter-spacing:-.014em;
}
/* ---------- логотип ---------- */
.salon .bar__mark,
.salon .foot__mark,
.salon .gcard__mark{font-family:var(--display);font-weight:600;letter-spacing:.14em}
.salon .bar__mark sup,
.salon .foot__mark sup,
.salon .gcard__mark sup{letter-spacing:.04em}
/* ---------- цифри ---------- */
.salon .gcard__v,
.salon .bday b{font-weight:500;letter-spacing:-.02em}
/* ---------- інтерфейс ---------- */
/* навігація йде тією самою мовою, що й кнопки: звичайний регістр і
вузький трекінг. Капітель на 11px тримався за рахунок висоти версалів,
тож у звичайному регістрі рядок потребує трохи більшого кегля, інакше
меню сідає поруч із логотипом і кнопкою. */
.salon .nav a{
font-weight:500;text-transform:none;
font-size:var(--t-nav);letter-spacing:.01em;
opacity:1;color:var(--bar-fg-soft);
transition:color .28s var(--ease),transform .28s var(--ease);
}
/* Наведення: теплий тон смуги й один піксель угору. Доти пункт просто
йшов до повної сили кольору панелі — рух був, але не було тепла,
якого просить решта сторінки. */
.salon .nav a:hover{color:var(--bar-accent)}
/* Активний розділ лишається найконтрастнішим: повна сила кольору смуги,
без акценту — інакше він сперечався б із наведенням. */
.salon .nav a.is-active{color:var(--bar-fg)}
/* Кнопки й текстові CTA говорять звичайним регістром: капс із широкою
розрядкою звучить рекламно, а не editorial. Дрібні лейбли й категорії
(.label, .tab, навігація, «ДО / ПІСЛЯ») лишаються капсом — там це частина
ієрархії. Розміри, радіуси, кольори й анімації — без змін. */
.salon .btn,
.salon .link{text-transform:none;letter-spacing:.01em}
.salon .btn{font-weight:600}
.salon .link,
.salon .label{font-weight:500}
.salon .svc__price,
.salon .bopt__n b,
.salon .mcta__txt b{font-weight:500}
/* ціна в сервіс-меню — найпомітніше після назви, тож на півщаблю важча */
.salon .prow__p{font-weight:600}
/* кнопка консультації легша за головні CTA сторінки */
.salon .price__help-go{font-weight:500}
/* назва послуги дихає трохи вільніше за решту заголовків рядків */
.salon .prow__n{line-height:1.25}
.salon .hero__sub,
.salon .sec-sub,
.salon .space__p,
.salon .gift__p{font-weight:400}
/* ============================================================
МОБІЛЬНЕ МЕНЮ
Шапка сайту лишається поверх панелі й служить їй заголовком:
логотип ліворуч, бурґер праворуч стає хрестиком. Усередині —
навігація, головна дія і тихий поверх із контактами.
============================================================ */
.salon .mmenu__scroll{
padding-top:calc(var(--bar-h) + clamp(26px,7vw,40px));
padding-bottom:calc(clamp(26px,7vw,36px) + env(safe-area-inset-bottom));
}
.salon .mmenu__nav a{
font-family:var(--display);font-weight:400;letter-spacing:-.025em;
/* рядок цілком клікабельний, тож і повітря в ньому — частина цілі */
align-items:center;padding:clamp(19px,5.4vw,26px) 0;
border-bottom-color:var(--line-soft);
}
.salon .mmenu__nav a:first-child{border-top:1px solid var(--line-soft)}
/* номер — службова мітка праворуч, а не друга половина заголовка */
.salon .mmenu__n{
font-family:var(--ui);font-size:var(--t-label);font-weight:500;
letter-spacing:var(--ls-label);color:var(--ink-45);
font-variant-numeric:tabular-nums;
transition:color .25s var(--ease);
}
.salon .mmenu__l{transition:transform .28s var(--slow),color .28s var(--ease)}
@media (hover:hover){
.salon .mmenu__nav a:hover .mmenu__l{transform:translateX(6px);color:var(--accent-fill)}
.salon .mmenu__nav a:hover .mmenu__n{color:var(--accent-fill)}
}
.salon .mmenu__nav a:active .mmenu__l{transform:translateX(6px);color:var(--accent-fill)}
.salon .mmenu__nav a:active .mmenu__n{color:var(--accent-fill)}
/* пункти заходять по черзі, а не всі разом */
.salon .mmenu.open .mmenu__nav a:nth-child(1){transition-delay:.06s}
.salon .mmenu.open .mmenu__nav a:nth-child(2){transition-delay:.12s}
.salon .mmenu.open .mmenu__nav a:nth-child(3){transition-delay:.18s}
.salon .mmenu.open .mmenu__nav a:nth-child(4){transition-delay:.24s}
.salon .mmenu.open .mmenu__nav a:nth-child(5){transition-delay:.3s}
/* ---- нижній поверх ---- */
.salon .mmenu__foot{
margin-top:auto;padding-top:clamp(32px,8vw,48px);
display:grid;gap:clamp(22px,5.5vw,30px);
}
.salon .mmenu__foot .btn{height:58px;border-radius:999px;margin-bottom:0}
/* телефон, адреса й години — три окремі рядки, а не один злиплий */
.salon .mmenu__info{display:grid;gap:7px;font-style:normal}
.salon .mmenu__tel{
font-family:var(--display);font-weight:400;letter-spacing:-.01em;
font-size:clamp(1.3rem,5.6vw,1.6rem);line-height:1.2;color:var(--ink);
}
.salon .mmenu__tel:active{color:var(--accent-fill)}
.salon .mmenu__where,
.salon .mmenu__when{font-size:var(--t-meta);color:var(--ink-70);line-height:1.5}
.salon .mmenu__where{display:block}
.salon .mmenu__where:active{color:var(--ink)}
.salon .mmenu__when{color:var(--ink-70)}
.salon .mmenu__social{display:flex;gap:10px}
.salon .mmenu__social a{
width:var(--soc-size);height:var(--soc-size);border:0;color:var(--ink-70);
box-shadow:inset 0 0 0 1px var(--line-soft);
transition:color .25s var(--ease),box-shadow .25s var(--ease);
}
.salon .mmenu__social a:active{color:var(--accent-fill);box-shadow:inset 0 0 0 1px rgba(168,111,72,.4)}
.salon .mmenu__social svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){
.salon .mmenu.open .mmenu__nav a{transition-delay:0s}
.salon .mmenu__l{transition:none}
}
.salon .cont__list b,
.salon .cont__tel b{font-family:var(--display);font-weight:500;letter-spacing:-.015em}
/* ============================================================
ПРАВОВІ СТОРІНКИ
============================================================
Той самий палітра-набір і та сама пара шрифтів, що на головній:
сторінки підключають цей самий файл, тож нічого не дублюється.
Відрізняється лише композиція — одна колонка тексту замість сітки. */
.legal{background:var(--bone);color:var(--ink);padding-top:0}
/* ---- вузька шапка: знак студії і шлях назад ---- */
.lgbar{background:#FFF;border-bottom:1px solid var(--line-soft)}
.lgbar__in{
display:flex;align-items:center;justify-content:space-between;gap:20px;
height:clamp(64px,5vw,76px);
}
.lgbar__back{font-size:var(--t-meta)}
/* ---- текстова колонка ----
Міра рядка важливіша за сітку: 860px — це приблизно 75 знаків
основним кеглем, що читається без зусиль і на великому екрані. */
.lg{padding-block:clamp(44px,5vw,80px) clamp(64px,7vw,110px)}
.lg__in{
width:100%;max-width:860px;margin-inline:auto;
padding-inline:max(var(--gutter), 20px);
}
.lg__eyebrow{color:var(--accent)}
.lg__t{
font-family:var(--f-section);font-weight:400;
font-size:clamp(2rem,3.2vw,3rem);line-height:1.08;letter-spacing:-.018em;
margin-top:clamp(12px,1.4vw,18px);text-wrap:balance;
}
.lg__lead{
font-size:var(--t-body);line-height:1.6;color:var(--ink-70);
margin-top:clamp(12px,1.4vw,18px);max-width:52ch;text-wrap:pretty;
}
.lg__upd{font-size:var(--t-meta);color:var(--ink-45);margin-top:clamp(14px,1.6vw,20px)}
.lg__upd b{font-weight:500;color:var(--ink-70)}
/* ---- попередження про незаповнені поля ---- */
.lg__note{
margin-top:clamp(22px,2.4vw,32px);padding:clamp(16px,1.8vw,22px);
border-radius:var(--radius-md);
background:rgba(168,111,72,.07);
box-shadow:inset 0 0 0 1px rgba(168,111,72,.26);
}
.lg__note p{font-size:var(--t-meta);line-height:1.55;color:var(--ink-70);text-wrap:pretty}
.lg__note b{color:var(--ink)}
/* ---- зміст ---- */
.lg__toc{
margin-top:clamp(28px,3vw,40px);padding-top:clamp(20px,2.2vw,28px);
border-top:1px solid var(--line-soft);
}
.lg__toc .label{color:var(--ink-45)}
.lg__toc ol{
list-style:none;margin:clamp(14px,1.6vw,20px) 0 0;padding:0;
display:grid;gap:9px;counter-reset:toc;
}
.lg__toc li{counter-increment:toc}
.lg__toc a{
display:inline-flex;gap:10px;font-size:var(--t-meta);line-height:1.45;
color:var(--ink-70);transition:color .25s var(--ease);
}
.lg__toc a::before{
content:counter(toc,decimal-leading-zero);
color:var(--accent);font-variant-numeric:tabular-nums;
}
.lg__toc a:hover{color:var(--ink)}
/* ---- розділи ---- */
.lg__s{margin-top:clamp(40px,4.4vw,64px);scroll-margin-top:clamp(80px,8vw,110px)}
.lg__s h2{
font-family:var(--f-section);font-weight:400;
font-size:clamp(1.4rem,1.6vw + 1rem,1.9rem);line-height:1.18;letter-spacing:-.014em;
padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line-soft);
}
.lg__s h3{
font-family:var(--f-card);font-weight:500;font-size:var(--t-body);
line-height:1.3;margin-top:clamp(20px,2.2vw,28px);
}
.lg__s p{
font-size:var(--t-meta);line-height:1.7;color:var(--ink-70);
margin-top:clamp(12px,1.3vw,16px);text-wrap:pretty;
}
.lg__s b{font-weight:500;color:var(--ink)}
.lg__s ul{
list-style:none;margin:clamp(12px,1.3vw,16px) 0 0;padding:0;display:grid;gap:10px;
}
.lg__s li{
position:relative;padding-left:22px;
font-size:var(--t-meta);line-height:1.65;color:var(--ink-70);text-wrap:pretty;
}
/* маркер — коротка карамельна риска, а не крапка списку */
.lg__s li::before{
content:"";position:absolute;left:0;top:.72em;
width:10px;height:1px;background:var(--accent);
}
.lg__s a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
text-decoration-color:var(--sand);transition:color .25s var(--ease)}
.lg__s a:hover{color:var(--accent);text-decoration-color:currentColor}
/* останній розділ — список того, що лишилось заповнити */
.lg__fill h2{color:var(--accent)}
/* ---- підвал правових сторінок ---- */
.lgfoot{background:var(--dark);color:var(--on-dark);padding-block:clamp(28px,3vw,40px)}
.lgfoot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.lgfoot .foot__cr{color:rgba(243,240,233,.5);font-size:var(--t-meta)}
.lgfoot__nav{display:flex;flex-wrap:wrap;gap:12px 24px}
.lgfoot__nav a{font-size:var(--t-meta);color:rgba(243,240,233,.7);transition:color .25s var(--ease)}
.lgfoot__nav a:hover{color:var(--accent-soft)}
.lgfoot__nav a[aria-current="page"]{color:var(--on-dark)}
@media (max-width:620px){
.lgbar__back span{display:none}
.lgfoot__in{flex-direction:column;align-items:flex-start}
}
/* ============================================================
РУХ
Студія названа світлом, тож головний рух сторінки — світло, і він
один: у hero воно сходить на кадр, а кадр осідає у свій розмір.
Нижче сторінка більше не повторює той самий підйом на 8px на
кожному блоці — у неї чотири входи під чотири різні типи змісту:
заголовок виходить із розфокусу, сітка осідає площиною, фотографія
відкривається кадром, а текстова колонка лишається на тихому
підйомі, який і був. Кожен рух відбувається один раз.
============================================================ */
/* ---- hero: світло сходить на кадр ----
Усе тут на @keyframes, а не на переході з прихованого стану: якщо
анімація не піде (вимкнений рух, старий рушій), елемент просто
стоїть у своєму звичайному вигляді. Нічого не залежить від JS. */
@keyframes hero-settle{from{transform:scale(1.055)}}
@keyframes hero-lights{from{opacity:1}}
@keyframes hero-lift{from{opacity:0;transform:translateY(16px)}}
@keyframes hero-warm{from{color:rgba(243,240,233,.44)}}
/* трансформ лежить на , а паралакс пише у .pl — не перетинаються */
.salon .hero__bg img{animation:hero-settle 2.1s var(--slow) both}
/* затемнення поверх кадру, яке сходить: opacity на окремому шарі
коштує рівно нічого, тоді як filter:brightness на повноекранному
фото перемальовував би весь шар щокадру */
.salon .hero__scrim::after{
content:"";position:absolute;inset:0;
background:rgba(20,18,15,.4);opacity:0;
animation:hero-lights 1.15s var(--slow) both;
}
.salon .hero__t{animation:hero-lift .9s var(--slow) .1s both}
.salon .hero__sub{animation:hero-lift .9s var(--slow) .24s both}
.salon .hero__act{animation:hero-lift .9s var(--slow) .36s both}
.salon .hero__meta{animation:hero-lift .9s var(--slow) .48s both}
/* акцентне слово набирає тепло останнім — світло дійшло до нього */
.salon .hero__t em{animation:hero-warm 1s var(--slow) .6s both}
/* ---- заголовок секції: сериф виходить із розфокусу ----
Доти заголовки не рухалися взагалі: під'їжджала восьма картка, а
рядок, на який падає око, стояв мертво. filter лишається тільки на
час входу — у стані .in його немає, тож текст не тримає растровий шар. */
.salon [data-rv="head"]{
opacity:0;transform:translateY(16px);
transition:opacity .75s var(--slow),transform .75s var(--slow);
}
.salon [data-rv="head"].in{opacity:1;transform:none}
/* розфокус бере тільки сам заголовок: у ряді з ним стоять стрілки стрічки
й кнопка «Відгуки в Google», а кнопка, що випливає з розмиття, —
це вже не прихід заголовка, а ефект */
.salon [data-rv="head"] .sec-head__t,
.salon [data-rv="head"] > .sec-title{
filter:blur(7px);transition:filter .75s var(--slow);
}
.salon [data-rv="head"].in .sec-head__t,
.salon [data-rv="head"].in > .sec-title{filter:none}
/* ---- сітка карточок: площина, а не падіння ----
Шість плиток, що по черзі падають згори, читаються як слайдшоу.
Масштаб без вертикального ходу осідає як одна площина. */
.salon [data-rv="tile"]{
transform:scale(.978);
transition:opacity .62s var(--slow),transform .62s var(--slow);
}
.salon [data-rv="tile"].in{transform:none}
/* ---- фотографія: кадр відкривається ----
clip-path сидить на самому , а не на : у .cont__door
фігура несе ще й підпис, і інсет по фігурі різав би текст. */
.salon [data-rv-img]{transform:none;transition:opacity .7s var(--slow)}
.salon [data-rv-img] img{
clip-path:inset(7% 5% 7% 5%);transform:scale(1.06);
transition:clip-path 1.05s var(--slow),transform 1.25s var(--slow);
}
.salon [data-rv-img].in img{clip-path:inset(0 0 0 0);transform:none}
/* ---- натиск ----
Жодна кнопка на сторінці не відповідала на дотик: на телефоні
немає hover, тож до появи наступного екрана палець не отримував
нічого. Хід маленький і швидкий — це підтвердження, не анімація. */
.salon .btn{transition:color .4s var(--ease),transform .16s var(--ease)}
.salon .btn:active{transform:scale(.975)}
.salon .gchip{
transition-property:background,color,box-shadow,transform;
transition-duration:.3s;transition-timing-function:var(--ease);
}
.salon .gchip:active{transform:scale(.96)}
.salon .rail-nav button,.salon .revs__add{
transition-property:background,color,box-shadow,opacity,transform;
transition-duration:.3s;transition-timing-function:var(--ease);
}
.salon .rail-nav button:active,.salon .revs__add:active{transform:scale(.92)}
/* ---- FAQ: закриття ----
Відкриття вже їхало на grid-template-rows, а закриття зникало
миттєво, бо браузер прибирає вміст разом з [open]. Клас-посередник
тримає вміст на місці, поки рядок складається. */
.salon .faq__acc .acc__i.is-closing .acc__body{grid-template-rows:0fr}
@media (prefers-reduced-motion:reduce){
.salon .hero__bg img,.salon .hero__scrim::after,.salon .hero__t,
.salon .hero__sub,.salon .hero__act,.salon .hero__meta,.salon .hero__t em{
animation:none;
}
.salon [data-rv="head"],.salon [data-rv="tile"]{opacity:1;transform:none}
.salon [data-rv="head"] .sec-head__t,
.salon [data-rv="head"] > .sec-title{filter:none}
.salon [data-rv-img] img{clip-path:none;transform:none}
.salon .btn:active,.salon .gchip:active,
.salon .rail-nav button:active,.salon .revs__add:active{transform:none}
}
/* ============================================================
Етап 5: стани форми запису
Сітка часу тепер приходить із сервера, тож у неї є стан
очікування й стан помилки — раніше вона малювалась миттєво з
вигаданих даних і таких станів не потребувала.
============================================================ */
.salon .btime-wait{
grid-column:1/-1;list-style:none;
padding:16px 2px;color:var(--ink-45);
font-size:var(--t-meta);line-height:1.5;
}
/* Помилка надсилання стоїть над футером модалки: саме там погляд
опиняється після натискання «Підтвердити запис». */
.salon .bk__senderr{
margin:0 clamp(18px,3vw,26px) 12px;
padding:11px 15px;border-radius:12px;
background:rgba(155,59,46,.12);color:#E7B9AE;
font-size:var(--t-meta);line-height:1.45;
}
/* ============================================================
ФОНОВІ ШАРИ
Дві логіки. Жодного нового елемента в розмітці: усе живе на
псевдоелементах секцій, тож index.html лишається байт у байт тим
самим шаблоном, з якого його збирає CMS.
1. Зерно. Одна дрібна плитка шуму, замощена по кожній секції
поверх її фону. Саме воно відрізняє кремовий папір від залитого
кольором прямокутника — і працює однаково на світлих і на
темних смугах. Жодних переходів кольору всередині смуги воно
не створює.
2. Ботанічний контур. Тонка однотовщинна лінія — гілочка, дуга.
Лише в чотирьох місцях, лише у вільних полях і лише від 1024px:
на телефоні бічних полів немає, і контур опинився б під
текстом.
Світлових плям тут більше немає: і на світлому, і на темному фон
рівний. Що саме з них прибрано й чому — у розділі «Фон секцій»
нижче.
Усе лежить під вмістом і нічого не ловить: ні кліків, ні фокуса.
============================================================ */
/* ---------- 1. Основа під фон ----------
isolation створює контекст накладання, і z-index:-1 всередині нього
лягає над власним фоном секції, але під її вмістом. Жоден із
абсолютно позиційованих нащадків цих секцій не втрачає свого
контейнера: у кожного вже є ближчий позиційований предок. */
.salon .cats,
.salon .pop,
.salon .why,
.salon .team,
.salon .ba,
.salon .price,
.salon .revs,
.salon .faq,
.salon .gift,
.salon .cont,
.salon .foot{position:relative;isolation:isolate}
.salon .hero,
.salon .space{isolation:isolate}
.salon .cats::before,
.salon .pop::before,
.salon .why::before,
.salon .team::before,
.salon .space::before,
.salon .ba::before,
.salon .price::before,
.salon .revs::before,
.salon .faq::before,
.salon .gift::before,
.salon .cont::before,
.salon .foot::before,
.salon .hero::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
}
/* ---------- 2. Фон секцій ----------
Рівна заливка плюс зерно — і більше нічого.
Тут колись стояла ціла система світлових плям: тепла глиняна й
піщана на світлих смугах, тепле світло в куті та підсвічення
зверху — на темних. Вона робила своє, але разом із зерном,
контуром і фотографіями сторінка ставала строкатою, а головне —
жодна з цих плям не була потрібна, щоб смуги читалися окремими.
Їх і так розділяє чергування світлого з темним і власні відступи
секцій.
Лишилося зерно: воно не малює плям і не створює переходів
усередині однотонної смуги — просто робить площину папером, а не
заливкою. Для темних смуг воно міцніше, інакше сірий шум на
майже чорному не читається.
Градієнти, які лишилися на сторінці, — не декор: затемнення під
текстом героя, підкладка під круглими кнопками на фото майстра,
його ж тепле сяйво на наведенні та паперова фактура самого
сертифіката. Кожен із них має роботу. */
.salon .cats::before,
.salon .pop::before,
.salon .why::before,
.salon .team::before,
.salon .price::before,
.salon .faq::before,
.salon .cont::before{
background:var(--bg-grain) 0 0 / 160px 160px repeat;
}
.salon .space::before,
.salon .ba::before,
.salon .revs::before,
.salon .gift::before,
.salon .foot::before,
.salon .hero::after{
background:var(--bg-grain-d) 0 0 / 160px 160px repeat;
}
/* ---------- 3. Ботанічний контур ----------
Чотири місця на всю сторінку, і кожне — у вільному полі збоку, яке
.wrap лишає між вмістом і краєм екрана. Ширина цього поля тут
рахується тією самою формулою, що й відступ самого .wrap, тож
контур не наїде на текст на жодній ширині: 64px на 1024, 92 на
1280, 110 на 1440 і 295 на 1920, коли контейнер упирається в
стелю й сторінка починає відбивати його від країв.
Нижче 1024px бічного поля немає зовсім — там лишаються тільки
зерно й світлові плями.
Сила лінії: 8.5% і 8% для гілочки, 7% для світлої дуги, 13% для
темної. Була спроба підсилити це вдвічі — разом із рештою шарів
сторінка стала строкатою, тож повернулися до тихих значень: контур
має вгадуватися, а не читатися першим. Усе це оздоба на тлі, під
вмістом: на контраст тексту вона не впливає. */
@media (min-width:1024px){
.salon .why,
.salon .price,
.salon .faq,
.salon .gift{
--side:max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.salon .why::after,
.salon .faq::after,
.salon .price::after,
.salon .gift::after{
content:"";
position:absolute;
z-index:-1;
pointer-events:none;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
/* Гілочка в правому полі «чотирьох причин» і дзеркально — у лівому
полі FAQ. Вузька вертикаль добре лягає в поле навіть на 1024px. */
.salon .why::after{
background-image:var(--bg-sprig);
top:12%;right:0;
width:calc(var(--side) * .84);height:min(52%,430px);
opacity:.085;
}
.salon .faq::after{
background-image:var(--bg-sprig);
bottom:8%;left:0;
width:calc(var(--side) * .84);height:min(48%,400px);
opacity:.08;
transform:scaleX(-1);
}
}
/* Великі дуги потребують більше місця, ніж гілочка, тож вони
з'являються з 1280px. Малюнок займає праву половину квадрата, тому
коробка вдвічі з половиною ширша за поле й зсунута назовні: видно
рівно ту частину кола, що проходить полем, а решта лишається за
краєм. Для правого боку малюнок дзеркалиться, щоб опинитися з
потрібного боку коробки. */
@media (min-width:1280px){
.salon .price::after{
background-image:var(--bg-arc);
top:20%;right:calc(var(--side) * -1.6);
width:calc(var(--side) * 2.6);height:min(54%,420px);
opacity:.07;
transform:scaleX(-1);
}
.salon .gift::after{
background-image:var(--bg-arc);
top:-8%;left:calc(var(--side) * -1.6);
width:calc(var(--side) * 2.6);height:min(88%,520px);
opacity:.13;
}
/* Прайс — єдина смуга, де дуга справді виходить за край: решта
обрізається власним overflow самої секції. clip, а не hidden:
hidden зробив би секцію контейнером прокрутки. */
.salon .price{overflow-x:clip;overflow-y:visible}
}
/* ---------- 4. Коли фон зайвий ----------
У режимі підвищеного контрасту й на друк уся декорація зникає:
там вона тільки заважає. */
@media (prefers-contrast:more){
.salon .cats::before,.salon .pop::before,.salon .why::before,
.salon .team::before,.salon .space::before,.salon .ba::before,
.salon .price::before,.salon .revs::before,.salon .faq::before,
.salon .gift::before,.salon .cont::before,.salon .foot::before,
.salon .hero::after,
.salon .why::after,.salon .price::after,.salon .faq::after,
.salon .gift::after{display:none}
}
@media print{
.salon .cats::before,.salon .pop::before,.salon .why::before,
.salon .team::before,.salon .space::before,.salon .ba::before,
.salon .price::before,.salon .revs::before,.salon .faq::before,
.salon .gift::before,.salon .cont::before,.salon .foot::before,
.salon .hero::after{display:none}
}