/* Сторінка What's New 5.0. Підключається ТІЛЬКИ цією сторінкою, тому global.css не зачеплено і решта сайту не змінилася (08.09.2026). Числа, які Віча дала з макета, позначені ЗАМІРЯНО. Решта — знята приблизно, щоб зібрати каркас, і чекає звірки. ОПОРА ДЛЯ CLAMP — 375 → 1200, і це не вигадка: у global.css плавні відступи (--spacing-40-90 і сусіди) проведені саме через ці дві точки. Перевірено 08.09.2026 зворотним рахунком: наша формула для 40 → 90 дає 17.27px + 6.061vw, у легасі записано те саме число. Кеглі там ідуть по іншій прямій, 320 → 1200. */ /* ── Сторінка ────────────────────────────────────────────────────── */ /* ЗАМІРЯНО: Віча 08.09.2026 — тло #070707, темніше за загальносайтове --bg-color-dark (#111111). Шапка теж темніє класами dark-scheme / dark-scheme-bg на , але її колір у global.css той самий #111111, тому перекриваємо його тут, тільки для цієї сторінки. */ body.whats-new { background-color: #070707; color: var(--color-text-inverse); } .whats-new.dark-scheme-bg .site-nav { background-color: #070707; } /* ВИДІЛЕННЯ ТЕКСТУ. У ресеті global.css стоїть типове для легасі світло-блакитне тло #b3d4fc і НЕ задано колір самого тексту. На світлих сторінках це працює, а тут сторінка темна, текст світлий — виділене місце ставало нечитаним (Віча помітила 14.09.2026). Колір той самий, яким на сайті пофарбовані посилання, --color-base-anchor. Правило тільки для цієї сторінки: решта сайту світла, там ресет доречний. */ .whats-new ::selection { background: var(--color-base-anchor); color: #ffffff; text-shadow: none; } /* ЗАМІРЯНО: Віча 09.09.2026 — випадне меню шапки на цій сторінці зливається з тлом: воно чорне на чорному, і краю не видно. Тому обведення тим самим кольором, що й розділювач усередині меню, — .site-nav-burger-menu-line у global.css. Той самий колір, до речі, у картках каруселі. Правило тільки для цієї сторінки: на решті сайту тло світле, і меню там видно без обведення. */ .whats-new .site-burger-nav { border: 1px solid rgba(255, 255, 255, 0.20); } /* ЗАМІРЯНО: Віча 08.09.2026 — 20 на телефоні, 40 на десктопі. У легасі ця секція має ступінь 20 → 35 через медіазапит; тут потрібен плавний перехід. */ .whats-new .o-i-section { padding-top: clamp(20px, 10.91px + 2.424vw, 40px); } /* Світлі секції всередині темної сторінки повертають темний текст. */ .whats-new .u-bc-light-grey { color: var(--color-text-base); } /* Питання й відповіді — на білому (Віча 08.09.2026). */ .whats-new .wn-faq { background-color: var(--color-white); color: var(--color-text-base); } /* Розгортання відповіді. Саме ховання робить global.css — там .faq-list-item-answer має display: none; тут лише плавність, бо висоту анімує скрипт унизу сторінки. */ .wn-faq .faq-list-item-answer { overflow: hidden; transition: height 200ms ease-in-out; } /* ── Заголовок з переходом кольору ───────────────────────────────── */ /* ЗАМІРЯНО: Віча 08.09.2026 — градієнт з макета. Запасний колір потрібен там, де градієнт по тексту не підтримується. */ .wn-title { /* inline-block — щоб градієнт лягав по ТЕКСТУ, а не розтягувався на всю ширину блока (Віча 08.09.2026). Вирівнювання по центру дає батьківський u-text-center. */ display: inline-block; /* Щоб «5.0» не лишалося саме на другому рядку (Віча 08.09.2026). */ text-wrap: balance; color: #FFFFFF; background-image: linear-gradient(87deg, #6F2BFF -18.79%, #00F5D8 90.35%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ЗАМІРЯНО: Віча 08.09.2026 — радіус 35 на десктопі й 20 на телефоні, відступи згори та знизу 55 і 40. Обидва проведені прямою 375 → 1200. */ .wn-video { border-radius: clamp(20px, 13.18px + 1.818vw, 35px); margin-block: clamp(40px, 33.18px + 1.818vw, 55px); } /* У легасі кадр ролика схований (.video-container iframe { display: none }) — там його показує скрипт через YouTube API. Ми підставляємо кадр самі, тож вмикаємо показ (09.09.2026). */ .whats-new #videoframe iframe { display: block; } /* ЗАМІРЯНО: Віча 09.09.2026 — зовнішнє світіння під роликом: border: 11px solid #397AFF; background: linear-gradient(110deg, rgba(57, 122, 255, 0.40) 0%, rgba(3, 241, 217, 0.40) 100%); filter: blur(41.35px); Це підкладка — прямокутник під роликом, розмитий так, що назовні лишається тільки кольорове сяйво. Розмиття їде і по рамці, тому саме вона дає найяскравішу смугу по краю. Лежить на обгортці, а не в самому контейнері ролика: там overflow hidden з легасі, і сяйво обрізалося б рівно по краю картинки. */ .wn-video-glow { position: relative; } .wn-video-glow::before { content: ""; position: absolute; /* Відступи від краю ролика немає — підкладка рівно під ним, а назовні її виносить саме розмиття. */ inset: 0; z-index: -1; pointer-events: none; border: 11px solid #397AFF; border-radius: clamp(20px, 13.18px + 1.818vw, 35px); background-image: linear-gradient(110deg, rgba(57, 122, 255, 0.40) 0%, rgba(3, 241, 217, 0.40) 100%); filter: blur(41.35px); } /* ЗАМІРЯНО: Віча 09.09.2026 — обведення й внутрішнє світіння по краю ролика: border: 1px solid rgba(255, 255, 255, 0.42); box-shadow: 0 0 21px 0 rgba(255, 255, 255, 0.72) inset; ЧОМУ ПСЕВДОЕЛЕМЕНТОМ, а не на самому блоці: всередині лежить постер, а потім ще й плеєр, і вони перекрили б внутрішню тінь — вона малюється під вмістом. Тому окремий шар поверх усього, наскрізний для миші. */ .wn-video::after { content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: inherit; box-shadow: 0 0 21px 0 rgba(255, 255, 255, 0.72) inset; } /* ЗАМІРЯНО: Віча 08.09.2026 — 21px на десктопі, міжрядковий 150%, колір #D4D4D4, ширина блока 860, відступ згори 15. Вилка 17 → 21 проведена прямою 375 → 960 — тією самою, по якій у легасі йде --font-size-base. Перевірено зворотним рахунком: наша формула для 16 → 19 дає clamp(1.6rem, 1.408rem + 0.513vw, 1.9rem), символ у символ як у global.css. Кеглі тексту там доходять до максимуму раніше за заголовки: 960 проти 1200. */ .wn-lead { max-width: 860px; margin-top: 15px; } .wn-lead p { margin: 0; font-size: clamp(1.7rem, 1.444rem + 0.684vw, 2.1rem); line-height: 1.5; color: #D4D4D4; } /* ЗАМІРЯНО: Віча 08.09.2026 — 19px курсивом, міжрядковий 150%, колір #D4D4D4, відступ від ролика 55. ВЛАСНОГО ВІДСТУПУ ТУТ НЕМАЄ, і це навмисно: 55 уже дає нижній відступ самого ролика (.wn-video). Якби припис додав свої, вийшло б 90. Курсив ставить утиліта u-text-italic у розмітці. */ .wn-note { max-width: 860px; margin-top: 0; } .wn-note p { /* Це рівно --font-size-base: 16 → 19 по прямій 375 → 960. Беремо змінну, а не своє число, щоб припис лишався узгодженим з рештою тексту сайту. */ font-size: var(--font-size-base); line-height: 1.5; color: #D4D4D4; } /* Посилання «Watch Tutorial» зі стрілкою. */ /* ЗАМІРЯНО: Віча 08.09.2026 — 29 на десктопі, вага 600, колір #3790F1 (це рівно --color-secondry-anchor з легасі), міжрядковий 130%. Нижня межа 17 порахована пропорцією заголовка: у нього 30 → 50, тобто в 1.667 раза, і 29 / 1.667 = 17.4. Сімнадцять збігається з нижньою межею тексту, тож на телефоні посилання йде врівень з абзацом, а на десктопі помітно більше. Пряма та сама, 375 → 1200. */ .wn-link { font-size: clamp(1.7rem, 1.155rem + 1.455vw, 2.9rem); line-height: 1.3; color: var(--color-secondry-anchor); font-weight: 600; text-decoration: none; } .wn-link::after { content: " \203A"; } .wn-link:hover { text-decoration: underline; } /* ── Дві головні можливості ──────────────────────────────────────── */ /* ЗАМІРЯНО: Віча 08.09.2026 — заголовок 50 на десктопі, міжрядковий 130%, колір #D4D4D4. Вилка 30 → 50 узята з макета готовою формулою і йде прямою 375 → 1200 — тією самою, по якій у легасі проведені плавні відступи. Змінна оголошена ЛОКАЛЬНО, на сторінці, щоб не чіпати global.css. */ .whats-new { --font-size-h2: clamp(3.0rem, 2.091rem + 2.424vw, 5.0rem); } .whats-new .section-subheading { font-size: var(--font-size-h2); line-height: 1.3; color: #D4D4D4; } /* ЗАМІРЯНО: Віча 09.09.2026 — у двох великих ілюстрацій радіус 30 і обведення 2px білим на 20%. Радіус гумовий, найменший — такий самий, як у ролика вгорі, тобто 20. ПРЯМА ТА САМА, ЩО В РОЛИКА: 375 → 1200. У ролика по ній іде 20 → 35, тут 20 → 30 — спільний мінімум, різний максимум. Чому не від ширини самої картинки, як у плиток: ширина ілюстрації по вікну йде не рівно. До 769 картинка займає всю колонку — на 768 це 738; одразу після 769 вона стає 585 і далі росте до 950. Тобто вікно ширшає, а картинка стрибком вужчає, і радіус стрибав би разом з нею. ОБВЕДЕННЯ — ВНУТРІШНЬОЮ ТІННЮ, а не border: border забирає свої 2px з самої картинки й накладається на неї (Віча помітила 09.09.2026). Тінь висить на обгортці picture, а не на img: inset-тінь малюється ПІД вмістом, і картинка просто закрила б її. Через це ж на picture переїхали і габарити — у легасі ширину 161% та виліт за колонку задає сам img, і обгортка була б вужча за картинку. */ .whats-new .flex-col-x-wide-img picture { display: block; position: relative; border-radius: clamp(20px, 15.45px + 1.212vw, 30px); } .whats-new .flex-col-x-wide-img picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.20); } .whats-new .flex-col-x-wide-img img { border-radius: inherit; } @media only screen and (min-width: 769px) { /* Габарити з легасі, перенесені з img на picture — числа ті самі. */ .whats-new .flex-col-x-wide-img picture { width: 161.02%; max-width: none; } .whats-new .flex-row-reverse .flex-col-x-wide-img picture { margin-left: -61.02%; } .whats-new .flex-col-x-wide-img img { width: 100%; } .whats-new .flex-row-reverse .flex-col-x-wide-img img { margin-left: 0; } } /* Текст у секціях — той самий, що в ліді: 17 → 21, колір #D4D4D4. */ .whats-new .flex-col-x-wide-text p { font-size: clamp(1.7rem, 1.444rem + 0.684vw, 2.1rem); line-height: 1.5; color: #D4D4D4; } /* ЗАМІРЯНО: Віча 08.09.2026 — 29 на десктопі, вага 600, колір #3790F1, міжрядковий 130%. Нижня межа 17 порахована пропорцією заголовка: у нього 30 → 50, тобто у 1.667 раза, і 29 / 1.667 = 17.4. Сімнадцять збігається з нижньою межею тексту, тож на телефоні посилання йде врівень з абзацом, а на десктопі помітно більше. */ /* ЗАМІРЯНО: Віча 08.09.2026 — між двома секціями 100. У легасі це готова змінна --spacing-55-100 (55 → 100, плавно, прямою 375 → 1200): її максимум якраз збігається з макетом. Раніше тут стояла утиліта овервʼю u-mt-45-120 — ступінь 45 → 120. */ .wn-feature-gap { margin-top: var(--spacing-55-100); } /* ── Стрічка з чотирьох можливостей ──────────────────────────────── */ /* ЗВІДКИ ВЗЯТИЙ ВИГЛЯД: карусель Features на сусідньому сайті Вічі, https://amadine-test.belightsoft.com/ (дивилися 09.09.2026). Запозичений саме вигляд, а не код. Там карусель зроблена на бібліотеці Swiper, слайд 382 x 478, радіус близько 14. У нас бібліотеки немає зовсім: це звичайний горизонтальний скрол із прилипанням на scroll-snap. Свайп на тачі, трекпад і magic mouse працюють без жодного скрипта; стрілки — надбудова, і без них стрічка лишається робочою. Пропорція картки в нас теж своя: 475 x 660 проти їхніх 382 x 478 — бо її задають картинки з нашого макета. */ .wn-deck { position: relative; /* Ширина картки оголошена тут, а не на стрічці: від неї рахуються і проміжок між картками, і відступ стрілок, а стрілки лежать поруч зі стрічкою, не всередині неї. */ --wn-card-width: clamp(280px, 191.36px + 23.636vw, 475px); } /* СТРІЧКА ЙДЕ НАВИЛІТ, від краю до краю вікна, але картки починаються і закінчуються на лінії 1513. ЗАМІРЯНО: Віча 09.09.2026 — між картками 44, а сама смуга 1513, а не 1200, як я думав раніше. Число складається: три картки по 475 плюс два проміжки по 44 — це рівно 1513. Промах було видно по стрілках: у стартовому стані вони мають стояти по центру ДРУГОЇ картки, а на смузі 1200 не ставали. Проміжок рахується від ширини картки, щоб на вузькій зменшувався разом з нею: 44 / 475 = 9.26%. Поле самої стрічки — (ширина вікна − 1513) / 2. Коли вікно вужче, лишається звичайні 15 пікселів по краях. scroll-padding повторює те саме число, інакше прилипання ставило б першу картку під ліве поле. */ .wn-deck-track { --wn-card-gap: calc(var(--wn-card-width) * 0.0926); display: flex; gap: var(--wn-card-gap); margin: 0; padding: 0 0 10px; padding-inline: max(15px, calc((100% - 1513px) / 2)); scroll-padding-inline: max(15px, calc((100% - 1513px) / 2)); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; /* Смуга прокрутки прибрана: вона тут негарна, а прокрутка лишається і пальцем, і трекпадом, і стрілками. */ scrollbar-width: none; /* Курсор підказує, що стрічку можна тягнути мишею. */ cursor: grab; } .wn-deck-track::-webkit-scrollbar { display: none; } .wn-card { /* Картка — власний контейнер: текст усередині рахує кегль від ЇЇ ширини, а не від ширини вікна. Тому на вузькому екрані підпис не переповнює картку. */ container-type: inline-size; container-name: wn-card; flex: 0 0 auto; scroll-snap-align: start; overflow: hidden; /* ЗАМІРЯНО: Віча 09.09.2026 — картка 475 завширшки, радіус 30. Обидва числа — максимум, на десктопі. ШИРИНА ЙДЕ ПЛАВНО, а не сходинками: пряма 375 → 1200, та сама, по якій у легасі проведені відступи. На 375 картка виходить 280 — стільки, щоб на телефоні поруч визирав край наступної і було видно, що стрічку можна тягнути. Нижні 280 — мої, з макета не бралися. РАДІУС порахований від ширини, як просила Віча: 30 / 475 = 6.32%, і та сама пряма дає 18 на телефоні. Своїх cqi картка тут узяти не може — контейнер не міряє сам себе. */ /* Ширина оголошена на стрічці — від неї ж рахується проміжок. */ width: var(--wn-card-width); border-radius: clamp(18px, 12.09px + 1.493vw, 30px); /* Обведення 1px білим на 20% (заміряно Вічею 09.09.2026) малює псевдоелемент нижче — воно ВНУТРІШНЄ, як в ілюстрацій секцій AI Rendering і Cycles. Звичайний border лежав би ЗА картинкою, по темному тлу сторінки, і на світлих кадрах його не було видно (Віча помітила 11.09.2026). */ /* КАРТИНКА — ЦЕ ВСЯ КАРТКА, текст лежить поверх її низу (Віча 09.09.2026). Пропорція взята з самих файлів: вони 950 x 1320, тобто приблизно 5:7. Висота картки рахується від ширини, і власної висоти в неї немає — тому картки в стрічці однакові навіть з різними за довжиною підписами. */ aspect-ratio: 950 / 1320; position: relative; /* Видно лише поки картинка не завантажилась. */ background-color: var(--bg-color-dark-alt); } /* Внутрішнє обведення картки. Окремий псевдоелемент, а не box-shadow на самій картці: inset-тінь малюється ПІД вмістом, і картинка сховала б її. Той самий прийом, що в .flex-col-x-wide-img вище, тільки 1px замість 2. z-index вищий за підпис (2), щоб обведення йшло по краю поверх усього. */ .wn-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20); } .wn-card-img { position: absolute; inset: 0; } .wn-card-img img { width: 100%; height: 100%; object-fit: cover; /* Картинку не можна тягнути мишею: інакше браузер починає своє рідне перетягування файлу й малює напівпрозорий привид картинки — на спробі потягнути стрічку це виглядає як поломка (Віча помітила 09.09.2026). У Firefox цих властивостей немає, там те саме робить скрипт унизу сторінки, перехопленням dragstart. */ -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; } /* ПІДПИС ВИЇЖДЖАЄ ЗНИЗУ. Поведінка перенесена з каруселі Features на amadine-test.belightsoft.com (Віча дала її верстку 09.09.2026): у спокої з-під низу картки видно ТІЛЬКИ заголовок, на наведення абзац розкривається, а заголовок піднімається. МЕХАНІКА В НАС ІНША, і це рішення Вічі 09.09.2026. В оригіналі блок підпису має сталу висоту й з'їжджає вниз на стале число (25.275cqi). Це працює, поки заголовок в один рядок — у них «Recolor Panel», «Fusion Tool». Наші заголовки більші (40 проти їхніх 30) і два з чотирьох переносяться на другий рядок: сталий зсув зрізав би його. Тому зсуву немає зовсім. Блок міряється по вмісту й притиснутий до низу, а ховається САМ АБЗАЦ — рядком сітки, яка розкривається з 0fr до 1fr. Скільки б рядків не було в заголовку, він видимий цілком. Плавність дає перехід по висоті самого блока підпису. ⚠️ НА ТАЧІ НАВЕДЕННЯ НЕМАЄ. На телефоні й планшеті абзац лишається невидимим — видно самий заголовок. В оригіналі так само. */ .wn-card-text { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; /* Наведення ловить сама картка, а не підпис. */ pointer-events: none; /* Кегль абзаца оголошений змінною, бо з нього рахується висота розкритого підпису — чотири рядки. Оголошений ТУТ, а не на картці: cqi міряють ширину картки, а сама картка себе не міряє. */ /* ЗАМІРЯНО: Віча 09.09.2026 — заголовки мають лягати в ОДИН рядок, заради цього кегль зменшено з макетних 40. Число підібране заміром У ШРИФТІ СТОРІНКИ — Open Sans. Перший замір я зробив у пробнику, де шрифт не підключений, і взяв 7.4cqi; на сторінці Open Sans ширший, і найдовший заголовок ліз у два рядки (Віча помітила 09.09.2026). Обмежувач — «Panorama Backgrounds»: на картці 475 він уміщається в рядок до 7.21cqi, на картці 280 — до 7.14cqi. Беремо 6.6cqi — це 31 на десктопі й 18.5 на телефоні. Запас потрібен не про запас: якщо Open Sans не завантажиться, малювати буде наступний у стеку Lucida Grande, а він на 5% ширший (замір 09.09.2026: той самий рядок при кеглі 100 займає 1210 проти 1153). На 6.6cqi заголовок займає 91% рядка в Open Sans і 96% у Lucida — не переноситься в обох. Clamp тут не потрібен: чиста частка ширини сама тримає пропорцію на всіх розмірах картки. */ --wn-h-font-size: 6.6cqi; /* ЗАМІРЯНО: Віча 09.09.2026 — нижня межа 13, а не 14. Нижче картки приблизно 350 кегль упирається в цю межу й перестає зменшуватися разом з карткою, тому підписів стає більше рядків. Замір на картці 280: при 14 рядків 3/4/5/6, при 13 — 3/3/5/5. */ --wn-p-font-size: clamp(1.3rem, 4cqi, 1.9rem); /* ВИСОТА БЛОКА СТАЛА, вміст іде згори — і саме тому заголовки в стрічці починаються з однієї висоти, скільки б рядків у них не було (Віча 09.09.2026). Хвіст порожнечі йде вниз картки: у коротшого заголовка його більше, і це прийнято свідомо. Складається з тих самих чисел макета: поле згори, два рядки заголовка (це максимум у наших підписах), поле знизу. Розкрита додає просвіт 15 і чотири рядки тексту. */ /* 209 — відступ підпису від верху прямокутника з градієнтом: 209 / 475 = 44cqi. Власні поля підпису — окремо, на .wn-card-caption. */ --wn-text-lead: 44cqi; /* Один рядок — див. кегль вище. */ --wn-title-height: calc(var(--wn-h-font-size) * 1.3); /* Скільки рядків тримає підпір і на якому ріже обрізання. Чотири на широкій картці; на вузькій стає п'ять — див. умову нижче. */ --wn-desc-lines: 4; --wn-desc-height: calc(var(--wn-p-font-size) * 1.5 * var(--wn-desc-lines)); --wn-text-closed: calc(var(--wn-text-lead) + 6.32cqi + var(--wn-title-height) + 10.53cqi); --wn-text-open: calc(var(--wn-text-closed) + 3.16cqi + var(--wn-desc-height)); height: var(--wn-text-closed); overflow: hidden; transition: height 0.3s ease-out; padding-top: var(--wn-text-lead); color: var(--color-text-inverse); /* ГРАДІЄНТ — ТЛО САМОГО БЛОКА, а не окремий шар на картці. Це структура з макета (Віча 09.09.2026): прямокутник із затемненням і текст усередині нього — один елемент, тому затемнення їде разом з підписом. Перевірено по макету: в спокої воно починається приблизно на 252 від верху картки, під курсором на 176. Код градієнта — дослівно з макета. */ background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.10) 12.79%, rgba(0, 0, 0, 0.20) 23.06%, rgba(0, 0, 0, 0.28) 31.18%, rgba(0, 0, 0, 0.36) 37.55%, rgba(0, 0, 0, 0.44) 42.53%, rgba(0, 0, 0, 0.50) 46.51%, rgba(0, 0, 0, 0.57) 49.88%, rgba(0, 0, 0, 0.62) 53%, rgba(0, 0, 0, 0.68) 56.25%, rgba(0, 0, 0, 0.73) 60.03%, rgba(0, 0, 0, 0.78) 64.71%, rgba(0, 0, 0, 0.84) 70.66%, rgba(0, 0, 0, 0.89) 78.28%, rgba(0, 0, 0, 0.94) 87.93%, #000000 100%); } /* ЗАТЕМНЕННЯ — окремим шаром, а не тлом блока. Блок тепер міряється по тексту, і градієнт на ньому вийшов би куций та різкий. Висота взята з оригіналу: там блок підпису — 79.17% ширини картки. Зайве вгорі обрізає сама картка. */ /* ЗАМІРЯНО: Віча 09.09.2026, числа з макета — заголовок 40/600/130% білий, текст 19/400/150% кольору #D4D4D4. Кеглі — верхні межі, на картці завширшки 475. Кегль рахується від ширини КАРТКИ (cqi), а не вікна, тому обидва числа переведені у відсотки її ширини: 40 / 475 = 8.42cqi, 19 / 475 = 4cqi. Нижні межі — МОЯ пропозиція, у макеті їх немає: 24 для заголовка (та сама пропорція від картки 280) і 14 для тексту (пропорція дала б 11, а це вже дрібно для читання). ПІДКРЕСЛЕННЯ ПРИБРАНЕ: воно було в Amadine, у макеті його немає (Віча 09.09.2026). */ .wn-card-title { margin: 0; font-size: var(--wn-h-font-size); font-weight: 600; line-height: 1.3; color: #FFFFFF; } /* ОБГОРТКА НАВКОЛО АБЗАЦА ПОТРІБНА, і ось чому: елемент сітки браузер переводить у flow-root, а -webkit-line-clamp живе тільки на -webkit-box. Без обгортки обрізання на четвертому рядку мовчки не працює (перевірено 09.09.2026). Тому рядком сітки є обгортка, а абзац усередині лишається -webkit-box. Відступ від заголовка — теж тут, а не margin у абзаца: у спокої рядок має нульову висоту, і поле ховається разом з текстом, тоді як margin виліз би назовні й лишив щілину. */ /* ПІДПИС — заголовок і опис разом, зі своїми полями. Окремий елемент від прямокутника з градієнтом: у прямокутника свій відступ згори (--wn-text-lead), у підпису — власні поля (Віча 09.09.2026). ЗАМІРЯНО: Віча 09.09.2026 — поля 30 / 40 / 50 на картці завширшки 475: 30 / 475 = 6.32cqi, 40 / 475 = 8.42cqi, 50 / 475 = 10.53cqi. */ .wn-card-caption { padding: 6.32cqi 8.42cqi 10.53cqi; } /* ОБГОРТКА НАВКОЛО АБЗАЦА. Оформлення не має — потрібна тільки як опора для підпору, який тримає абзац рівно на чотирьох рядках. Розкриття робить не вона, а стала висота блока підпису вище: вміст у ньому вирівняний по верху, тому заголовки в стрічці починаються з однієї висоти, а зайве місце йде вниз картки (Віча 09.09.2026). */ .wn-card-desc { /* Обгортка лишилася тільки як опора для підпору абзаца. Ховає її тепер сам блок підпису — своєю сталою висотою. */ } .wn-card-text p { margin: 0; /* Відступ від заголовка — полем самого абзаца, всередині обгортки: на обгортці він лишався б видимою щілиною навіть при нульовій висоті рядка, бо overflow не з'їдає власні поля елемента. ЗАМІРЯНО: Віча 09.09.2026 — між заголовком і текстом 15, тобто 15 / 475 = 3.16cqi. В Amadine тут було 2.083cqi. */ padding-top: 3.16cqi; font-size: var(--wn-p-font-size); font-weight: 400; line-height: 1.5; color: #D4D4D4; /* ПІДПІР НА ЧОТИРИ РЯДКИ. Без нього блок підпису міряється по справжній довжині тексту, і заголовки в стрічці стають на різній висоті: у Sketchfab чотири рядки, у Panorama три — і заголовок сусідньої картки вищий (Віча помітила 09.09.2026). Чотири рядки — та сама межа, на якій текст обрізається. При міжрядковому 1.5 це рівно 6em; поле згори додається окремо, бо box-sizing тут border-box і воно з'їло б частину рядка. */ /* Підпір рахується від САМОГО ТЕКСТУ, без поля згори — тому тут content-box. Інакше поле з'їдало б частину четвертого рядка, і висота блока вище розходилася б із вмістом на пару пікселів. */ box-sizing: content-box; min-height: var(--wn-desc-height); /* ОДНАКОВЕ ЧИСЛО РЯДКІВ У ВСІХ КАРТОК — разом із підпором вище це тримає картки синхронними: блок підпису міняється разом з карткою, як картинка, а не стрибає від довжини тексту. */ display: -webkit-box; -webkit-line-clamp: var(--wn-desc-lines); -webkit-box-orient: vertical; overflow: hidden; opacity: 0; transition: opacity 0.3s ease-out; } .wn-card:hover .wn-card-text { height: var(--wn-text-open); } /* ДЕ НАВЕДЕННЯ НЕМАЄ — текст показуємо одразу (Віча 09.09.2026). Умова не за шириною, а за самим пристроєм: на телефоні й планшеті курсора немає взагалі, і абзац інакше не побачив би ніхто. Вузьке вікно на десктопі при цьому лишається з наведенням. */ /* П'ЯТИЙ РЯДОК НА ВУЗЬКІЙ КАРТЦІ. Найдовший підпис — User Accounts, і перелік платформ у ньому обов'язковий (Віча 09.09.2026), а кегль опускати вже нікуди: 13 — межа читабельності. Умова написана по ширині САМОЇ КАРТКИ, а не вікна: картка в нас контейнер, і в стрічці її ширина від вікна залежить не напряму. Поріг 324 знятий заміром: у Open Sans п'ятий рядок з'являється на картці 320, на 325 підпис ще вкладається в чотири. Місця в картці вистачає з запасом — на вузькій над затемненням лишається близько 90 порожніх пікселів навіть з п'ятим рядком. ⚠️ Якщо Open Sans не завантажиться, запасний Lucida Grande ширший на 5%, і User Accounts не вміщається в чотири рядки навіть на десктопі — там хвіст обріжеться. */ @container wn-card (max-width: 324px) { .wn-card-text { --wn-desc-lines: 5; } } @media (hover: none) { .wn-card-text { height: var(--wn-text-open); } .wn-card-text p { opacity: 1; } } .wn-card:hover .wn-card-text p { opacity: 1; transition-delay: 0.05s; } /* СТРІЛКИ. Перенесені з контрола .btn-control сусіднього сайту — Віча дала його верстку 09.09.2026 разом з каруселлю. Взяті самі правила, але на наших класах: їхньої палітри (--gray-150 і сусіди) у нас немає, тому числа підставлені прямо, з їхніх змінних. Кнопки сховані в розмітці атрибутом hidden і показуються скриптом — щоб без скрипта не висіли мертві кнопки. */ .wn-deck-nav { display: flex; gap: 12px; justify-content: center; /* ЗАМІРЯНО: Віча 09.09.2026 — 55 від стрічки на максимумі. Рахується від ширини картки, як і проміжок між картками: 55 / 475 = 11.58%. На телефоні виходить 32 — сталі 55 там завеликі. */ margin-top: calc(var(--wn-card-width) * 0.1158); } .wn-deck-arrow { /* ЗАМІРЯНО: Віча 09.09.2026 — 56 на максимумі. В оригіналі контрол доходить до 60, і його вилка 40 → 60 проведена прямою 375 → 768. Наша йде до 56 і прямою 375 → 1200 — тією самою, по якій на цій сторінці рухається все інше. ВІД ШИРИНИ ВІКНА, А НЕ ВІД ШИРИНИ КАРТКИ — і це навмисно. Решта стрічки прив'язана до картки: проміжок 9.26% її ширини, відступ стрілок 11.58%. Контрол — ні, бо в оригіналі такі кнопки розсипані по всій сторінці, і вони мають бути однакові МІЖ СОБОЮ, а не підлаштовуватися під сусідній блок (пояснення Вічі 09.09.2026). Тому не «виправляти» на cqi. */ width: clamp(4rem, 3.273rem + 1.939vw, 5.6rem); aspect-ratio: 1 / 1; border-radius: 50%; /* OVERFLOW: HIDDEN ТУТ БУВ І ЗНЯТИЙ 09.09.2026. У Safari на ньому по краю кола лишався світлий обідок — Віча зловила на macOS 13. Обрізати нам нема чого: стрілка малюється трафаретом, вписаним у квадрат кнопки, і назовні не виходить. У контролі Amadine, звідки взяті ці правила, overflow потрібен був для іншого вмісту. */ position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; /* ЗАМІРЯНО: Віча 09.09.2026 — кольори зняті з макета «control стани» (pdf у масштабі 1:1, коло там теж 56). Це ТЕМНА версія контрола: коло #1A1A1A, стрілка біла. Спершу я переніс світлу — коло #E2E2E2 зі стрілкою #595F66, — але вона з тих секцій Amadine, де тло світле, а наша сторінка темна. */ background-color: #1A1A1A; border: none; outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background-color 0.3s ease; } /* Стрілка — трафарет по svg, а не сам svg: тому колір її задає css і на наведення він міняється. Полотно іконок 60 x 60, заливки в них немає навмисно. */ .wn-deck-arrow::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #FFFFFF; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--btn-icon); mask-image: var(--btn-icon); transition: background-color 0.3s ease; } .wn-deck-arrow[data-dir="-1"]::after { --btn-icon: url("/assets/img/common/controls/icon-prev.svg"); } .wn-deck-arrow[data-dir="1"]::after { --btn-icon: url("/assets/img/common/controls/icon-next.svg"); } .wn-deck-arrow:hover { background-color: #262626; } .wn-deck-arrow:focus-visible { outline: 2px solid var(--color-secondry-anchor); outline-offset: 2px; } /* Натискання: стрілка синіє (Віча 09.09.2026). Колір — акцентний --color-secondry-anchor з легасі, той самий, яким на цій сторінці набрані посилання. Так само поводиться оригінал в Amadine: там натискання теж красить іконку в акцент. Спершу тут стояв --color-header-dark-hover (#676E78), але він майже збігався з кольором вимкненої стрілки (#676868) — два різні за змістом стани виглядали однаково. */ .wn-deck-arrow:active::after { background-color: var(--color-secondry-anchor); } /* Вимкнена кнопка — з того ж макета: коло світлішає так само, як на наведення, а гасне сама стрілка. В Amadine тут була прозорість 0.5, але макет дає інші, явні кольори. */ .wn-deck-arrow:disabled { background-color: #262626; cursor: not-allowed; pointer-events: none; } .wn-deck-arrow:disabled::after { background-color: #676868; } /* ── Плитки «What's More» ────────────────────────────────────────── */ /* ЗАМІРЯНО: Віча 09.09.2026 — заголовок секції 50, як у заголовків двох великих можливостей. Беремо ту саму змінну сторінки, щоб числа не розходилися. Колір Віча назвала #313338; у легасі є #313438 — різниця в одній цифрі, тож беремо змінну легасі. */ .whats-new .section-heading { font-size: var(--font-size-h2); color: var(--color-text-base); } .wn-tiles { display: grid; grid-template-columns: 1fr; /* ЗАМІРЯНО: Віча 08.09.2026 — 33 між плитками. */ gap: 33px; margin: 0; padding: 0; list-style: none; /* На телефоні плитка одна в ряду й не тягнеться на всю ширину: Віча 09.09.2026 — не ширше 400 і по центру. */ justify-items: center; } /* ЗАМІРЯНО: Віча 09.09.2026 — від заголовка секції до плиток 55. Раніше тут стояла утиліта легасі u-mt-30-50 — сходинка 30 → 50. Вилка 40 → 55 — та сама пряма, по якій уже йдуть поля ролика на цій сторінці; нижнє число моє, у макеті його немає. */ .wn-tiles-gap { margin-top: clamp(40px, 33.18px + 1.818vw, 55px); } /* ЗАМІРЯНО: Віча 09.09.2026 — від плиток до ряду платформ 100, і на телефоні 35 замало. Готова змінна легасі --spacing-55-100 дає рівно цю вилку: 55 → 100, плавно. Раніше стояла сходинка u-mt-35-90. */ .wn-os-row { margin-top: var(--spacing-55-100); } /* Плитка — тільки контейнер: вона нічого не малює, її діло — дати внутрішньому блоку свою ширину для cqi. Тому в неї немає ні полів, ні тла: інакше контейнер міряв би себе за вирахуванням власних полів, і всі числа всередині поїхали б. */ .wn-tile { container-type: inline-size; container-name: wn-tile; width: 100%; max-width: 400px; } /* ЗАМІРЯНО: Віча 09.09.2026 — біле тло, радіус 30, поля 40. ОБИДВА ЧИСЛА ГУМОВІ й рахуються від ширини плитки, а не вікна — і це тут принципово, бо ширина плитки стрибає на брейкпоінтах: 400 на телефоні, 252 одразу після 568, 418 перед 900, 268 після нього, 378 на десктопі. Тобто вікно ширшає, а плитка вужчає. На десктопі плитка 378 = (1200 − 33 × 2) / 3, звідси частки: 30 / 378 = 7.94cqi, 40 / 378 = 10.58cqi. */ .wn-tile-inner { height: 100%; background-color: var(--color-white); border-radius: 7.94cqi; padding: 10.58cqi; } .wn-tile-inner p { /* ЗАМІРЯНО: Віча 09.09.2026 — 25 / 600 / 130%, колір чорний, відступ від іконки 20. */ margin: 5.29cqi 0 0; /* ЗАМІРЯНО: Віча 09.09.2026 — 25 на плитці 378, тобто на десктопі. Переведено у частку її ширини: 25 / 378 = 6.61cqi. Нижня межа 16 — моя, у макеті її немає; на найвужчій плитці (252, одразу після брейкпоінта 568) формула дає 16.7, тож межа поки не спрацьовує і стоїть на випадок ще вужчих екранів. Відступ від іконки теж від ширини плитки: 20 / 378 = 5.29cqi. */ font-size: clamp(1.6rem, 6.61cqi, 2.5rem); font-weight: 600; line-height: 1.3; color: var(--color-black); } /* ЗАМІРЯНО: Віча 09.09.2026 — іконки показуються в рідному розмірі, 80 у висоту, притиснуті вліво. П'ять із них у полі 80 x 80, а gltf — 120 x 80, тобто в півтора раза ширша. Тому задана ВИСОТА, а ширина йде сама: жорсткий квадрат сплющив би gltf. */ .wn-tile-icon { display: block; width: auto; height: 80px; } /* ── Ширші екрани ────────────────────────────────────────────────── */ @media (min-width: 568px) { .wn-tiles { grid-template-columns: repeat(2, 1fr); } /* Обмеження 400 діяло тільки поки плитка одна в ряду. */ .wn-tile { max-width: none; } } @media (min-width: 900px) { .wn-tiles { grid-template-columns: repeat(3, 1fr); } }