/** * Мобільна гілка — сторінка «Портфоліо» (Figma 172:142, полотно 402×2213) * + мобільна геометрія самої картки кейса (.case-card*), спільної з тизером * на головній (138:3740, секція «Портфоліо» — та сама картка 342×261). * * Усі числа зняті з рендера 172-142.png (1 px = 1 px макета) і з @4x-рендера * для субпіксельних деталей (радіуси, товщина рамки). Кеглі підтверджені * через ширину чорнила рядка (canvas measureText) — не «на око». * * Метрики шрифту MuseoSansCyrl (виміряні canvas'ом): cap = 0.70em, * ascent = 0.77em, descent = 0.23em. Звідси зсув верху капітелі всередині * рядка: capTop = (line-height − font-size)/2 + 0.07 × font-size. */ /* ======================================================= 1. Герой сторінки */ /* Макет: H1 «ПОРТФОЛІО» кап-бокс 146..177.5 (кегль 45, вага 100 — на десктопі 300), підзаголовок 3 рядки, кап-верхи 217 / 236 / 255 (15/19.2). */ [data-layout="mobile"] .page--portfolio .page-hero { padding: 136.6px 0 0; /* 146 − ((57.6−45)/2 + 0.07×45) */ min-height: 0; } [data-layout="mobile"] .page--portfolio .page-hero__title { font-weight: 100; font-size: 45px; line-height: 57.6px; /* 121.6 × 45/95 */ } [data-layout="mobile"] .page--portfolio .page-hero__text { margin-top: 19.7px; /* 213.85 − (136.6 + 57.6) */ max-width: none; font-size: 15px; line-height: 19.2px; } /* Фон героя в макеті — рівний #1D1D1D: фото повністю перекрите затемненням. Десктопні розтяжки .veils--portfolio побудовані на полотні 1728×3830 і на 402 дають зовсім інший градієнт, тому на мобілці герой закриваємо однією суцільною плашкою, а другу розтяжку (y=2849 — далеко за межами сторінки) прибираємо. */ [data-layout="mobile"] .page--portfolio .page-hero__media { display: none; } [data-layout="mobile"] .veils--portfolio .veil--1, [data-layout="mobile"] .veils--portfolio .veil--2 { display: none; } /* ================================================= 2. Групи-каруселі кейсів */ /* Ритм макета (кап-верх заголовка → верх стрілок → верх картки → низ картки): 366 / 415.6 / 478.8 / 739.8, 835 / 884.6 / 948 / 1209, 1304+1343 / 1391.6 / 1455 / 1716. Низ картки → кап-верх наступного заголовка = 90.55 + зсув капітелі. */ /* Прив'язка до сусідства, а не до :nth-of-type: категорія без опублікованих кейсів випадає зі сторінки (page-portfolio-page.php), і нумерація з'їжджає. */ [data-layout="mobile"] .page-hero + .portfolio-group { padding-top: 90.1px; } [data-layout="mobile"] .portfolio-group + .portfolio-group { padding-top: 90.55px; } /* Заголовок категорії: 50/35 → 35/39 (крок базових ліній у 2-рядковому «КОМЕРЦІЙНІ ПРИМІЩЕННЯ» виміряно рівно 39). */ [data-layout="mobile"] .portfolio-group .sec-head__lead { font-size: 35px; line-height: 39px; } /* Стрілки переїжджають з правого краю рядка заголовка ПІД заголовок і ЛІВОРУЧ */ [data-layout="mobile"] .portfolio-group .sec-head { row-gap: 0; } /* Кожен ЗАЙВИЙ рядок заголовка опускає стрілки й картку не на повний інтерліньяж 39, а на 38: у @4x-рендері центри чорнила стрілок 434.875 / 903.875 / 1410.875 при кап-верхах 366.5 / 835.5 / 1304.5 — тобто +68.375 у однорядкових групах і +106.875 у дворядковій «КОМЕРЦІЙНІ ПРИМІЩЕННЯ» (різниця 38.5, а не 39). Кількість рядків рахує шматок JS у page-portfolio-page.php і кладе її в --head-lines; :nth-of-type тут непридатний — порожня категорія випадає зі сторінки і збиває нумерацію. */ [data-layout="mobile"] .portfolio-group .sec-head__arrows { justify-self: start; margin-top: calc(15.175px - (var(--head-lines, 1) - 1) * 0.98px); position: static; top: auto; } /* Кнопка стрілки 76→37.8, гап 58→29.4 (центри 67.2 — як у тизері на головній) */ [data-layout="mobile"] .portfolio-group .arrows { gap: 29.4px; } [data-layout="mobile"] .portfolio-group .arrows__btn { width: 37.8px; height: 37.8px; } /* Стрічка: одна картка в кадрі, сусідня в 30px-жолоб НЕ визирає */ [data-layout="mobile"] .portfolio-group .carousel { overflow: hidden; } [data-layout="mobile"] .portfolio-group__track, [data-layout="mobile"] .portfolio-group:nth-of-type(2) .portfolio-group__track, [data-layout="mobile"] .portfolio-group:nth-of-type(3) .portfolio-group__track, [data-layout="mobile"] .portfolio-group:nth-of-type(4) .portfolio-group__track { /* Гап у кадрі не видно (картка = вся колонка, сусідня повністю за обрізкою): він працює тільки як крок каруселі. Беремо ціле число, бо JS рахує крок через offsetLeft (округлений до цілого) — при 13.2 стрічка недокручувалась на 0.2px. */ gap: 13px; /* 478.8 − (415.6 + 37.8). Chrome при dpr 1 однаково округляє рамку картки до цілого пікселя і при 478.77, і при 479.15, тож дрібніше не підганяємо: менша похибка тут коштувала б 1px зсуву заголовка НАСТУПНОЇ групи (текст клацає на цілий піксель, коли бокс переходить межу округлення растра). */ margin-top: 25.6px; } /* ============================================ 3. Картка кейса (спільна з home) */ /* Макет 172:142 і 138:3740 дають ту саму картку: 342×261, радіус 3, мідна рамка активної 1.2 (десктоп 2.4), плашки ↗ немає. Текст усередині — рівно 0.6 від десктопної картки головної: надзаголовок 15.8/20.2 → 9.48/12.12, назва 21.8/27.8 → 13.08/17. */ [data-layout="mobile"] .case-card, [data-layout="mobile"] .page--portfolio .case-card { flex: 0 0 342px; } [data-layout="mobile"] .case-card__link, [data-layout="mobile"] .page--portfolio .case-card__link { height: 261px; border-radius: 3px; } [data-layout="mobile"] .case-card__link::after { border-width: 1.2px; border-radius: 3px; } [data-layout="mobile"] .case-card.is-active .case-card__link { box-shadow: inset 0 0 0 1.2px var(--accent); } /* Мідну рамку активної картки малює НЕ border у ::after, а inset-тінь на затемненні. Причина: Chrome округляє ширину border до цілого пристроєвого пікселя, і 1.2px завжди виходить рівно 1.0px (перевірено на dpr 1/2/3/4), а inset-тінь він згладжує — виходить 1.26px, як у макеті (@4x: зліва x30.0..31.19, зверху 478.86..480.10, тобто 1.19–1.25). Тінь самого .case-card__link не видно ніколи: inset-тінь малюється під дітьми, а .case-card__img і .case-card__veil перекривають її повністю — лишаємо її запасним варіантом. Радіус потрібен, бо .case-card__veil своїх кутів не має і рамка на кутах була б прямокутною. */ [data-layout="mobile"] .case-card.is-active .case-card__link::after { border-color: transparent; } [data-layout="mobile"] .case-card.is-active .case-card__veil { border-radius: 3px; box-shadow: inset 0 0 0 1.2px var(--accent); } /* Обидва числа зміщені на +0.5 / −0.5 відносно «чистих» 16 і 5: сума top + висота рядка надзаголовка + gap не змінилась, тож НАЗВА картки стоїть там само (бокс 512.27 → кап-верх 515, як у макеті), а надзаголовок опускається на цілий піксель. Причина: Chrome кладе базову лінію на ціле число CSS-пікселів. Базова лінія надзаголовка = top картки + top боксу + (12.12−9.48)/2 + ascent, де виміряний ascent MuseoSansCyrl ≈ 6.9px при кеглі 9.48. При top:16 виходило 503.365 → округлення вниз до 503, і капітель лягала в 496..502 замість 497..503 у макеті. При top:16.5 — 503.865 → 504, капітель 497..503. ✔ Картку головної це не чіпає: там діє власний перебивач .portfolio-teaser .case-card__body (11-home-portfolio-calc.css:96). */ [data-layout="mobile"] .case-card__body { left: 27.6px; /* 46 × 0.6 */ top: 16.5px; /* кап-верх надзаголовка на 18 від верху картки */ gap: 4.5px; } [data-layout="mobile"] .case-card__eyebrow, [data-layout="mobile"] .page--portfolio .case-card__eyebrow { font-size: 9.48px; line-height: 12.12px; } /* У макеті надзаголовок набрано КАПСОМ («ПРОЄКТ 1»), а поле приходить з адмінки реченням («Проєкт 1») — тож регістр даємо стилем, контент не чіпаємо. Навмисно під .page--portfolio: той самий надзаголовок на картці головної (.portfolio-teaser) у мобільному макеті теж капсом, але то чужа зона — винесено в openIssues. */ [data-layout="mobile"] .page--portfolio .case-card__eyebrow { text-transform: uppercase; } [data-layout="mobile"] .case-card__title, [data-layout="mobile"] .page--portfolio .case-card__title { font-size: 13.08px; line-height: 17px; } /* Плашки ↗ у мобільному макеті немає ЖОДНОЇ (ні тут, ні на головній) */ [data-layout="mobile"] .case-card__go, [data-layout="mobile"] .page--portfolio .case-card__go { display: none; } /* ======================================= 4. Нижній блок: CTA + кнопка + контакти */ /* Дві колонки 597+595 складаються в одну: лід → кнопка → контакти. Кап-верхи ліда 1808 / 1853 / 1898 (35/45, КАПСОМ), кнопка 342×46.8 на 1956.9, пошта 2037.2, лінія 2073, телефон 2096.4, лінія 2128. */ [data-layout="mobile"] .page--portfolio .page-outro { padding-top: 84.55px; /* 1800.55 − 1716 */ /* Скасовує десктопні 316px (pages/portfolio-page.css:42) — на мобілці далі йде футер із власним padding-top (00-base.css:136). НЕ «бракує 84px знизу»: фрейм 172:142 намальовано БЕЗ футера, останнє чорнило (лінія під телефоном) у @4x-рендері 2128.25..2129.50, а полотно тягнеться до 2213 — тобто 83.5px порожнього поля. Якщо міряти висоту блока до НИЗУ ПОЛОТНА, виходить 2213 − 1716 = 497 проти наших 413 і фальшива Δ84. Міряти треба до чорнила: від власного верху блока лінія стоїть на 412.25..413.50 у макеті й на 411.73..412.73 у нас (Chrome снапить ::after до цілих CSS-px, див. нижче) — Δ ≈ 0.5..0.8px. */ padding-bottom: 0; } /* Тільки під .page--portfolio: клас .page-outro--split є ще й на «Про нас», а це чужа зона. Специфічність (0,3,0) б'є десктопне .page-outro--split .page-outro__inner (0,2,0) і без селектора --split. */ [data-layout="mobile"] .page--portfolio .page-outro__inner { grid-template-columns: 1fr; row-gap: 34.46px; /* @4x: центр чорнила конверта 2050.0 → верх смужки */ } [data-layout="mobile"] .page--portfolio .page-outro__col { gap: 21.35px; /* 1956.9 − 1935.55 */ } [data-layout="mobile"] .page--portfolio .page-outro__lead { font-size: 35px; line-height: 45px; text-transform: uppercase; /* у макеті лід набрано КАПСОМ, на десктопі — реченням */ } [data-layout="mobile"] .page--portfolio .page-outro .btn { height: 46.8px; /* 78 × 0.6 (на десктопі «Портфоліо» 89) */ /* Підпис у макеті стоїть не по центру рядкового боксу, а на 1.05px нижче (кап-верх 1975.45 при кнопці 1956.9..2003.7). Несиметричний падінг опускає текст рівно на половину різниці, висоти кнопки не змінює. */ padding: 3px 7.2px 0; border-radius: 3px; font-size: 15px; line-height: 19.2px; } /* Смужка контактів. Розміри іконок зняті з @4x-рендера по ЧОРНИЛУ: конверт 21.0×17.0 при x31.5, слухавка 21.0×20.75 при x29.5. Наші svg дають чорнило 0.8667×W і 0.7×W (конверт, viewBox 0 0 24 24) та 1.04×W (слухавка, viewBox 2 2 20 20 з overflow:visible) — звідси 24 і 20. Текст 25/32 → 15/19.2 вагою 500 (десктопне portfolio-правило дає 100). */ [data-layout="mobile"] .page--portfolio .contact-strip { gap: 22.26px; } [data-layout="mobile"] .page--portfolio .contact-strip__row { column-gap: 18.85px; /* @4x: ліві краї чорнила тексту 73.25 і 69.25 */ row-gap: 10.7px; } /* Рядок телефону: у макеті лінія стоїть на тій самій відстані від ВЕРХУ чорнила іконки, що й у рядку пошти (31.75), але слухавка в своєму боксі сидить інакше, ніж конверт (чорнило виходить за viewBox угору). Гріємо різницю окремим row-gap, а не спільним. */ [data-layout="mobile"] .page--portfolio .contact-strip__row:has(> svg.icon--bleed) { row-gap: 11.55px; } /* Лінія в макеті 1.19–1.25 і починається на 1604.25 / 1659.25. Chrome і при dpr 1, і при dpr 4 округляє прямокутник до ЦІЛИХ CSS-пікселів (round(top), round(top+h)), тож фізично доступні тільки 1604..1605 і 1659..1660; row-gap вище підібрано так, щоб потрапити саме туди, а не роздути лінію до 2px. Переміряно на dpr 4 (знімок 1608×9460): чорнило рівно 4 пристроєві рядки 6416..6419 = 1604.00..1605.00, тобто 1.000 CSS-px, а не 1.2 — снап у layout, а не в растр. Витягнути 1.19 можна лише градієнтом усередині вищого боксу, але ::after — grid-item у потоці, і зміна height посунула б усе нижче; до того ж тоді та сама лінія розійшлась би з «Цінами» і «Про нас». */ [data-layout="mobile"] .page--portfolio .contact-strip__row::after { height: 1.2px; } [data-layout="mobile"] .page--portfolio .contact-strip__row > svg { width: 24px; height: 24px; } [data-layout="mobile"] .page--portfolio .contact-strip__row > svg.icon--bleed { width: 20px; height: 20px; } [data-layout="mobile"] .page--portfolio .contact-strip a { font-weight: 500; font-size: 15px; line-height: 19.2px; /* У макеті текст рядка контактів стоїть не по центру іконки: кап-верх пошти на 3.25 нижче верху чорнила конверта, а номера — на 5.0 нижче верху чорнила слухавки. Зсув відносний — на розкладку рядка і на позицію лінії під ним не впливає. */ position: relative; top: 0.49px; /* оптимум між двома можливими: растр тексту клацає на цілий px */ } [data-layout="mobile"] .page--portfolio .contact-strip__row:has(> svg.icon--bleed) a { top: 1.12px; } /* Ліва стрілка: у макеті вона суцільного #4F4D4D (яскравість 79), а не пригашена. main.css:159 дає opacity .35 — скасовуємо, як в усіх інших мобільних файлах (11-home-portfolio-calc.css:63, 12-home-packages.css:65, 13-home-process-reviews.css:260). ТІЛЬКИ --prev: правої це не стосується — вона біла (255) і має гаснути, коли стрічка догорнута до останньої картки. Раніше селектор був без --prev і тримав opacity:1 на обох, тож «наступна» не гасла в кінці. */ [data-layout="mobile"] .portfolio-group .arrows__btn--prev[aria-disabled="true"] { opacity: 1; }