/** * Сторінка «Про нас» — мобільна версія. Макет Figma 175:1097 (402×1665). * Усі числа зняті з 1:1-рендера figma-ref/mobile/175-1097.png і його @4x-версії * (Figma API недоступний — 429), тому поруч із кожним блоком стоїть виміряна * координата з макета, а не «на око». * * Метрика шрифта MuseoSansCyrl (заміряно canvas-ом на самому сайті): * cap = 0.70em, x-height = 0.50em, ascent = 0.77em, descent = 0.23em. * Звідси позиція кепки = верх лайнбокса + (L − F)/2 + 0.07F, * а базова лінія = верх лайнбокса + (L − F)/2 + 0.77F. Цією формулою * перераховані всі падінги й відступи нижче. */ /* ------------------------------------------------------------------ Фон */ /* Два фонові знімки перемальовані під 402: геометрія відновлена кореляційним пошуком по рендеру (див. звіт), похибка ±1px. Верхнє фото 892×595 при (−297, −3), нижнє 714×1000 при (−135, 441). У макеті верхнє фото лежить НАД нижнім (на десктопі — навпаки). */ [data-layout="mobile"] .page--pro-nas .about-bg__top { z-index: 1; top: -3px; left: -297px; right: auto; width: 892px; height: 595px; } [data-layout="mobile"] .page--pro-nas .about-bg__mid { z-index: 0; top: 441px; left: -135px; right: auto; width: 714px; height: 1000px; } /* Вуалі лежать над обома фото */ [data-layout="mobile"] .page--pro-nas .about-bg .veils { z-index: 2; } /* Дві розмиті смуги #22160B: стик фото (482.7…742.8, σ 63.1) і нижня заливка сторінки (1304.5…1658.6, σ 55.2). Прямокутники ширші за полотно на 3σ, щоб по краях не було просвіту. */ [data-layout="mobile"] .page--pro-nas .veils--about .veil--6 { display: none; } [data-layout="mobile"] .page--pro-nas .veils--about .veil--5 { display: block; left: -200px; top: 482.7px; width: 802px; height: 260.1px; background: #22160B; filter: blur(63.1px); } [data-layout="mobile"] .page--pro-nas .veils--about .veil--7 { display: block; left: -170px; top: 1304.5px; width: 742px; height: 354.1px; background: #22160B; filter: blur(55.2px); } /* ---------------------------------------------------------------- Герой */ /* Макет: кепки рядків на y = 148.25 / 187.25 (біле, крок 39) і 227.0 / 269.0 (мідь, крок 42). Біле — від лівого краю колонки (x 30), мідь — вирівняне по правому краю колонки (x 372). */ [data-layout="mobile"] .page--pro-nas .about-hero { padding-top: 143.8px; } [data-layout="mobile"] .page--pro-nas .about-hero__title { max-width: none; font-size: 35px; line-height: 39px; } /* У полі ACF стоять жорсткі переноси під десктопний розбив («VIKING» / «ДИЗАЙН & РЕМОНТ —»); на мобілці розбив інший, гасимо. */ [data-layout="mobile"] .page--pro-nas .about-hero__title br { display: none; } /* Мідна частина — окремий блок по правому краю. max-width 330 змушує «КЕРОВАНИЙ СЕРВІС» (342.65px при 35px/300) розбитись на два рядки: рядок «КЕРОВАНИЙ» = 212.1px, тож ширина не зачіпає геометрію. */ [data-layout="mobile"] .page--pro-nas .about-hero__title .accent { display: block; max-width: 330px; /* правий край мідного блока в макеті на 1px правіше за контентну колонку; −0.25 зверху ставить кепку «КЕРОВАНИЙ» рівно на 227.0 (крок до «СЕРВІС» 42) */ margin: -0.25px -1px 0 auto; line-height: 42px; text-align: right; } /* ----------------------------------------------------------- Вступ 7 років */ /* Макет: кепка «7 РОКІВ ДОСВІДУ» на 435.25, базові лінії абзацу 479 / 497 / 515 (крок 18), блок на всю ширину колонки 342. */ /* 132.73 замість 131.95: формула кепки (L−F)/2 + 0.07F дає похибку +0.78px на 25px/17.5 — виміряно по рендеру 175-1097 (кепка «7 РОКІВ ДОСВІДУ» стоїть на 435.39, а не на 434.51, як виходило за формулою). */ [data-layout="mobile"] .page--pro-nas .about-body { padding-top: 132.73px; } /* блок вступу в макеті на 2px лівіше за контентну колонку */ [data-layout="mobile"] .page--pro-nas .about-lead { max-width: none; margin-left: -2px; } [data-layout="mobile"] .page--pro-nas .about-lead__title { font-size: 25px; line-height: 17.5px; } [data-layout="mobile"] .page--pro-nas .about-lead__text { /* 10.34 замість 11.82: −0.78 компенсують зсув .about-body вище, ще −0.70 — власний недобір (центроїди трьох рядків стояли на 0.63–0.69px нижче за макет). */ margin-top: 10.34px; /* 345 замість 342: Chrome міряє рядок «консультації … комплектації,» на 1.4px ширше за Figma, і без цього він переноситься інакше, ніж у макеті. Текст притиснутий вліво, тож на видиму геометрію ширина не впливає. */ width: 345px; font-size: 15px; line-height: 18px; } /* -------------------------------------------------------- Картки принципів */ /* Макет: колонки x 28.5…196 і 205…372.5 (по 167.5), ряди 549 / 728 / 907 / 1088. Крок рядів 179 / 179 / 181 — останній у макеті на 2px більший, тому у картки 5 окремий margin-top. Розкладка: 1→кол2, 2→кол1, 3→кол2, 4→кол1, 5→кол2 (ЧІТКІСТЬ справа → СЕРВІС+ЯКІСТЬ → ВІДПОВІДАЛЬНІСТЬ зліва → КОНТРОЛЬ справа). */ /* Зміряно на @4x-рендері (стрибок штриха рівно 5 субпікселів, обрис — всередині боксу): зовнішні бокси карток у макеті цілопіксельні й НЕ однакові — 1 = 205…373 × 549…717, 2 = 28…196 × 728…896, 3 = 205…372 × 728…896, 4 = 29…196 × 907…1074, 5 = 205…372 × 1088…1255. Тобто картки 1 і 2 на 1px ширші/вищі за 3/4/5. Колонки сітки беремо 168 + 9 + 167 від x = 28, а відхилення віддаємо полями окремих карток. */ [data-layout="mobile"] .page--pro-nas .about-cards { grid-template-columns: 168px 167px; column-gap: 9px; /* 11 замість 11.5: висота рядів піднялась із 167.5 до 168, а верхи рядів у макеті лишаються на 549 / 728 / 907 */ row-gap: 11px; /* 28.88 = 28.18 + 0.70: після правок .about-body й .about-lead__text висота .about-lead змінилась на −1.48, і це повертає верх сітки рівно на 549.0, як у макеті */ margin-top: 28.88px; /* лівий край сітки в макеті на x = 28 (картка 2), тобто −2 від колонки */ margin-left: -2px; } [data-layout="mobile"] .page--pro-nas .about-card { height: 167px; /* Макет: кепка заголовка на 21.9px від краю картки, базова лінія останнього рядка тексту на 22.65px над краєм картки. */ /* Падінги пораховані від ЗОВНІШНЬОГО краю картки (бордюра більше немає, див. нижче): 24.01 зверху = 23.01 + 1, 23 з боків = 22 + 1, 17.9 знизу = 16.9 + 1. Базову лінію Chrome садить на цілий піксель, тому заголовки карток лягають на 0.37px нижче за макет незалежно від дробової частини — ближче не буває, сусіднє ціле дає −0.63. Низ не чіпаємо — текст притиснутий до низу (align-self:end). */ /* Chrome при dpr=1 зводить border-width:1.25px до цілого пікселя (і в getComputedStyle, і в растрі), а в макеті штрих рівно 1.25px — на @4x це рівно 5 субпікселів без напівтонів, з «inside»-вирівнюванням по цілому боксу (наприклад, картка 5: 205.00…206.25 і 370.75…372.00). Дробову товщину вміє лише тінь, тому рамку малює inset box-shadow. Тінь відраховується від ВНУТРІШНЬОГО (padding) краю, тож бордюр прибираємо зовсім, а його 1px (саме стільки Chrome лишав від 1.25) додаємо до падінгів — зовнішній бокс і контентна коробка при цьому не змінюються. */ padding: 24.01px 23px 17.9px; border-width: 0; box-shadow: inset 0 0 0 1.25px rgba(184, 115, 51, 0.65); border-radius: 3px; backdrop-filter: blur(17.85px); -webkit-backdrop-filter: blur(17.85px); } @media (hover: hover) { [data-layout="mobile"] .page--pro-nas .about-card:hover { box-shadow: inset 0 0 0 1.25px var(--accent); } } [data-layout="mobile"] .page--pro-nas .about-card__title { font-size: 12px; line-height: 9px; } [data-layout="mobile"] .page--pro-nas .about-card__text { max-width: none; font-size: 12px; line-height: 16px; } /* Картки 1–3 у макеті на 1px вищі за 4–5 (див. коментар до .about-cards); картка 1 на 1px ширша за свою колонку й вилазить праворуч до 373, картка 2 займає широку колонку повністю (28…196). */ [data-layout="mobile"] .page--pro-nas .about-card--1 { grid-column: 2; grid-row: 1; height: 168px; margin-right: -1px; } [data-layout="mobile"] .page--pro-nas .about-card--2 { grid-column: 1; grid-row: 2; height: 168px; } [data-layout="mobile"] .page--pro-nas .about-card--3 { grid-column: 2; grid-row: 2; height: 168px; } /* Картки 4 і 5: у макеті їхній текст намальовано рівно на 1px вище відносно краю картки, ніж у карток 1–3 (перевірено на @4x-рендері: відстань від центру верхньої рамки до кепки першого рядка 90.75 / 90.67 / 90.69 у карток 1–3 проти 89.73 / 89.69 у 4 і 5). Це ручний зсув дизайнерки, не система, але відтворюємо. Текст притиснутий до низу, тож віддаємо різницю падінгом знизу. */ [data-layout="mobile"] .page--pro-nas .about-card--4 { grid-column: 1; grid-row: 3; /* у макеті картка 4 починається на 29, а не на 28, як картка 2 */ margin-left: 1px; padding-bottom: 17.81px; } /* Картка 5: дизайнерка посадила її заголовок нижче, ніж у решти карток — у рендері кепка «КОНТРОЛЬ» на 1110.89, тобто 22.8px від краю картки, тоді як у карток 1–4 стабільно 21.9px. Різниця +0.89px віддана окремим падінгом, щоб не рухати решту чотирьох. Текст картки бере низ, тож на нього цей падінг не впливає. */ [data-layout="mobile"] .page--pro-nas .about-card--5 { grid-column: 2; grid-row: 4; /* 3 замість 2: ряд 3 тепер 167 заввишки, а верх картки 5 у макеті на 1088 */ margin-top: 3px; /* базову лінію тексту Chrome садить на ЦІЛИЙ піксель, тож у діапазоні 23.8…24.5 результат однаковий — беремо середину, щоб не стояти на межі округлення; кепка «КОНТРОЛЬ» лягає на 1110.87 при 1110.55 у макеті */ padding-top: 24.1px; padding-bottom: 17.81px; /* див. коментар до .about-card--4 */ } /* Єдиний заголовок, який дизайнерка зробила більшим за решту: у макеті слово «КОНТРОЛЬ» має ширину 66.25px і кепку 9.12px проти 63.07/8.70 при 12px — обидва відношення дають 12.58…12.61, тобто кегль 12.6px. */ [data-layout="mobile"] .page--pro-nas .about-card--5 .about-card__title { font-size: 12.6px; } /* ---------------------------------------------------------- Низ сторінки */ /* Макет: контакти ЗВЕРХУ (іконка пошти 1373.9), потім лід (1499.25), потім кнопка 342×46.75 на 1544…1590.75, далі поле 74.25 до кінця фрейму. */ [data-layout="mobile"] .page--pro-nas .page-outro { /* 118.9 замість 118.4: сітка карток стала на 0.5px нижчою (ряди 168/168/167/167 проти чотирьох по 167.5), тож низ .about-body піднявся на 0.5 — повертаємо смугу контактів на 1373.86, як було зміряно по макету */ padding-top: 118.9px; padding-bottom: 74.25px; } [data-layout="mobile"] .page--pro-nas .page-outro--split .page-outro__inner { grid-template-columns: minmax(0, 1fr); row-gap: 30.7px; } /* Порядок блоків з макета: смуга контактів піднімається над лідом і кнопкою */ [data-layout="mobile"] .page--pro-nas .page-outro .contact-strip { order: -1; } [data-layout="mobile"] .page--pro-nas .contact-strip { gap: 22.4px; } [data-layout="mobile"] .page--pro-nas .contact-strip__row { column-gap: 19.2px; row-gap: 11.35px; } /* Лінія в макеті — 1.1875px (на @4x це 4 повні субпікселі плюс один на 3/4), верх на 1409.31 і 1464.25. Chrome при заливці боксу округлює і його верх, і його висоту до цілого CSS-пікселя, тому фоном (ані суцільним, ані градієнтом) такої лінії не отримати — вона завжди виходить рівно 1px на 1409.00. Зате box-shadow округлює лише ПОЧАТОК бокса, а власні зсув і розтяг бере як є. Тому бокс робимо нульовим (його висоту віддаємо полю, щоб ряд не змінився), а лінію малює тінь: верх = 1409 + 0.875 − 0.594. */ [data-layout="mobile"] .page--pro-nas .contact-strip__row::after { height: 0; margin-bottom: 1.19px; background: none; box-shadow: 0 0.875px 0 0.594px rgba(255, 255, 255, 0.32); } /* Іконки: пошта 22×17 чорнила (svg 24), слухавка 21×21 чорнила (svg 20) */ [data-layout="mobile"] .page--pro-nas .contact-strip__row > svg { width: 24px; height: 24px; } [data-layout="mobile"] .page--pro-nas .contact-strip__row > svg.icon--bleed { width: 20px; height: 20px; } [data-layout="mobile"] .page--pro-nas .contact-strip a { /* У макеті підпис стоїть нижче за геометричний центр ряду (іконка й текст вирівняні не по центру бокса, а «на око»). Базову лінію Chrome садить на цілий піксель, тож дробові значення top нічого не міняють — реальних варіантів два: 1px (підпис на 0.38…0.43px ВИЩЕ за макет) і 1.5px (на 0.57…0.62px нижче). Зміряно на @4x: пошта в макеті 1380.72, при top:1 — 1380.29, при top:1.5 — 1381.29. Беремо 1px як ближчий. */ position: relative; top: 1px; font-size: 15px; line-height: 19.2px; } [data-layout="mobile"] .page--pro-nas .page-outro__col { gap: 28.6px; } [data-layout="mobile"] .page--pro-nas .page-outro__lead { font-size: 15px; line-height: 19.2px; } [data-layout="mobile"] .page--pro-nas .page-outro .btn { height: 46.75px; padding: 3px 12px 0; border-radius: 3px; font-size: 15px; line-height: 19.2px; }