/* ============================================================ 10-КНОПКИ КОНТАКТОВ В ШАПКЕ (новый дизайн, ТОЛЬКО ДЕСКТОП) Две кнопки слева в шапке: «צרו איתנו קשר» и WhatsApp. Макет: Figma 3271:196, компоненты 3271:254 и 3271:263. Мобильная и планшетная версии НЕ трогаются: там остаётся прежняя кнопка с текстом «שלחו פנייה», которая появляется при прокрутке. Поэтому весь файл целиком завёрнут в @media (min-width: 1280px). ПОЧЕМУ ИМЕННО 1280. До этой ширины сайт живёт по планшетному макету: там все размеры считаются от 768, и кнопка новой ширины (230 + 20 + 48) наезжает на логотип. Планшет - не десктоп, а правка была заказана только для десктопа, поэтому граница ровно там, где начинается десктопный макет. ЧТО ПРОИСХОДИТ ПРИ НАВЕДЕНИИ (микроанимации из макета): Кнопка белая с красной рамкой → заливается красным текст и стрелка красные → становятся белыми хвост стрелки удлиняется на 5 px, голова остаётся на месте WhatsApp красный квадрат → темнее (#b70307) иконка 22.8 → вырастает до 26.22 ХИТРОСТЬ СО СТРЕЛКОЙ. Стрелка нарисована сразу длинной, а лежит в окошке с обрезкой. Окошко расширяется - и хвост как будто вырастает, хотя сама картинка не меняется и не искажается. Тот же приём, что и в старых кнопках сайта. Цвета: #d41318 - фирменный красный, #b70307 - его тёмный оттенок для наведения. Оба из макета. ============================================================ */ /* ------------------------------------------------------------ ЧТО ПОКАЗЫВАЕМ, А ЧТО ПРЯЧЕМ По умолчанию (планшет и мобильный) кнопка выглядит как раньше: надпись «שלחו פנייה» и прежняя стрелка-иконка. Новых частей на экране нет. С 1280 всё наоборот: показываем новую надпись и новую стрелку, прежние прячем. ------------------------------------------------------------ */ .hbtn__text_new, .hbtn__arrow { display: none; } @media (min-width: 1280px) { .hbtn__text_new { display: block; } .hbtn__arrow { display: block; } .hbtn__text_old, .hbtn__arrow_old { display: none; } } @media (min-width: 1280px) { /* ---------------------------------------------------------- БЛОК ДВУХ КНОПОК Ширина блока = кнопка 230 + зазор 20 + WhatsApp 48 ---------------------------------------------------------- */ /* Зазор до иконки WhatsApp - 12. В макете было 20, но с 12 пара читается как одна группа, так решили на просмотре. */ .header-button { width: calc(230 / var(--device-size) * 100vw); margin-right: calc(12 / var(--device-size) * 100vw); } /* ---------------------------------------------------------- КНОПКА «צרו איתנו קשר» ---------------------------------------------------------- */ /* ПРО ОТСТУПЫ И ПЕРЕНОС. В макете внутри кнопки ровно 32 пикселя слева и справа, а надпись со стрелкой занимает остаток впритык, пиксель в пиксель. У такой посадки нет запаса: стоит шрифту подгрузиться чуть иначе или системе округлить букву - и строка не влезает, а браузер переносит её на вторую. Кнопка при этом разъезжается, текст ломается пополам. Лечится двумя строчками: запрещаем перенос совсем и убавляем боковые отступы до 24. Надпись стоит по центру, так что при обычной отрисовке видимой разницы нет - отступы просто дают запас, которого не хватало. */ /* ПОЧЕМУ ПРИЖИМАЕМ ВПРАВО, А НЕ ПО ЦЕНТРУ. По макету при наведении надпись обязана стоять на месте, а двигаться должна только стрелка - она вырастает влево. Если содержимое стоит по центру, то любое изменение его ширины растаскивает обе половины, и текст уезжает вправо. Прижав всё к правому краю (в правостороннем тексте это flex-start), мы прибиваем текст к отступу намертво: что бы ни делала стрелка, надпись не шелохнётся. */ .header-button .button-arrow { justify-content: flex-start; width: 100%; height: calc(48.39 / var(--device-size) * 100vw); padding: 0 calc(32 / var(--device-size) * 100vw); gap: calc(14.609 / var(--device-size) * 100vw); white-space: nowrap; /* РАМКА НАРИСОВАНА ТЕНЬЮ, А НЕ border. Причин две. Первая: в макете толщина 1.5, а border такого не умеет - браузер округляет его до целого пикселя, и полтора превращаются в один. Тень рисуется как есть. Вторая: border входит в размеры коробки, и при наведении, когда он утолщается до 2, вся начинка кнопки сдвигается. Тень же лежит поверх и ничего не двигает - а надпись по макету обязана стоять намертво. */ border: none; box-shadow: inset 0 0 0 calc(1.5 / var(--device-size) * 100vw) #d41318; border-radius: calc(4 / var(--device-size) * 100vw); background-color: #fff; color: #d41318; font-family: "Noto Sans Hebrew", serif; font-size: calc(21 / var(--device-size) * 100vw); font-weight: 500; letter-spacing: calc(-0.105 / var(--device-size) * 100vw); line-height: calc(29.217 / var(--device-size) * 100vw); transition: box-shadow 0.3s ease-out, color 0.3s ease-out; } /* НАВЕДЕНИЕ. Заливка не меняется - кнопка остаётся белой. Темнеет рамка и текст, и рамка чуть толстеет: 1.5 → 2. И то и другое - одна тень, поэтому перетекает плавно. */ .header-button .button-arrow:hover, .header-button .button-arrow.is_hover { box-shadow: inset 0 0 0 calc(2 / var(--device-size) * 100vw) #b70307; color: #b70307; } /* Нажатие - лёгкое притухание */ .header-button .button-arrow:active { opacity: 0.8; } /* ---------------------------------------------------------- СТРЕЛКА В покое 22.957 в длину, при наведении 27.957. Растёт влево: голова уезжает от текста, хвост у текста стоит на месте. КАК ЭТО СДЕЛАНО. Раньше стрелка лежала в окошке с обрезкой, и окошко расширялось. Приём рабочий, но растил хвост вправо и заодно двигал надпись. Теперь иначе. Место под стрелку всегда одной ширины - по длинному, наведённому состоянию. Значит от неё никогда ничего не сдвигается. А сама стрелка разобрана на две части, и каждая живёт своей жизнью: хвост нарисован во всю длину, а в покое сжат по горизонтали до 0.82116 - это 22.9565 от 27.9565. Сжимается вокруг своего правого конца, поэтому правый конец стоит, а левый подтягивается к голове. голова в покое сдвинута вправо на 5 - ровно туда, где её ждёт укоротившийся хвост. При наведении оба смещения уходят в ноль, и стрелка распрямляется во всю длину. Оба движения - чистая отрисовка, без пересчёта раскладки страницы. Поэтому идёт гладко. ---------------------------------------------------------- */ .hbtn__arrow { position: relative; display: block; flex-shrink: 0; width: calc(27.957 / var(--device-size) * 100vw); height: calc(12.34 / var(--device-size) * 100vw); } /* Картинка на единицу больше места с каждой стороны: линия рисуется по центру контура, и её половина выходит за края. Пусть выходит - обрезать здесь больше нечего. */ .hbtn__arrow svg { position: absolute; top: calc(-1 / var(--device-size) * 100vw); left: calc(-1 / var(--device-size) * 100vw); display: block; width: calc(29.9565 / var(--device-size) * 100vw); height: calc(14.3403 / var(--device-size) * 100vw); overflow: visible; color: inherit; } /* ХВОСТ. Нарисован во всю длину, а в покое сжат по горизонтали до 0.82116 - это 22.9565 от 27.9565. Точка, вокруг которой идёт сжатие, стоит на правом конце линии, поэтому правый конец не двигается, а левый подтягивается к голове. Сжимается только ширина, толщина линии не меняется: она задана поперёк. Скруглённый кончик слева при этом становится чуть уже - на глаз при толщине в два пикселя это незаметно. Раньше здесь была штриховка (stroke-dasharray) - приём изящнее, но он по-разному понят разными браузерами, и в Safari хвост пропадал целиком. Сжатие понимают все одинаково. */ .hbtn__arrow-shaft { transform: scaleX(0.82116); transform-box: view-box; transform-origin: 28.9565px 7.17013px; /* правый конец линии */ transition: transform 0.3s ease-out; } /* ГОЛОВА. В покое сдвинута вправо на 5 - ровно туда, где её ждёт укороченный хвост. */ .hbtn__arrow-head { transform: translateX(5px); transform-box: view-box; transition: transform 0.3s ease-out; } .header-button .button-arrow:hover .hbtn__arrow-shaft, .header-button .button-arrow.is_hover .hbtn__arrow-shaft { transform: scaleX(1); } .header-button .button-arrow:hover .hbtn__arrow-head, .header-button .button-arrow.is_hover .hbtn__arrow-head { transform: translateX(0); } /* ---------------------------------------------------------- КНОПКА WHATSAPP Класс называется header-phone по историческим причинам - когда-то там был телефон. ---------------------------------------------------------- */ .header-phone { width: calc(48 / var(--device-size) * 100vw); height: calc(48 / var(--device-size) * 100vw); border-radius: calc(4 / var(--device-size) * 100vw); background-color: #d41318; transition: background-color 0.3s ease-out; } /* ПОЧЕМУ ЗДЕСЬ transform, А НЕ ШИРИНА С ВЫСОТОЙ. Иконка при наведении подрастает с 22.8 до 26.22 - это ровно в 1.15 раза. Раньше рост был задан прямо размерами картинки, и получалось дёрганно: на каждом кадре браузер заново считал раскладку кнопки, заново центровал иконку и заново отрисовывал её из вектора. Тридцать раз в секунду - отсюда и рывки. transform: scale ничего не пересчитывает. Картинка отрисована один раз, а дальше просто масштабируется - этим занимается видеокарта. Плавно на любой машине. transform-origin: center - чтобы иконка росла из середины во все стороны, а не вбок от левого верхнего угла. */ .header-phone svg { width: calc(22.8 / var(--device-size) * 100vw); height: calc(22.8 / var(--device-size) * 100vw); transform-origin: center; transition: transform 0.3s ease-out; will-change: transform; } @media (hover: hover) { .header-phone:hover { background-color: #b70307; } /* иконка подрастает в 1.15 раза: 26.22 / 22.8 */ .header-phone:hover svg { transform: scale(1.15); } } .header-phone:active { opacity: 0.8; } }