/* ШЕСТАЯ ВЕРСИЯ — «КИБЕР-ЛЮКС». Проба языка. Файл лежит в static ради настоящих шрифтов и путей, но в продукт не подключён ни одной страницей: это лаборатория, по которой выбирают глазами. ТРИ ПРИЁМА, НАЗВАННЫЕ ВЛАДЕЛЬЦЕМ, И КАЖДЫЙ РАБОТАЕТ НА ДЕЛО: 1. ХРОМИРОВАННЫЕ БУКВЫ (образец Apple, слово PRO). Имя салона набрано металлом, сквозь него проходит снимок: часть букв перед кадром, часть за ним. Тот же металл — на главной кнопке. 2. СТОПКА СНИМКОВ МАСТЕРА С ПИКСЕЛЬНЫМ ПЕРЕХОДОМ (второе видео). Карточки лежат стопкой, смена кадра идёт квадратами, а не растворением: это и есть «кибер» — механика видна. 3. КАСКАДНЫЙ СЛАЙДЕР РАБОТ (третье видео). Центральный кадр крупный, соседние сжаты в полосы: видно, что листать есть куда, и при этом главный кадр остаётся главным. ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ. Ни одного эффекта ради эффекта: замер на бою 18.09.2026 — из 190 салонов с прайсом у 107 НЕТ НИ ОДНОЙ фотографии услуги. Поэтому слайдер появляется только там, где снимки есть, а каркас держат типографика, цена и разделы прайса. */ /* ── ШРИФТЫ ───────────────────────────────────────────────────────── Три голоса: тугой гротеск для крупного (NexoTight), моноширинный для служебных меток (NexoMono) — от него «кибер», — и Golos для текста. */ @font-face{font-family:"NexoTight";font-weight:500;font-display:swap; src:url("/static/fonts/tight-cyr-500.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoTight";font-weight:500;font-display:swap; src:url("/static/fonts/tight-lat-500.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"NexoTight";font-weight:700;font-display:swap; src:url("/static/fonts/tight-cyr-700.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoTight";font-weight:700;font-display:swap; src:url("/static/fonts/tight-lat-700.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"NexoTight";font-weight:800;font-display:swap; src:url("/static/fonts/tight-cyr-800.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoTight";font-weight:800;font-display:swap; src:url("/static/fonts/tight-lat-800.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"NexoUnb";font-weight:400;font-display:swap; src:url("/static/fonts/unb-cyr-400.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoUnb";font-weight:400;font-display:swap; src:url("/static/fonts/unb-lat-400.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"NexoUnb";font-weight:600;font-display:swap; src:url("/static/fonts/unb-cyr-600.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoUnb";font-weight:600;font-display:swap; src:url("/static/fonts/unb-lat-600.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"NexoUnb";font-weight:800;font-display:swap; src:url("/static/fonts/unb-cyr-800.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoUnb";font-weight:800;font-display:swap; src:url("/static/fonts/unb-lat-800.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"NexoGolos";font-weight:400;font-display:swap; src:url("/static/fonts/golos-cyr-400.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoGolos";font-weight:400;font-display:swap; src:url("/static/fonts/golos-lat-400.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"NexoGolos";font-weight:500;font-display:swap; src:url("/static/fonts/golos-cyr-500.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoGolos";font-weight:500;font-display:swap; src:url("/static/fonts/golos-lat-500.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"NexoGolos";font-weight:600;font-display:swap; src:url("/static/fonts/golos-cyr-600.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"NexoGolos";font-weight:600;font-display:swap; src:url("/static/fonts/golos-lat-600.woff2") format("woff2"); unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2191,U+2193,U+2212} :root{ /* Ночь, а не чёрная дыра: #08090B с тёплым сдвигом читается как материал, чистый #000 — как выключенный экран. */ /* СТУПЕНИ СЕРОГО ИЗМЕРЕНЫ У APPLE, А НЕ ПОДОБРАНЫ. На apple.com/airpods-max основной текст — #333336 (248 элементов), заголовки — #1D1D1F (208), вторичное — #6E6E73 (38), третичное — #86868B (16). Четыре ступени, и ни одной сверх. Чистого чёрного в тексте нет вовсе, чистого белого в фоне тоже: поверхность у них #F5F5F7. Здесь то же самое, отражённое в тёмную сторону: текст #F5F5F7 (их же светлая ступень), вторичное и третичное — их #86868B и #6E6E73 как есть. Прозрачности вместо цвета больше нет: белый под 58 % давал разный цвет на разных фонах, и страница выглядела грязной ровно там, где фон потеплее. */ --bg:#08090B; --panel:#111214; --line:rgb(255 255 255 / .10); --hair:rgb(255 255 255 / .06); --ink:#F5F5F7; --mute:#86868B; --dim:#6E6E73; /* Один яркий цвет на всю витрину — берётся из фотографии салона. */ --acc-h:284; --acc:oklch(72% .19 var(--acc-h)); --acc-ink:#0A0A0C; /* Один материал повторяется в названии, главной кнопке и стеклянных поверхностях: холодный белый блик, стальной центр, тёмная кромка. */ --chrome-hi:#FFFFFF; --chrome-soft:#E8EDF5; --chrome-mid:#A4ADBC; --chrome-low:#687182; --chrome-rim:rgb(236 242 255 / .32); --chrome-glass:rgb(234 243 255 / .065); /* Служебные метки набираем текстовым шрифтом в разрядку, а не моноширинным: в кириллице он читается как системный шрифт Android и убивает весь замысел. Цифры — крупным Unbounded. */ /* Крупный голос версии: широкий, толстый, с характером и читаемый. Выбран глазами из четырёх начертаний, которые уже лежат в папке. */ --tight:"NexoUnb","NexoTight",-apple-system,system-ui,sans-serif; --text:"NexoGolos",-apple-system,system-ui,sans-serif; /* Четырёхлучевая искра — знак версии. Один вектор на всю витрину. */ --spark:url('data:image/svg+xml;utf8,'); --pad:16px; --r:18px; /* Один радиус на все панели витрины: кадр, список, лист контактов. Разные скругления у соседних блоков — первое, из-за чего страница читается как собранная из чужих кусков. */ --r-card:28px; /* ДВИЖЕНИЕ ИЗМЕРЕНО НА apple.com/airpods-max, А НЕ ПРИДУМАНО. Там на 248 элементах стоит один и тот же переход — 0.32s cubic-bezier(.4,0,.6,1), — на 24 элементах та же кривая на 0.24s, а появление блоков идёт 0.6s ease-out. Кривая симметричная и спокойная: разгон и торможение одинаковые. У нас было .18s cubic-bezier(.16,1,.3,1) — почти вдвое быстрее и с резким выбросом в конце. Отсюда и ощущение дёрганости: каждое нажатие «выстреливало». Владелец просил смотреть на их переходы и чистоту — вот они, числами. `--expo` остаётся, но только для одного движения на страницу: полёта кадра в имя салона. У Apple такая же логика — герой живёт 1.5s, всё остальное 0.32s. */ --ease:cubic-bezier(.4,0,.6,1); --expo:cubic-bezier(.19,1,.22,1); --t:.32s; --t-fast:.24s; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;background:var(--bg)} body{ /* Фон страницы рисуют слои (.wall и .ground), а не сам body: его сплошная заливка перекрывала обои салона — они лежат ниже по z-index, но выше фона родителя. Запасной цвет остаётся на html: если слои не доехали, экран всё равно тёмный, а не белый. */ margin:0;background:transparent;color:var(--ink); font:400 15.5px/1.45 var(--text);letter-spacing:-.01em;overflow-x:hidden; } body.locked{overflow:hidden} /* ── ФОН ВЕРСИИ ────────────────────────────────────────────────────── СВОЙ, А НЕ ЧУЖОЙ. У «Карточек» фон — цветной mesh, у «Разворота» и «Призмы» — светлая бумага, у «Пятой» — вино с кремом. Шестая берёт единственное свободное место: ТЁМНУЮ СТОРОНУ, и красит её цветом самого салона. Три слоя, и каждый из настроек владельца: 1. НОЧЬ. Не чёрный, а тёмный оттенок его же цвета: сверху светлее, снизу глубже. Сервер присылает пару цветов обоев (`bgPair`) — тёмный член пары и есть наша ночь; нет пары — считаем от акцента. 2. ЕГО ОБОИ. Кто загрузил своё фото (32 салона на бою), видит его за всей витриной: сильно размытое и притушенное. Это не фон ради красоты — это его студия за текстом. Читаемость важнее: поверх лежит та же ночь с прозрачностью. 3. СВЕТ АКЦЕНТА. Мягкое пятно его цвета вверху страницы — от него экран перестаёт быть плоским, и цвет виден даже там, где нет ни одной кнопки. */ .ground{ position:fixed;inset:0;z-index:-3;pointer-events:none; /* Ночь всегда в полную силу: ослаблять её больше незачем — фотография сюда не заходит. Прежде здесь стояло `opacity:var(--night-a)`, и это же число вписывал сервер в . Два места на одно решение разошлись: сервер ставил .82, скрипт .58, а выигрывал инлайн на body — всегда. Поэтому в предпросмотре панели обои было видно, а на живом сайте нет, и владелец справедливо говорил, что обои «невозможно поставить». Решение теперь одно и лежит здесь. */ background: radial-gradient(120% 70% at 50% -8%, var(--glow, transparent) 0%, transparent 62%), linear-gradient(to bottom, var(--night-top, #0E0F13) 0%, var(--night-bot, #07080A) 100%); } /* ОБОИ — ЭТО ПЕРВЫЙ ЭКРАН, И БОЛЬШЕ НИЧЕГО. Слой лежал фиксированным под всей витриной: за прайсом, за мастерами, за контактами. Чтобы текст поверх него читался, снимок приходилось душить — blur(20px), яркость .6 и ночь почти в упор, — и от фотографии не оставалось ничего. Владелец назвал правило прямо: «страница с обоями должна единственная иметь фото, а остальное — это выбранный фон». Здесь снимок стоит в полную силу и в резкости, какая нужна, потому что читать поверх него нечего: текст обложки лежит на собственной пелене ниже. */ .wall{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; background-size:cover;background-position:center; filter:saturate(1.04) contrast(1.04) brightness(.96); opacity:0;transition:opacity 1.1s var(--ease); } .wall.here{opacity:1} /* На публичной странице сервер знает выбранные обои заранее и вставляет их прямо в HTML. Показываем их при разборе страницы, ещё до bootstrap: ждать сеть и только затем включать фон — это заметная задержка. */ .wall[data-early-wallpaper="1"]{opacity:1} /* ПЕЛЕНА ПОД ТЕКСТОМ ОБЛОЖКИ, А НЕ НАД ВСЕЙ ФОТОГРАФИЕЙ. Снимок остаётся открытым в середине кадра — там, где на него и смотрят, — и уходит в выбранный цвет к низу экрана. Стыка с разделами не видно: нижняя точка градиента и есть цвет страницы. */ .cover::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to bottom, rgb(0 0 0 / .52) 0%, rgb(0 0 0 / .20) 26%, rgb(0 0 0 / .26) 52%, color-mix(in srgb, var(--night-bot, #07080A) 78%, transparent) 84%, var(--night-bot, #07080A) 100%); } /* Без своих обоев пелена не нужна: под ней ровный цвет, и лишний градиент только делает низ обложки темнее остальной страницы. */ body:not([data-wall="own"]) .cover::after{display:none} /* Содержимое обложки — над фотографией и над пеленой. */ .cover > :not(.wall){position:relative;z-index:2} /* НАПРАВЛЯЮЩИХ ПО КРАЯМ БОЛЬШЕ НЕТ. Здесь стояли две вертикальные волосяные линии — «чертёж». Замысел был в том, чтобы экран читался как рабочий лист, но на деле человек видит их первыми и спрашивает «что это»: линия, которая ничего не отделяет, читается как артефакт отрисовки, а не как приём. Ритм держат плиты разделов и волосяная линия над табло — та хотя бы отделяет обложку от строки с ближайшим окном. */ /* ── МЕТКА РАЗДЕЛА ────────────────────────────────────────────────── Волосяная линия, под ней номер раздела и его название. Номер нужен: по нему видно, сколько всего разделов и где ты сейчас. Плашки нет — это цифра, а не наклейка. Теги и здесь взяты ради краткости разметки, поэтому их браузерное оформление (зачёркивание и подчёркивание) обязано быть снято явно: без этого строка читается как «01/03Услуги» с чертой поперёк — именно так она и выглядела. */ /* МЕТКА РАЗДЕЛА — ОДНО СЛОВО, БЕЗ ЧЕРТЫ И БЕЗ НОМЕРА. Здесь стояла волосяная линия во всю ширину, под ней «01 / 08» слева и название справа. Линия + карточки + плита под разделом давали три разных разделителя на одном экране: «тут и линии, и карточки — фу». Раздел отделяет воздух, а метка просто называет его. */ /* Метка раздела — тот же заголовок. Второго вида заголовка на странице нет: разница между «меткой» и «названием» существовала только в коде, а на экране давала два разных сайта подряд. */ /* Зачин над заголовком — приём с их же страницы: «AirPods Max 2» средним начертанием, под ним крупное «Listening. Remastered.». Зачин появляется только там, где добавляет смысл: «Контакты» над «Как нас найти». Где заголовок и так есть один — его нет. */ .tagline{ display:block;margin:0 0 3px; font-family:var(--text);font-weight:600;font-size:14px;line-height:1.3; letter-spacing:-.005em;text-transform:none;color:var(--mute);text-align:center; } .tagline b,.tagline s{display:none} .tagline u{text-decoration:none;text-transform:capitalize} /* Надпись над обложкой — одно слово владельца, тихо и мелко. Никаких счётчиков: обложка не раздел, считать тут нечего. */ .eyebrow{ margin:0;font:600 10.5px/1 var(--text);letter-spacing:.18em; text-transform:uppercase;color:rgb(255 255 255 / .5); } /* ── ОБЛОЖКА: ФОТО САДИТСЯ В СЛОВО ────────────────────────────────── ПРИЁМ ИЗ ПРИСЛАННОГО ВИДЕО (главная Paul Kalkbrenner). Кадр сначала занимает весь экран, потом на глазах уменьшается и встаёт ВНУТРЬ имени — между двумя его частями, как ещё одна буква. Слова в этот момент съезжаются к нему. Почему это правильно для витрины салона, а не просто красиво: за полторы секунды человек успевает увидеть работу мастера во весь экран — и сразу понять, к кому он попал. Ни один статичный заголовок так не делает. Вырезанных PNG приём не требует: фото — прямоугольник в строке. */ .cover{ /* Во всю высоту экрана, а нижняя группа — у самого низа. На 96svh строка «Запишитесь за 30 секунд» с кнопкой оказывалась на телефоне чуть ли не посередине: свободное место делилось поровну между именем и низом. Владелец: «эту штуку сделать ниже». */ position:relative;min-height:100svh;display:flex;flex-direction:column; padding:calc(env(safe-area-inset-top) + 14px) var(--pad) calc(env(safe-area-inset-bottom) + 26px); overflow:hidden; } /* Строка владельца над кнопкой. Верхний отступ auto и прижимает к низу всё, что идёт после имени: строку, табло и кнопку. */ /* Строка владельца — тихое обещание под именем, а не второй заголовок. На 17 пикселях белым она спорила и с именем салона сверху, и с временем снизу: три голоса на одном экране. */ .lede{ margin:auto 0 0;font-size:14.5px;line-height:1.4;letter-spacing:-.008em; color:rgb(255 255 255 / .74);text-wrap:balance; } /* Свечение обложки — часть общего фона страницы (см. .ground): второй такой же слой поверх давал бы двойное пятно на стыке. */ /* Название с кадром остаётся в центре сцены — это сама анимация. Вниз прижат только смысловой блок с ближайшим временем и кнопкой. */ .hero{position:relative;flex:1;display:grid;place-items:center;margin:8px 0 14px} /* ИМЯ ЧИТАЕТСЯ НА ЛЮБОМ СНИМКЕ, А НЕ ТОЛЬКО НА ТЁМНОМ. Обои встали в полную силу — и хром, который прекрасно читался на чёрном, пропал на светлой фотографии: металл светлый сам по себе. Снимки у салонов разные, и подбирать пелену под каждый нельзя. Поэтому тень не общая, а СВОЯ У ИМЕНИ: мягкое пятно ровно под буквами, которого не видно как прямоугольника. На тёмном снимке оно незаметно, на светлом — держит контраст. */ body[data-wall="own"] .hero::before{ content:"";position:absolute;z-index:0;pointer-events:none; left:-14%;right:-14%;top:50%;height:min(58vh,340px);transform:translateY(-50%); background:radial-gradient(60% 50% at 50% 50%, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .42) 46%, transparent 78%); } body[data-wall="own"] .hero > *{position:relative;z-index:1} .wordmark{ margin:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center; gap:.06em .12em;font-family:var(--tight);font-weight:800; font-size:clamp(38px,13.5vw,78px);line-height:.98;letter-spacing:-.035em; text-transform:uppercase;text-align:center;white-space:nowrap; /* Строка съезжается к центру, пока кадр уменьшается: в начале она стоит у левого поля и не помещается, в конце — ровно по центру. Так в образце, и так это читается как одно движение, а не как «текст приехал, потом дёрнулся». */ transition:transform 1.15s var(--expo); } /* ИМЯ — БЕЛОЕ. ПОСЛЕДНИЙ ФАЛЬШИВЫЙ ХРОМ УБРАН ОТСЮДА ТОЖЕ. Здесь был градиент в пять остановок — «холодный хром». На чёрном он читался сносно, но обои у салонов цветные: у этого — тёплая розовая фотография работ, и холодное серебро на ней выглядело грязью. Владелец: «какой-то тут цветогаммный пиздец, особенно с заголовком». Дело не в подборе оттенка. Металл меняет вид от того, что под ним, а под именем у каждого салона своё фото — подобрать градиент сразу под все снимки нельзя. Белый работает на любом кадре: он и есть цвет света, а не цвет материала. Так имя набирают и на продуктовых страницах Apple поверх фотографии. Тень остаётся и делает работу контраста: на светлом снимке буквы держатся за счёт неё, а не за счёт оттенка. */ .wordmark .chrome{ display:inline-block;color:#fff; text-shadow:0 1px 2px rgb(0 0 0 / .32),0 14px 34px rgb(0 0 0 / .5); } /* Кадр в строке: высотой в букву, с её же радиусом скругления. */ .slot{ /* Кадр в слове — тайл, а не полоска. На .86em × 1.02em при узком имени от снимка оставался вертикальный ноготок в пару миллиметров, и приём «фото внутри слова» читался как дефект шрифта. */ display:inline-block;width:1.12em;height:1.06em;object-fit:cover; border-radius:.14em;vertical-align:baseline;flex:none; box-shadow:0 10px 26px -10px rgb(0 0 0 / .9),0 0 0 .5px rgb(255 255 255 / .22); } /* Кадр уменьшается ПО-НАСТОЯЩЕМУ (меняется его место в строке), а не трансформацией: только так слова съезжаются за ним. Элемент один, поэтому пересчёт раскладки дёшев даже на слабом телефоне. */ .slot.flying{transition:width 1.15s var(--expo),height 1.15s var(--expo), border-radius 1.15s var(--expo)} /* СЛОВА НЕ ЕЗДЯТ ПО ГОРИЗОНТАЛИ. Они приезжали слева и в конце резко вставали на место: строка на глазах меняла ширину, и это читалось как рывок вёрстки, а не как замысел. Двигается только кадр; имя лишь проявляется, оставаясь ровно там, где стояло. */ /* Слова проявляются сразу, без собственного движения: двигаются они только потому, что между ними сжимается кадр. */ .wordmark .part{opacity:0;transition:opacity .5s var(--expo) .15s} .wordmark.landed .part{opacity:1;transform:none} /* Обои показываются раньше всего: сервер кладёт их в HTML ещё до JavaScript. После полёта фото в название проявляются только слова, табло и кнопка. Без фотографии или при ошибке загрузки скрипт сразу ставит intro-ready — первый экран никогда не остаётся пустым. */ .cover #near{margin-top:14px;width:100%} .cover .eyebrow,.cover .lede,.cover .board,.cover #near{ transition:opacity .42s var(--ease),transform .42s var(--ease); } /* Пока придёт только публичный ответ витрины, остаются одни обои — без стартовой кнопки-заглушки. */ body.boot .cover > :not(.hero){opacity:0;pointer-events:none} .cover.intro-pending .eyebrow,.cover.intro-pending .lede, .cover.intro-pending .board,.cover.intro-pending #near{ opacity:0;transform:translateY(9px);pointer-events:none; } .cover.intro-ready .eyebrow,.cover.intro-ready .lede, .cover.intro-ready .board,.cover.intro-ready #near{ opacity:1;transform:none;pointer-events:auto; } .cover.intro-ready .lede{transition-delay:.04s} .cover.intro-ready .board{transition-delay:.08s} .cover.intro-ready #near{transition-delay:.12s} /* ── ТАБЛО ────────────────────────────────────────────────────────── Вместо бегущей строки (такая уже есть в «Развороте») — механическое табло: знаки ближайшего окна перекидываются, как на вокзальном указателе. Это не украшение: оно показывает единственное число, ради которого человек и открыл витрину, — когда можно прийти. Перекидка идёт один раз при загрузке и ещё раз, когда время меняется (клиент выбрал другой день). Вечного движения на экране нет: оно мешает читать и сажает батарею. */ /* ТАБЛО БЕЗ КОРОБКИ. Владелец показал на этот блок и сказал: «это просто позор андройдовский». Он был прав буквально: серый скруглённый прямоугольник со стеклом, а внутри — цифры, каждая в своей маленькой рамке со скруглением. Панель в панели, семь границ там, где нужно одно число. В языке версии у этого места есть точный образ: строка прибора. Волосяная линия сверху, слева мелкая метка вразрядку, справа — само время, крупным металлом. Ни рамок, ни стекла, ни плашек: цифра и есть предмет. Перекидка знаков остаётся — механику видно, и это то самое «кибер», ради чего табло и заведено. */ /* Линии над строкой больше нет: она была третьим элементом там, где и двух много, и делила обложку пополам ровно под именем салона. */ .board{ position:relative;z-index:2;display:flex;align-items:baseline; flex-wrap:wrap;gap:0 9px;margin:14px 0 0;padding:0; } .board-word{ flex:100%;margin:0 0 4px; font:600 10px/1 var(--text);letter-spacing:.2em;text-transform:uppercase; color:rgb(255 255 255 / .56); } .board-day{ font:600 13px/1 var(--text);letter-spacing:.02em; color:rgb(255 255 255 / .66);text-transform:lowercase; } .board-run{display:flex;align-items:baseline;gap:1px} .flap{ display:inline-block; font:700 25px/1 var(--tight);letter-spacing:-.02em; font-variant-numeric:tabular-nums;color:var(--ink); /* Перекидка: знак приходит «сверху», как лопасть на табло. */ transform-origin:50% 0;animation:flap .42s var(--expo) both; } .flap.sep{color:var(--dim);padding:0 .06em} @keyframes flap{ 0%{transform:rotateX(-92deg);opacity:0} 60%{transform:rotateX(8deg);opacity:1} 100%{transform:none;opacity:1} } /* ── КНОПКИ ───────────────────────────────────────────────────────── Главная — хромированная: тот же металл, что в имени салона. Это её единственное украшение, зато читается как вещь, а не как плашка. */ .btn{ appearance:none;border:0;cursor:pointer;display:inline-flex; align-items:center;justify-content:center;gap:9px; padding:15px 22px;border-radius:999px; min-height:48px;font:600 15px/1 var(--text);letter-spacing:-.008em; transition:transform var(--t) var(--ease),filter var(--t) ease,box-shadow var(--t) ease; } .btn:active{transform:translateY(1px) scale(.975)} .btn:focus-visible,.day:focus-visible,.time:focus-visible,.take:focus-visible, .row:focus-visible,.shut:focus-visible,.star:focus-visible{ outline:2px solid var(--chrome-hi);outline-offset:3px; } /* ГЛАВНАЯ КНОПКА — СПЛОШНОЙ ЦВЕТ, А НЕ ПОДДЕЛЬНЫЙ МЕТАЛЛ. Здесь был «хром»: шесть остановок градиента, изображающих отражение в полированной стали. На референсах такой металл — настоящий трёхмерный рендер с преломлением и бликами; градиентом его не повторить, и получается тусклое серебро. Владелец сказал ровно это: «какого хера там остались серебряные кнопки — ты их не можешь нормально сделать как в референсе, поэтому сделай другие». Он прав дважды: и что не выходит, и что надо другое. У Apple главная кнопка — сплошной синий #0071E3 с белым текстом: ни градиента, ни блика, ни обводки. Берём эту форму, а цвет — владельца: у него теперь набор, который светится на чёрном. Металл остаётся ровно в одном месте на витрину — в имени салона на обложке. Там он оправдан: это название версии. */ /* ГЛАВНАЯ КНОПКА — БЕЛАЯ, И ЭТО НЕ ОТСУТСТВИЕ РЕШЕНИЯ. По очереди здесь стояли: поддельный хром (тусклое серебро), системный синий (утилитарный цвет, не люкс) и цвет отделки — тёплый титан. На последнем владелец сказал «цветовая мешанина», и он снова прав: тёплый беж на холодной тёмной основе спорит с ней, а сверху ещё и фотография салона со своим цветом. Три тёплых-холодных источника на одном экране — это и есть каша. Белый не спорит ни с чем: он не цвет материала, а цвет света. На тёмных страницах Apple главное действие набрано именно так — белая плашка, тёмный текст, без градиента и обводки. Работает на любом снимке и на любой из шести ночных основ. Цвет владельца никуда не делся: он остался там, где значит «выбрано», — на дне, времени и отмеченной услуге. Это немного места, и ровно поэтому он там заметен. */ .btn-steel{ color:#0A0B0D;border:0;background:#fff; box-shadow:0 16px 34px -24px rgb(0 0 0 / .9); } .btn-steel:active{filter:brightness(.93)} .btn-ghost{ color:var(--ink);background:rgb(255 255 255 / .014); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .10), inset 0 1px 0 rgb(255 255 255 / .16); } /* ГЛАВНОЕ ДЕЙСТВИЕ — СВЕТ, А НЕ ЗАЛИВКА. Золотая плашка во всю ширину — самый громкий признак «андроида» на этой витрине: цвет владельца превращался в прямоугольник и спорил со всем металлом вокруг. Цвет остаётся и остаётся заметным, но работает как подсветка: кромка, текст и мягкое свечение под кнопкой. Так действие видно, а страница не рассыпается на цветные плиты. */ .btn-acc{ color:var(--acc); background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 16%, transparent), color-mix(in srgb, var(--acc) 5%, transparent) 62%), rgb(255 255 255 / .02); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acc) 52%, transparent), inset 0 1px 0 rgb(255 255 255 / .12), 0 14px 34px -22px var(--acc); } .btn-acc:active{transform:scale(.985)} /* ВЫКЛЮЧЕННАЯ КНОПКА НЕ ДОЛЖНА ВЫГЛЯДЕТЬ СЛОМАННОЙ. Белая плашка под opacity:.4 превращается в серую плиту во всю ширину — читается как «здесь что-то сломалось», а не «сначала выберите время». Выключенное становится тихим: контур и приглушённая подпись, как у второстепенной кнопки. */ .btn[disabled]{ cursor:default;color:var(--mute);background:none; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09); } /* Пустая капсула — это полоска ниоткуда. Ряда филиалов у большинства салонов нет вовсе, и он рисовался тонкой чертой над мастерами. */ .masters:empty,.days:empty,.times:empty{display:none} /* ── РАЗДЕЛ ─────────────────────────────────────────────────────────── */ /* РАЗДЕЛ ОТДЕЛЯЕТСЯ ВОЗДУХОМ. ТОЛЬКО ВОЗДУХОМ. Здесь по очереди побывали: плиты другого оттенка под каждым вторым разделом, волосяные линии во всю ширину, номера «01 / 08», рельсы с засечкой. Каждый раз казалось, что странице не хватает ритма, — и каждый раз добавлялся ещё один разделитель к уже имеющимся. Владелец: «очень грязно, глаза путаются в этой мешанине — смотри сайты Apple вживую». Посмотрел. У них на длинной странице НЕТ ни одной линии между разделами, ни рамок, ни уголков, ни значков у заголовков. Разделы держит расстояние, а заголовок — один и тот же на всей странице. Чистота там не от приёмов, а от их отсутствия. Поэтому здесь ничего не рисуется: только отступ, и он один на все разделы. */ .band{position:relative;z-index:2;padding:52px var(--pad) 0} /* ПЛИТЫ ПОД КАЖДЫМ ВТОРЫМ РАЗДЕЛОМ БОЛЬШЕ НЕТ. Она была чуть другой темноты и со скруглением сверху — и раздел на ней читался как кусок другого сайта: «почему другая категория… это выглядит как что-то другое». Пол один на всю страницу, разделы разделяет воздух. */ /* ЗАГОЛОВОК РАЗДЕЛА ПЕРЕСТАЛ КРИЧАТЬ. На clamp(25px,7.2vw,36px) прописными «КОГДА СВОБОДНО» занимало две строки во весь экран, а под ним стояла одна строка мелкого текста: вся страница читалась как набор плакатов без содержания. Владелец: «из-за размеров сложно понять, что это». Разница между заголовком и текстом остаётся заметной, но теперь это заголовок, а не вывеска. */ /* РУБРИКА НЕ КРИЧИТ. Восьмисотый вес прописными читался как вывеска на каждом разделе подряд: «не надо жирный текст в рубрике». Заголовок остаётся заметно крупнее текста — этого достаточно, чтобы отличить раздел от его содержимого. */ /* ЗАГОЛОВОК РАЗДЕЛА — ИЗ ТОГО ЖЕ МЕТАЛЛА, ЧТО И ИМЯ САЛОНА. Хром был ровно в одном месте — в названии на обложке, — а дальше шли обычные белые прописные на тёмном. Из-за этого низ страницы читался как другая витрина: владелец сказал прямо, что это «андроидовская хуйня», а не Y2K. Металл в заголовке связывает страницу в одну вещь и ничего не стоит по скорости: это градиент по тексту, не картинка. Кегль не трогаем. Он уже был уменьшен по его же просьбе — «из-за размеров сложно понять, что это», — и делать из раздела вывеску второй раз незачем. Люкс здесь в материале, а не в размере. */ /* ЗАГОЛОВОК РАЗДЕЛА — МЕТКА, А НЕ ВТОРОЕ ИМЯ. Он стоял на 25 пикселях прописными, и таких заголовков на странице шесть подряд: «СВОИ ЗАПИСИ — В TELEGRAM» занимало две строки во всю ширину. Шесть крупных голосов — это и есть грязь, владелец сказал прямо: «там грязно и оч большие шрифты». В референсах крупное ровно одно на разворот, всё остальное — мелкий капс вразрядку. Крупный голос у витрины занят именем салона на обложке; заголовок раздела становится тем, чем он и является, — меткой на шкале. Металл остаётся: это по-прежнему хром, просто мелкий. */ /* ЗАГОЛОВОК РАЗДЕЛА — ОДИН НА ВСЮ СТРАНИЦУ. Их было два механизма сразу: у одних разделов «метка» мелким капсом вразрядку со звёздочкой, у других — заголовок другим шрифтом и другого размера. Половина страницы выглядела одним сайтом, половина другим, и глазу не за что было зацепиться. Теперь это одна вещь: имя раздела, крупно, обычным начертанием, без прописных и без разрядки. Ровно как у Apple — и ровно поэтому читается с одного взгляда. Металл остаётся на имени салона и на ценах: там он что-то значит. */ .band-name{ margin:0 0 8px;font-family:var(--tight);font-weight:600; font-size:clamp(24px,6.4vw,30px);line-height:1.14;letter-spacing:-.03em; text-transform:none;text-wrap:balance;color:var(--ink);text-align:center; } /* ИСКРА — ЗНАК ВЕРСИИ. Четырёхлучевая звезда-блик: тот самый предмет из Y2K-набора, который в этом языке значит «металл». Она отмечает начало раздела вместо линейки или плашки — и это единственная графика на всю страницу, поэтому она не спорит ни с чем. Рисуется вектором в самом правиле: отдельный файл ради двадцати байт — лишний запрос. */ .band-sub{margin:0 auto 20px;max-width:30ch;font-size:14px;line-height:1.45; color:var(--mute);text-align:center;text-wrap:balance} /* Рассказ о салоне и строка фактов мастера — под центрованным заголовком, значит и сами по центру: левый край под серединой заголовка читался как сбой вёрстки. */ .story{text-align:center;max-width:34ch;margin-inline:auto} .ways{justify-content:center} /* Появление раздела — 0.6s ease-out, как у них: блок приходит снизу и мягко останавливается, без пружины в конце. */ .reveal{opacity:0;transform:translateY(16px);will-change:opacity,transform; transition:opacity .6s ease-out,transform .6s ease-out} .reveal.seen{will-change:auto} .reveal.seen{opacity:1;transform:none} /* ── КАСКАДНЫЙ СЛАЙДЕР РАБОТ ──────────────────────────────────────── Центральный кадр крупный, соседние сжаты в полосы: видно, что листать есть куда, и при этом главный кадр остаётся главным. Ширину ведёт JS (одна переменная на карточку) — так ход остаётся плавным и на слабом телефоне. */ .casc{ display:flex;gap:8px;height:min(64vh,430px); margin:0 calc(var(--pad) * -1);padding:0 var(--pad); overflow:hidden;touch-action:pan-y; } .slide{ /* У
браузерные поля 1em/40px — они растаскивали ленту на 80 пикселей между кадрами, и каскад распадался. */ margin:0; position:relative;flex:0 0 auto;width:var(--w,64px); border-radius:var(--r);overflow:hidden;background:var(--panel); cursor:pointer; transition:width .55s var(--expo),filter .55s var(--expo); /* Соседний кадр приглушён, но остаётся КАДРОМ: при brightness .62 он на тёмном фоне сливался в чёрную полосу, и лента читалась как одна картинка с рамкой. */ filter:saturate(.75) brightness(.82); box-shadow:inset 0 0 0 .5px var(--line); } .slide.on{filter:none} .slide img{width:100%;height:100%;object-fit:cover;display:block} /* КАДР УСЛУГИ БЕЗ СНИМКА. Не заглушка, а набор: цвет салона, крупная цена фоном и косая штриховка. Снимок есть лишь у 29,6 % услуг (замер 18.09.2026) — значит этот кадр обязан быть таким же красивым, как фотография, иначе половина витрины выглядит недоделанной. */ .slide.blank{ background: linear-gradient(200deg, oklch(34% .11 var(--acc-h)) 0%, oklch(18% .06 var(--acc-h)) 62%, var(--panel) 100%); } .blank-art{ position:absolute;inset:0;overflow:hidden;display:grid;place-items:center; /* Косая штриховка — от неё «чертёж», и она же скрадывает пустоту. */ background-image:repeating-linear-gradient(-58deg, rgb(255 255 255 / .045) 0 1px, transparent 1px 13px); } .blank-art b{ font-family:var(--tight);font-weight:800;font-size:clamp(44px,17vw,96px); line-height:.8;letter-spacing:-.05em;color:rgb(255 255 255 / .1); transform:translateY(-8%);white-space:nowrap; } /* В узкой полосе цифра не читается и превращается в шум — прячем. */ .slide.blank:not(.on) .blank-art b{opacity:0} /* Подпись живёт только на раскрытом кадре: на полосе шириной 60 пикселей она превратилась бы в кашу. */ .slide-in{ margin:0;position:absolute;left:0;right:0;bottom:0;padding:14px; display:grid;gap:10px;opacity:0;transition:opacity .4s var(--ease); } .slide.on .slide-in{opacity:1} .slide-in::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgb(6 7 9 / .92),rgb(6 7 9 / .35) 62%,transparent); backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3); mask-image:linear-gradient(to top,#000 58%,transparent); -webkit-mask-image:linear-gradient(to top,#000 58%,transparent); } /* Имя услуги переносится по словам и не режется: «НАРАЩИВАНИ|Е» — это не стиль, это брак. Широкий шрифт требует меньшего кегля. */ .slide-name{margin:0;font-family:var(--tight);font-weight:700;font-size:14px; line-height:1.15;letter-spacing:-.02em;text-transform:uppercase; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .slide-meta{margin:0;font:600 10.5px/1 var(--text);letter-spacing:.15em; text-transform:uppercase;color:rgb(242 243 245 / .74); display:flex;gap:12px;flex-wrap:wrap} .casc-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 0} .casc-dots{display:flex;gap:5px;justify-content:center} .casc-dot{width:16px;height:3px;border-radius:2px;background:var(--line)} /* Текущая страница отмечается металлом: золотая чёрточка была третьим местом, где цвет владельца превращался в плашку. Правило ровно одно — второе такое же, стоявшее ниже, молча перебивало первое. */ .casc-dot.on{background:var(--acc)} /* ── СТРОКА ПРАЙСА (для салонов без снимков) ───────────────────────── Половине салонов слайдер показывать нечем. Прайс — не запасной вариант, а полноценный вид: моношрифт цен, выносные точки, крупное имя. Так набирают меню, и так прайс читается быстрее всего. */ /* СОДЕРЖИМОЕ ЖИВЁТ В ПАНЕЛИ, А НЕ ГОЛЫМИ СТРОКАМИ НА ФОНЕ. На продуктовых страницах Apple единица содержимого — скруглённый кадр: у него один радиус на всю страницу, и внутри него всё. Голые строки на чёрном выглядели черновиком, а волосяные линии между ними добавляли ещё один вид разделителя к уже имеющимся. Панель одна, радиус один, линия внутри одна. */ .rows{ display:grid;border-radius:var(--r-card);overflow:hidden; background:rgb(255 255 255 / .038); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 1px 0 rgb(255 255 255 / .12); } .row{ appearance:none;border:0;width:100%;text-align:left;cursor:pointer; display:flex;align-items:baseline;gap:10px;padding:17px 16px; background:transparent;color:inherit;font:inherit; border-bottom:1px solid var(--hair); transition:background .3s var(--expo); } .row:last-child{border-bottom:0} .row:active{background:rgb(255 255 255 / .05)} .row-name{font-size:15.5px;font-weight:500;letter-spacing:-.012em} /* ПУСТОГО КВАДРАТА ВМЕСТО СНИМКА БЫТЬ НЕ ДОЛЖНО. Место под фотографию услуги резервировалось всегда, а снимка нет у большинства: замер 18.09 — 107 салонов из 190 без единой фотографии. Получался список пустых квадратиков слева — ровно как чекбоксы в андроид-списке, на который владелец и показал. Нет снимка — нет и места под него. */ .row-shot:empty,.row-shot:not(:has(img)){display:none} .row-lasts{display:block;margin-top:4px;font:600 10px/1 var(--text); letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-style:normal} /* ПУНКТИРА МЕЖДУ НАЗВАНИЕМ И ЦЕНОЙ БОЛЬШЕ НЕТ. Он появлялся только у строк БЕЗ снимка — и в разделе из одной такой услуги выглядел случайной линией посреди чистого списка. Цену и так видно: она прижата к правому краю, как во всём прайсе. */ .row-dots{flex:1;min-width:8px} .row-price{flex:none;font:700 15.5px/1 var(--tight);letter-spacing:-.03em; font-variant-numeric:tabular-nums;color:var(--ink)} /* Снимки из вкладки «Данные» — не дубликат работ. Это короткая полка с понятными подписями: линейка длин, вход, схема. Карточка оставлена широкой, чтобы подпись не превращалась в обрезанный ярлык. */ .shelf-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px;scrollbar-width:none} .shelf-rail::-webkit-scrollbar{display:none} .shelf-card{flex:0 0 min(82vw,350px);margin:0;overflow:hidden;scroll-snap-align:start; border-radius:var(--r);background:rgb(255 255 255 / .055); box-shadow:inset 0 0 0 .5px var(--line)} .shelf-card img{width:100%;height:min(58vw,280px);object-fit:cover;display:block} .shelf-card figcaption{display:grid;gap:4px;padding:12px 13px 14px} .shelf-card figcaption b{font-size:15px;line-height:1.2} .shelf-card figcaption span{font-size:13px;line-height:1.35;color:var(--mute)} /* ── МАСТЕРА ───────────────────────────────────────────────────────── Лента с прилипанием: карточки равны между собой, прокручиваются пальцем и встают по центру. Точки под лентой показывают положение. Прежняя «стопка» из абсолютных карточек пальцем не двигалась вовсе — см. объяснение над stack() в client_v6.js. */ .faces{ display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;margin:0 calc(var(--pad) * -1); padding:0 var(--pad);scroll-padding:0 var(--pad); } .faces::-webkit-scrollbar{display:none} .face{ flex:0 0 min(78vw,330px);margin:0;scroll-snap-align:start; display:grid;gap:10px; } /* Кадр мастера. Без снимка держать высоту нечем: остаётся плита с именем — она и есть карточка, а не заглушка под фотографию. */ .face-shot{ position:relative;border-radius:var(--r-card);overflow:hidden; background:rgb(255 255 255 / .038); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 1px 0 rgb(255 255 255 / .12); display:grid;place-items:center;min-height:132px; } .faces:not(.flat) .face-shot{aspect-ratio:4/5;min-height:0} .face-shot img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; } .face-name{ position:relative;z-index:1;margin:0;padding:18px;text-align:center; font-family:var(--tight);font-weight:600; font-size:clamp(19px,5vw,24px);line-height:1.06;letter-spacing:-.03em; overflow-wrap:anywhere; } /* Со снимком имя лежит на собственной тени по низу кадра: на светлой фотографии белые буквы иначе не прочитать. */ .faces:not(.flat) .face-name{ position:absolute;left:0;right:0;bottom:0;text-align:left;padding:16px 18px; } .faces:not(.flat) .face-name::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:220%;z-index:-1; background:linear-gradient(to top, rgb(6 7 9 / .92) 0%, rgb(6 7 9 / .5) 46%, transparent); } .face-facts{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:6px 12px;margin:0; font:500 13px/1.3 var(--text);color:var(--mute); } .face-facts b{color:var(--ink);font-weight:600} .face-facts span{color:var(--dim)} /* ── НИЖНЯЯ СТРОКА ─────────────────────────────────────────────────── */ .dock{ position:fixed;left:10px;right:10px;bottom:10px;z-index:20; display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px; border-radius:999px;background:linear-gradient(135deg,rgb(244 250 255 / .12),rgb(16 18 22 / .82) 48%); backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7); box-shadow:inset 0 1px 0 rgb(255 255 255 / .14),inset 0 0 0 .5px var(--chrome-rim), 0 20px 40px -22px #000; transform:translateY(140%);transition:transform .5s var(--expo); } .dock.up{transform:none} .dock-when{flex:1;min-width:0;font:500 13px/1.25 var(--text);letter-spacing:-.005em; color:var(--mute);font-variant-numeric:tabular-nums; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dock .btn{padding:12px 18px;font-size:14px} /* ── РАСКРЫТИЕ В ЗАПИСЬ ───────────────────────────────────────────── Предмет вырастает на весь кадр: человек ни разу не теряет из виду то, на что записывается. */ .stage{position:fixed;inset:0;z-index:40;pointer-events:none} .stage.on{pointer-events:auto} .stage-veil{position:absolute;inset:0;opacity:0;background:rgb(4 5 7 / .72); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:opacity .42s var(--ease)} .stage.on .stage-veil{opacity:1} .stage-card{ position:absolute;border-radius:var(--r);overflow:hidden;background:var(--panel); display:flex;flex-direction:column; color:var(--ink);box-shadow:0 40px 90px -40px #000; will-change:top,left,width,height; transition:top .52s var(--expo),left .52s var(--expo),width .52s var(--expo), height .52s var(--expo),border-radius .52s var(--expo); } .stage-card > img{width:100%;height:100%;object-fit:cover;display:block} .stage-paper{position:relative;height:100%;padding:24px 20px;display:grid;gap:6px; align-content:start;overflow:hidden} /* Цена водяным знаком заполняет пустое поле карточки. Она обязана читаться целиком: обрезанная с двух сторон, она выглядела обломком чужого текста, а не знаком. */ /* ВОДЯНОГО ЗНАКА С ЦЕНОЙ ЗДЕСЬ БОЛЬШЕ НЕТ. Сумма стояла на листе кеглем в 120 пикселей и не помещалась: от «5 000 ₽» на экране оставалось «000 ₽», обрезанное правым краем. Цифры, которые врут о сумме, — худшее украшение из возможных, а настоящая сумма и так стоит строкой над кнопкой. */ .stage-cat{font:600 10.5px/1 var(--text);letter-spacing:.17em;text-transform:uppercase; color:var(--mute)} .stage-name{font-family:var(--tight);font-weight:800;font-size:27px;line-height:1.04; letter-spacing:-.035em;text-transform:uppercase} .stage-price{margin-top:6px;font:700 22px/1 var(--tight);color:var(--ink)} /* ЛИСТ ЗАПИСИ ПРОКРУЧИВАЕТСЯ ЦЕЛИКОМ, А НЕ ВЫЕЗЖАЕТ СНИЗУ. Панель занимала нижнюю треть и всплывала поверх пустого плаката: половина шагов оказывалась за краем, и человек не понимал, сколько их всего. Теперь это обычный лист сверху вниз. */ /* Лист занимает столько, сколько в нём есть. Он растягивался на весь экран, и под кнопкой оставалось поле пустоты в пол-телефона: человек видел не форму записи, а полупустой чёрный экран. */ .picker{ position:relative;z-index:2;flex:0 1 auto;min-height:0;overflow-y:auto; -webkit-overflow-scrolling:touch;overscroll-behavior:contain; padding:16px 16px calc(22px + env(safe-area-inset-bottom)); display:grid;gap:14px;align-content:start; opacity:0;transition:opacity .4s var(--ease) .18s} .stage.on .picker{opacity:1} /* Шапка листа: что записываем, за сколько и выход. Липкая — на длинном прайсе выход не должен уезжать вверх. */ .sheet-top{ position:sticky;top:0;z-index:3;flex:none; display:flex;align-items:flex-start;gap:12px; padding:16px 16px 12px;background:var(--panel); box-shadow:0 1px 0 var(--hair); } .sheet-what{display:grid;gap:3px;min-width:0;flex:1} .sheet-what b{ font-family:var(--tight);font-weight:600;font-size:22px;line-height:1.14; letter-spacing:-.03em;text-transform:none;overflow-wrap:anywhere; } .sheet-what span{ font:400 13.5px/1.35 var(--text);letter-spacing:-.005em;text-transform:none; color:var(--mute);font-variant-numeric:tabular-nums; } .done-card{display:grid;gap:8px} .picker::before{ content:"";position:absolute;inset:0;z-index:-1;background:rgb(10 11 14 / .68); backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6); box-shadow:inset 0 .5px 0 rgb(255 255 255 / .18)} /* ЛИСТ ЗАПИСИ ГОВОРИТ ТЕМ ЖЕ ГОЛОСОМ, ЧТО И СТРАНИЦА. Здесь оставался прежний набор: прописные вразрядку на каждом шаге («ЧТО СДЕЛАЕМ», «КОГДА»), заголовок восьмисотым весом капсом. На странице такого голоса больше нет нигде — и лист читался как кусок другого приложения, вклеенный поверх. Шаг записи — обычное слово, как заголовок раздела, только мельче: это подпись к действию, а не вывеска. */ .picker h3{margin:0;font-family:var(--tight);font-weight:600;font-size:19px; letter-spacing:-.025em;text-transform:none} .picker .line{margin:0;font:400 13.5px/1.4 var(--text);letter-spacing:-.005em; text-transform:none;color:var(--mute)} /* ДНИ — ОДНА КАПСУЛА, А НЕ РОССЫПЬ ЧИПОВ. Пять отдельных плашек с обводкой в ряд — это первое, что читается как «андроид»: каждая держит собственную форму, и глаз считает границы, а не дни. На продуктовых страницах Apple управление собрано в ОДИН предмет — пилюля, внутри которой переключаются позиции (там это пауза и точки карусели). Владельцу это и не нравилось: «все равно кажется намешано». Здесь так же: одна капсула на весь ряд, внутри — только текст, и выбранный день подсвечен металлом. Границ на экране становится одна вместо пяти. Прокрутка осталась: дней бывает много, и край уходит в прозрачность, чтобы было видно продолжение. */ .days{ display:flex;gap:2px;overflow-x:auto;scrollbar-width:none; margin:0;padding:4px;border-radius:999px; background:rgb(255 255 255 / .05); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07); -webkit-mask:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%); mask:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%)} .days::-webkit-scrollbar{display:none} /* ЧИПЫ — КРОМКА, А НЕ СЕРАЯ ПЛАШКА. Заливка в 6 % белого на тёмном даёт ровно тот серый прямоугольник со скруглением, который читается как системный элемент телефона. Держать форму должна кромка: волосяная линия по краю и один блик сверху — так деталь выглядит выточенной, а не залитой. */ .day{ appearance:none;cursor:pointer;flex:none; font:600 12.5px/1 var(--text);letter-spacing:.01em;text-transform:none; padding:10px 15px;border:0;border-radius:999px;color:var(--mute); background:none;box-shadow:none; transition:color var(--t) var(--ease),background var(--t) var(--ease), box-shadow var(--t) var(--ease)} .day:not(.on):hover{color:var(--ink)} .day:active{transform:scale(.97)} /* ВЫБРАННЫЙ ДЕНЬ — МЕТАЛЛ, А НЕ ЗАЛИВКА ЦВЕТОМ. Золотая капсула во всю кнопку — самый узнаваемый признак того самого «андроида»: цвет бизнеса превращался в плашку и спорил с хромом вокруг. Выбранное здесь светится металлом, а цвет владельца остаётся в кромке и свечении под кнопкой — его видно, но он не заливает. */ .day.on{color:var(--acc-ink,#0A0B0D);background:var(--acc);box-shadow:none} .times{display:flex;flex-wrap:wrap;gap:2px;max-height:30svh;overflow:auto; scrollbar-width:none;margin:10px 0 0;padding:4px;border-radius:26px; background:rgb(255 255 255 / .05); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07)} .times::-webkit-scrollbar{display:none} .time{ appearance:none;border:0;cursor:pointer;padding:11px 16px;border-radius:999px; font:600 15px/1 var(--text);color:var(--ink);font-variant-numeric:tabular-nums; background:none;box-shadow:none; transition:color var(--t) var(--ease),background var(--t) var(--ease), box-shadow var(--t) var(--ease)} .time:active{transform:scale(.97)} .time.on{color:var(--acc-ink,#0A0B0D);background:var(--acc);box-shadow:none} .time i{display:block;margin-top:3px;font-style:normal;font-size:10px;opacity:.6} /* Кнопка выхода стоит В ШАПКЕ листа, а не поверх него: лист теперь прокручивается, и плавающий крестик перекрывал бы строки прайса. */ .shut{ position:relative;flex:none;z-index:3; width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;display:grid; place-items:center;color:var(--ink);font-size:18px;background:rgb(10 11 14 / .6); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:inset 0 0 0 .5px var(--line);opacity:0;transition:opacity .3s ease .1s} .stage.on .shut{opacity:1} /* Режим проверки: без обложки. Панель предпросмотра не перерисовывает то, что уехало за первый экран, — иначе снять разделы нечем. */ body.flat .cover{display:none} @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ── ВЫБОР НЕСКОЛЬКИХ УСЛУГ ───────────────────────────────────────── Человек редко приходит за одной позицией прайса: «коррекция + дизайн» — это один визит. Значит строка прайса обязана быть переключателем, а не просто надписью, и выбор должен быть виден с одного взгляда. */ .row{gap:12px} /* ОТМЕТКА — ИСКРА, А НЕ КВАДРАТИК С ГАЛОЧКОЙ. Здесь стоял квадрат со скруглением и галочкой внутри, заливающийся цветом. Это материал-дизайн в чистом виде: владелец показал на этот список и сказал, что витрина выглядит «как андроидовская хуйня». Он прав — три пустых квадрата в столбик читаются как форма с чекбоксами, а не как прайс. Тот же знак, что отмечает разделы: невыбранное — тусклый контур искры, выбранное — та же искра из металла. Одна фигура на всю витрину, и по ней сразу видно, что отмечено. */ .row-box{ flex:none;width:15px;height:15px;align-self:center;position:relative; background:var(--chrome-low);opacity:.34; -webkit-mask:var(--spark) center/contain no-repeat; mask:var(--spark) center/contain no-repeat; transition:opacity var(--t) ease,background var(--t) ease,transform var(--t) var(--ease); } .row.on .row-box{opacity:1;transform:scale(1.18);background:var(--acc)} .row.on .row-name{color:var(--ink)} /* Цена выбранной строки — цветом владельца. Заливка текста у неё прозрачная (металл идёт фоном), поэтому цвет назначаем именно заливкой: одного `color` тут не видно. */ .row.on .row-price{background:none;-webkit-text-fill-color:var(--acc);color:var(--acc)} /* Кнопка выбора на кадре ленты: то же действие, тот же вид отметки. */ .btn-pick{ width:100%;padding:12px 16px;border-radius:999px; background:rgb(255 255 255 / .14);color:var(--ink); box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .28); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); font:600 14px/1 var(--text);letter-spacing:-.01em; } .btn-pick.on{background:var(--acc);color:var(--acc-ink);box-shadow:none} .btn.sm{padding:9px 14px;font-size:12.5px} .btn-ghost.on{background:var(--acc);color:var(--acc-ink);box-shadow:none} /* НИЖНЯЯ СТРОКА СЧИТАЕТ НАБОР: сколько позиций и сколько это стоит. */ .dock-when b{display:block;font:600 14px/1.15 var(--text);letter-spacing:-.01em; color:var(--ink);text-transform:none} .dock-when s{display:block;margin-top:2px;text-decoration:none; font:600 12px/1 var(--text);letter-spacing:0;color:var(--acc)} .dock.full{background:rgb(16 18 22 / .9)} /* ── КАРТОЧКА ЗАПИСИ ──────────────────────────────────────────────── */ .chosen{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .chosen .chip{ display:inline-flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:12px; background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 .5px var(--line); } .chosen .chip b{font:600 13px/1 var(--text);letter-spacing:-.01em} .chosen .chip s{text-decoration:none;font:600 12px/1 var(--text);color:var(--acc); font-variant-numeric:tabular-nums} .pick-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .pick-line span:first-child{font:700 19px/1 var(--tight);letter-spacing:-.03em} .pick-line span:last-child{font:600 10.5px/1 var(--text);letter-spacing:.15em; text-transform:uppercase;color:var(--mute)} /* Ряд мастеров — та же капсула, что и дни: две соседние строки переключателей не могут выглядеть по-разному. Раньше это был ряд отдельных плашек, уезжавший под край без всякого признака, что там есть продолжение. */ .masters{ display:flex;gap:2px;overflow-x:auto;scrollbar-width:none; margin:0;padding:4px;border-radius:999px; background:rgb(255 255 255 / .05); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07); -webkit-mask:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%); mask:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%)} .masters::-webkit-scrollbar{display:none} /* Подсказка — обычным регистром: капслок с разрядкой в длинной фразе читается как техническая ошибка, а не как совет. */ .hint{margin:0;font:400 12.5px/1.45 var(--text);letter-spacing:-.005em;color:var(--mute)} .stack-facts span{opacity:.4} /* ── ВТОРОЙ ШАГ ЗАПИСИ: КТО ВЫ ─────────────────────────────────────── Полей ровно два — имя и телефон. Всё остальное салон спросит сам, когда человек придёт; каждый лишний вопрос здесь стоит записи. */ .fld{display:grid;gap:6px} .fld span{font:600 10px/1 var(--text);letter-spacing:.16em;text-transform:uppercase; color:var(--mute)} .fld input{ appearance:none;width:100%;padding:13px 14px;border:0;border-radius:14px; background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 .5px var(--line); color:var(--ink);font:500 15px/1 var(--text);letter-spacing:-.01em; } .fld input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--acc)} .fld input::placeholder{color:rgb(242 243 245 / .3)} .agree{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .agree input{ appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;border-radius:6px; background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 1.5px var(--line); position:relative;cursor:pointer; } .agree input:checked{background:var(--acc);box-shadow:none} .agree input:checked::after{ content:"";position:absolute;inset:0;margin:auto;width:8px;height:4px; border-left:2px solid var(--acc-ink);border-bottom:2px solid var(--acc-ink); transform:rotate(-45deg) translate(1px,-2px); } .agree span{font:400 12.5px/1.35 var(--text);color:var(--mute)} .pick-head{margin:0;font-family:var(--tight);font-weight:600;font-size:19px; line-height:1.2;letter-spacing:-.025em;text-transform:none;color:var(--ink)} /* ── ГОТОВО ─────────────────────────────────────────────────────── */ .done-when{margin:8px 0 0;font:700 26px/1 var(--tight);letter-spacing:-.03em; text-transform:uppercase} .done-who{margin:10px 0 0;font:600 10.5px/1 var(--text);letter-spacing:.15em; text-transform:uppercase;color:var(--mute)} .done-payment{display:grid;gap:8px;padding:13px;margin-top:2px;border-radius:16px; background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 .5px var(--line)} .done-money{margin:0;font:800 30px/1 var(--tight);letter-spacing:-.045em} .done-details{margin:0;max-height:86px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere; padding:10px 11px;border-radius:12px;background:rgb(0 0 0 / .2);color:var(--ink); font:500 13px/1.35 var(--text)} /* Проба обязана говорить, что она проба: экран «вы записаны» без этой строки однажды примут за настоящую запись. */ .done-proba{margin:14px 0 0;font:600 10px/1.4 var(--text);letter-spacing:.14em; text-transform:uppercase;color:var(--acc)} a.btn{text-decoration:none} /* ── ПОДВАЛ ───────────────────────────────────────────────────────── Адрес и телефон — текстом: их читают и по ним звонят. Ниже — закон: ссылка на обработку данных обязана стоять на любом тарифе, а знак «работает на Nexo» показывается только там, где так решил сервер. */ .foot{padding:26px var(--pad) 0;display:grid;gap:10px} .foot-line{margin:0;display:flex;flex-wrap:wrap;gap:6px 16px; font:500 13px/1.4 var(--text);color:var(--mute)} .foot-line a{color:var(--ink);text-decoration:none; box-shadow:0 1px 0 var(--line)} .foot-law{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px; font:500 11.5px/1.4 var(--text);color:var(--mute)} .foot-law a{color:var(--mute);text-decoration:none;box-shadow:0 1px 0 var(--hair)} .foot-law i{font-style:normal;opacity:.4} .agree a{color:var(--ink);text-decoration:none;box-shadow:0 1px 0 var(--line)} /* ── РАССКАЗ САЛОНА ───────────────────────────────────────────────── Единственное место, где витрина говорит словами владельца, а не прайсом. Строка держится узкой: 60 знаков читаются, 90 — нет. */ .story{display:grid;gap:12px;max-width:34ch} .story p{margin:0;font:400 15px/1.5 var(--text);color:rgb(242 243 245 / .82)} .story h3{margin:6px 0 0;font:700 17px/1.2 var(--tight);letter-spacing:-.02em; text-transform:uppercase} /* Список правил салона. Маркер — точка акцентом, как и у абзаца-пункта: один приём на оба вида блока, которые присылает сервер. */ .story ul{margin:0;padding:0;list-style:none;display:grid;gap:8px} .story li{ position:relative;padding-left:16px; font:400 15px/1.5 var(--text);color:rgb(242 243 245 / .82); } .story li::before{ content:"";position:absolute;left:0;top:.62em;width:6px;height:6px; border-radius:50%;background:var(--acc); } .story .li{padding-left:16px;position:relative} .story .li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px; border-radius:50%;background:var(--acc)} /* Внешние материалы владельца: не встраиваем чужой хост во фрейм — он часто не открывается в Chrome и встроенных браузерах. Нативное аудио и явная ссылка на маршрут работают там, где видео-виджет молча пуст. */ .audio-demo{display:block;width:100%;min-height:42px;accent-color:var(--acc)} .route-video{margin-top:12px;min-height:56px;padding:13px 14px;border-radius:15px; display:flex;align-items:center;justify-content:space-between;gap:12px; color:var(--ink);text-decoration:none;background:rgb(255 255 255 / .055); box-shadow:inset 0 0 0 .5px var(--line)} .route-video span{font:600 14px/1.2 var(--text)} .route-video b{font:700 10px/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase; color:var(--acc);text-align:right} .route-video:active{transform:scale(.985)} /* Миниатюра в строке прайса: снимок остаётся при услуге и в списке. Каскадная лента красива на трёх-пяти кадрах, но на тринадцати превращается в частокол полос, где ничего не выбрать. */ /* В строке со снимком выносных точек нет: у названия в две-три строки они провисают посередине пустоты и читаются как мусор. Цену держит правый край, и этого достаточно. */ .row.withshot{gap:10px} .row.withshot .row-dots{display:none} .row.withshot .row-name{flex:1;min-width:0} /* Миниатюра = размытая заглушка сервера + настоящий снимок поверх. Размер задан жёстко: без него список прыгает, пока приходят кадры. */ .row-shot{ position:relative;flex:none;width:44px;height:44px;border-radius:12px; align-self:center;overflow:hidden;background:var(--panel) center/cover no-repeat; box-shadow:inset 0 0 0 .5px var(--line); } .row-shot img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:0;transition:opacity .35s var(--ease); } .row-shot img.here{opacity:1} .row.on .row-shot{box-shadow:0 0 0 1.5px var(--acc)} /* ── КОГДА СВОБОДНО ───────────────────────────────────────────────── Окна стоят на самой странице, а не только внутри карточки записи: «когда можно» — первый вопрос человека, и ответ на него не должен прятаться за нажатием. */ /* Ряды дней и времён на странице — та же капсула, что и в листе записи. Их было два вида: в листе капсула, на странице россыпь плашек. Один переключатель не может выглядеть по-разному в двух местах одной витрины — это и читается как «намешано». */ .when{display:grid;gap:12px} .when-days{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none; margin:0;padding:4px;border-radius:999px; background:rgb(255 255 255 / .05); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07); -webkit-mask:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%); mask:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%)} .when-days::-webkit-scrollbar{display:none} .when-times{display:flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:26px; background:rgb(255 255 255 / .05); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07)} .when-days:empty,.when-times:empty{display:none} /* ── ВАШИ ЗАПИСИ ──────────────────────────────────────────────────── Показываются только узнанному человеку. Предоплата живёт здесь, у самой записи: реквизиты, показанные один раз после записи, человек теряет, уходя в банк, — и записывается заново. */ .mine{display:grid;gap:10px} .mine-card{ padding:14px;border-radius:18px;display:grid;gap:6px; background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 .5px var(--line); } .mine-when{margin:0;font:700 17px/1.1 var(--tight);letter-spacing:-.02em;text-transform:uppercase} .mine-what{margin:0;font:500 13.5px/1.35 var(--text);color:rgb(242 243 245 / .8)} .mine-badge{margin:2px 0 0;font:600 10.5px/1 var(--text);letter-spacing:.14em; text-transform:uppercase;color:var(--acc)} .mine-pre{margin:4px 0 0;font:500 13px/1.4 var(--text);color:var(--ink)} .mine-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .mine-why{margin:6px 0 0} .mine-card.pack{background:rgb(255 255 255 / .03)} /* Предупреждение о предоплате — до кнопки, а не после записи. */ .warn{ margin:0;padding:11px 13px;border-radius:14px; font:500 12.5px/1.4 var(--text);color:var(--ink); background:oklch(from var(--acc) 26% calc(c * .5) h / .35); box-shadow:inset 0 0 0 .5px var(--line); } @supports not (color: oklch(from #fff l c h)){ .warn{background:rgb(255 255 255 / .07)} } /* ══════════════════════════════════════════════════════════════════ БЛОКИ, КОТОРЫЕ УЕХАЛИ НА БОЙ БЕЗ ОФОРМЛЕНИЯ Контакты, отзывы, абонементы, формы вопроса и входа были добавлены в разметку, а правил для них в этом файле не оказалось ни одного. Браузер нарисовал их по умолчанию: белое поле ввода на чёрной странице, список определений лесенкой, кнопки-ссылки вперемешку. Владелец назвал это одним словом — «грязь», и был прав. Здесь они получают тот же язык, что и остальная витрина: волосяные линии, разрядка в служебных метках, один акцентный цвет. ══════════════════════════════════════════════════════════════════ */ /* ── ЛЕНТА РАБОТ ─────────────────────────────────────────────────── */ .rail{ display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 6px; scrollbar-width:none; } .rail::-webkit-scrollbar{display:none} .shot{ margin:0;flex:0 0 auto;width:min(72vw,268px);scroll-snap-align:center; border-radius:var(--r);overflow:hidden;background:var(--panel); box-shadow:0 18px 40px -26px rgb(0 0 0 / .95); } .shot img{ display:block;width:100%;aspect-ratio:3/4;object-fit:cover; background-size:cover;background-position:center; } .shot figcaption{ padding:10px 12px 12px;font-size:13px;color:var(--mute); overflow-wrap:anywhere; } /* ── ФАКТЫ: АДРЕС, ЧАСЫ, ТЕЛЕФОН ───────────────────────────────── Был голый
: браузер отбивает
отступом слева, и адрес стоял лесенкой под своим же заголовком. Здесь это две колонки. */ /* КОНТАКТЫ — ЛИСТ ПРИБОРА, А НЕ СЕРАЯ КАРТОЧКА. Это была скруглённая плита с полосками внутри — та же форма, что у любого системного списка на телефоне. В языке версии у неё есть точный образ: технический лист, где слева метка, справа значение, между ними волосяная линия, а по углам — скобки рамки. Ничего не залито, читается быстрее, и это ровно тот приём, ради которого версия называется «Хром». Значение прижато вправо: глаз идёт по левому столбцу меток и останавливается на нужной строке, а не читает всё подряд. */ .facts{ position:relative;margin:0 0 18px;padding:2px 16px; display:grid;gap:0;border-radius:var(--r-card); background:rgb(255 255 255 / .038); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 1px 0 rgb(255 255 255 / .12); } .facts div{ display:grid;grid-template-columns:minmax(78px,.34fr) 1fr;gap:12px; align-items:baseline;padding:11px 4px;background:none; border-bottom:1px solid var(--hair); } .facts div:last-child{border-bottom:0} .facts dt{ margin:0;font:600 10px/1.3 var(--text);letter-spacing:.16em; text-transform:uppercase;color:var(--mute); } .facts dd{margin:0;font-size:15px;overflow-wrap:anywhere;text-align:right; font-variant-numeric:tabular-nums} /* ── ХОДЫ: МАРШРУТ, ЗВОНОК, СЕТИ ─────────────────────────────────── */ .ways{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px} .ways .btn{text-decoration:none} /* ── ФОРМА: ВОПРОС, ОТЗЫВ, ЗАЯВКА, ВХОД ──────────────────────────── */ .form{ display:grid;gap:12px;padding:16px;border-radius:18px; background:rgb(255 255 255 / .035); box-shadow:inset 0 0 0 1px var(--hair); } .form-head{ margin:0;font-family:var(--tight);font-weight:700;font-size:17px; letter-spacing:-.02em; } /* ПОЛЕ ВВОДА БЫЛО БЕЛЫМ ПРЯМОУГОЛЬНИКОМ. Правило писалось только для input, а