/* ========================================================================== Лендинг v3 — з 14.09.2026 головна сторінка «/» (до того прев'ю на /landing3) Порт React-макета дизайнера (вересень 2026) у Blade. Токени кольору й типографіки приходять з public/css/design/colors_and_type.css. Тут — лише палітра лендингу (--lv3-*), скидання, анімації та респонсив. ⚠️ Tailwind на цій сторінці НЕ вантажиться. Класи з префіксом .lv3-* не перетинаються ні з .lv2-* (поточний лендинг), ні з .cr-* (кабінет). ========================================================================== */ :root { /* Палітра лендингу. Спільні з кабінетом лише --ink-* і шрифти; решта — тут. Узгодженість із кабінетом і фавіконом — НЕ обмеження (власник 13.09.2026: «проєкт у розробці, можна міняти все»), тож кольори обрані від суті продукту, а не від системи кабінету. Кожен токен має одну роль, і саме за роллю його треба обирати в розмітці: --lv3-hero-bg / -fg / -fg-muted / -line — перший екран і тільки він (жорсткого #fff у hero немає — світлий перший екран, якщо знадобиться, не вимагатиме правок розмітки); --lv3-dot — крапка логотипа в hero й у футері (власник 13.09: зелена, як у макеті, — єдиний зелений у нашій палітрі; зелень лого Приват24 не наша); --lv3-cta-bg / -fg — головна кнопка: hero, картка CTA, смуга, популярний тариф; --lv3-accent — темні поверхні (популярний тариф, темний кейс «Для кого», картка CTA) і лінії іконок; текст на ній завжди #fff — вона темна; --lv3-deep — найтемніша поверхня: футер, смуга «5 кроків → 1 крок», темна картка калькулятора; на ній живе --lv3-accent-on-dark; --lv3-accent-ink — текст на білих бейджах і чипах темних карток, номери кроків; --lv3-accent-on-dark — підписи на --lv3-deep; --lv3-accent-soft — тло картки «Безпека», плашок іконок і номерів кроків; --lv3-sand — картка калькулятора й світлий кейс «Для кого». Штампи ШІ-дизайну, яких тут свідомо немає (власник 13.09: «видно одразу»): чорний фон + кислотний акцент, крем + теракота, капс-підписи над кожним заголовком, стрілка в тексті кнопок. Смарагдовий макет знято ще раніше: зелений читається як аптека. */ /* «Гривня» (обрано власником 13.09.2026 з п'яти напрямків, канва в docs/landing_v3_notes.md). Пара з купюр 1000 ₴ і 500 ₴: глибокий синьо-сірий + вохра. Синій — не чорний і не кобальт, вохра — не лимонний Райфу. Hex живуть у --brand-* (colors_and_type.css) — з 14.09 палітра спільна з auth, тут лише аліаси за ролями лендингу. --lv3-hero-bg і --lv3-accent навмисно окремі імена з одним значенням: світлий hero не вимагатиме правок розмітки. */ --lv3-page: var(--brand-page); --lv3-hero-bg: var(--brand-accent); --lv3-hero-fg: var(--brand-hero-fg); --lv3-hero-fg-muted: var(--brand-hero-fg-muted); --lv3-hero-line: var(--brand-hero-line); --lv3-dot: var(--brand-dot); --lv3-cta-bg: var(--brand-cta-bg); --lv3-cta-fg: var(--brand-cta-fg); --lv3-accent: var(--brand-accent); --lv3-accent-ink: var(--brand-accent-ink); --lv3-accent-on-dark: var(--brand-accent-on-dark); --lv3-accent-soft: var(--brand-accent-soft); --lv3-sand: var(--brand-sand); --lv3-deep: var(--brand-deep); } /* Телефон на темній панелі: корпус #05080F на #253B5E дає лише 1,8:1, а тінь рамки (rgba ink) на темному не видно — тонке світле кільце повертає силует. */ .lv3-hero-phone .cr-phone { box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 28px 56px -20px rgba(0,0,0,0.65); } /* Головна кнопка — одна система на всю сторінку: на темних поверхнях біла піл із текстом кольору поверхні — колір беруть усі чотири (hero, картка CTA, смуга, популярний тариф), а 56px / 18px / тінь — hero і картка CTA (смуга компактна, кнопки тарифів мають бути однієї висоти в трьох картках); на світлих (Free/Business) — навпаки, синя з білим. Так само зроблено в expirenza (власник 13.09 попросив глянути): біла піл 56px, текст 20px кольору hero, тінь 0 8px 16px. Вохру власник відкинув («не дуже»), біла — «краще, але щось не так»: не так були розмір і поля (50px/16px) і бронзовий текст на кнопці внизу сторінки. Вохру й м'яту власник порівняв живцем через тимчасовий перемикач і лишив білу (13.09). */ /* Дрібні теги в картках — без капсу, без mono і без розрядки: у макеті це були трекінгові капс-лейбли, тобто штамп згенерованого дизайну. Підписи над заголовками секцій («Для кого», «Тарифи») зняті зовсім (власник 13.09): вони дублювали навігацію. */ .lv3-tag { font-size: 12.5px; font-weight: 600; letter-spacing: 0; } /* Кільце ON-DARK: .lv3-on-dark ставлять контейнери з тлом --lv3-accent (картка CTA, популярний тариф, темний кейс), щоб фокус-кільце кнопок у них було білим, а не чорнильним на чорнильному. */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } /* overflow-x: clip, а НЕ hidden. hidden робить body скрол-контейнером, і position:sticky у лівій колонці FAQ прилипає до нього замість вікна. clip обрізає так само, але скрол-контейнера не створює. */ body { overflow-x: clip; background: var(--lv3-page); font-family: var(--font-sans); color: var(--ink-900); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } a { color: var(--ink-900); transition: opacity .15s, color .2s; } /* Прозорість на hover — тільки для текстових посилань. Раніше правило било й по кнопках: біла CTA на смарагдовому фоні при наведенні блідла разом із текстом, а посилання футера падали з контрасту 7,2 до 4,25. */ a:not([style*="background"]):hover { opacity: .72; } /* Посадка якорів. Якір веде на край секції, а кожна секція починається зі 120px верхнього відступу (інлайн у партіалах; на мобільному 88, блок ≤860px нижче) — тобто після кліку в шапці людина бачила хвіст попередньої секції, а заголовок цільової стояв на 188px нижче краю вікна (власник 08.09: «скрол недостатньо низько»). Від'ємний scroll-margin зсуває точку посадки на цей відступ: h2 секції стає на 48px від краю вікна (13.09: підписи над h2 зняті, тож 32px, розраховані під них, стали тісними — h2 сідав майже на край). Від'ємні довжини граматика дозволяє (css-scroll-snap-1: scroll-margin = {1,4}, без обмеження [0,∞], яке є у scroll-padding); перевірено живцем у Chromium і WebKit 08.09. Лише main > section: hero (#top) відступу не має, і на нього ніхто не веде. Фіксованої шапки немає — компенсувати більше нічого. ⚠️ 120 і 88 зчеплені з padding-top секцій: зміниш відступ — зміни й тут, інакше якір знову сяде не туди. */ main > section[id] { scroll-margin-top: calc(48px - 120px); } [x-cloak] { display: none !important; } /* Клавіатурний фокус (у макеті його не було взагалі). Колір залежить від фону, бо WCAG 1.4.11 вимагає 3:1 до сусіднього кольору, а мʼята #5EE3B2 дає лише 1,5:1 на паперовому тлі й 1,6:1 на білих картках — тобто на 90% сторінки її просто не видно. Темний ink дає 17,8:1 на світлому, білий — 4,6:1 на смарагдовому. */ :focus-visible { outline: 3px solid var(--ink-900); outline-offset: 3px; border-radius: 4px; } .lv3-hero-panel :focus-visible { outline-color: var(--lv3-hero-fg); } .lv3-on-dark :focus-visible, footer :focus-visible { outline-color: #fff; } /* ── Анімації ───────────────────────────────────────────────────────────── */ @keyframes lv3Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes lv3Fade { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @keyframes lv3Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Дрейф + похитування телефона в hero (рецепт із макета: 15s лінійно + 6s ±0.6°) */ @keyframes lv3Drift { 0% { transform: translate(0, 0); } 3% { transform: translate(0, 1%); } 20% { transform: translate(-.5%, 2%); } 40% { transform: translate(.2%, 0); } 60% { transform: translate(.5%, -2%); } 97% { transform: translate(0, -1%); } 100% { transform: translate(0, 0); } } @keyframes lv3Sway { 0%, 100% { transform: rotateZ(0); } 30% { transform: rotateZ(-.6deg); } 70% { transform: rotateZ(.6deg); } } .lv3-drift { animation: lv3Drift 15s linear infinite; } .lv3-sway { animation: lv3Sway 6s ease infinite; transform-origin: 20% 20%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lv3-drift, .lv3-sway, .lv3-marquee-track { animation: none !important; } .lv3-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* Акордеон FAQ: lv3Fade зсуває вміст по вертикалі, а плюс/мінус крутиться. Обидва — рух, обидва були поза гейтом. */ #faq [id^="lv3-faq-a-"] { animation: none !important; } #faq svg, #faq span { transition: none !important; } } /* Мокап телефона в hero — декорація, а не інтерфейс. Усередині нього живий скрол-контейнер (.cr-pp-content, create.css:229) з ~2000px вмісту: на мобільному він ловить свайп рівно в зоні великого пальця, а Chrome 132+ робить такі контейнери фокусованими з клавіатури, якщо всередині немає фокусованих елементів — а їх там немає. Тому скрол вимикаємо, підказку «Гортайте» ховаємо, а сам блок ховаємо від скрінрідера в розмітці. Одне без іншого робити не можна: aria-hidden над фокусованим скролером — це окрема помилка доступності. */ .lv3-hero-phone .cr-pp-content { overflow: hidden !important; } .lv3-hero-phone .cr-pp-scrollcue, .lv3-hero-phone .cr-pp-fade { display: none !important; } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* 100svh, а не 100vh: на мобільних браузерах vh рахується від висоти вікна БЕЗ адресного рядка, тож панель вилазить за екран і кнопка ховається. svh — «найменша» висота, за неї нижній край не заїде. Фолбек для старих — рядок vh нижче, який svh перекриває. */ .lv3-hero-panel { min-height: 100vh; min-height: 100svh; } /* Високий екран (2K і вище): панель перестає тягнутись на всю висоту. Телефон обмежений 820px, тому на 1276px і вище решта висоти ставала порожнім зеленим полем над заголовком — контент притискався донизу, а перший екран читався як помилка верстки. Тут панель стискається до вмісту, і сторінка починає гортатись раніше. */ @media (min-height: 1000px) { .lv3-hero-panel { min-height: 0; padding-bottom: 56px; } .lv3-hero-copy { padding-bottom: 0 !important; } } /* Телефон масштабується від висоти вікна, а не від ширини: у першому екрані він мусить поміститись цілком. */ .lv3-phone-fit { /* Лише svh, без «фолбека» vh поруч: значення кастомної властивості не валідується при парсингу, тож із двох декларацій завжди виграє остання, і vh-рядок був би мертвим. svh є в Safari 15.4+ і Chrome 108+. */ --ph: min(820px, calc(100svh - 96px), 96vw); height: var(--ph); width: calc(var(--ph) * 290 / 608); flex-shrink: 0; } /* Мокап .cr-phone має фіксовані 290×608 (public/css/design/create.css:224-226). Вписуємо його масштабуванням, а не переписуванням розмірів: так мокап лишається ЄДИНОЮ копією розмітки сторінки оплати і не розходиться з /l/{code}. ⚠️ --k рахує JS (див. hero.blade.php), а не CSS. Здавалося б, вистачило б scale(calc(var(--ph) / 608)) — але це ділення довжини на число дає ДОВЖИНУ, а scale() приймає лише число, тож уся декларація відкидається. Отримати безрозмірне число можна тільки діленням на довжину — calc(var(--ph) / 608px) — а ця можливість є в Chrome 140+ і Safari 26+, і немає у Firefox та Samsung Internet. Тому число приходить ззовні. max-width: none обовʼязковий: власний max-width:100% мокапа всередині обгортки, вужчої за 290px, стиснув би РОЗКЛАДКУ ще до масштабування — і телефон зменшився б двічі, з переносами рядків. */ .lv3-phone-fit > .cr-phone { transform: scale(var(--k, 1)); transform-origin: top left; margin: 0; max-width: none; } /* Відео замість мокапа всередині тієї самої рамки (hero.blade.php). Екран рамки — 272×590 (290 мінус 9+9 padding), тобто 0.461; перше тестове відео 590×1280 має 0.4609, тож cover нічого не ріже. cover, а не fill: відео з іншим кадром має обрізатись, а не розтягнутись обличчями вбік. Абсолютне позиціювання, бо .cr-phone-screen — flex-колонка: як звичайний flex-item відео стискалося б під свій внутрішній розмір. Обрізає його overflow: hidden рамки, власного border-radius не треба. */ .lv3-phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink-50); } /* Ротація заголовків-креативів (hero.blade.php, lv3Headlines): обгортка тексту згасає й трохи опускається, JS міняє текст на піку прозорості, потім обгортка повертається. min-height 1.92em на h1 — два рядки при line-height .96, щоб hero не стрибав, якби якийсь креатив виявився на рядок коротшим. */ .lv3-hero-h1-in { display: inline-block; transition: opacity .26s var(--ease-out), transform .26s var(--ease-out); } .lv3-hero-h1-in.is-out { opacity: 0; transform: translateY(8px); } @media (prefers-reduced-motion: reduce) { .lv3-hero-h1-in { transition: none !important; } } /* Поява телефона при завантаженні. Анімацією, а не JS-класом: без скриптів і без миготіння, якщо Alpine ще не піднявся. */ @keyframes lv3RevealIn { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } } .lv3-reveal { animation: lv3RevealIn .8s var(--ease-out) .15s both; } /* ── Стрічка банків ─────────────────────────────────────────────────────── */ .lv3-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .lv3-marquee-track { display: flex; gap: 12px; width: max-content; animation: lv3Marquee 42s linear infinite; } .lv3-marquee:hover .lv3-marquee-track { animation-play-state: paused; } /* ── Повзунок калькулятора ──────────────────────────────────────────────── */ .lv3-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: rgba(10,15,28,.16); outline: none; } .lv3-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--lv3-accent); cursor: pointer; box-shadow: 0 4px 14px rgba(10,15,28,.35); } .lv3-range::-moz-range-thumb { width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--lv3-accent); cursor: pointer; } /* ── Респонсив ──────────────────────────────────────────────────────────── */ @media (max-width: 1199px) { .lv3-create-points { grid-template-columns: 1fr !important; gap: 28px !important; } .lv3-security-grid { grid-template-columns: 1fr !important; } .lv3-acq { grid-template-columns: 1fr !important; gap: 36px !important; } .lv3-faq { grid-template-columns: 1fr !important; gap: 32px !important; } .lv3-faq > div:first-child { position: static !important; } } @media (max-width: 860px) { /* Мобільний hero: заголовок → підзаголовок → ВІКНО З ТЕЛЕФОНОМ → кнопка (рішення власника 08.09, обрано з канви варіантів — напрямок C). display:contents на текстовій колонці дозволяє впорядкувати її дітей разом із телефоном одним order-ом. Порядок макета (телефон перед кнопкою) повернуто свідомо: перша версія прев'ю ставила кнопку вище заради «над згином», але власник обрав телефон першим — «відео коротке, проскролити не проблема». Кнопка стоїть на дні першого екрана, у зоні великого пальця; на зовсім коротких екранах іде за згин, і це прийнято. */ .lv3-hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; text-align: center; } .lv3-hero-copy { display: contents; } /* Вертикальний бюджет першого екрана (390×664 — Safari на iPhone 14 з панелями): вікно під телефон забирає залишок, тож кожен зайвий піксель між рядами — мінус піксель телефона. 08.09 власник попросив «мокап трохи більше» і «відступ заголовка» (h1 стояв за 8px від логотипа) — ущільнено все, крім самого телефона: шапка без нижнього поля, зате в h1 власні 20px зверху; підзаголовок 15px/1.45 на всю ширину колонки — так він стає у два рядки замість трьох (−28px); поля між рядами менші; кнопка 50px замість 54 (13.09 — 56px за єдиною системою кнопок, телефон −6px); кнопка «Вхід» нижча. Разом телефон 311 → 363px на 390×664 і 292 → 323 на 360×640 (там підзаголовок ще три рядки). Розмір h1 не чіпали: креативи мають лишатись двома рядками при 39px, і менший заголовок ніхто не просив. */ .lv3-hero-panel header { margin-bottom: 0 !important; } .lv3-hero-login { padding: 8px 18px !important; } .lv3-hero-h1 { order: 1; font-size: clamp(34px, 10vw, 44px) !important; margin: 20px 0 10px !important; } .lv3-hero-sub { order: 2; font-size: 15px !important; line-height: 1.45 !important; margin: 0 auto 12px !important; max-width: 360px !important; } /* max-width, бо на планшеті 768px розтягнута кнопка виходила майже на 700px */ .lv3-hero-cta { order: 4; justify-content: center; flex-direction: column; align-items: stretch; max-width: 420px; margin: 14px auto 0; width: 100%; } .lv3-hero-cta a { justify-content: center; padding: 0 24px !important; min-width: 0 !important; font-size: 16px !important; } /* Посилання «Як це працює» і примітка про ліміт/Pro на мобільному сховані (рішення власника 08.09): разом вони займали ~130px і відсували телефон за згин. Телефон (далі — відео шляху клієнта) і є відповіддю «як це працює», а факти з примітки повторені в тарифах і на формі реєстрації. На десктопі обидва на місці. !important — бо display у посилання заданий інлайном. */ .lv3-hero-more, .lv3-hero-note { display: none !important; } /* Якорі шапки — лише на десктопі (власник 08.09): на мобільному вони або не влазять поруч із «Вхід», або вимагають бургера, який забирає увагу з першого екрана. Якорі на мобільному лишаються у футері. Ховаємо весь