/** * Мобільна гілка — три каруселі пакетів на головній (фрейм 138:3740, секції 7–9) * і сама картка пакета (спільна з «Цінами», фрейм 147:4577). * * Полотно 402, контент 342 (поля 30). Усі числа зняті з рендерів * figma-ref/mobile/138-3740.png і figma-ref/mobile/147-4577.png піксельно; * там, де вони збігаються з десктопом ×0.6, це позначено в коментарі. * * Правила гілки: кожен селектор із префіксом [data-layout="mobile"], px без vw/%. */ /* ======================================================= 1. Ритм секцій */ /* Макет: чорнило заголовків 3978 / 4790 / 5564, низ карток 4686.4 / 5458.4 / 6182.4. Секції не мають padding-bottom — проміжок дає padding-top наступної. 4.55 — від верху текстового боксу до верху великої літери (35/39.2). */ [data-layout="mobile"] .home .packages { padding-top: 130.3px; } /* низ калькулятора 3844.2 */ [data-layout="mobile"] .home .packages--business { padding-top: 100.1px; } [data-layout="mobile"] .home .packages--individual{ padding-top: 101.9px; } /* ================================================== 2. Заголовок секції */ /* Заголовок, акцент і стрілки — ритм САМЕ ГОЛОВНОЇ, тому зі скоупом .home: на «Цінах» у цих блоків свої відступи (фрейм 147:4577) і ними займається агент сторінки. Спільними лишаються тільки правила картки (.pkg*, .package-card) і крок стрічки. */ [data-layout="mobile"] .home .packages .sec-head { row-gap: 0; } /* Макет: «ПАКЕТНІ / РІШЕННЯ» і «ІНДИВІДУАЛЬНІ / РІШЕННЯ» — по два рядки. «Пакетні рішення» на 35px влазить в 342 одним рядком, тому перенос задано шириною текстової ноди, як у Figma. */ [data-layout="mobile"] .home .packages .sec-head__lead { max-width: 275px; font-size: 35px; line-height: 39.2px; } [data-layout="mobile"] .home .packages .sec-head__accent { max-width: none; margin-top: 10.1px; font-size: 35px; line-height: 40.2px; /* «для особистого простору» — 2 рядки */ } [data-layout="mobile"] .home .packages--business .sec-head__accent { margin-top: 11.7px; line-height: 35px; /* «для бізнесу» — один рядок */ } /* Стрілки: бокс 45.4 (76×0.6), гап 35.3, праворуч над картками */ [data-layout="mobile"] .home .packages .sec-head__arrows { margin-top: 18.65px; margin-bottom: 29.1px; } [data-layout="mobile"] .home .packages--business .sec-head__arrows { margin-top: 21.45px; margin-bottom: 30px; } [data-layout="mobile"] .home .packages--individual .sec-head__arrows { margin-top: 18.35px; margin-bottom: 30px; } [data-layout="mobile"] .home .packages .arrows { gap: 35.3px; } [data-layout="mobile"] .home .packages .arrows__btn { width: 45.4px; height: 45.4px; } /* Те саме, що в портфоліо (11-home-portfolio-calc.css): у макеті обидві стрілки намальовані суцільно, «недоступність» лівої передана самим кольором (сіра #4F4D4D = 79 проти білої 255). Десктопне main.css:159 гасить її до 0.35, і під чорною вуаллю зони пакетів вона падає з 79 до 38 — майже зникає. Повертаємо повну непрозорість; правої це не стосується (гасне в кінці стрічки). */ [data-layout="mobile"] .home .packages .arrows__btn--prev[aria-disabled="true"] { opacity: 1; } /* ========================================================= 3. Карусель */ /* Макет: 1 картка 330 у кадрі + 19.6 наступної. Крок 350.4 (гап 20.4). */ [data-layout="mobile"] .packages__track { gap: 20.4px; } [data-layout="mobile"] .home .packages .packages__track { margin-top: 0; } [data-layout="mobile"] .package-card { flex: 0 0 330px; } /* На головній уся карусель (стрічка + стрілки) зсунута на 2px праворуч від колонки: картка стоїть на x=32, права стрілка доходить до 374. На «Цінах» того зсуву немає (картка на 30, стрілка до 372) — тому скоуп .home. */ /* Не тільки стрічка — уся зона пакетів у фреймі стоїть на колонці 32…374, а не 30…372: заголовок, мідний акцент і стрілки разом із картками. Заміряно по горизонтальних центроїдах чорнила (макет проти сайту до правки): «ПАКЕТНІ» для бізнесу 101.82 / 99.87, «РІШЕННЯ» 110.56 / 108.66, «для бізнесу» 261.65 / 259.88, «ІНДИВІДУАЛЬНІ» 158.01 / 155.87 — усюди 2px; у першій секції дизайнерка поставила заголовок на 1px лівіше (100.94 / 99.87), тому там після зсуву лишається +0.9 — у межах пікселя. Зсуваємо весь .sec-head і повертаємо стрілки на місце: вони вже праворуч у самому хедері, окремий margin їм більше не потрібен (макет: ліва 262…278, права 342…359; сайт після зсуву — те саме). */ [data-layout="mobile"] .home .packages .sec-head { margin-left: 2px; margin-right: -2px; } [data-layout="mobile"] .home .packages .carousel { margin-left: 2px; margin-right: -2px; } /* Правка дизайнерки 26.09 (figma-ref/v2/138-3740.png): у всіх трьох каруселях зрушила САМА СТРІЧКА КАРТОК — заголовки, стрілки, вуаль зони й сусідні секції лишились піксель у піксель (попіксельний diff старого й нового рендера дає зміни лише в прямокутниках карток x 30…401). Заміряно по краях карток (покриття крайнього пікселя; ліво/право — по рівному фону низу картки): було (старий рендер) стало «Для життя» x 32…362, y 4236.4…4686.4 x 31…361, y 4232.13…4681.9 «Для бізнесу» x 32…362, y 5008.4…5458.4 x 32…362, y 4997.0…5447.0 «Індивідуальні» x 32…362, y 5732.4…6182.4 x 30…360, y 5737.0…6187.0 Наступна картка в стрічці зсунулась разом із першою (проміжок той самий). Тож і тут зсуваємо лише стрічку: position:relative у .carousel уже є (home.css), top зсуває її без жодного впливу на потік — заголовок, стрілки й наступна секція не рухаються, рівно як у макеті. Горизонталь — margin-left самої .carousel (offsetLeft карток рахується від неї, maxShift у main.js не змінюється). */ [data-layout="mobile"] .home .packages--life .carousel { top: -4.27px; margin-left: 1px; margin-right: -1px; } [data-layout="mobile"] .home .packages--business .carousel { top: -11.38px; } [data-layout="mobile"] .home .packages--individual .carousel { top: 4.62px; margin-left: 0; margin-right: 0; } /* Кінцевий стан каруселі. main.js рахує maxShift від root.clientWidth, тобто від ширини .carousel. При 342 остання картка зупинялась на x=44.2 (правий край 374.2): справа лишалась порожня смуга 28px там, де в першому кадрі підглядала наступна картка, а зліва від самого краю екрана визирав шматок попередньої — поза колонкою 30. Звужуємо .carousel до ширини самої картки (330), і тоді maxShift = offsetLeft останньої картки: остання картка стає рівно туди ж, де в макеті стоїть перша (x=32..362). Стрічка не обрізається — у .carousel немає overflow, підглядання наступної картки до краю полотна лишається. Кінцевого кадру дизайнерка не малювала — див. звіт. */ [data-layout="mobile"] .home .packages .carousel { width: 330px; } /* ==================================================== 4. Картка пакета */ /* Усе всередині — рівно ×0.6 від десктопу (550×750 → 330×450). */ [data-layout="mobile"] .pkg { height: 450px; border-radius: 3.6px; } /* --- Фото і його згасання в фон: десктопні числа ×0.6 --- */ [data-layout="mobile"] .pkg__media { height: 191.4px; } /* 319 */ [data-layout="mobile"] .pkg--comfort-living .pkg__media { height: 216px; } /* 360 */ [data-layout="mobile"] .pkg--sweet-home .pkg__media { height: 206.4px; } /* 344 */ [data-layout="mobile"] .pkg--business-ready .pkg__media { height: 220.2px; } /* 367 */ [data-layout="mobile"] .pkg--rent-ready .pkg__media { height: 219.6px; } /* 366 */ [data-layout="mobile"] .pkg--resale-ready .pkg__media { height: 213.96px; } /* 356.6 */ [data-layout="mobile"] .pkg--energy-home .pkg__media { height: 216.6px; } /* 361 */ /* Кадрування фото картки BASE. Тема дає object-fit:cover з типовим object-position:50% — центр по горизонталі. У макеті кадр зсунутий вліво: зміряно кореляцією вмісту фото (сайт проти рендера) на 147-4577@4x і на 138-3740 — на ОБОХ сторінках однаково, зсув чистий, без масштабу: tsiny BASE dx +9.19 px (4x: 36.75), dy −0.25 — у межах округлення картки home BASE dx +9.19 px, dy −0.25 по чвертях фото: ліва 8.75, права 9.25 → різниця 0.5 px(4x) на 800 px(4x), тобто 0.06 % — масштаб той самий, це саме паралельний зсув. Переповнення cover заміряне в браузері (знімки при object-position 0 % і 100 %, кореляція між ними): рівно 35.0 px. При 50 % ліворуч зрізається 17.5, у макеті — 17.5 − 9.19 = 8.31, тобто 8.31 / 35.0 = 23.75 %. Відсоток, а не calc(50 % + 9.19px): фото прийде з адмінки, і при іншій пропорції довжина зсувала б кадр навіть там, де переповнення немає. Решти дев'яти карток це не стосується: у трьох намальованих у макеті (BASE, BUSINESS READY, SAFE HOME) горизонтальний зсув є ЛИШЕ в BASE (BUSINESS READY дає dx 0 при переповненні 0.3 px, SAFE HOME — dx 0, там фото ширше за пропорцією й cover ріже по вертикалі). */ [data-layout="mobile"] .pkg--base .pkg__img { object-position: 23.75% 50%; } [data-layout="mobile"] .pkg__media::after { top: 134.76px; height: 315px; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 10.32px, var(--bg) 54.42px); } [data-layout="mobile"] .pkg--sweet-home .pkg__media::after { top: 90.36px; height: 359.64px; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 11.82px, var(--bg) 62.1px); } [data-layout="mobile"] .pkg--business-ready .pkg__media::after { top: 105px; height: 345px; background: linear-gradient(180deg, rgba(29, 29, 29, 0) -27.54px, var(--bg) 115.62px); } [data-layout="mobile"] .pkg--rent-ready .pkg__media::after { top: 112.38px; height: 337.62px; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 31.92px, var(--bg) 113.1px); } [data-layout="mobile"] .pkg--resale-ready .pkg__media::after { top: 121.44px; height: 328.56px; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 11.16px, var(--bg) 96.78px); } [data-layout="mobile"] .pkg--safe-home .pkg__media::after { top: 116.58px; height: 333.42px; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 10.92px, var(--bg) 57.6px); } [data-layout="mobile"] .pkg--smart-home .pkg__media::after { top: 82.86px; height: 367.14px; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 12.06px, var(--bg) 63.42px); } [data-layout="mobile"] .pkg--energy-home .pkg__media::after { top: 142.8px; height: 307.2px; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 10.08px, var(--bg) 53.04px); } /* --- Текстовий блок --- */ /* Макет: чорнило назви на 180.5 від верху картки, верх сітки чипів на 218. */ /* Поля тіла картки — 24 з обох боків (тіло 282) у ВСІХ картках. До правки дизайнерки 26.09 так було лише в BUSINESS READY, а BASE і SAFE HOME мали 27 (тіло 276). У новому рендері всі три намальовані картки на обох сторінках однакові: лінії чипів, рамка ціни й кнопка йдуть від 24 до 306 від лівого краю картки (BASE: лінія ряду 24…267, рамка ціни 24…306; SAFE HOME: лінії 24…306; BUSINESS READY — без змін). Решта семи пакетів у макеті не намальована і бере те саме правило. */ [data-layout="mobile"] .pkg__body { left: 24px; right: 24px; top: 183.9px; gap: 14.4px; } /* Індивідуальні: увесь блок на 4px вище (заміряно: назва 176.6, чипи 213.6) */ [data-layout="mobile"] .packages--individual .pkg__body { top: 179.9px; } [data-layout="mobile"] .pkg__title { font-size: 30px; line-height: 21px; } /* --- Чипи: комірка 26, лінії 0.6 --- */ /* Товщина. У макеті лінії чипів дають 116 на фоні 30, тобто 0.6 px кольору --line (rgba(255,255,255,0.61)): 30 + 0.6 × 0.61 × 225 = 112…116. border-width: 0.6px Chrome при dpr 1 округляє до цілого пікселя і малює всі 0.61 альфи — 167 замість 116. Тримаємо 1px, а частку пікселя віддаємо альфою. Рендер дає 116 на фоні 30 → 0.382 (експортер Figma кладе трохи більше покриття, ніж «чисті» 0.61 × 0.6 = 0.366). Те саме число виміряне і в 138:3740 (y=4480), і в 147:4577 (y=1521). */ [data-layout="mobile"] .pkg__row { height: 26px; border-bottom-width: 1px; border-bottom-color: rgba(255, 255, 255, 0.382); } /* Висоту тримає ряд, комірка тягнеться — так крок рядів лишається рівно 26. Історія (старий рендер, до 26.09) — padding-top 3.5: у макеті чорнило чипа стоїть на 1.27px вище, ніж дає падинг 6 (центроїди чорнила по семи рядах трьох карток головної: 4468.79/4494.77 у макеті проти 4470.14/4496.11 на сайті, BUSINESS READY 5241.00/5266.53/5292.74 проти 5242.25/5267.81/5293.98, SAFE HOME 5960.99/5987.00 проти 5962.27/5988.14). При align-items:center падинг зсуває рядок на половину свого значення, тож 6 → 3.5 піднімає на 1.25. Висота ряду від цього не змінюється — її тримає сам ряд. */ /* ПЕРЕМІРЯНО 26.09 по новому рендеру (картки дизайнерка переставила на цілі пікселі, тож і субпіксельна фаза тексту стала інша). Метод: вертикальний центроїд маски чорнила кожного ряду чипів відносно верху картки, сайт проти макета, на ОБОХ сторінках (у головної й «Цін» різна дробова частина верху картки, а Chrome ставить рядок тексту на цілий піксель — один і той самий зсув дає різне округлення). Перебір зсуву тексту −1.0…+0.5 кроком 0.25: padding-top 3.5 (було) ряди нижче макета на +0.24…+0.81 padding-top 2.0 −0.17…−0.75 (усі 8 рядів трьох карток, обидві сторінки), середнє |Δ| 0.42 проти 0.56 — найкраще. Кращого за ±0.75 цілопіксельний рядок не дає: BASE і BUSINESS READY у макеті стоять у фазі .5, SAFE HOME — на 0.47 нижче своїх ліній. */ [data-layout="mobile"] .pkg__feature { height: auto; padding: 2px 6.6px 0; font-size: 10.8px; line-height: 15.9px; } [data-layout="mobile"] .pkg__feature + .pkg__feature { border-left-width: 1px; border-left-color: rgba(255, 255, 255, 0.382); } /* Горизонталь чипів у каруселі «Для життя». У макеті комірки цих карток НЕ розтягнуті на всю ширину блоку: вони обхоплюють текст із полем 15.05px і притиснуті вліво. Заміряно на 138:3740 (картка BASE): ряд 1 — розділювач центром на 162.0 (пікселі 161/162 з ink 35/33), текст «Проєктування» 75…145, «Інженерні системи» 178…272; ряд 2 — розділювач на 170.0 (169/170 = 35/33), текст «Чорнові роботи» 74…153, «Підготовка основи» 186…279; нижня лінія ряду 1 — x 59…302, тобто 244 при ширині тіла картки 276. Тема ж дає flex:1 1 auto: вільне місце розходиться по комірках і розділювач їде на 184.5 / 189.2, а лінія — до 334. Розходження 22.5 і 19.5px. Модель «поле 15.05 з обох боків + таке саме поле в кінці ряду» відтворює всі три числа: 59 + 72.23 + 30.1 = 161.3 (макет 162.0), 59 + 80.83 + 30.1 = 170.0 (макет 170.0), 161.3 + 96.30 + 30.1 + 15.05 = 302.8 (макет 302…303). У картках «Для бізнесу» та «Індивідуальні» ряди в макеті, навпаки, займають усю ширину блоку (лінії 56…337 і 59…335), тому правило скоуповане на .packages--life. Ті самі числа виміряні агентом «Цін» на 147:4577 — там це правило вже стоїть під .page--tsiny, дублікат нічого не змінює. flex-shrink:1 + min-width:0 + max-width:100% потрібні для решти карток цієї каруселі: у них рядів більше й natural-ширина сягає 338 при контейнері 276 — без цього ряд виліз би за рамку ціни. */ [data-layout="mobile"] .packages--life .pkg__row { width: fit-content; max-width: 100%; padding-right: 15.05px; } [data-layout="mobile"] .packages--life .pkg__feature { flex: 0 1 auto; min-width: 0; padding-left: 15.05px; padding-right: 15.05px; } /* Роздільник у макеті — лінія 0.6, у нас 1px (див. .pkg__row вище), тож текст другої комірки опинявся на 0.4 правіше: центр чорнила «Інженерні системи» +0.46, «Підготовка основи» +1.12 проти рендера 26.09. Віддаємо ці 0.4 з лівого поля другої й далі комірок: +0.06 / +0.72, а кінець лінії ряду (у макеті 268.0 від лівого краю картки) — 268.37 замість 268.77. */ [data-layout="mobile"] .packages--life .pkg__feature + .pkg__feature { padding-left: 14.65px; } /* Горизонталь чипів у каруселях «Для бізнесу» та «Індивідуальні». ПЕРЕМІРЯНО З НУЛЯ (рендери 147-4577@4x — 1608×14880, рівно ×4 — і 138-3740; на головній уся зона пакетів стоїть на 2px правіше, у «Цінах» картка SAFE HOME на 1px правіше своєї колонки, обидва зсуви зняті, числа нижче — від лівого краю САМОЇ КАРТКИ). Роздільник шукався як стовпчик, підсвічений на всю висоту ряду, із субпіксельним центроїдом по вазі; ряди беруться між горизонтальними лініями. Перевірка моделі: центр чорнила кожної комірки збігається з центром самої комірки (|Δ| ≤ 0.6 у всіх 12 комірках) — отже текст справді центрований, а роздільник стоїть рівно на межі комірок, і з роздільників однозначно читаються ширини комірок макета. BUSINESS READY, тіло 24…306 (282): ряд 1 Дизайн-концепція | Планування під бізнес-процеси макет 109.19 / 172.81 роздільник 133.19 сайт 106.47 / 175.53 роздільник 130.47 Δ −2.72 ряд 2 Ремонт | Інженерія | Зносостійкі матеріали макет 65.98 / 68.00 / 148.02 роздільники 89.98 / 157.98 сайт 64.89 / 76.97 / 140.14 роздільники 88.89 / 165.86 Δ −1.09 / +7.88 ряд 3 Меблювання | Брендування | Підготовка до запуску макет 78.19 / 80.20 / 123.61 роздільники 102.19 / 182.39 сайт 77.86 / 80.20 / 123.94 роздільники 101.86 / 182.06 Δ −0.33 / −0.33 SAFE HOME, тіло 27.6…303.6 (276): ряд 1 Відеоспостереження | Сигналізація макет 168.00 / 108.00 роздільник 195.60 сайт 159.67 / 116.33 роздільник 186.67 Δ −8.93 ряд 2 Датчики | Резервне освітлення макет 97.79 / 178.21 роздільник 125.39 сайт 105.91 / 170.09 роздільник 132.91 Δ +7.52 ряд 3 Контроль доступу через смартфон — одна комірка 276, збіг. Ширини чорнила в макеті й на сайті однакові (106.0/62.0, 41.0/103.25, 92/159, 37.25/47.5/111.75, 63.25/64.25/111.25 проти 106/62, 41/103, 93/160, 38/48/112, 64/65/112) — тобто текст у макеті НЕ обтиснутий, різниця тільки в тому, як поділена ширина ряду. Звідси поле комірки = (ширина комірки − ширина текстового боксу) / 2: BASE 15.39 / 14.98 | 15.09 / 15.16 ← рівні, звідси правило 15.05 вище BUS ряд1 8.20 / 6.01 BUS ряд2 13.84 / 9.30 / 17.71 BUS ряд3 6.75 / 7.10 / 5.56 ← ≈6.6, ряд і так заповнений SAFE ряд1 30.20 / 22.40 SAFE ряд2 28.00 / 36.61 SAFE ряд3 49.30 Сума полів у кожному ряду рівно добиває ряд до ширини тіла — ряди справді на 100%. А ПОДІЛ вільного місця між комірками правила не має: у SAFE ряд 1 більше дістав довгий чип, у BUS ряд 1 — короткий, у BUS ряд 2 найменше поле дісталось СЕРЕДНЬОМУ за довжиною чипу. Немонотонно → лінійного правила немає. Перебрані моделі й найбільша похибка роздільника по цих шести рядах: порівну вільне місце (те, що зараз, flex:1 1 auto) 8.9 пропорційно натуральній ширині 10.7 пропорційно ширині тексту 19.2 рівні комірки (flex:1 1 0) 54.0 суміш «порівну ↔ пропорційно», найкраще λ=0.5 4.0 Жодна не дає Δ ≤ 1. Ширини комірок у Figma виставлені вручну (мобільний фрейм — копія десктопної картки ×0.6: у десктопі ті самі 182/288, 280/180, 163/297). Зашити їх можна тільки як ширини під конкретні слова, а тексти чипів редагуються з адмінки — тому НЕ зашиваємо: лишаємо flex:1 1 auto, той самий поділ, що й у десктопному home.css. Чотири роздільники (BUS ряд1, BUS ряд2 правий, SAFE ряд1, SAFE ряд2) лишаються зсунутими на 2.7…8.9px — це питання до дизайнерки, а не дефект гілки. Референсу для решти семи пакетів у макеті немає взагалі: у всіх трьох каруселях намальована лише перша картка. */ /* 26.09: після правки дизайнерки агент зашив ширини комірок BUSINESS READY і SAFE HOME під конкретні слова. Відкочено за рішенням 26.09 — з тієї ж причини, що вище: тексти чипів редагуються з адмінки. Звірка рендерів до/після правки показала, що поділ рядів BUSINESS READY у Figma не змінився, а в SAFE HOME подовшали лише лінії рядів — тобто виправлення дизайнерки в макет не потрапило. Питання повернуто їй; до відповіді — загальне правило. */ /* --- Ціна і кнопка --- */ /* Макет: рамка ціни 276×46.8 на 312.6, кнопка 276×46.8 на 376.5, низ картки 450. */ [data-layout="mobile"] .pkg__foot { left: 24px; right: 24px; /* див. .pkg__body: поля 24 тепер у всіх картках */ bottom: 26.7px; gap: 17.2px; } [data-layout="mobile"] .packages--individual .pkg__foot { bottom: 29.9px; } /* Рамка 0.6px. Chrome будь-яку border-width округляє до цілого CSS-пікселя (перевірено на dpr 1/2/3: 0.6px усюди дає рівно 1px повного кольору), тому частку пікселя віддаємо альфою: у макеті рамка ціни — 171 на фоні 29 (138:3740, y=4549 і x=59; те саме 171 у 147:4577, y=1590), тобто (171−29)/226 = 0.628 від білого. Було 1px чистого #FFF = 255. */ /* padding-top переміряно 26.09 тим самим перебором, що й чипи (центроїд чорнила відносно верху картки, обидві сторінки): «від 145 USD/м²» при 7.2 стояв на +1.1…+1.3 нижче макета, при 6.2 — +0.1…+0.3; «ЦІНА ЗА ЗАПИТОМ» при 12.55 — +0.15…+0.88, при 12.05 — −0.26…+0.31. */ [data-layout="mobile"] .pkg__price { height: 46.8px; gap: 4.8px; padding-top: 6.2px; border-width: 1px; border-color: rgba(255, 255, 255, 0.628); border-radius: 3.6px; font-size: 24px; line-height: 39.84px; } [data-layout="mobile"] .pkg__price:has(.pkg__price-alt) { padding-top: 12.05px; } [data-layout="mobile"] .pkg__price-prefix { font-size: 15px; line-height: 24.9px; } [data-layout="mobile"] .pkg__price-alt { font-size: 15px; line-height: 24.9px; } /* Клікабельна зона картки (відкриває модалку пакета) — у modals.css вона рахована від десктопної картки: inset 0 0 228px при висоті 750. На картці 450 ті самі 228 обрізали зону по чипи. Мобільне число — рівно ×0.6 (136.8), тобто зона знову доходить до рамки ціни. Дизайнерка цю зону не малювала. */ [data-layout="mobile"] .pkg__open { inset: 0 0 136.8px; } /* Падінг зверху більший за нижній: у макеті чорнило підпису стоїть нижче, ніж дає просте центрування рядка (ascent 0.77 / descent 0.23). Було 15 — під старий рендер; по новому (26.09, перебір як у чипів) 15 давало +0.09…+1.27, 14 — −0.35…+0.79 на всіх трьох картках обох сторінок. */ [data-layout="mobile"] .pkg__cta { height: 46.8px; padding: 14px 9px 9px; border-radius: 3.6px; font-size: 15px; line-height: 24.9px; /* Вага 300, а не 500 з .btn. Заміряно 26.09 сумою чорнила підпису на мідному тлі (рендер 147-4577, усі три картки): при 500 сайт давав у 1.40…1.42 раза більше чорнила, ніж макет, при 300 — 1.01…1.04, ширина рядка збігається до пікселя (BR 95…296 проти 94…296, BASE 145…244 проти 145…244). Та сама різниця є й у старому рендері — це не правка дизайнерки, а давня розбіжність. Для порівняння, кнопка героя «Цін» (теж .btn) при 500 дає 1.02 — там 500 вірна. */ font-weight: 300; } /* ====================================== 5. Затемнення зони пакетів */ /* Макет: уся зона пакетів лежить під чорним прямокутником 43%. На десктопі він 4430px і закінчується разом із третьою каруселлю; на мобільному зона коротша — від верху .packages--life (3843.8) до низу третьої картки (6182.4) = 2338.6, плюс згасання 123.6 (206×0.6). Ширину звужено до полотна: десктопні 2126px розтягували документ по горизонталі й ламали повносторінкові знімки. */ /* Профіль вуалі знятий з рендера по смузі ліворуч від карток (x 3…6, поза картками — вони лежать НАД вуаллю і не темніють) і звірений із проміжком між картками (x 372). Альфа = 1 − значення/29: y3844 29 0.00 ← верх вуалі, чистий фон y3940 25 0.138 y4000 22 0.241 y4100 19 0.345 y4200 16 0.448 y4290 14 0.517 ← найтемніше, на верхній третині першої картки y4360 16 0.448 y4440 18 0.379 y4520 19 0.345 y4600 20 0.310 …рівно 0.310 до y6140… y6160 18 0.379 y6180 16 0.448 ← далі вниз темніє вже не вуаль, а наступна секція Було: жорсткий край 0.43 на всю висоту — рівний тон 16.5 від y3844 до низу, тобто вуаль з'являлась стрибком і була на 3.5–5.5 рівня темнішою за макет. Хвіст (згасання 123.6px унизу) лишається як був: під ним композит уже збігався з макетом (13 проти 13 на y6200, 1 проти 2 на y6300). */ [data-layout="mobile"] .veils--pkgzone .veil--1 { left: 0; width: 402px; height: 2462.2px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.138) 96px, rgba(0, 0, 0, 0.241) 157px, rgba(0, 0, 0, 0.345) 257px, rgba(0, 0, 0, 0.448) 357px, rgba(0, 0, 0, 0.517) 447px, rgba(0, 0, 0, 0.448) 517px, rgba(0, 0, 0, 0.379) 597px, rgba(0, 0, 0, 0.345) 677px, rgba(0, 0, 0, 0.310) 757px, rgba(0, 0, 0, 0.310) 2296px, rgba(0, 0, 0, 0.43) calc(100% - 123.6px), rgba(0, 0, 0, 0) 100%); }