/** * Сторінка «Ціни» — мобільна гілка. Макет Figma 147:4577 (402×3720, iPhone 17). * Кожне число зняте з рендера figma-ref/mobile/147-4577.png (1 px рендера = 1 px макета). * * Картка пакета (.pkg*, .package-card) і крок каруселі належать мобільній гілці * «Головна: пакети» (12-home-packages.css) — її правила діють і тут. Виняток: * ті числа, які в цьому фреймі заміряні інакше, ніж на головній, перекриті нижче * під префіксом .page--tsiny (зсув картки SAFE HOME, gap/bottom низу картки). * Кожен випадок прокоментовано. Розкладка чипів сюди більше НЕ дублюється — * вона спільна й лежить у 12-home-packages.css, розділ 4. * * Вертикальна розкладка макета (від верху полотна): * герой 0 … 570 H1 cap-top 149, підзаголовок cap-top 357, кнопка 456…502.8 * дизайн проєкт 570 … 1027.5 заголовок cap-top 648, картки 724…864.5 і 886.5…1027 * «Для життя» заголовок cap-top 1145, стрілки 1201.7…1247.3, картки 1277…1727 * «Для бізнесу» заголовок cap-top 1827, стрілки 1914.7…1960.3, картки 1986…2436 * «Індивідуальні» заголовок cap-top 2536, стрілки 2622.7…2668.3, картки 2694…3144 * низ сторінки смужка контактів 3320.1, дисклеймер cap-top 3446, кнопка 3547.9…3594.7 * * Метрики шрифту MuseoSansCyrl (виміряні в браузері, на 100px): * cap 70 (вага 100) / 70.6 (вага 500), цифри 71.8, x-height 50, em-ascent 77, em-descent 23. * Звідси cap-top = верх рядкового боксу + (line-height − font-size)/2 + 0.07 × font-size. */ /* ============================================================ Герой */ /* Макет: секція 0…570. H1 45/48 у три рядки (cap-tops 149/197/245), підзаголовок 15/19 у чотири рядки (cap-tops 357/376/395/414), кнопка на всю колонку 342×46.8 з y=456. */ [data-layout="mobile"] .page--tsiny .page-hero { padding: 144.9px 0 0; min-height: 570px; } [data-layout="mobile"] .page--tsiny .page-hero__title { max-width: none; font-size: 45px; line-height: 48px; } [data-layout="mobile"] .page--tsiny .page-hero__text { margin-top: 65.6px; max-width: none; font-size: 15px; line-height: 19px; } [data-layout="mobile"] .page--tsiny .page-hero__cta { display: flex; margin-top: 25.6px; width: 100%; height: 46.8px; /* Рамка кнопки збігається 1:1 (456…503), а підпис у макеті стоїть на 1.1px нижче, ніж дає просте центрування рядка (чорнило 474.25…485.25 проти 473.25…484.0). При align-items:center падинг зсуває рядок на половину. */ padding: 2.2px 0 0; border-radius: 3.6px; font-size: 15px; line-height: 19.2px; } /* --------------------------------------------- Фон героя (фото + вікно світла) */ /* Кроп у мобільному макеті ІНШИЙ, ніж на десктопі: фото 607×455.25 зі зсувом (−146, −35) від верху полотна (знято кореляцією градієнтів рендера з оригіналом світлини, збіг по годинниках, узголів'ї, вазі й тумбі). Реєстрація перевірена ще раз кореляцією по смузі y=368…414, де вуаль майже прозора: зсув рівно (0, 0). «Вікно світла» заміряне, а не перенесене з десктопу. Метод: знімок із вимкненим ::after дає чисте фото P, рендер дає F, звідси альфа вуалі α = (P − F) / (P − 29) у кожному пікселі (кольори всіх шарів — те саме #1D1D1D). Поле α зняте по всьому герою (текст виключений), далі підігнані центр, радіуси й стопи за середньою абсолютною похибкою ЯСКРАВОСТІ. Десктопний еліпс 460×235 з центром (658, 303) у координатах фото гасив усю смугу y=0…45 полотна до чистого тла (α=1), тоді як у макеті фото видно вже з y=0 (середня яскравість рядка 35.5, у правому верхньому куті 53). Заміряний центр — (535, 302.5): по вертикалі майже той самий, а от по горизонталі на 123px лівіше, і сам еліпс більший (404.5×321). Профіль теж інший, ніж на десктопі: біля центру лишається 10% затемнення, а з 60% до 75% радіуса йде полиця (0.92 → 0.93) — саме вона тримає верх кадру світлим замість того, щоб добивати його до тла. Середня похибка по герою: 3.82 → 2.91 рівня яскравості. */ [data-layout="mobile"] .page--tsiny .tsiny-bg__top { top: -35px; left: -146px; width: 607px; height: 455.25px; } /* Ліве згасання. Самого еліпса мало: його ліва пола дає довгий м'який хвіст, і фото на сайті проступало там, де в макеті ще чисте тло. Заміряно на 4x (знімок з вимкненим ::after = чисте фото P, знімок з вуаллю = C, рендер = F; α = (P − F)/(P − 29), текст виключено маскою; з рендера знято постійний зсув фону +0.48 — Figma віддає #1D1D1D як 29.48, а не 29.00). Максимум яскравості по стовпцях у смузі героя: x макет було стало 0…96 29.3 30.4…45.6 29.0 108 30.1 45.9 29.0 120 32.3 46.0 29.0 Тобто до x=108 у макеті фото не видно взагалі, а на сайті воно світилось на 16 рівнів яскравіше за тло — це і є «видиме при Δ0». Додаємо ДРУГИЙ шар: горизонтальне згасання, суцільне до x=126 і гасне до нуля на x=166 (у координатах коробки фото +146: 272 і 312px). Профіль підібрано перебором «межа плато × ширина спаду × показник» з перевіркою КОЖНОГО варіанта справжнім знімком. Похибка яскравості проти рендера по зонах героя (середня по пікселю): уся зона 3.98 → 3.04, верхня смуга y<56 2.92 → 2.89, середина y 56…250 4.91 → 3.45, низ y≥250 3.04 → 2.42. Жодна зона не погіршилась. Еліпс НЕ чіпаємо: перевірено перебором центру (470…740 × 190…430) і радіусів (260…720 × 190…580) з підгонкою профілю під кожну геометрію — поточні 404.5×321 при (535, 302.5) лишаються найкращими для верхньої смуги, будь-яке звуження псує низ героя вдвічі сильніше. Правий верхній кут (x≥324) лишився на 7…13 рівнів темнішим за макет — одним еліпсом це не береться, див. звіт (openIssues). */ [data-layout="mobile"] .page--tsiny .tsiny-bg__top::after { background: linear-gradient(90deg, rgba(29, 29, 29, 1) 0, rgba(29, 29, 29, 1) 272px, rgba(29, 29, 29, 0.612) 280px, rgba(29, 29, 29, 0.325) 288px, rgba(29, 29, 29, 0.133) 296px, rgba(29, 29, 29, 0.029) 304px, rgba(29, 29, 29, 0) 312px), radial-gradient(ellipse 404.5px 321px at 535px 302.5px, rgba(29, 29, 29, 0.10) 0%, rgba(29, 29, 29, 0.33) 15%, rgba(29, 29, 29, 0.59) 30%, rgba(29, 29, 29, 0.78) 45%, rgba(29, 29, 29, 0.92) 60%, rgba(29, 29, 29, 0.93) 75%, rgba(29, 29, 29, 0.99) 90%, #1D1D1D 100%); } /* ------------------------------------------------------ Дизайн проєкт */ /* Дві плашки з двоколонкової сітки стають одним стовпчиком 342. Заголовок 35/39 (cap-top 648), картки 342×140.5 з проміжком 22. */ [data-layout="mobile"] .page--tsiny .design-project { padding-top: 74.05px; /* Межа секції в макеті — 1085, а низ другої картки — 1027. Порожні 58px належать секції «дизайн проєкт», а не наступній (у макеті секції стикуються без проміжку). Видимого вмісту це не рухає: рівно стільки ж знято з padding-top каруселі «Для життя». */ padding-bottom: 58px; } [data-layout="mobile"] .page--tsiny .page-section__title { font-size: 35px; line-height: 39px; } [data-layout="mobile"] .page--tsiny .design-project__grid { grid-template-columns: 1fr; gap: 22px; margin-top: 40.95px; } [data-layout="mobile"] .page--tsiny .dp-card { height: 140.5px; padding: 23px; border-radius: 3.6px; } [data-layout="mobile"] .page--tsiny .dp-card__title { font-size: 30px; line-height: 24.3px; } [data-layout="mobile"] .page--tsiny .dp-card__price { /* 8.5 замість 7.2: «ВІД» стало на 1.3px вужчим (кегль 13.4 → 12.6), а ліва межа рамки ціни в макеті стоїть на 82.25 і зсуватись не повинна. */ gap: 8.5px; margin-top: 24.7px; } [data-layout="mobile"] .page--tsiny .dp-card__from { position: relative; top: 1.9px; /* у макеті «ВІД» стоїть не по центру рамки, а трохи нижче її осі */ /* Чорнило «ВІД» у рендері 19.0 × 10.75 (x 53.5…72.5, y 814.75…825.5). Кегль 13.4 давав 20.0 × 11.5 — на 1px ширше й на 0.75px вище. 12.6 дає 18.8 × 10.8 і той самий верх чорнила. */ font-size: 12.6px; line-height: 10.6px; } [data-layout="mobile"] .page--tsiny .dp-card__value { height: 47px; /* Рамка збігається 1:1 (795.75…842.5 у макеті), а от сама ціна в макеті стоїть нижче: чорнило 803.5…831.0, тобто 7.75 від верху рамки й 11.5 від низу. Просте центрування рядка дає 4.78/14.72 — текст на 2.75px вище. padding-top при align-items:center зсуває рядок рівно на половину. */ padding: 5.5px 12.5px 0; border-radius: 3.6px; font-size: 30px; line-height: 21.3px; } /* ------------------------------------------------- Каруселі пакетів */ /* Своє тут тільки «обрамлення»: відступи секцій, заголовок 35/39 і стрілки 45.6 з гапом 34.8 (десктопні 76 і 58, помножені на 0.6). */ /* Межі секцій у макеті: герой 0…570, дизайн проєкт 570…1085, «Для життя» 1085…1776, «Для бізнесу» 1776…2485, «Індивідуальні» 2485…3233, низ 3233…3594. Секції в макеті стикуються, тож порожнеча між каруселями належить ВЕРХНІЙ секції. Переносимо її з padding-top наступної в padding-bottom попередньої: видимий вміст не рухається ні на піксель, зате межі збігаються з макетом. */ [data-layout="mobile"] .page--tsiny .packages--page { padding-top: 55.55px; /* було 113.55, мінус 58 у padding-bottom дизайн-проєкту */ padding-bottom: 49px; /* низ карток 1727 → межа секції 1776 */ } [data-layout="mobile"] .page--tsiny .packages--business { padding-top: 47.05px; } [data-layout="mobile"] .page--tsiny .packages--individual { padding-top: 47.05px; padding-bottom: 89px; /* низ карток 3144 → межа секції 3233 */ } /* Кінцевий стан каруселі. Те саме, що вже зроблено для головної в 12-home-packages.css, але там правило скоуповане на .home. main.js рахує maxShift від root.clientWidth, тобто від ширини .carousel. При 342 остання картка зупинялась на x=40.8 замість 30: справа лишалась порожня смуга там, де в першому кадрі підглядала наступна картка, а зліва від самого краю екрана (x=0…21) визирав шматок попередньої — поза колонкою 30. Звужуємо .carousel до ширини самої картки, і тоді maxShift = offsetLeft останньої картки: остання стає рівно туди ж, де в макеті стоїть перша. Стрічка не обрізається — overflow у .carousel немає, підглядання наступної картки до краю полотна лишається, перший кадр не рухається ні на піксель. Кінцевого кадру дизайнерка не малювала — див. звіт (notDrawn). */ [data-layout="mobile"] .page--tsiny .packages .carousel { width: 330px; } [data-layout="mobile"] .page--tsiny .packages .sec-head { row-gap: 0; } [data-layout="mobile"] .page--tsiny .packages .sec-head__lead { font-size: 35px; line-height: 39px; } [data-layout="mobile"] .page--tsiny .packages .arrows { gap: 34.8px; } [data-layout="mobile"] .page--tsiny .packages .arrows__btn { width: 45.6px; height: 45.6px; } [data-layout="mobile"] .page--tsiny .packages--life .sec-head__arrows { margin-top: 22.65px; margin-bottom: 0; } [data-layout="mobile"] .page--tsiny .packages--business .sec-head__arrows { margin-top: 14.44px; margin-bottom: 0; } [data-layout="mobile"] .page--tsiny .packages--individual .sec-head__arrows { margin-top: 13.86px; /* чорнило стрілок у макеті 2637.75 (у «Для життя» 1216.00 при верху боксу 1202.17, тобто зсув 13.83) */ margin-bottom: 0; } /* Ліва стрілка в неактивному стані. У макеті вона намальована суцільним #4F4D4D (пік яскравості 78 у всіх трьох каруселях). Тема ж на першому слайді ставить aria-disabled і додає до цього кольору ще й opacity .35 з main.css:159 — виходить пік 39, стрілка вдвічі тьмяніша за макет і на тлі 29 майже не видно. «Недоступність» у макеті передана самим кольором (ліва сіра / права біла), тож повертаємо повну непрозорість. Так само вже зроблено для тизера портфоліо в mobile/11-home-portfolio-calc.css. Правої це не стосується — у макеті намальовано лише початковий стан стрічки, а її згасання в кінці лишаємо. */ [data-layout="mobile"] .page--tsiny .packages .arrows__btn--prev[aria-disabled="true"] { opacity: 1; } /* ------------------------------------------------- Картка SAFE HOME, зсув */ /* У макеті вся група «Індивідуальні» стоїть на 1px правіше за дві попередні: рамка картки займає 31…360 (на y=2700 піксель x=30 — ще тло 20, x=31 — уже фото 41), а в «Для життя» і «Для бізнесу» — рівно 30…359; чорнило стрілок так само 261…277 і 341…358 проти 260…276 і 340…357. Схоже на випадковий зсув групи в Figma, але правило проєкту — 1:1, тож відтворюю (у звіті це окремим пунктом — питання до дизайнерки). transform на .package-card, а не margin на стрічці й не left: offsetLeft карток лишається цілим і тим самим, тож maxShift у main.js не змінюється (з position:relative+left:1px offsetLeft ставав 701 замість 700 і остання картка каруселі зупинялась на 1px лівіше, ніж у двох інших секціях). Внутрішній блок картки цей зсув НЕ підхоплює: лінії чипів у макеті йдуть 58.69…334.70 (крайні пікселі часткові: 56 і 90 при повних 116), кнопка й рамка ціни — так само. Від рамки картки (31…361) це 27.6 зліва й 26.4 справа, тобто саме на стільки зменшуємо поля тіла, щоб вміст лишився на місці. (Вертикальний зсув цієї ж картки на 4px угору вже врахований у 12-home-packages.css.) */ [data-layout="mobile"] .page--tsiny .packages--individual .package-card { transform: translateX(1px); } [data-layout="mobile"] .page--tsiny .packages--individual .sec-head__arrows { margin-right: -1px; } /* Поля тіла SAFE HOME. Було 27.6 / 26.4 — під старий рендер, де тіло картки стояло на колонці, а не на картці. У новому рендері (26.09) лінії чипів, рамка ціни й кнопка SAFE HOME ідуть 55…337 при картці 31…361, тобто рівно 24 / 24 від самої картки — як у решти (спільне правило в 12-home-packages.css), тож окреме перекриття більше не потрібне. */ /* ------------------------------------------ Правка дизайнерки 26.09: картки */ /* У новому рендері (figma-ref/v2/147-4577.png) зрушили САМІ СТРІЧКИ КАРТОК — заголовки, стрілки й межі секцій на місці (попіксельний diff старого й нового рендера дає зміни лише в прямокутниках карток). Краї карток (покриття крайнього пікселя; ліво/право — по рівному фону низу картки): було стало «Для життя» x 30…360, y 1277.50…1727.2 x 30…360, y 1272.12…1722.0 «Для бізнесу» x 30…360, y 1985.75…2435.7 x 31…361, y 1994.00…2444.0 «Індивідуальні» x 31…361, y 2694.12…3144.0 x 31…361, y 2697.00…3147.0 Сайт до правки: 1276.95 / 1986.03 / 2694.25. Зсуваємо лише стрічку: top у .carousel (position:relative уже є) не рухає ні заголовок, ні межі секцій, ні низ сторінки. Горизонталь «Для бізнесу» — тим самим прийомом, що й SAFE HOME вище (transform на картці, offsetLeft і maxShift незмінні). */ [data-layout="mobile"] .page--tsiny .packages--life .carousel { top: -4.83px; } [data-layout="mobile"] .page--tsiny .packages--business .carousel { top: 7.97px; } [data-layout="mobile"] .page--tsiny .packages--individual .carousel { top: 2.75px; } [data-layout="mobile"] .page--tsiny .packages--business .package-card { transform: translateX(1px); } /* ------------------------------------------------- Низ картки: ціна + кнопка */ /* Проміжок «рамка ціни → кнопка» в макеті однаковий у всіх трьох картках: BASE 1637.03→1653.84, BUSINESS 2345.72→2362.50, SAFE HOME 3050.16→3066.97 — 16.81, а не 17.2. Відступ від низу картки, навпаки, у кожної свій: BASE 26.34 (кнопка 1653.84…1700.66 при низі картки 1727), BUSINESS 26.7 (збігається), SAFE HOME 30.24. */ [data-layout="mobile"] .page--tsiny .pkg__foot { gap: 16.81px; } [data-layout="mobile"] .page--tsiny .packages--life .pkg__foot { bottom: 26.34px; } [data-layout="mobile"] .page--tsiny .packages--individual .pkg__foot { bottom: 30.24px; } /* --------------------------------------------------------- Чипи карток */ /* Тут більше нічого немає. Усі три правила, що стояли в цьому місці під префіксом .page--tsiny, тепер живуть у mobile/12-home-packages.css без скоупу сторінки й діють на «Ціни» так само: .pkg__feature { padding: 3.5px 6.6px 0 } — вертикаль чипа (було тут); .packages--life .pkg__row { width: fit-content; max-width: 100%; padding-right: 15.05px } .packages--life .pkg__feature { flex: 0 1 auto; min-width: 0; padding-left/right: 15.05px } Значення однакові, тож дублікати прибрано — звірено виміром: після зняття цих рядків геометрія всіх дев'яти пакетів на /tsiny/ не змінилась ні на піксель (порівняння getBoundingClientRect до і після, різниця 0.00 по всіх комірках). Числа на 147:4577 і на 138:3740 збігаються після зсуву зон: на головній уся зона пакетів стоїть на 2px правіше, картка SAFE HOME на «Цінах» — на 1px правіше своєї колонки (див. блок «Картка SAFE HOME, зсув» вище). Ширини комірок BUSINESS READY і SAFE HOME (ручні в макеті) — там само, у mobile/12-home-packages.css, розділ 4, блок «ВИПРАВЛЕНО 26.09». */ [data-layout="mobile"] .page--tsiny .packages--life .packages__track { margin-top: 29.2px; } [data-layout="mobile"] .page--tsiny .packages--business .packages__track { margin-top: 25.01px; } [data-layout="mobile"] .page--tsiny .packages--individual .packages__track { margin-top: 24.73px; } /* -------------------------------------------------------- Низ сторінки */ /* Сітка 594+627 розпадається в один стовпчик 342: смужка контактів, дисклеймер, кнопка. Порядок у DOM уже такий, як у макеті. */ [data-layout="mobile"] .page--tsiny .page-outro { padding-top: 87.93px; } /* межа секції 3233, було 176.93 від 3144 */ [data-layout="mobile"] .page--tsiny .page-outro__inner { grid-template-columns: 1fr; row-gap: 30.92px; justify-content: start; } [data-layout="mobile"] .page--tsiny .contact-strip { gap: 22.15px; } [data-layout="mobile"] .page--tsiny .contact-strip__row { column-gap: 18.2px; row-gap: 11.05px; } /* Іконки зменшені не на 0.6, а приблизно на 0.72: конверт 36 → 26, слухавка 30 → 22 (по чорнилу рендера: конверт 22×18 з x=31, слухавка 22×22 з x=29). */ [data-layout="mobile"] .page--tsiny .contact-strip__row > svg { width: 24.6px; height: 24.6px; } [data-layout="mobile"] .page--tsiny .contact-strip__row > svg.icon--bleed { width: 20.2px; height: 20.2px; } [data-layout="mobile"] .page--tsiny .contact-strip a { position: relative; top: 1.5px; /* у макеті текст стоїть трохи нижче осі іконки, а не точно по її центру */ font-size: 15px; line-height: 19.2px; } [data-layout="mobile"] .page--tsiny .page-outro__col { gap: 28.77px; } [data-layout="mobile"] .page--tsiny .page-outro__note { font-size: 15px; line-height: 19px; } [data-layout="mobile"] .page--tsiny .page-outro .btn { display: flex; height: 46.8px; padding: 2px 0 0; /* підпис у макеті на 1px нижче осі рамки: 3563.75…3577.0 проти 3562.75…3576.0 */ border-radius: 3.6px; font-size: 15px; line-height: 19.2px; } /* Нижнього фото сторінки (pg_extra_image_2) у мобільному фреймі немає зовсім. */ [data-layout="mobile"] .page--tsiny .page-bottom-photo { display: none; } /* ------------------------------------------------------------ Затемнення */ /* Десктопні сім шарів задані в абсолютних px під 1728×6919 і на 402 промахуються. У мобільному рендері видиме затемнення одне: широка м'яка чорна пляма, що починається на y≈1000, має западину на y≈1420…1500 і виходить на плато нижче y≈1700 (яскравість тла 29 → 16 → 21 з краю, 17 у центрі). Відтворюю її одним шаром: вертикальний градієнт × горизонтальна маска. */ [data-layout="mobile"] .veils--tsiny .veil--2, [data-layout="mobile"] .veils--tsiny .veil--4, [data-layout="mobile"] .veils--tsiny .veil--6 { display: none; } /* Затемнення має перейти і в проміжок перед футером, інакше на y=3594.7 утворюється видима сходинка 21 → 29. */ [data-layout="mobile"] .page--tsiny .tsiny-bg { inset: 0 0 -200px; } [data-layout="mobile"] .veils--tsiny .veil--7 { left: 0; top: 1000px; width: 402px; height: 2790px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.10) 60px, rgba(0, 0, 0, 0.18) 100px, rgba(0, 0, 0, 0.25) 140px, rgba(0, 0, 0, 0.32) 180px, rgba(0, 0, 0, 0.37) 220px, rgba(0, 0, 0, 0.41) 260px, rgba(0, 0, 0, 0.46) 300px, rgba(0, 0, 0, 0.50) 340px, rgba(0, 0, 0, 0.53) 380px, rgba(0, 0, 0, 0.575) 420px, rgba(0, 0, 0, 0.575) 500px, rgba(0, 0, 0, 0.53) 540px, rgba(0, 0, 0, 0.485) 580px, rgba(0, 0, 0, 0.445) 620px, rgba(0, 0, 0, 0.41) 660px, rgba(0, 0, 0, 0.37) 700px, rgba(0, 0, 0, 0.37) 2720px, /* до кінця фрейму 3720 затемнення в макеті ще тримається */ rgba(0, 0, 0, 0) 2790px); /* далі — плавний вихід у проміжок перед футером */ -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0, #000 120px, #000 240px, rgba(0, 0, 0, 0.75) 360px, rgba(0, 0, 0, 0.55) 402px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0, #000 120px, #000 240px, rgba(0, 0, 0, 0.75) 360px, rgba(0, 0, 0, 0.55) 402px); } /* Розділювач смужки контактів. У макеті лінія 1.2px, rgba(255,255,255,0.32), тобто «чорнила» 1.2 × 0.32 = 0.384 повної альфи. У рендері обидві лінії однакові: 66/56 і 75/56 на тлі 17.97, тобто 0.364 і 0.403 — розкид від того, на якій дробовій позиції стоїть лінія. Коробку 1.2px Chromium округлює до цілих пікселів, і то НЕ тільки при dpr 1: при dpr 3 перша лінія виходила 3 приладових пікселі, друга — 6 (перевірено знімком --dpr 3), тобто 1px і 2px у CSS-пікселях. Лінії ставали різні за вагою, чого в макеті немає, а нижня важила вдвічі за макетну. Тому робимо так само, як із лініями чипів у 12-home-packages.css: цілий піксель висоти, а дробову частину віддаємо альфі — 1 × 0.384. Так обидві лінії однакові, а сумарне чорнило збігається з макетом при будь-якому dpr (при dpr 3 це 3 × 0.384 = 1.152, рівно як 3.6 × 0.32 у макеті). */ [data-layout="mobile"] .page--tsiny .contact-strip__row::after { height: 1px; background: rgba(255, 255, 255, 0.384); }