/* ------------------------------------------------------------------------ tPozyka — Homepage redesign (Main-Redesign template) Figma: tPozyka-Landing / section "tpozyka.com" Scope: everything lives under .pzrd-* classes so it does not collide with the globally-loaded style.css / new.css. ------------------------------------------------------------------------ */ :root { /* ---- акценты макета ------------------------------------------------- Значения сняты пипеткой со скриншотов Figma в desktop/ и mobile/. */ --pzrd-yellow: #ffff00; /* основной акцент: плашки, текст на чёрном */ --pzrd-yellow-deep: #999900; /* иконки аккордеона, ссылки «Детальні умови» */ --pzrd-yellow-soft: #ffffe6; /* заливка отмеченного чекбокса згоди */ --pzrd-blue: #0088ff; /* остался только иконкой «Мінімум документів» */ --pzrd-orange: #f38e00; /* иконка калькулятора */ --pzrd-orange-2: #ff9500; /* иконка «Оперативність» */ --pzrd-green: #34c759; /* иконка відгуків */ --pzrd-green-2: #35ca5a; /* иконка «Інтерактивність» */ --pzrd-purple: #6e4ab6; /* иконка «Зручність» */ --pzrd-red: #f70847; /* «Надійність», іконка попередження */ --pzrd-teal: #00b3b6; /* «Автоматизація», іконка умов */ --pzrd-stars-src: url("../static_images/redesign/icons/stars-5.svg"); --pzrd-acc-ic: url("../static_images/redesign/icons/ic-card.svg"); --pzrd-bg: #f0f0f0; /* Background/Primary */ --pzrd-panel: #e6e6e6; /* плашки аккордеона */ --pzrd-sheet: #ffffff; --pzrd-stroke: #e0e0e0; --pzrd-ink: #000000; /* Content/Primary */ --pzrd-ink-2: #505050; /* ~Content/Secondary */ --pzrd-text-2: #4d4d4d; /* Color/text/secondary — весь мелкий текст макета */ --pzrd-bg-2: #f7f7f7; /* Color/background/secondary */ --pzrd-tonal: #e0e4eb; /* Color/background/tonal — фон блока додатка */ --pzrd-ink-3: #999999; /* Content/Tertiary */ /* Тёмная подложка hero и блока приложения (макет: #2d3633) и общий тайл паттерна ↗ поверх неё — белые стрелки с opacity .033 дают #343c39, ровно как в макете. Тайл инлайном, чтобы не тянуть отдельный ассет. */ --pzrd-dark: #2d3633; --pzrd-arrows: url('data:image/svg+xml,'); /* Тот же тайл для светлой подложки блока «Сплатити кредит легко»: на #c4d4cb белые стрелки дают #cad8d0, это opacity .102. */ --pzrd-arrows-soft: url('data:image/svg+xml,'); --pzrd-radius-lg: 50px; --pzrd-radius-md: 24px; --pzrd-shadow: 0 0 12px rgba(0, 0, 0, .1); --pzrd-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --pzrd-maxw: 1280px; --pzrd-fs: 1; /* font scale for the accessibility panel */ } /* ---- accessibility: font scaling from the «eye» panel ------------------ scripts/script.js adds .font-size-lg / .font-size-xl to . Legacy styles rely on em/rem, redesign sizes are px — so scale them via --pzrd-fs (every font-size in this file is calc( * var(--pzrd-fs))). */ html.font-size-lg { --pzrd-fs: 1.15; } html.font-size-xl { --pzrd-fs: 1.3; } /* ---- base / scoping ---------------------------------------------------- */ .pzrd { font-family: var(--pzrd-font); color: var(--pzrd-ink); background: var(--pzrd-bg); -webkit-font-smoothing: antialiased; line-height: 1.3; overflow-x: hidden; } .pzrd *, .pzrd *::before, .pzrd *::after { box-sizing: border-box; } .pzrd img { max-width: 100%; } /* Буфер replace_images_with_webp_buffer() (functions.php) загортає кожен у . Через це флекс-елементом стає саме , а правила, писані під , до нього не застосовуються — і картинка стискається тим сильніше, чим більше тексту поряд. display: contents прибирає бокс обгортки, і флекс- елементом знову стає сам . */ .pzrd picture { display: contents; } /* Прибираємо контур фокуса з посилань редизайну (окреме прохання по підвалу — поширюємо на весь скоуп, щоб поведінка була однакова). NB: :focus-visible лишається без візуального індикатора, тож навігація з клавіатури більше не підсвічує посилання — якщо це знадобиться повернути, правити тут. */ .pzrd a, .pzrd a:focus, .pzrd a:focus-visible, .pzrd-footer a, .pzrd-footer a:focus, .pzrd-footer a:focus-visible { outline: none; } /* Контент макета — ровно 1280px (--pzrd-maxw). Поля по 20px существуют только для узких экранов, поэтому в max-width их добавляем, а не вычитаем. */ .pzrd-container { width: 100%; max-width: calc(var(--pzrd-maxw) + 40px); margin: 0 auto; padding: 0 20px; } /* ---- shared buttons ---------------------------------------------------- */ .pzrd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 15px; cursor: pointer; font-family: inherit; font-weight: 590; text-decoration: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; text-align: center; } /* Чёрная пилюля: белый текст, жёлтая иконка — «Швидка оплата», «Мій кабінет». */ .pzrd-btn--primary { background: var(--pzrd-ink); color: #fff; min-height: calc(48px * var(--pzrd-fs)); padding: 12px 20px; font-size: calc(16px * var(--pzrd-fs)); } .pzrd-btn--primary:hover { background: #1f1f1f; color: #fff; } .pzrd-btn--primary svg { color: var(--pzrd-yellow); } /* Чёрная пилюля с жёлтым текстом — «Залишити відгук» (в макете именно так). */ .pzrd-btn--ink { background: var(--pzrd-ink); color: var(--pzrd-yellow); padding: 14px 30px; font-size: calc(16px * var(--pzrd-fs)); } .pzrd-btn--ink:hover { background: #1f1f1f; color: var(--pzrd-yellow); } /* Белая пилюля с тонкой рамкой — «Дивитись всі», «Розгорнути». */ .pzrd-btn--white { background: #fff; color: var(--pzrd-ink); border: 1px solid var(--pzrd-ink); padding: 13px 29px; font-size: calc(16px * var(--pzrd-fs)); } .pzrd-btn--white:hover { background: var(--pzrd-bg); } /* Крупная чёрная кнопка с жёлтым текстом — hero CTA, «Отримати гроші». */ .pzrd-btn--cta { background: var(--pzrd-ink); color: var(--pzrd-yellow) !important; width: 100%; height: calc(64px * var(--pzrd-fs)); padding: 18px 20px; font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; } .pzrd-btn--cta:hover { background: #1f1f1f; color: var(--pzrd-yellow); } /* Жёлтая кнопка — «Залишити відгук», «Взяти кредит»/«Сплатити» в футере. */ .pzrd-btn--yellow { background: var(--pzrd-yellow); color: var(--pzrd-ink); padding: 12px 15px; font-size: calc(16px * var(--pzrd-fs)); font-weight: 700; } .pzrd-btn--yellow:hover { background: #e6e600; color: var(--pzrd-ink); } .pzrd-btn svg { flex: 0 0 auto; } /* Глобальный `a { text-decoration: underline !important }` из additional.css:283 подчёркивает и кнопки, и логотип. Побеждаем его по специфичности — макет подчёркивания даёт только текстовым ссылкам (hero, «Детальні умови», SEO-блок). */ .pzrd .pzrd-btn, .pzrd-footer .pzrd-btn, .pzrd-menu__logo, .pzrd-menu__phone, .pzrd-footer__logo { text-decoration: none !important; } /* ------------------------------------------------------------------------ HERO (gradient section: menu + card + money image + calc links) ------------------------------------------------------------------------ */ /* Тёмная подложка макета (#2d3633) c паттерном из стрелок ↗ поверх неё. Цвет и тайл — общие с блоком приложения, лежат в переменных :root. */ .pzrd-hero { position: relative; background-color: var(--pzrd-dark); background-image: var(--pzrd-arrows); background-repeat: repeat; background-size: 180px 180px; padding: 20px 0; overflow: hidden; } .pzrd-hero__inner { width: 100%; max-width: calc(var(--pzrd-maxw) + 40px); margin: 0 auto; padding: 0 20px; display: flex; flex-direction: column; gap: 50px; } /* ---- menu pill --------------------------------------------------------- */ .pzrd-menu { background: var(--pzrd-sheet); border-radius: 20px; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .pzrd-menu__logo { display: inline-flex; align-items: center; text-decoration: none; } /* ---- знак «Твоя Позика.» ------------------------------------------------ Картинка из макета, 140×40: жёлтая плитка со стрелкой + слово. Два файла: logo-full.svg (чёрные буквы) для светлых подложек и logo-full-light.svg (белые буквы) для тёмных — футер и плашка рейтинга. */ .pzrd-logo { display: block; flex: 0 0 auto; width: 140px; height: 40px; } .pzrd-menu__actions { display: flex; align-items: center; gap: 20px; } .pzrd-menu__group { display: flex; align-items: center; gap: 10px; } /* Телефон в макете — просто текст на белой плашке, без своей пилюли. */ .pzrd-menu__phone { display: inline-flex; align-items: center; gap: 8px; background: transparent; min-height: calc(48px * var(--pzrd-fs)); padding: 12px 20px; font-size: calc(16px * var(--pzrd-fs)); font-weight: 590; color: var(--pzrd-ink); text-decoration: none; white-space: nowrap; cursor: pointer; } .pzrd-menu__phone svg { width: 20px; height: 20px; } /* Кнопки шапки — Color/text/action/primary #ffff00: в макете и подпись, и иконка жёлтые (глобальный .pzrd-btn--primary белый — там он используется в других секциях, поэтому перекрываем только внутри пилюли меню). */ .pzrd-menu__group--auth .pzrd-btn--primary, .pzrd-menu__group--auth .pzrd-btn--primary:hover { color: var(--pzrd-yellow); } /* Глаз — без подложки (в макете «Glass Effect» залит белым, то есть цветом самой пилюли), бургер — в окружности Color/background/secondary #f7f7f7. Обе кнопки в макете 40x40, иконка бургера 20px, иконка глаза 21.818px. */ .pzrd-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 9px; background: transparent; border: 0; border-radius: 9999px; cursor: pointer; color: var(--pzrd-ink); } .pzrd-nav__burger { background: var(--pzrd-bg-2); } .pzrd-nav__burger:hover { background: var(--pzrd-panel); } .pzrd-icon-btn svg { width: 20px; height: 20px; display: block; } .pzrd-icon-btn .btn_eye { display: inline-flex; } .pzrd-icon-btn .btn_eye svg { width: 22px; height: 22px; } /* ---- hero body --------------------------------------------------------- */ .pzrd-hero__body { position: relative; display: flex; align-items: flex-start; gap: 50px; min-height: 604px; } .pzrd-hero__col { position: relative; z-index: 3; display: flex; flex-direction: column; /* 566px при --pzrd-fs: 1; для A2/A3 растёт вместе с текстом (40px — паддинги .pzrd-hero__links, поэтому внутренняя ширина масштабируется ровно на fs), карточка при этом заезжает на картинку с деньгами (z-index 3 > 2). */ width: calc(526px * var(--pzrd-fs) + 40px); max-width: 100%; flex: 0 0 auto; } .pzrd-hero__card { position: relative; z-index: 3; background: #fff; border-radius: var(--pzrd-radius-lg); box-shadow: var(--pzrd-shadow); padding: 50px; display: flex; flex-direction: column; gap: 30px; } /* в макете 24px SF Pro; Montserrat шире и строка не влезает в 466px карточки — держим её в одну строку, как в макете, уменьшив кегль */ .pzrd-hero__eyebrow { font-size: calc(22px * var(--pzrd-fs)); line-height: 1; color: var(--pzrd-text-2); margin: 0; white-space: nowrap; } /* трекинг чуть плотнее: в макете SF Pro, подставляемый Montserrat шире и русская строка «Выбирайте кредит» переставала помещаться в 466px карточки */ .pzrd-hero__title { font-size: calc(48px * var(--pzrd-fs)); font-weight: 700; line-height: .9; letter-spacing: -.02em; color: var(--pzrd-ink); margin: 0; } .pzrd-amount { container-type: inline-size; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; width: 100%; aspect-ratio: 466 / 100; border-radius: 20px; background: var(--pzrd-bg-2); } /* Конфетти из плашки убрано — в макете осталась только иконка ₴ слева. */ .pzrd-amount::after { /* значок ₴ */ content: ''; position: absolute; pointer-events: none; left: 4.29%; top: 20%; height: 60%; aspect-ratio: 1; background: url('../static_images/redesign/amount-badge.svg') center / 100% 100% no-repeat; } .pzrd-amount__group { display: inline-flex; align-items: baseline; /* «До» и сумма по одной базовой линии */ gap: 13px; gap: 2.79cqw; /* отступ справа — маржином, а не паддингом контейнера: cqw считается от content-box, паддинг в cqw сам бы уменьшал базу расчёта */ margin-right: 22px; margin-right: 4.72cqw; } .pzrd-amount__label { font-size: 14px; font-size: 3cqw; font-weight: 500; line-height: 1; color: var(--pzrd-ink); } .pzrd-amount__sum { font-size: 40px; font-size: 8.58cqw; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--pzrd-ink); white-space: nowrap; } /* ---- пунктир, «сшивающий» карточку и блок ссылок ------------------------ По макету это два отдельных листа со скруглением 50px и тонким зазором, а пунктир лежит в стыке почти во всю ширину колонки — поверх обеих карточек. */ .pzrd-hero__divider { position: relative; z-index: 4; height: 1px; /* начало/конец линии — там, где у листов начинается скругление */ margin: 0 var(--pzrd-radius-lg); /* чередование штрихов без зазоров: 7px белый — 7px серый #d9d9d9 */ background-image: repeating-linear-gradient(to right, #fff 0, #fff 7px, #2a3230 7px, #2a3230 14px); } /* ---- calc links card --------------------------------------------------- */ .pzrd-hero__links { position: relative; z-index: 1; background: #fff; border-radius: var(--pzrd-radius-lg); box-shadow: var(--pzrd-shadow); padding: 22px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 5px; } .pzrd-hero__links a { display: flex; width: 100%; align-items: center; justify-content: center; min-width: 0; padding: 7px 10px; font-size: calc(12px * var(--pzrd-fs)); color: var(--pzrd-yellow-deep); text-align: center; text-decoration: underline; border-radius: 9999px; /* русские подписи длиннее украинских и в колонку 170px не влезают — разрешаем перенос, иначе соседние ссылки наезжают друг на друга */ line-height: 1.2; } .pzrd-hero__links a:hover { background: #fbfbe6; } /* ---- phone+money image (right of the card, bleeds off the section edge) - */ /* Телефон з купюрами в жовтому кільці (оновлений макет POZIKA, Figma node 36-4542). Позиція знята зі старого макета й лишена як була: 504px ширини, left 850px від лівого краю контейнера, верх на 23px вище блоку. aspect-ratio — натуральне співвідношення нового асета hero-phone.* (1200×1741). Картинка декоративна і приходить фоном — так на кожному брейкпоінті вантажиться лише потрібний файл (на мобільному в макеті купюри, не телефон). */ .pzrd-hero__media { position: absolute; z-index: 2; top:30px; left: 850px; width: 361px; aspect-ratio: 1200 / 1741; max-width: none; pointer-events: none; } /* Кільце і фото — двома псевдоелементами, а не фоном самого блоку: фон батька завжди малюється ПІД ::before, і z-index: -1 всередині stacking context, який створює сам цей блок (position + z-index: 2), цього не змінює. Порядок відмальовки ::before → ::after дає потрібну шаруватість без z-index. Кільце по центру фото (::after заповнює контейнер inset: 0, тому центр контейнера = центр фото) — розмір і товщина кільця зняті з макета: діаметр кільця = 541/407 ширини самого зображення телефону, товщина рамки = 60/407. */ .pzrd-hero__media::before { /* жовте кільце під фото + м'яке світіння */ content: ''; position: absolute; top: 50%; left: 50%; width: 541px; height: 541px; transform: translate(-50%, -50%); border-radius: 50%; border: 60px solid var(--pzrd-yellow); box-sizing: border-box; } .pzrd-hero__media::after { /* само фото — поверх кільця */ content: ''; position: absolute; inset: 0; background: url('../static_images/redesign/hero-phone.webp?v=2') no-repeat top center / 100% auto; } /* ---- nav drawer (hamburger; pure-CSS toggle via #pzrd-menu-toggle) ------ */ .pzrd-menu__toggler { position: relative; } .pzrd-navicon { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .pzrd-nav { position: fixed; inset: 0; z-index: 3000; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease; } .pzrd-navicon:checked ~ .pzrd-nav { visibility: visible; opacity: 1; } .pzrd-nav__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); cursor: pointer; display: block; } .pzrd-nav__content { position: absolute; top: 0; right: 0; height: 100%; width: min(340px, 88vw); background: #fff; padding: 20px 24px 40px; box-shadow: -8px 0 24px rgba(0, 0, 0, .15); overflow-y: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 12px; padding-top: 60px; transform: translateX(100%); transition: transform .25s ease; } .pzrd-navicon:checked ~ .pzrd-nav .pzrd-nav__content { transform: translateX(0); } .pzrd-nav__close { position: absolute; top: 14px; right: 24px; z-index: 2; font-size: calc(32px * var(--pzrd-fs)); line-height: 1; color: var(--pzrd-ink-3); cursor: pointer; } .pzrd-nav__close:hover { color: var(--pzrd-ink); } /* language switcher */ .pzrd-nav__lang { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 8px; } .pzrd-nav__lang .lang-item { margin: 0; } .pzrd-nav__lang .lang-item a { display: inline-block; padding: 8px 16px; border-radius: 9999px; background: var(--pzrd-bg); color: var(--pzrd-ink-2); text-decoration: none; font-size: calc(14px * var(--pzrd-fs)); font-weight: 600; transition: background-color .15s ease, color .15s ease; } .pzrd-nav__lang .lang-item a:hover { background: #e2e5ec; } .pzrd-nav__lang .current-lang a { background: var(--pzrd-ink); color: var(--pzrd-yellow); } .pzrd-nav__btn { width: 100%; } .pzrd-nav__menu { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; } .pzrd-nav__menu li { border-top: 1px solid var(--pzrd-stroke); } .pzrd-nav__menu li a { display: block; padding: 12px 0; color: var(--pzrd-ink); text-decoration: none; font-size: calc(16px * var(--pzrd-fs)); text-align: right; } .pzrd-nav__menu li a:hover { color: var(--pzrd-yellow-deep); } /* ------------------------------------------------------------------------ Shared section heading ------------------------------------------------------------------------ */ /* трекинг чуть плотнее — компенсация того, что вместо SF Pro из макета подставляется более широкий Montserrat */ .pzrd-h2 { font-size: calc(40px * var(--pzrd-fs)); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--pzrd-ink); margin: 0 0 30px; } /* ------------------------------------------------------------------------ FEATURES ------------------------------------------------------------------------ */ .pzrd-features { padding: 100px 0 0; } .pzrd-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 32px; } .pzrd-feature { display: flex; gap: 20px; align-items: flex-start; } /* Иконка приходит из админки готовым изображением — без подложки. */ .pzrd-feature__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; } .pzrd-feature__icon img { display: block; width: 100%; height: 100%; object-fit: contain; } .pzrd-feature__title { margin: 0 0 20px; font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; line-height: 1.05; color: var(--pzrd-ink); } .pzrd-feature__text { margin: 0; font-size: calc(16px * var(--pzrd-fs)); line-height: 1.08; color: var(--pzrd-text-2); } /* ------------------------------------------------------------------------ STEPS ------------------------------------------------------------------------ */ .pzrd-steps { padding: 100px 0; } .pzrd-steps__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; } .pzrd-step { display: flex; align-items: center; gap: 30px; min-height: 120px; background: var(--pzrd-sheet); border: 0; border-radius: 30px; padding: 20px; } /* по макету номер — жёлтая плашка 80×80 с чёрной цифрой; «#» мельче цифры, набор Montserrat с плотным трекингом (в макете именно он, а не SF Pro) */ .pzrd-step__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: calc(80px * var(--pzrd-fs)); height: calc(80px * var(--pzrd-fs)); background: var(--pzrd-yellow); border-radius: 20px; font-family: Montserrat, var(--pzrd-font); font-size: calc(48px * var(--pzrd-fs)); font-weight: 800; letter-spacing: -.1em; color: var(--pzrd-ink); line-height: 1; } .pzrd-step__hash { font-size: calc(32px * var(--pzrd-fs)); font-weight: 700; transform: translateY(4px); } .pzrd-step__title { margin: 0 0 20px; font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; line-height: 1.05; color: var(--pzrd-ink); } .pzrd-step__text { margin: 0; font-size: calc(16px * var(--pzrd-fs)); line-height: 1.08; color: var(--pzrd-text-2); } /* stepper (progress bar под слайдером) — только на мобильных */ .pzrd-steps__bar { display: none; gap: 10px; margin: 12px 0 0; } .pzrd-steps__bar span { flex: 1 1 0; height: 5px; border-radius: 9999px; background: var(--pzrd-ink); transition: background-color .2s ease; } .pzrd-steps__bar span.is-active { background: var(--pzrd-yellow); } /* ------------------------------------------------------------------------ DOCUMENTS ------------------------------------------------------------------------ */ .pzrd-docs { padding: 50px 0; } .pzrd-docs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; } .pzrd-doc { background: var(--pzrd-sheet); border: 0; border-radius: 50px; padding: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px; overflow: hidden; } .pzrd-doc__img { display: flex; align-items: center; justify-content: center; } .pzrd-doc__img img { width: 287px; max-width: 100%; height: auto; } .pzrd-doc__label { display: flex; align-items: center; gap: 20px; width: 100%; background: var(--pzrd-ink); color: #fff; border-radius: 16px; padding: 15px 30px; font-size: calc(16px * var(--pzrd-fs)); line-height: 1.1; } .pzrd-doc__num { flex: 0 0 auto; color: var(--pzrd-yellow); font-family: Montserrat, var(--pzrd-font); font-weight: 700; font-size: calc(32px * var(--pzrd-fs)); line-height: 1; } /* ------------------------------------------------------------------------ APP DOWNLOAD (new) ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ СПЛАТИТИ КРЕДИТ ЛЕГКО (main-redesign.php, Figma node 42:3924) Светлая подложка #c4d4cb с тем же паттерном стрелок, слева три способа оплаты, справа ноутбук. Кнопки — общие .pzrd-btn--ink. ------------------------------------------------------------------------ */ .pzrd-pay { background-color: #c4d4cb; background-image: var(--pzrd-arrows-soft); background-repeat: repeat; background-size: 100px 100px; margin: 100px 0 50px; padding: 50px 0; overflow: hidden; } .pzrd-pay__grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; } .pzrd-pay__col { flex: 1 1 auto; min-width: 0; } .pzrd-pay__title { display: flex; align-items: center; gap: 20px; margin: 0 0 49px; } .pzrd-pay__ic { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; background: var(--pzrd-purple); display: inline-flex; align-items: center; justify-content: center; } .pzrd-pay__ic img { display: block; width: 32px; height: 32px; } .pzrd-pay__item + .pzrd-pay__item { margin-top: 30px; } .pzrd-pay__label { margin: 0 0 20px; font-size: calc(20px * var(--pzrd-fs)); font-weight: 700; line-height: 1.1; color: var(--pzrd-ink); } /* Строка про Кредитний реєстр стоит между подписью и кнопкой. */ .pzrd-pay__note { margin: -3px 0 28px; font-size: calc(16px * var(--pzrd-fs)); line-height: 1.2; color: var(--pzrd-text-2); } .pzrd-pay__note a { color: var(--pzrd-yellow-deep); } .pzrd-pay__btn { min-height: calc(50px * var(--pzrd-fs)); padding: 13px 30px; min-width: 150px; } /* 660px вместо 685 из макета: заголовок в одну строку требует ~530px, и при 685 колонке не хватало пары десятков пикселей — «легко» уезжало на вторую строку. Разница в размере ноутбука на глаз незаметна. */ .pzrd-pay__media { flex: 0 1 660px; min-width: 0; align-self: center; } .pzrd-pay__media img { display: block; width: 100%; height: auto; } /* Блок приложения переехал под FAQ и получил ту же тёмную подложку с паттерном, что и hero: заголовок жёлтый, текст белый. */ .pzrd-app { background-color: var(--pzrd-dark); background-image: var(--pzrd-arrows); background-repeat: repeat; background-size: 280px 280px; padding: 50px 0; overflow: hidden; } .pzrd-app__grid { display: grid; grid-template-columns: 615px 1fr; gap: 50px; align-items: start; } .pzrd-app__lead { padding-top: 37px; } .pzrd-app__lead .pzrd-h2 { line-height: 1; margin-bottom: 22px; color: var(--pzrd-yellow); } .pzrd-app__sub { margin: 0 0 44px; font-size: calc(20px * var(--pzrd-fs)); line-height: 1.2; color: #fff; max-width: 615px; } .pzrd-app__dl { display: flex; align-items: center; gap: 30px; } .pzrd-app__qr-wrap { display: inline-flex; flex: 0 0 auto; } .pzrd-app__qr { width: 200px; height: 200px; border-radius: 16px; background: #fff; padding: 10px; } .pzrd-app__badges { display: flex; flex-direction: column; gap: 20px; } .pzrd-app__badges img { height: 60px; width: auto; display: block; } /* ---- смартфон с плашками ------------------------------------------------- Картинка — только сам аппарат (398.74×824 в макете), плашки «Просто!»/ «Швидко!»/«Безпечно!» собраны из CSS и SVG-иконок. Сцена держит систему координат макета (559.2×824) и целиком масштабируется через --pzrd-stage; секция обрезает выступающую снизу часть, как во фрейме Figma. */ .pzrd-app__visual { position: relative; width: calc(559.2px * var(--pzrd-stage, 1)); height: calc(500px * var(--pzrd-stage, 1)); margin-inline: auto; } .pzrd-app__stage { position: absolute; top: 0; left: 0; display: block; width: 559.2px; height: 824px; transform: scale(var(--pzrd-stage, 1)); transform-origin: top left; } .pzrd-app__img { position: absolute; top: 0; left: 20.58%; width: 71.31%; height: auto; display: block; } .pzrd-app__chip { position: absolute; display: inline-flex; align-items: center; gap: 1.1588em; padding: .5794em 1.1588em; border-radius: .927em; background: var(--pzrd-ink); color: var(--pzrd-chip, var(--pzrd-yellow)); /* декоративный слой поверх картинки — размеры привязаны к сцене, поэтому здесь намеренно нет масштабирования var(--pzrd-fs) */ font-size: calc(24px * var(--pzrd-chip-k, 1)); font-weight: 700; line-height: 1; white-space: nowrap; } .pzrd-app__chip-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.9161em; height: 1.9161em; border-radius: 50%; background: currentColor; } .pzrd-app__chip-ic img { display: block; width: 1.0219em; height: 1.0219em; } /* В макете подпись набрана SF Pro; на Windows/Linux подставляется Montserrat, он шире на ~8%, и плашка вылезает за габариты макета — компенсируем кеглем. */ .pzrd-app__chip-txt { font-size: .93em; letter-spacing: -.01em; } .pzrd-app__chip--simple { left: 83.19%; top: 21.72%; --pzrd-chip: var(--pzrd-blue); transform: translate(-50%, -50%) rotate(-5deg); } .pzrd-app__chip--fast { left: 26.75%; top: 37.41%; --pzrd-chip: var(--pzrd-orange-2); --pzrd-chip-k: 1.0255; transform: translate(-50%, -50%) rotate(6.5deg); } .pzrd-app__chip--safe { left: 81.47%; top: 54.05%; --pzrd-chip: var(--pzrd-red); --pzrd-chip-k: 1.05; transform: translate(-50%, -50%) rotate(-16deg); } /* «Безпечно!» — самое длинное слово, в Montserrat оно шире всего: своя поправка */ .pzrd-app__chip--safe .pzrd-app__chip-txt { font-size: .88em; } /* ------------------------------------------------------------------------ REVIEWS ------------------------------------------------------------------------ */ .pzrd-reviews { background: transparent; padding: 50px 0; } .pzrd-reviews__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 50px; } .pzrd-reviews__title { display: flex; align-items: center; gap: 20px; margin: 0; } .pzrd-reviews__chat { width: 60px; height: 60px; border-radius: 50%; background: var(--pzrd-green); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .pzrd-reviews__chat img { display: block; width: 32px; height: 32px; } .pzrd-reviews__rating { display: flex; align-items: center; gap: 30px; background: var(--pzrd-ink); color: #fff; border-radius: 20px; padding: 15px 30px; } .pzrd-reviews__rating-line { display: inline-flex; align-items: center; gap: 30px; } .pzrd-reviews__mark { display: inline-flex; flex: 0 0 auto; } /* ---- звёзды ------------------------------------------------------------- Форма звёзд — маска из макета (icons/stars-5.svg): подложка красится в «пустой» цвет, поверх — жёлтая заливка шириной --pzrd-rate (доля рейтинга). */ .pzrd-stars { position: relative; display: inline-block; flex: 0 0 auto; width: 100px; height: 15.32px; background: var(--pzrd-star-empty, #e0e0e0); -webkit-mask: var(--pzrd-stars-src) 0 0 / 100% 100% no-repeat; mask: var(--pzrd-stars-src) 0 0 / 100% 100% no-repeat; } .pzrd-stars__fill { position: absolute; top: 0; left: 0; bottom: 0; width: var(--pzrd-rate, 100%); background: var(--pzrd-yellow); } .pzrd-reviews__stars { width: 200px; height: 30.64px; --pzrd-star-empty: rgba(255, 255, 255, .45); } .pzrd-reviews__rating-txt { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.33; white-space: nowrap; } /* Карточка 540×220 c зазором 20 — как в макете: лента начинается от левого края контейнера (slick в режиме variableWidth, без centerMode), следующая карточка подглядывает справа. Зазор задаётся только правым паддингом, иначе первая карточка отъезжает от края. */ .pzrd-reviews__slider-wrap { position: relative; } .pzrd-reviews__slider .slick-slide { height: auto; } .pzrd-reviews__slider .slick-track { display: flex; align-items: stretch; } .pzrd-reviews__slider .slick-slide > div { width: min(560px, calc(100vw - 40px)); padding: 0 20px 0 0; box-sizing: border-box; height: 100%; } /* Стрелки — оверлей по бокам ленты, по вертикали на середине карточки (220px). На мобильных прячем: там листают свайпом. */ .pzrd-reviews__arrow { position: absolute; top: 110px; transform: translateY(-50%); z-index: 2; /* 48px и отступ 8 — кнопка укладывается в 50px поля карточки и не наезжает на текст */ width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--pzrd-ink); color: var(--pzrd-sheet); box-shadow: 0 4px 20px rgba(0, 0, 0, .15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, color .2s ease; } .pzrd-reviews__arrow:hover { background: var(--pzrd-yellow); color: var(--pzrd-ink); } .pzrd-reviews__arrow--prev { left: 8px; } .pzrd-reviews__arrow--next { right: 8px; } .pzrd-reviews__arrow svg { display: block; width: 20px; height: 20px; } /* От 1366px лента выходит за контейнер во всю ширину окна и делится ровно на три карточки — это делает сам slick (slidesToShow: 3), CSS отвечает только за геометрию ленты и зазор. (.pzrd имеет overflow-x: hidden, поэтому 100vw не даёт горизонтальный скролл.) */ @media (min-width: 1366px) { .pzrd-reviews__slider-wrap { /* левый отступ ленты = отступ контейнера, чтобы первая карточка стояла вровень с заголовком; вправо лента уходит за край окна */ --pzrd-rev-pad: max(20px, calc((100vw - 15000px) / 2)); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: var(--pzrd-rev-pad); box-sizing: border-box; max-width: calc(100% + 220px); margin: 0 auto; transform: translateX(-110px); } /* ширину слайда считает slick (slidesToShow: 3 в custom-slider.js) — фиксированную ширину карточки здесь снимаем, иначе она конфликтует с inline-шириной slick; от CSS остаётся только зазор (padding-right: 20px из базового правила) */ .pzrd-reviews__slider .slick-slide > div { width: auto; } /* prev держим у первой карточки, но не выпускаем за край окна */ .pzrd-reviews__arrow--prev { left: max(8px, calc(var(--pzrd-rev-pad) - 56px)); } /* лента full-bleed, а полосы-степпер остаются по ширине контейнера */ .pzrd-reviews__slider .slick-dots { max-width: 1280px; } } .pzrd-review { display: flex; flex-direction: column; justify-content: center; height: 220px; background: var(--pzrd-sheet); border-radius: 20px; padding: 50px; } .pzrd-review__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 20px; margin-bottom: 20px; } .pzrd-review__name { flex: 1 1 auto; min-width: 0; margin-right: auto; font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; line-height: 1.05; color: var(--pzrd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pzrd-review__body { overflow: hidden; } .pzrd-review__text { margin: 0; font-size: calc(16px * var(--pzrd-fs)); line-height: 1.3; color: var(--pzrd-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pzrd-review__footer { margin-top: auto; padding-top: 15px; } .pzrd-review__date { font-size: calc(14px * var(--pzrd-fs)); color: var(--pzrd-ink-3); } /* в макете это не точки, а полосы во всю ширину: активная жёлтая, прочие чёрные */ .pzrd-reviews__slider .slick-dots { display: flex; justify-content: center; list-style: none; padding: 0; gap: 10px; margin: 50px auto; } .pzrd-reviews__slider .slick-dots li { flex: 1 1 0; min-width: 0; height: 5px; } .pzrd-reviews__slider .slick-dots li button { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 9999px; background: var(--pzrd-ink); text-indent: -9999px; overflow: hidden; cursor: pointer; } .pzrd-reviews__slider .slick-dots li.slick-active button { background: var(--pzrd-yellow); } .pzrd-reviews__actions { display: flex; justify-content: center; gap: 30px; flex-wrap: nowrap; margin-top: 50px; } .pzrd-reviews__actions .pzrd-btn--white:hover { background: var(--pzrd-bg); } /* ------------------------------------------------------------------------ SEO TEXT / FAQ ACCORDION ------------------------------------------------------------------------ */ .pzrd-seo, .pzrd-faq { padding: 50px 0; } .pzrd-faq__intro { margin-bottom: 24px; } .pzrd-accordion { display: flex; flex-direction: column; gap: 10px; } .pzrd-acc { background: var(--pzrd-panel); border-radius: 20px; } .pzrd-acc__head { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 70px; padding: 20px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; list-style: none; /* : убираем системный треугольник */ } .pzrd-acc__head::-webkit-details-marker { display: none; } /* Иконка-карточка в шапке аккордеона — вектор из макета; в макете она тёмно-жёлтая (#999900), поэтому подставляется маской и красится токеном. */ .pzrd-acc__ic { width: 30px; height: 30px; flex: 0 0 auto; background-color: var(--pzrd-yellow-deep); -webkit-mask: var(--pzrd-acc-ic) center / 24px 19.2px no-repeat; mask: var(--pzrd-acc-ic) center / 24px 19.2px no-repeat; } .pzrd-acc__title { flex: 1; margin: 0; font-size: calc(20px * var(--pzrd-fs)); font-weight: 700; line-height: 1; color: var(--pzrd-ink); } .pzrd-acc__chev { width: 24px; height: 24px; color: var(--pzrd-ink-3); flex: 0 0 auto; transition: transform .25s ease; display: inline-flex; } .pzrd-acc[open] > .pzrd-acc__head > .pzrd-acc__chev { transform: rotate(180deg); } /* Заголовок пункта (h2/h3 на странице FAQ) лежит внутри . */ .pzrd-acc__title:is(h1, h2, h3, h4, h5, h6) { font-family: inherit; } .pzrd-acc__panel-inner { padding: 0 20px 20px; } .pzrd-acc__panel-inner > *:first-child { margin-top: 0; } .pzrd-seo__text { font-size: calc(15px * var(--pzrd-fs)); line-height: 1.6; color: var(--pzrd-ink-2); } .pzrd-seo__text h2 { font-size: calc(26px * var(--pzrd-fs)); font-weight: 700; color: var(--pzrd-ink); margin: 28px 0 12px; } .pzrd-seo__text h3 { font-size: calc(20px * var(--pzrd-fs)); font-weight: 700; color: var(--pzrd-ink); margin: 22px 0 10px; } .pzrd-seo__text p { margin: 0 0 12px; } .pzrd-seo__text a { color: var(--pzrd-yellow-deep); } .pzrd-seo__text ul, .pzrd-seo__text ol { margin: 0 0 12px; padding-left: 22px; } /* ------------------------------------------------------------------------ CREDIT OFFERS (live calculator) ------------------------------------------------------------------------ */ .pzrd-offers { padding: 50px 0; } .pzrd-oc__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; } .pzrd-oc__head-l { display: flex; align-items: center; gap: 20px; } .pzrd-oc__ic { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 50%; background: var(--pzrd-orange); display: inline-flex; align-items: center; justify-content: center; } .pzrd-oc__ic img { display: block; width: 32px; height: 32px; } /* В макете (Figma, node 975:54473/54474) заголовок и подзаголовок обрезаны по капители, между ними ровно 10px. Живой текст такого тримминга не знает, поэтому у обоих line-height: 1, а margin подобран так, чтобы визуальный просвет совпал. */ .pzrd-oc__title { margin: 0; font-size: calc(40px * var(--pzrd-fs)); line-height: 1; } .pzrd-oc__sub { margin: 2px 0 0; font-size: calc(20px * var(--pzrd-fs)); line-height: 1; font-weight: 400; color: var(--pzrd-text-2); } .pzrd-oc__amount { display: flex; align-items: center; gap: 42px; } .pzrd-oc__amount-val { font-size: calc(32px * var(--pzrd-fs)); font-weight: 700; line-height: 1; color: var(--pzrd-ink); white-space: nowrap; } .pzrd-oc__stepper { display: flex; background: var(--pzrd-sheet); border-radius: 9999px; gap: 0; } .pzrd-oc__stepper button { width: 46px; height: 32px; border-radius: 9999px; border: 0; cursor: pointer; background: transparent; color: var(--pzrd-ink); font-size: calc(18px * var(--pzrd-fs)); line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .pzrd-oc__stepper button:hover { background: var(--pzrd-bg); } /* jQuery UI slider override */ .pzrd-oc__slider { margin: 0 0 30px; } /* нативный range-слайдер (без jQuery UI); заливка задаётся из JS через background. Селектор классом, а не id: блок «Кредитні пропозиції» — переиспользуемый компонент, экземпляров на странице может быть несколько. Лишний .pzrd-oc в селекторе — не косметика: в style.css лежит глобальный input[type="range"]::-webkit-slider-thumb с оранжевым бегунком, и класса в одиночку не хватает, чтобы его перебить. */ .pzrd-oc input.pzrd-oc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; min-height: 20px!important; border-radius: 9999px; background: var(--pzrd-ink); outline: none; cursor: pointer; margin: 0; } /* бегунок макета — чёрная точка 10px в жёлтом «носике» заливки */ .pzrd-oc input.pzrd-oc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; box-sizing: content-box; border-radius: 50%; background: var(--pzrd-ink); border: 5px solid var(--pzrd-yellow); cursor: grab; } .pzrd-oc input.pzrd-oc__range::-moz-range-thumb { width: 10px; height: 10px; box-sizing: content-box; border-radius: 50%; background: var(--pzrd-ink); border: 5px solid var(--pzrd-yellow); cursor: grab; } .pzrd-oc input.pzrd-oc__range::-moz-range-track { height: 20px; border-radius: 9999px; background: transparent; } .pzrd-oc__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } .pzrd-oc__card { background: var(--pzrd-sheet); border: 0; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; } /* 20px до разделителя в макете считаются от нижней границы капители заголовка, поэтому в margin закладываем на полулидинг меньше */ .pzrd-oc__cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; } .pzrd-oc__cardtitle { margin: 0; font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; line-height: 1; color: var(--pzrd-ink); } /* сегментированный переключатель сроков: занимает всю колонку значения (275px), две равные кнопки по 20px внутри дорожки с падингом 5px */ .pzrd-oc__toggle { display: flex; width: 100%; background: var(--pzrd-bg-2); border-radius: 10px; padding: 5px; } .pzrd-oc__toggle button { border: 0; background: none; cursor: pointer; font-family: inherit; flex: 1 1 0; min-width: 0; height: 20px; padding: 0 10px; border-radius: 9999px; font-size: calc(12px * var(--pzrd-fs)); font-weight: 510; line-height: 1; color: var(--pzrd-yellow-deep); text-decoration: underline; white-space: nowrap; } .pzrd-oc__toggle button.is-active { background: var(--pzrd-ink); border-radius: 6px; color: var(--pzrd-yellow); text-decoration: none; } .pzrd-oc__toggle-sm { display: none; } /* в макете строки без разделителей — линия только над списком и под ним */ .pzrd-oc__rows { display: flex; flex-direction: column; gap: 11px; border-top: 1px solid #e6e6e6; padding-top: 20px; margin: 0 0 20px; } /* две равные колонки (275 + 5 + 275 в макете): так строки обеих карточек стоят на одной сетке, а переключатель сроков занимает ровно половину карточки */ .pzrd-oc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: start; padding: 0; border: 0; font-size: calc(12px * var(--pzrd-fs)); line-height: 1; color: var(--pzrd-text-2); } /* строка «Строк кредитування» в макете высотой 30px в обеих карточках — под переключатель сроков; в короткой карточке её высоту держим, чтобы списки двух карточек не разъезжались по вертикали */ .pzrd-oc__row--term { min-height: 30px; } .pzrd-oc__val { font-weight: 510; color: var(--pzrd-text-2); text-align: right; white-space: nowrap; } .pzrd-oc__cta { margin-top: auto; border-radius: 15px; height: calc(50px * var(--pzrd-fs)); font-size: calc(18px * var(--pzrd-fs)); font-weight: 590; } .pzrd-oc__ctawrap { margin-top: auto; padding-top: 20px; border-top: 1px solid #e6e6e6; } .pzrd-oc__details { text-align: center; margin-top: 30px; } .pzrd-oc__details-title { display: block; font-size: calc(20px * var(--pzrd-fs)); font-weight: 510; line-height: 1; color: var(--pzrd-ink); margin-bottom: 14px; } /* пять равных колонок по 240px с отступом 20px — ровно 1280px контента макета */ .pzrd-oc__links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 20px; } /* в макете ссылка — кнопка 30px с полем 10px: держим тот же тап-таргет */ .pzrd-oc__links a { padding: 10px 0; font-size: calc(14px * var(--pzrd-fs)); font-weight: 590; line-height: 1; color: var(--pzrd-yellow-deep); text-decoration: underline; } /* ------------------------------------------------------------------------ УМОВИ КРЕДИТУВАННЯ (контент из поста 2856) ------------------------------------------------------------------------ */ /* шапка секции: заголовок слева, кнопка «Розгорнути» справа */ .pzrd-sechead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; min-height: 60px; margin-bottom: 30px; } .pzrd-sechead .pzrd-h2 { margin: 0; } .pzrd-expand { flex: 0 0 auto; padding: 10px 24px; font-size: calc(16px * var(--pzrd-fs)); } .pzrd-conditions { padding: 50px 0; } .pzrd-conditions__title { display: flex; align-items: center; gap: 20px; } .pzrd-conditions__ic { width: 60px; height: 60px; border-radius: 50%; background: var(--pzrd-teal); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .pzrd-conditions__ic img { display: block; width: 32px; height: 32px; } /* Весь legal-контент (таблица + текст) — в фикс. по высоте скролл-боксе с кастомным скроллбаром (как в дизайне 0:3189) */ .pzrd-conditions__content { height: 300px; overflow: auto; background: #fff; border-radius: 30px; padding: 30px; font-size: calc(13px * var(--pzrd-fs)); line-height: 1.5; color: #454545; } .pzrd-conditions__content.is-expanded { height: auto; overflow: visible; overflow-x: auto } .pzrd-conditions__content p { margin: 0 0 12px; } .pzrd-conditions__content a { color: var(--pzrd-yellow-deep); } .pzrd-conditions__content table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; min-width: 720px; margin: 0 0 16px; border: 1px solid #0000001A; border-radius: 30px; overflow: hidden; } .pzrd-conditions__content th, .pzrd-conditions__content td { padding: 10px 14px; font-size: calc(13px * var(--pzrd-fs)); text-align: left; vertical-align: top; color: #454545; border-right: 1px solid #0000001A; border-bottom: 1px solid #0000001A; } .pzrd-conditions__content th:last-child, .pzrd-conditions__content td:last-child { border-right: 0; } .pzrd-conditions__content tr:last-child td { border-bottom: 0; } .pzrd-conditions__content thead th, .pzrd-conditions__content tr:first-child td { font-weight: 600; text-align: center; color: #454545; } .pzrd-conditions__content tbody td:first-child, .pzrd-conditions__content tr td:first-child { font-weight: 600; color: #454545; } /* ------------------------------------------------------------------------ WARNING (Попередження) ------------------------------------------------------------------------ */ .pzrd-warning { padding: 50px 0; } .pzrd-warning__title { display: flex; align-items: center; gap: 20px; margin: 0; font-size: calc(40px * var(--pzrd-fs)); line-height: 1.05; } .pzrd-warning__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--pzrd-red); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .pzrd-warning__icon img { display: block; width: 32px; height: 32px; } /* кнопка «Розгорнути» — под боксом, по левому краю (POZIKA-446) */ .pzrd-warning__actions { display: flex; justify-content: flex-start; margin-top: 30px; } /* до JS кнопка схована атрибутом hidden — display у .pzrd-btn/.pzrd-warning__actions інакше перебиває UA-стиль [hidden] { display: none } */ .pzrd-warning__actions[hidden], .pzrd-btn[hidden] { display: none; } .pzrd-warning__box { background: #fff; border: 0; border-radius: 30px; /* низ — 0: padding-bottom скролл-контейнера Chrome не рисует при прокрутке. Нижний отступ несёт .nbu_text (padding-bottom), он входит в scrollHeight. */ padding: 30px 30px 0; font-size: calc(14px * var(--pzrd-fs)); line-height: 1.55; color: var(--pzrd-ink-2); height: 300px; overflow-y: auto; overscroll-behavior: contain; } /* полоса прокрутки боксов — 10px, тёмный бегунок, как в макете */ .pzrd-conditions__content::-webkit-scrollbar, .pzrd-warning__box::-webkit-scrollbar { width: 10px; } .pzrd-conditions__content::-webkit-scrollbar-track, .pzrd-warning__box::-webkit-scrollbar-track { background: transparent; } .pzrd-conditions__content::-webkit-scrollbar-thumb, .pzrd-warning__box::-webkit-scrollbar-thumb { background: var(--pzrd-ink); border-radius: 9999px; } .pzrd-conditions__content, .pzrd-warning__box { scrollbar-width: thin; scrollbar-color: var(--pzrd-ink) transparent; } /* --- содержимое NBU (.nbu_text) ------------------------------------------ Глобально .nbu_text центрируется (additional.css) — здесь возвращаем выравнивание по левому краю и делаем отступы вложенных списков. */ .pzrd-warning__box.is-expanded { height: auto; overflow: visible; padding-bottom: 30px; } .pzrd-warning__box .nbu_text, .pzrd-warning__box .nbu_text_p { text-align: left; } /* .nbu_text заполняет высоту блока, но при длинном тексте растёт по контенту. padding-bottom здесь (а не на боксе) — чтобы нижний отступ 30px был виден в конце прокрутки во всех браузерах (входит в scrollHeight контента). */ .pzrd-warning__box .nbu_text { min-height: 100%; padding-bottom: 30px; } .pzrd-warning__box p { margin: 0 0 10px; } .pzrd-warning__box .nbu_text_p > strong { display: block; margin-bottom: 20px; margin-left: 0; margin-right: 0; color: var(--pzrd-ink); font-size: calc(20px * var(--pzrd-fs)); line-height: 1.5; } /* каждый вложенный уровень — с отступом слева (~42px по макету) и своим маркером */ .pzrd-warning__box ul { margin: 8px 0; padding-left: 42px; list-style: disc; } .pzrd-warning__box ul ul { list-style: circle; } .pzrd-warning__box ul ul ul { list-style: square; } .pzrd-warning__box li { margin: 0 0 10px; } .pzrd-warning__box li:last-child { margin-bottom: 0; } /* верхний уровень (пункты 1–8): номер уже в тексте — без маркера и без отступа */ .pzrd-warning__box .nbu_text_p > ul { padding-left: 0; list-style: none; } .pzrd-warning__box .nbu_text_p > ul > li { margin-bottom: 20px; } /* сноска НБУ */ .pzrd-warning__box .nbu_text_comment { margin-top: 16px; color: var(--pzrd-ink-3); font-size: calc(12px * var(--pzrd-fs)); font-style: italic; } /* ------------------------------------------------------------------------ BREADCRUMBS (.pzrd-crumbs) — хлебные крошки внутренних страниц. Разметка — template-parts/redesign/breadcrumbs.php; выводятся из page-hero, то есть всегда стоят строкой над тёмной карточкой баннера, внутри того же .pzrd-container. Главной не касаются — там свой hero. ------------------------------------------------------------------------ */ .pzrd-crumbs { /* Отступ от шапки: страницы с ритмом «100px вокруг hero» (контакты, отзывы) дают его своим правилом контейнера, остальным задаём здесь. */ margin: 0 0 20px; margin-top: 30px !important; font-size: calc(14px * var(--pzrd-fs)); line-height: 1.3; color: var(--pzrd-text-2); } .pzrd-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; } .pzrd-crumbs__item { display: inline-flex; align-items: center; gap: 8px; } /* Разделитель — в псевдоэлементе, чтобы его не было в тексте для скринридера и в копипасте цепочки. */ .pzrd-crumbs__item + .pzrd-crumbs__item::before { content: '/'; color: var(--pzrd-ink-3); } /* text-decoration с !important — иначе глобальный `a { text-decoration: underline !important }` из additional.css:283 подчёркивает всю цепочку (тот же приём, что для кнопок редизайна выше). В крихтах подчёркивание оставляем на ховер. */ .pzrd .pzrd-crumbs__link { color: var(--pzrd-text-2); text-decoration: none !important; transition: color .2s ease; } .pzrd .pzrd-crumbs__link:hover, .pzrd .pzrd-crumbs__link:focus { color: var(--pzrd-ink); text-decoration: underline !important; } /* Текущая страница — не ссылка и заметно тусклее, как в остальном мелком тексте. */ .pzrd-crumbs__current { color: var(--pzrd-ink-3); } /* Вебвью мобильного приложения: там скрыта и остальная навигация (меню, часть пунктов шапки), уводить пользователя из приложения на сайт незачем. */ body.tp_from_app .pzrd-crumbs { display: none; } /* Ритм: у страниц с правилом «.pzrd-… .pzrd-phero { margin-top: 100px }» (контакты, отзывы) крошки встают между шапкой и баннером, поэтому сам баннер после крошек прижимаем — иначе блок уезжает вниз на лишние 100px. Селектор с .pzrd в начале, чтобы перебить те правила по специфичности. */ .pzrd .pzrd-crumbs + .pzrd-phero { margin-top: 0; } @media (max-width: 767px) { .pzrd-crumbs { margin-bottom: 16px; font-size: calc(12px * var(--pzrd-fs)); } } /* ------------------------------------------------------------------------ PAGE HERO (.pzrd-phero) — общий hero-баннер внутренних страниц редизайна. Одна тёмная карточка 1280×300: заголовок слева, фото в жёлтом кольце справа. Разметка — template-parts/redesign/page-hero.php, страницы отличаются только параметрами партиала, которые он отдаёт сюда переменными: --pzrd-phero-title / --pzrd-phero-title-sm — кегль заголовка (px); --pzrd-phero-m — масштаб фото (его высота в карточке); от него же считаются размеры и смещения кольца, поэтому масштаб меняется одним числом; --pzrd-phero-h — высота окна фото. Окно прижато к низу карточки: если оно выше 300px, фото выходит за верхний край (так в макете у отзывов и продуктовых страниц). Hero главной (.pzrd-hero) — отдельный компонент, здесь не участвует. ------------------------------------------------------------------------ */ .pzrd-phero { --pzrd-phero-title: 56; --pzrd-phero-title-sm: 32; --pzrd-phero-m: 520px; --pzrd-phero-h: calc(var(--pzrd-phero-m) * 330 / 510 + 10px); --pzrd-phero-arrows: 140px; position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 50px; height: 300px; padding: 0 100px; border-radius: 50px; background-color: #2d3633; } /* Паттерн из стрелок ↗ — общий тайл из :root, но шаг 140px, а не 100px, как в hero главной (--pzrd-phero-arrows). Промерено по макету при карточке 1280×300: глиф 70px при шаге 140, то есть в ряд встаёт ровно 9 стрелок — последняя кончается на 1213px, следующая уже не влезает. Позиция тайла дефолтная: стрелка сама стоит в 23px от левого края тайла и в 47px от верхнего, и в макете отступы ровно такие же. */ .pzrd-phero::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--pzrd-arrows); background-repeat: repeat; background-size: var(--pzrd-phero-arrows) var(--pzrd-phero-arrows); pointer-events: none; } /* Колонка заголовка: ширина — всё, что осталось от карточки за вычетом фото и зазора макета (у отзывов это ровно 520px из макета: 1080 − 510 − 50). */ .pzrd-phero__lead { position: relative; flex: 1 1 auto; align-self: stretch; /* Фото вынуто из потока, поэтому колонку заголовка к левому полю карточки прижимает auto-отступ, а не justify-content. */ margin-right: auto; max-width: calc(100% - var(--pzrd-phero-m)); display: flex; flex-direction: column; justify-content: center; } .pzrd-phero__title { margin: 0; font-size: calc(var(--pzrd-phero-title) * 1px * var(--pzrd-fs)); font-weight: 700; line-height: 1; color: var(--pzrd-yellow); } #nova-talks-app .wrap-woot-widget-bubble-close path { color: #5f5f5f !important; } /* Окно фото прижато к правому полю и к низу карточки. Само фото и кольцо внутри него абсолютные, все размеры — доли от --pzrd-phero-m (масштаб макета — 510px), лишнее подрезается окном. */ .pzrd-phero__media { position: absolute; right: 20px; bottom: 0; width: var(--pzrd-phero-m); height: var(--pzrd-phero-h); overflow: hidden; } .pzrd-phero__ring { position: absolute; /* 24, а не 36.61 из макета контактов: фото в окне стоит не по центру (left 13.52% даёт поля 69px слева и 47.6px справа), да и в самом ассете фигура смещена — голова приходится на 44.1% ширины кадра, а не на 50%. С исходным значением ось кольца оказывалась на 12.6px правее головы, и кольцо читалось как съехавшее вправо. */ left: calc(var(--pzrd-phero-m) * 24 / 510); top: calc(var(--pzrd-phero-m) * 72.86 / 510); width: calc(var(--pzrd-phero-m) * 437.143 / 510); height: calc(var(--pzrd-phero-m) * 437.143 / 510); border: calc(var(--pzrd-phero-m) * 43.714 / 510) solid var(--pzrd-yellow); border-radius: 50%; } .pzrd-phero__media img { position: absolute; left: calc(var(--pzrd-phero-m) * 13.52 / 100); top: -7px; height: var(--pzrd-phero-m); width: auto; max-width: none; } /* ---- планшет: фото уже не помещается рядом с заголовком ------------------ Карточка перестраивается в колонку и растёт по контенту, фото возвращается в поток и подрезается радиусом карточки — как на мобильных в макете. */ @media (max-width: 1100px) { .pzrd-phero { height: auto; padding: 50px 0 0; gap: 30px; overflow: hidden; } .pzrd-phero__lead { flex: 1 0 100%; margin-right: 0; max-width: none; padding: 0 40px; } .pzrd-phero__title { font-size: calc(min(var(--pzrd-phero-title), 40) * 1px * var(--pzrd-fs)); text-align: center; } /* Именно relative: окно остаётся системой координат для кольца и фото. */ .pzrd-phero__media { position: relative; right: auto; bottom: auto; /* На телефоне карточка уже, чем --pzrd-phero-m (440px против 390px при экране 430px). Без этого окно ужимал flex-shrink, а кольцо и фото внутри оставались с отступами, посчитанными от полной ширины, — вся композиция уезжала вправо и правый край кольца срезался. */ width: min(var(--pzrd-phero-m), 100%); } /* Раз ширина окна больше не равна --pzrd-phero-m, фиксированные left не годятся: центрируем по окну. У кольца центр — его середина, у фото — голова, а она приходится на 44.1% ширины кадра page-hero.png. */ .pzrd-phero__ring { left: 50%; transform: translateX(-50%); } .pzrd-phero__media img { left: 50%; transform: translateX(-44.1%); } } @media (max-width: 991px) { .pzrd-phero { border-radius: 30px; } .pzrd-phero__lead { padding: 0 20px; } .pzrd-phero__title { font-size: calc(var(--pzrd-phero-title-sm) * 1px * var(--pzrd-fs)); } } /* ------------------------------------------------------------------------ CATEGORY HUB PAGE «Умови кредитування» (category.php, slug produkty/produkti) Figma: tPozyka-Landing, node 996-20849. Список посилань — ACF-repeater (umovy_links_uk / umovy_links_ru на сторінці Опції), не цикл по таксономії. Мобільного макета в Figma нема — адаптовано за аналогією з головною (той самий брейкпоінт 680px, той самий підхід до зменшення кеглів/паддінгів). ------------------------------------------------------------------------ */ /* Меню тут лежить прямо на фоні сторінки (без темного/патерн-шару hero з головної) — тому окрема легка обгортка лише з відступом зверху. */ .pzrd-menubar { padding: 20px 0 0; } .pzrd-catpage { display: flex; flex-direction: column; gap: 100px; } /* Список — вузька колонка по центру сторінки (528px у макеті), а не на всю ширину. */ .pzrd-catpage__links { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 528px; margin: 0 auto; } @media (min-width: 680px) { .pzrd-catpage__links { padding-top: 30px; } } @media (max-width: 680px) { .pzrd-catpage__links { padding-top: 40px; } } .pzrd-catpage__link { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 14px 15px; font-size: calc(16px * var(--pzrd-fs)); font-weight: 590; line-height: 1; color: var(--pzrd-yellow-deep); text-decoration: underline; } .pzrd-catpage__link svg { flex: 0 0 auto; } /* Іконка пункту — завжди 20×20 з макета: у розмітці в неї немає width/height, тож без цього довгі заголовки стискали її по-різному. */ .pzrd-catpage__link img { flex: 0 0 auto; width: 20px; height: 20px; } .pzrd-catpage__link:hover { color: var(--pzrd-ink); } /* Список статей блогу (POZIKA-446): заголовки постів довші за назви продуктів і переносяться на 2-3 рядки — тому іконка притискається до першого рядка, а line-height повертається до читабельного. */ .pzrd-catpage__links--posts .pzrd-catpage__link { align-items: flex-start; line-height: 1.3; } .pzrd-catpage__links--posts .pzrd-catpage__link img { flex: 0 0 auto; margin-top: 2px; } @media (max-width: 680px) { .pzrd-catpage { gap: 50px; padding: 15px 0; } } /* ------------------------------------------------------------------------- PRODUCT PAGE (product.php, "Кредит на N тижнів/місяців...") — hero-баннер тут общий с остальными внутренними страницами (.pzrd-phero, POZIKA-443/446), отличается только кеглем заголовка: тайтлы постов длиннее коротких заголовков хаба. Figma: tPozyka-Landing, node 998-25711. Калькулятор предложений и блок предупреждения под ним — те же компоненты, что и на главной: template-parts/redesign/credit-offers.php. ------------------------------------------------------------------------- */ /* SEO-текст сторінки (the_content простого посту) — плаский текст без картки, на відміну від .pzrd-conditions__content/.pzrd-warning__box. */ .pzrd-product-content { padding: 50px 0; } .pzrd-product-content__body { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.5; color: var(--pzrd-ink); } .pzrd-product-content__body h2 { margin: 0 0 16px; font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; line-height: 1; color: var(--pzrd-ink); } .pzrd-product-content__body > *:not(:first-child) { margin-top: 30px; } .pzrd-product-content__body p { margin: 0 0 16px; } .pzrd-product-content__body p:last-child { margin-bottom: 0; } /* Глобальний style.css знімає маркери у всіх списків (ul, ol { list-style: none }), а в тексті сторінки продукту вони потрібні. Точки, а не нумерація, і в ol: пункти таких списків самі починаються з суми («30000. Це найкращий…»), і decimal давав би подвійну нумерацію «1. 30000.». */ .pzrd-product-content__body ol, .pzrd-product-content__body ul { list-style: disc outside; margin: 0; padding-left: 20px; } .pzrd-product-content__body li { margin-bottom: 8px; } .pzrd-product-content__body li:last-child { margin-bottom: 0; } .pzrd-product-content__body a { color: inherit; text-decoration: underline; } /* Список PDF-документів інформаційної сторінки (info-redesign.php) — та сама колонка посилань, що й у хабі категорій, тільки без верхнього відступу: секція вже має власний padding. */ .pzrd-page-docs { padding: 0 0 50px; } .pzrd-page-docs .pzrd-catpage__links { padding-top: 0; } /* ------------------------------------------------------------------------- ARTICLE / ПРОСТА СТОРІНКА (article-redesign.php) Figma: node 981-54622 («Чи можна виїхати за кордон…») і 981-57124 («Протидія шахрайству»). У макеті всього два блоки — спільний hero внутрішніх сторінок (.pzrd-phero) і текст сторінки, тому тут лише вертикальний ритм (100px між блоками) і типографіка контенту. ------------------------------------------------------------------------- */ .pzrd-article { padding: 50px 0; } .pzrd-article__body { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.5; color: var(--pzrd-ink); } /* Підзаголовки в макеті — 24px жирним, з відступом 50px від попереднього блоку і 30px до свого тексту. */ .pzrd-article__body h2, .pzrd-article__body h3 { margin: 50px 0 30px; font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; line-height: 1.3; color: var(--pzrd-ink); } .pzrd-article__body > *:first-child { margin-top: 0; } .pzrd-article__body p { margin: 0 0 20px; } .pzrd-article__body > *:last-child { margin-bottom: 0; } /* Глобальний style.css знімає маркери у всіх списків — у макеті вони є. */ .pzrd-article__body ol { list-style: decimal outside; } .pzrd-article__body ul { list-style: disc outside; } .pzrd-article__body ol, .pzrd-article__body ul { margin: 0 0 20px; padding-left: 21px; } .pzrd-article__body li { margin-bottom: 10px; } .pzrd-article__body li:last-child { margin-bottom: 0; } .pzrd-article__body a { color: var(--pzrd-yellow-deep); text-decoration: underline; } .pzrd-article__body a:hover { color: var(--pzrd-ink); } .pzrd-article__body img { height: auto; border-radius: 20px; } /* Картка зворотного зв'язку йде одразу за текстом: зверху відступ уже дав .pzrd-article, лишається тільки нижній до підвалу. */ .pzrd-artform { padding: 0 0 100px; } @media (max-width: 991px) { .pzrd-artform { padding-bottom: 50px; } .pzrd-article__body h2, .pzrd-article__body h3 { margin: 30px 0 20px; font-size: calc(18px * var(--pzrd-fs)); } } /* ------------------------------------------------------------------------- SEO footer links (block just above the dark footer) — тёмно-жёлтый вместо оранжевого (loaded only on this template, so it overrides the global orange safely) ------------------------------------------------------------------------ */ .tp_footer_links a { color: var(--pzrd-yellow-deep); } /* ID-специфичность + !important — перебиваем глобальные правила/оптимизатор, которые сбрасывают подчёркивание у ссылок футера */ .tp_footer_links #tp_footer_links-container a { text-decoration: underline !important; } .tp_footer_links a:hover { color: var(--pzrd-yellow); background-color: var(--pzrd-ink); } /* ------------------------------------------------------------------------ FOOTER (dark) ------------------------------------------------------------------------ */ .pzrd-footer { background: #000; /* Color/primary/b */ color: #fff; /* Color/palette/b/100 */ /* Підвал лежить ПОЗА .pzrd (він поруч із секціями шаблону), тож шрифт теми (Montserrat) сюди діставався замість SF Pro з макета — через це «різний шрифт» у підвалі. Задаємо сімʼю явно. */ font-family: var(--pzrd-font); padding: 50px 0; font-size: calc(14px * var(--pzrd-fs)); line-height: 1.2; } /* У макеті курсиву немає ніде: заголовки — SF Pro Bold, значення — Regular. Контент підвала приходить з ACF, де кожен заголовок загорнутий у , тож курсив знімаємо стилями — інакше правку довелося б повторювати в кожному полі опцій і після кожного редагування контент-менеджером. */ .pzrd-footer em, .pzrd-footer i { font-style: normal; } .pzrd-footer strong, .pzrd-footer b { font-weight: 700; } /* Виноска про другий номер — 12px за макетом. */ .pzrd-footer small { font-size: calc(12px * var(--pzrd-fs)); } .pzrd-footer a { color: #fff; } .pzrd-footer__grid { display: grid; /* левая колонка шире, чтобы «Завантажте додаток» помещалось в одну строку рядом с QR (иначе заголовок переносится и колонка перерастает QR) */ grid-template-columns: 252px minmax(345px, 1fr) 270px; gap: 30px; align-items: start; } .pzrd-footer__logo { display: inline-flex; text-decoration: none; } /* min-height, а не height: русский текст расписания длиннее украинского и при фиксированной высоте вылезал из блока — блок с QR наезжал на него. */ .pzrd-footer__schedule { min-height: 180px; margin-top: 20px; display: flex; flex-direction: column; gap: 5px; } .pzrd-footer__schedule p { margin: 0; } .pzrd-footer__app { margin-top: 30px; display: flex; gap: 15px; align-items: flex-start; } .pzrd-footer__qr { width: 100px; height: 100px; border-radius: 8px; background: #fff; padding: 4px; } .pzrd-footer__app-col { display: flex; flex-direction: column; gap: 8px; } .pzrd-footer__app-title { font-size: calc(14px * var(--pzrd-fs)); font-weight: 700; } /* Розмір/gap — точно з макета (фрейм "Buttons" у футері: 2×30px + gap 5px = 65px). Google Play і App Store — офіційні бейджі різних брендів із різною шириною/ формою рамки за замовчуванням (це не помилка), тому висота — спільний знаменник. */ .pzrd-footer__app-badges { display: flex; flex-direction: column; gap: 5px; } .pzrd-footer__app-badges img { height: 30px; width: auto; display: block; } .pzrd-footer__info { display: flex; flex-direction: column; gap: 20px; } /* телефоны/почта в футере — без подчёркивания (глобальное правило additional.css:283 подчёркивает все ссылки, в макете их нет) */ .pzrd-footer__info a { color: inherit; text-decoration: none !important; } .pzrd-footer__info a:hover { text-decoration: underline !important; } .pzrd-footer__block { margin: 0; } /* Рядки всередині абзацу (розділені
) ідуть впритул із line-height 1.2, а самі абзаци — через 20px, як блоки в макеті. */ .pzrd-footer__block p { margin: 0 0 20px; } .pzrd-footer__block p:last-child { margin-bottom: 0; } /* У макеті блок «Термін кредиту…» такий самий білий 14px, як решта колонки — приглушеного сірого там немає. */ .pzrd-footer__block--muted { color: #fff; } .pzrd-footer__actions { display: flex; flex-direction: column; gap: 10px; } /* Кнопки підвала — власна метрика макета (270x54, radius 15, 18px/590), відмінна від кнопок у секціях сторінки, тому задаємо їх тут, а не в .pzrd-btn. */ .pzrd-footer__btn { width: 100%; padding: 18px 20px; border-radius: 15px; font-size: calc(18px * var(--pzrd-fs)); font-weight: 590; } .pzrd-footer__actions-break { display: none; } /* нужен только в мобильной раскладке */ /* keep button label colours (override the generic .pzrd-footer a { color:#fff }) */ .pzrd-footer .pzrd-btn--primary { color: #fff; } .pzrd-footer .pzrd-btn--yellow { color: var(--pzrd-ink); } /* по макету три нижние кнопки — прозрачные с жёлтым контуром и жёлтым текстом */ .pzrd-footer .pzrd-btn--outline, .pzrd-btn--outline { background: transparent; color: var(--pzrd-yellow); /* Color/text/action/secondary */ border: 1px solid var(--pzrd-yellow); /* Color/stroke/action */ padding: 11px 14px; font-size: calc(16px * var(--pzrd-fs)); font-weight: 700; } /* Контурні кнопки підвала. .pzrd-btn--outline оголошений ще раз нижче — для кнопки «Переглянути» на контактах (182x50, 18px/600); те правило перебиває метрику підвала, тому тут піднімаємо специфічність трьома класами. Рамка з'їдає 1px — компенсуємо паддингом, щоб висота збіглася із заливними. */ .pzrd-footer .pzrd-btn--outline.pzrd-footer__btn { width: 100%; height: auto; padding: 17px 19px; font-size: calc(18px * var(--pzrd-fs)); font-weight: 590; } .pzrd-footer .pzrd-btn--outline:hover { background: rgba(255, 255, 0, .12); color: var(--pzrd-yellow); } /* десктоп: блок приложения — две колонки. QR 100×100 слева, справа колонка ровно 100px (как QR): заголовок сверху, две кнопки снизу. Колонки футера выравниваются по верху (align-items: start у грида) — общий нижний паддинг футера ровный, ни одна колонка не свисает ниже других. */ @media (min-width: 681px) { .pzrd-footer__app { align-items: stretch; } .pzrd-footer__app-col { height: 100px; justify-content: space-between; gap: 0; } } /* ------------------------------------------------------------------------ REVIEW MODALS (form + success) — scoped restyle for this template ------------------------------------------------------------------------ */ #review-form-modal.reply-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .55); align-items: center; justify-content: center; padding: 20px; } .reply-modal .reply-modal-content { font-family: var(--pzrd-font); background: #fff; border-radius: 28px; padding: 36px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); } .reply-modal .reply-modal-close { position: absolute; top: 18px; right: 22px; font-size: calc(30px * var(--pzrd-fs)); line-height: 1; color: var(--pzrd-ink-3); cursor: pointer; background: none; border: 0; } .reply-modal .reply-modal-close:hover { color: var(--pzrd-ink); } .reply-modal .reply-modal-title { font-size: calc(26px * var(--pzrd-fs)); font-weight: 700; color: var(--pzrd-ink); margin: 0 0 22px; } .reply-modal .review_form_item { margin: 0 0 16px; } .reply-modal label { font-size: calc(14px * var(--pzrd-fs)); font-weight: 600; color: var(--pzrd-ink-2); } .reply-modal .required { color: var(--pzrd-red); } .reply-modal input[type="text"], .reply-modal input[type="email"], .reply-modal textarea { width: 100%; margin-top: 6px; padding: 12px 15px; font-family: inherit; font-size: calc(15px * var(--pzrd-fs)); color: var(--pzrd-ink); background: #fff; border: 1.5px solid var(--pzrd-stroke); border-radius: 14px; outline: none; transition: border-color .15s ease; box-sizing: border-box; } .reply-modal textarea { resize: vertical; min-height: 110px; } .reply-modal input:focus, .reply-modal textarea:focus { border-color: var(--pzrd-ink); } .reply-modal .wrong-input { border-color: var(--pzrd-red); } .reply-modal .error-text { color: var(--pzrd-red); font-size: calc(13px * var(--pzrd-fs)); margin-top: 4px; } .reply-modal .review_rate_input { display: inline-flex; gap: 6px; margin-top: 6px; } .reply-modal .review_rate_input label { cursor: pointer; } .reply-modal .review_rate_input i { font-size: calc(28px * var(--pzrd-fs)); color: #d3d8e0; transition: color .15s ease; } .reply-modal .button, .reply-modal input[type="submit"].button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 15px 24px; background: var(--pzrd-ink); color: var(--pzrd-yellow); border: 0; border-radius: 9999px; font-family: inherit; font-size: calc(17px * var(--pzrd-fs)); font-weight: 590; cursor: pointer; transition: background-color .2s ease; } .reply-modal .button:hover, .reply-modal input[type="submit"].button:hover { background: #1f1f1f; } #review-added-modal.modal { position: fixed; inset: 0; z-index: 3000; align-items: center; justify-content: center; } #review-added-modal .modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); } #review-added-modal .modal-content { position: relative; font-family: var(--pzrd-font); background: #fff; border-radius: 28px; padding: 40px 36px; max-width: 440px; width: calc(100% - 40px); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); } #review-added-modal .modal-content p { font-size: calc(17px * var(--pzrd-fs)); color: var(--pzrd-ink-2); margin: 0 0 24px; } #review-added-modal .modal-close { position: absolute; top: 16px; right: 20px; font-size: calc(28px * var(--pzrd-fs)); color: var(--pzrd-ink-3); background: none; border: 0; cursor: pointer; } #review-added-modal .review-button { display: inline-flex; align-items: center; justify-content: center; padding: 14px 40px; background: var(--pzrd-ink); color: var(--pzrd-yellow); border: 0; border-radius: 9999px; font-family: inherit; font-size: calc(16px * var(--pzrd-fs)); font-weight: 590; cursor: pointer; } #review-added-modal .review-button:hover { background: #1f1f1f; } /* ------------------------------------------------------------------------ Legacy tp_modal (калькулятор «Розрахунки» / «Умови кредитування») на редизайн-странице. Базовые .tp_modal_* лежат в style.css и раньше делали окно почти без скругления/тени, прижатым к верху и с горизонтальным переполнением на мобилке. Переопределяем ТОЛЬКО эти два id (redesign.css грузится лишь на шаблоне main-redesign.php), чтобы окно читалось как модалка. ------------------------------------------------------------------------ */ #calc_calculations_modal-first-block .tp_modal_dialog, #calc_conditions_modal .tp_modal_dialog { max-width: 720px; width: calc(100% - 32px); /* поля по бокам, чтобы не прилипало к краям */ max-height: calc(100% - 80px); margin: 40px auto; /* отрыв от верх/низ — окно «плавает» */ } #calc_calculations_modal-first-block .tp_modal_content, #calc_conditions_modal .tp_modal_content { max-height: calc(100vh - 80px); border: 0; border-radius: var(--pzrd-radius-md); /* 20px, как у карточек */ box-shadow: 0 20px 60px rgba(0, 0, 0, .25); /* отделяем от подложки */ } #calc_calculations_modal-first-block .tp_modal_header, #calc_conditions_modal .tp_modal_header { padding: 22px 28px; border-bottom-color: var(--pzrd-stroke); border-top-left-radius: var(--pzrd-radius-md); border-top-right-radius: var(--pzrd-radius-md); } #calc_calculations_modal-first-block .tp_modal_title, #calc_conditions_modal .tp_modal_title { font-size: 22px; font-weight: 700; color: var(--pzrd-ink); } #calc_calculations_modal-first-block .tp_modal_body, #calc_conditions_modal .tp_modal_body { padding: 24px 28px 28px; overflow-x: auto; /* широкие таблицы скроллятся внутри, а не ломают окно */ } /* ------------------------------------------------------------------------ Responsive (mobile layout refined later per Figma 375px frame) ------------------------------------------------------------------------ */ @media (max-width: 1279px) { .pzrd-app__grid { grid-template-columns: 1fr 1fr; } .pzrd-app__visual { --pzrd-stage: .78; } } @media (max-width: 980px) { .pzrd-footer__grid { grid-template-columns: 1fr; } /* как только футер схлопнулся в одну колонку — центрируем содержимое lead, иначе на планшете (681–980) логотип/график/додаток прижаты влево */ .pzrd-footer__lead { display: flex; flex-direction: column; align-items: center; text-align: center; } /* в одну колонку стопка кнопок центрируется вместе с остальным содержимым */ .pzrd-footer__actions { max-width: 320px; margin-left: auto; margin-right: auto; align-items: center; } .pzrd-features__grid { grid-template-columns: repeat(2, 1fr); } .pzrd-app__grid { grid-template-columns: 1fr; } /* «Сплатити кредит легко»: в мобильном фрейме макета подписи и кнопки по центру, ноутбук уезжает под них. */ .pzrd-pay { padding: 30px 0 0; } .pzrd-pay__grid { flex-direction: column; gap: 0; } .pzrd-pay__title { margin-bottom: 40px; text-align: left; } .pzrd-pay__col { width: 100%; text-align: center; } .pzrd-pay__btn { min-width: 220px; } .pzrd-pay__media { flex: 0 0 auto; width: 100%; margin-top: 30px; align-self: stretch; } .pzrd-app__lead { padding-top: 0; } .pzrd-app__visual { --pzrd-stage: .8; } } @media (max-width: 991px) { .pzrd-features { padding: 40px 0; } .pzrd-features__grid{ gap: 10px 32px; } .pzrd-docs{ padding: 0 0 50px; } /* мобильный фрейм: заголовки секций 32px, подписи фич и шагов мельче */ .pzrd-h2 { font-size: calc(32px * var(--pzrd-fs)); } .pzrd-feature__title { font-size: calc(20px * var(--pzrd-fs)); margin-bottom: 15px; } .pzrd-feature__text { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.21; } .pzrd-step__text { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.21; } .pzrd-features__grid { grid-template-columns: 1fr; } .pzrd-docs__grid { grid-template-columns: 1fr; } /* «Як отримати кредит» — горизонтальный слайдер (нативный scroll-snap) */ .pzrd-steps__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; margin: 0; padding: 4px 0 12px; scrollbar-width: none; } .pzrd-steps__grid::-webkit-scrollbar { display: none; } .pzrd-step { flex: 0 0 86%; scroll-snap-align: start; flex-direction: column; /* номер сверху, текст под ним */ align-items: flex-start; justify-content: flex-start; gap: 14px; padding: 26px 24px; min-height: 190px; } /* в мобильном фрейме плашка и кегль такие же, как на десктопе (80×80 / 48px) */ .pzrd-steps__bar { display: flex; } .pzrd-doc { padding: 24px 20px 20px; } /* моб.: без QR; текст и бейджи по центру; текст+бейджи сверху, фото снизу */ .pzrd-app__qr-wrap { display: none !important; } /* в мобильном фрейме заголовок прижат влево, подпись и бейджи — по центру */ .pzrd-app__lead { text-align: center; } /* «Завантажте додаток» в Montserrat на 2px шире строки — чуть плотнее трекинг, чтобы заголовок остался в две строки, как в макете */ .pzrd-app__lead .pzrd-h2 { text-align: left; letter-spacing: -.03em; } .pzrd-app__sub { max-width: none; } .pzrd-app__dl { gap: 0; justify-content: center; } .pzrd-app__badges { flex-direction: row; gap: 15px; justify-content: center; } .pzrd-app__badges img { height: 50px; } .pzrd-app__sub { font-size: calc(16px * var(--pzrd-fs)); margin-bottom: 30px; } /* сцена смартфона в мобильном фрейме — 342 из 559 (0.612) */ .pzrd-app__visual { --pzrd-stage: .612; } .pzrd-reviews__head { flex-direction: column; align-items: flex-start; } /* моб.: логотип по центру сверху, звёзды + рейтинг строкой снизу */ .pzrd-reviews__rating { width: 100%; box-sizing: border-box; flex-direction: column; align-items: center; gap: 10px; padding: 16px 20px; } /* в мобильном фрейме бейдж — колонка: логотип сверху, ниже звёзды 133×20 и подпись; в строку 375px они иначе не помещаются */ .pzrd-reviews__rating-line { gap: 10px; flex-wrap: wrap; justify-content: center; } .pzrd-reviews__stars { width: 133.33px; height: 20px; } .pzrd-reviews__rating-txt { text-align: left; font-size: calc(11px * var(--pzrd-fs)); } /* кнопки отзывов — всегда в одну строку, компактнее на мобильных */ .pzrd-reviews__actions { gap: 10px; } .pzrd-reviews__actions .pzrd-btn { padding: 12px 16px; font-size: calc(14px * var(--pzrd-fs)); } /* моб. фрейм макета: карточка 300px, зазор 10 — лента так же от левого края */ .pzrd-reviews__slider .slick-slide > div { width: min(310px, calc(100vw - 40px)); padding-right: 10px; } /* внутренние поля 20 (в макете 300×181 с отступом 20), иначе текст в 300px не читается */ .pzrd-review { height: 100%; min-height: 160px; padding: 20px; } .pzrd-review__header { gap: 10px; margin-bottom: 20px; } .pzrd-review__text { font-size: calc(14px * var(--pzrd-fs)); -webkit-line-clamp: 4; } /* slick ставит кнопкам inline display:block — перебиваем */ .pzrd-reviews__arrow { display: none !important; } .pzrd-warning__box { height: 300px; padding: 18px 18px 0; } .pzrd-warning__box .nbu_text { padding-bottom: 18px; } .pzrd-warning__actions { margin-top: 18px; } .pzrd-warning__box ul { padding-left: 28px; } /* offers calculator — мобильный фрейм макета (375px, контент 345) */ .pzrd-oc__head { flex-direction: column; align-items: flex-start; gap: 30px; } .pzrd-oc__title { font-size: calc(32px * var(--pzrd-fs)); } .pzrd-oc__sub { font-size: calc(16px * var(--pzrd-fs)); line-height: 1.2; } .pzrd-oc__amount { width: 100%; justify-content: space-between; } /* карточки друг под другом с зазором 10px, поля внутри те же 30px */ .pzrd-oc__cards { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pzrd-oc__card { min-width: 0; } .pzrd-oc__row > span { min-width: 0; } /* на 375px в переключатель влезают только сокращённые подписи */ .pzrd-oc__toggle-lg { display: none; } .pzrd-oc__toggle-sm { display: inline; } .pzrd-oc__cta { height: calc(40px * var(--pzrd-fs)); border-radius: 12px; font-size: calc(16px * var(--pzrd-fs)); } .pzrd-oc__details-title { margin-top: 8px; } /* ссылки переносятся по центру, а не в колонку */ .pzrd-oc__links { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 10px 30px; } /* accordion */ .pzrd-acc__head { padding: 16px 18px; gap: 12px; } .pzrd-acc__title { font-size: calc(16px * var(--pzrd-fs)); } .pzrd-acc__panel-inner { padding: 0 18px 18px 18px; } /* меньше боковой паддинг у футер-контейнера — больше места контенту, чтобы блоки (бейджи/логотип) не упирались в край */ .pzrd-footer__grid { padding-left: 10px; padding-right: 10px; } /* У мобільному макеті підвал набраний тим самим кеглем, що й на десктопі — 14px; окремо зменшена лише виноска про другий номер (12px, .pzrd-footer small) і блок «Термін кредиту» нижче. */ .pzrd-footer, .pzrd-footer *:not(.pzrd-footer__btn):not(small) { font-size: calc(14px * var(--pzrd-fs)); } .pzrd-footer small, .pzrd-footer small * { font-size: calc(12px * var(--pzrd-fs)); } /* footer: allow long legal text to wrap; на мобилках весь текст по центру. Контент info-колонок приходит из ACF с инлайновым text-align — перебиваем через !important, иначе инлайн-стиль побеждает наследуемый center. */ .pzrd-footer { overflow-wrap: anywhere; text-align: center; padding: 30px 0; } .pzrd-footer__info, .pzrd-footer__info * { text-align: center !important; } .pzrd-footer__grid { gap: 30px; } /* логотип и график работы футера — по центру только на мобилках. flex-direction у них column, значит горизонталь центрирует align-items */ .pzrd-footer__logo { display: flex; align-items: center; } .pzrd-footer__logo-img { width: 200px; } .pzrd-footer__schedule { align-items: center; text-align: center; } /* QR-код приложения в футере на мобилках не нужен */ .pzrd-footer__qr { display: none; } /* блок приложения — по центру, кнопки в одну строку (2 колонки) */ .pzrd-footer__app { justify-content: center; } .pzrd-footer__app-col { align-items: center; text-align: center; } .pzrd-footer__app-badges { flex-direction: row; justify-content: center; gap: 10px; } .pzrd-footer__app-badges img { height: 40px; } /* кнопки футера: по макету — «пилюли» по контенту, в строку с переносом, по центру (а не в столбик во всю ширину) */ .pzrd-footer__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: none; } .pzrd-footer__btn { width: auto; } /* мобільна метрика макета: radius 9, 14px/590, padding 10 */ .pzrd-footer .pzrd-footer__btn, .pzrd-footer .pzrd-btn--outline.pzrd-footer__btn { width: auto; height: auto; padding: 10px 14px; border-radius: 9px; font-size: calc(14px * var(--pzrd-fs)); font-weight: 590; } .pzrd-footer__block--muted { font-size: calc(12px * var(--pzrd-fs)); } /* фиксированный разрыв: ряд1 = Взяти кредит/Сплатити/Блог, ряд2 = Відгуки/Написати нам */ .pzrd-footer__actions-break { display: block; flex-basis: 100%; width: 100%; height: 0; margin: 0; } } @media (max-width: 1100px) { .pzrd-steps { padding: 50px 0; } /* Ниже 1100px hero становится колонкой: телефон уступает место полосе с купюрами — так в мобильном фрейме макета. */ /* Именно relative: ::before/::after позиционируются inset'ом, и при static они считались бы от .pzrd-hero__body — купюры растягивало на всю высоту hero и заводило за карточку. */ .pzrd-hero__media { position: relative; /* Сброс десктопного смещения обязателен: в базовом правиле стоит left: 850px / top: -23px для absolute-раскладки, и при relative они уводят блок на 850px вправо — за overflow: hidden у .pzrd-hero, то есть купюр просто не видно. */ top: 0; left: 0; right: 0; width: 100%; height: 160px; aspect-ratio: auto; margin-top: 30px; overflow: hidden; /* center по вертикали, а не проценты: при cover высота картинки зависит от ширины экрана (160px полосы — это 68% высоты на 375px и 25% на 1100px), и любой фиксированный процент кадрирует по-разному. */ background: url('../static_images/redesign/money.webp') no-repeat center center / cover; } /* Ниже 1100px картинка — фон самого блока, а не ::after: кольцо (::before) здесь тоже скрыто — на мобильной полосе с купюрами оно не нужно. */ .pzrd-hero__media::after { display: none; } .pzrd-hero__media::before { display: none; } .pzrd-hero__body { flex-direction: column; min-height: 0; } .pzrd-hero__col { width: 100%; max-width: 100%; } /* Ниже 1100px hero целиком переключается на мобильный вид: компактная карточка, скрытый eyebrow, ссылки одним листом под ней. Раньше эти правила стояли на 991px, и в диапазоне 992–1100 получался гибрид — десктопная карточка на мобильной раскладке. */ /* Подложка та же тёмная, что и на десктопе (в прошлой версии макета мобильный hero был жёлтым — сейчас нет). */ .pzrd-hero { padding-bottom: 0; } .pzrd-hero__media::before { display: none; } .pzrd-hero__inner { padding: 0 16px; gap: 16px; } /* на мобилке скругление карточек меньше */ /* карточка и блок ссылок в макете — один белый лист, поэтому у карточки скруглён только верх, а у ссылок — только низ, и зазора между ними нет */ .pzrd-hero__card { padding: 20px; gap: 25px; border-radius: 20px 20px 0 0; } /* ровно 2 строки (разбивка по
): запрещаем внутренний перенос и даём шрифту ужиматься по ширине экрана (8.4vw), чтобы длинная строка не вылезала */ .pzrd-hero__title { font-size: min(calc(36px * var(--pzrd-fs)), 8.4vw); } .pzrd-hero__eyebrow { display: none; } .pzrd-hero__body {gap: 0} /* на мобиле блок ссылок отбит margin-top: 10px, пунктир не нужен */ .pzrd-hero__divider { display: none; } /* ссылки — центрированные строки по две штуки, высота строки 20px (макет) */ .pzrd-hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; margin-top: 0; border-radius: 0 0 20px 20px; } .pzrd-hero__links a { width: auto; height: 20px; padding: 0 2px; font-size: calc(11px * var(--pzrd-fs)); white-space: nowrap; } /* amount box: по мобильному макету блок выше (пропорции 610×200 ≈ 3.05), «До» стоит НАД суммой по правому краю, сумма крупная. Все размеры сняты замерами с макета и заданы в cqw, поэтому блок масштабируется цельно. */ .pzrd-amount { aspect-ratio: 305 / 100; } /* значок ₴ на узком экране чуть правее */ .pzrd-amount::after { left: 6.56%; } .pzrd-amount__group { flex-direction: column; align-items: flex-end; /* «До» и сумма прижаты вправо */ gap: 17px; gap: 2.8cqw; /* зазор «До» → сумма (17/610) */ margin-right: 44px; margin-right: 7.2cqw; /* отступ суммы от правого края (44/610) */ } .pzrd-amount__label { font-size: 30px; font-size: 5cqw; /* cap ≈ 20px из 200 высоты */ } .pzrd-amount__sum { font-size: 88px; font-size: 14.5cqw; /* cap ≈ 58px из 200 высоты */ } } @media (max-width: 991px) { /* Купюры в мобильном фрейме — крупный объект НА тёмном фоне, обрезанный низом hero, а не полоса во всю ширину: между карточкой и пачкой видно подложку, поэтому cover тут не подходит. Геометрия подогнана к макету (расхождение по верху пачки 1px, по левому краю 4px): картинка 138% ширины блока, сдвинута влево на 21% и вверх на 9px, лишнее срезает overflow родителя. Сама полоса идёт от края до края, поэтому выходим за паддинги .pzrd-hero__inner. Выше 991px (планшет) остаётся cover из блока 1100: этот кадр там разъезжается, потому что размер картинки тянется за шириной экрана. */ .pzrd-hero__media { width: calc(100% + 32px); margin-left: -16px; /* 55.3% по горизонтали = сдвиг влево на 21% ширины блока: при картинке шириной 138% смещение считается как (W - 1.38W) * p, поэтому процент не зависит от ширины экрана. По вертикали нужен именно px. */ background-position: 55.3% -9px; background-size: 138% auto; } /* Menu collapses to: logo + phone icon + eye + hamburger. Auth buttons (Швидка оплата / Мій кабінет) live in the hamburger drawer. */ /* по мобильному фрейму: плашка 345×50, логотип 105×30, четыре круглые кнопки 30×30 — две тёмные (оплата/кабинет) и две служебные */ .pzrd-menu { gap: 10px; padding: 10px; flex-wrap: nowrap; border-radius: 20px; } .pzrd-menu__actions { gap: 10px; } .pzrd-menu__group { gap: 5px; } /* у телефона прячем только номер — сама иконка-трубка остаётся. Раньше здесь стоял display:none и кнопка звонка пропадала целиком. Базовые padding 12/20 и min-height 48 тут сбрасываем: с ними пилюля вырастает с 50 до 68px, а кнопка занимает 60px ширины при иконке 20px. Габарит 30×30 — как у .pzrd-icon-btn рядом (глаз, бургер). */ .pzrd-menu__phone { gap: 0; padding: 0; min-height: 0; width: 30px; height: 30px; justify-content: center; } .pzrd-menu__phone span { display: none; } .pzrd-menu__group--auth { display: flex; } .pzrd-menu__group--auth .pzrd-btn { padding: 0; min-height: 0; width: 30px; height: 30px; } .pzrd-menu__group--auth .pzrd-btn span { display: none; } .pzrd-menu__group--auth .pzrd-btn svg { width: 16px; height: 16px; } .pzrd-menu__logo { flex: 0 1 auto; min-width: 0; } .pzrd-logo { width: 105px; height: 30px; } .pzrd-icon-btn { width: 30px; height: 30px; padding: 4px; } .pzrd-icon-btn svg { width: 20px; height: 20px; } .pzrd-btn--cta { height: calc(64px * var(--pzrd-fs)); font-size: calc(20px * var(--pzrd-fs)); } /* картинка шире контейнера и сдвинута влево — кадр как в мобильном фрейме (контейнер 345×160, изображение ~497×310 со смещением -86/-20) */ /* modals: поля к краям и отступы компактнее */ #calc_calculations_modal-first-block .tp_modal_dialog, #calc_conditions_modal .tp_modal_dialog { width: calc(100% - 24px); max-height: calc(100% - 40px); margin: 20px auto; } #calc_calculations_modal-first-block .tp_modal_content, #calc_conditions_modal .tp_modal_content { max-height: calc(100vh - 40px); } #calc_calculations_modal-first-block .tp_modal_header, #calc_conditions_modal .tp_modal_header { padding: 16px 18px; } #calc_calculations_modal-first-block .tp_modal_title, #calc_conditions_modal .tp_modal_title { font-size: 18px; } #calc_calculations_modal-first-block .tp_modal_body, #calc_conditions_modal .tp_modal_body { padding: 16px 18px 20px; } } .pzrd-footer__soc_logo { display: flex; gap: 20px; margin-top: 30px; } /* ------------------------------------------------------------------------ CONTACTS (Figma: «tpozyka.com - Contacts», node 819:25430) Подключается только шаблоном contacts-redesign.php. ------------------------------------------------------------------------ */ .pzrd-contacts { padding: 20px 0 100px; } /* Вертикальный ритм макета: 100px вокруг hero, 50px между карточками. */ .pzrd-contacts .pzrd-container > * + * { margin-top: 50px; } .pzrd-contacts .pzrd-phero { margin-top: 100px; } .pzrd-contacts .pzrd-phero + * { margin-top: 100px; } /* ---- общая карточка ---------------------------------------------------- */ .pzrd-card { background: var(--pzrd-sheet); border-radius: 50px; } .pzrd-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .pzrd-card__head--row { flex-direction: row; align-items: center; } .pzrd-ic { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 999px; background: var(--pzrd-yellow); display: inline-flex; align-items: center; justify-content: center; } .pzrd-ic img { display: block; width: 32px; height: 32px; } .pzrd-card__title { margin: 0; font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; line-height: 1.2; color: var(--pzrd-ink); } .pzrd-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } /* ---- строка «Контакт-центр» + «Ми тут» --------------------------------- */ .pzrd-crow { display: flex; align-items: stretch; gap: 50px; } .pzrd-card--contact { flex: 0 0 408px; width: 408px; padding: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; } /* Почта и телефон — крупные оливковые ссылки макета. */ .pzrd-clink { font-size: calc(28px * var(--pzrd-fs)); font-weight: 700; line-height: 1.1; color: var(--pzrd-yellow-deep); text-decoration: underline; word-break: break-word; } .pzrd-clink:hover { color: var(--pzrd-ink); } .pzrd-cnote { margin: 0; font-size: calc(12px * var(--pzrd-fs)); line-height: 1.3; color: var(--pzrd-ink-3); } .pzrd-cnote strong { font-weight: 600; } .pzrd-clink-sm { margin-top: auto; font-size: calc(14px * var(--pzrd-fs)); font-weight: 500; line-height: 1.2; color: var(--pzrd-yellow-deep); text-decoration: underline; } .pzrd-clink-sm:hover { color: var(--pzrd-ink); } .pzrd-card--where { flex: 1 1 auto; min-width: 0; padding: 20px; display: flex; align-items: stretch; gap: 20px; } .pzrd-card__where-text { flex: 1 1 0; min-width: 0; padding: 30px; display: flex; flex-direction: column; gap: 30px; } .pzrd-corg { margin: 0; font-size: calc(16px * var(--pzrd-fs)); font-weight: 500; line-height: 1.3; color: var(--pzrd-text-2); } .pzrd-caddr { margin: 0; font-size: calc(28px * var(--pzrd-fs)); font-weight: 700; line-height: 1.15; color: var(--pzrd-yellow-deep); } /* ---- карта (Leaflet) ---------------------------------------------------- */ .pzrd-map { flex: 1 1 0; min-width: 0; min-height: 339px; border-radius: 30px; background: var(--pzrd-bg-2); overflow: hidden; z-index: 0; /* контекст наложения для внутренних панелей Leaflet */ } /* Маркер — жёлтый кружок с тем же пином, что в заголовке карточки «Ми тут». */ .pzrd-map__pin { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--pzrd-yellow); box-shadow: var(--pzrd-shadow); } .pzrd-map__pin img { display: block; width: 24px; height: 24px; } /* Глобальное `a { text-decoration: underline }` из additional.css портит подписи и атрибуцию Leaflet. */ .pzrd-map a { text-decoration: none !important; } .pzrd-map .leaflet-control-attribution a { text-decoration: underline !important; } .pzrd-map .leaflet-container { font-family: var(--pzrd-font); } /* ---- «Ми в мережі» ------------------------------------------------------ */ /* ---- «Графік роботи» --------------------------------------------------- Широкая карточка под «Ми в мережі»: шапка как у соцсетей (иконка + заголовок в строку), под ней часы подразделений в три колонки. Часы приходят из ACF-опций подвала — то есть уже прогнаны через wpautop (

,
), поэтому отступы абзацев здесь снимаем. */ .pzrd-card--hours { padding: 50px; display: flex; flex-direction: column; gap: 30px; } .pzrd-hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; } .pzrd-hours__item { display: flex; flex-direction: column; gap: 8px; } .pzrd-hours__label { font-size: calc(18px * var(--pzrd-fs)); font-weight: 700; line-height: 1.2; color: var(--pzrd-ink); } .pzrd-hours__time { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.5; color: var(--pzrd-text-2); } .pzrd-hours__time p { margin: 0; } /* Курсив/жирный из подвала внутри часов не нужен — оформление задаёт колонка. */ .pzrd-hours__time em, .pzrd-hours__time strong { font-style: normal; font-weight: 400; } .pzrd-card--social { padding: 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .pzrd-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; } .pzrd-socials li { margin: 0; } .pzrd-socials a { display: block; line-height: 0; } .pzrd-socials img { display: block; width: 60px; height: 60px; transition: transform .15s ease; } .pzrd-socials a:hover img { transform: scale(1.06); } /* ---- «Напишіть нам» ----------------------------------------------------- */ .pzrd-card--write { padding: 50px; display: flex; align-items: flex-start; gap: 50px; } .pzrd-write__lead { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 50px; } .pzrd-write__text { font-size: calc(16px * var(--pzrd-fs)); line-height: 1.5; color: var(--pzrd-ink); } .pzrd-write__text p { margin: 0 0 1em; } .pzrd-write__text p:last-child { margin-bottom: 0; } .pzrd-write__text a { color: var(--pzrd-yellow-deep); text-decoration: underline; } /* Весь блок — одна ссылка (подпись + кнопка), поэтому здесь же гасим цвет и подчёркивание ссылки: текст должен читаться как обычный абзац, а кнопка — как кнопка. Подчёркивание с !important — против глобального `a { text-decoration: underline !important }` из additional.css:283. */ .pzrd-write__order { display: flex; align-items: flex-start; gap: 20px; color: inherit; text-decoration: none !important; } /* Ховер по любой части строки подсвечивает кнопку так же, как её собственный. */ .pzrd-write__order:hover .pzrd-btn--outline, .pzrd-write__order:focus .pzrd-btn--outline { background: var(--pzrd-bg); } .pzrd-write__order-text { flex: 1 1 0; min-width: 0; margin: 0; font-size: calc(16px * var(--pzrd-fs)); line-height: 1.2; } /* Кнопка «Переглянути» — в макете прямоугольная (radius 15), а не пилюля. */ .pzrd-btn--outline { flex: 0 0 auto; width: 182px; height: 50px; padding: 0 20px; border: 1px solid var(--pzrd-ink); border-radius: 15px; background: transparent; color: var(--pzrd-ink); font-size: calc(18px * var(--pzrd-fs)); font-weight: 600; } .pzrd-btn--outline:hover { background: var(--pzrd-bg); color: var(--pzrd-ink); } /* ---- форма CF7 ---------------------------------------------------------- */ .pzrd-write__form { flex: 1 1 0; min-width: 0; } .pzrd-write__form .form-group, .pzrd-write__form .form-group1, .pzrd-write__form .form-group2 { display: flex; flex-direction: column; gap: 10px; } .pzrd-write__form .form-group2 { margin-top: 10px; } .pzrd-write__form .form-block { position: relative; } .pzrd-write__form input[type="text"], .pzrd-write__form input[type="email"], .pzrd-write__form input[type="tel"], .pzrd-write__form select, .pzrd-write__form textarea { width: 100%; height: 64px; padding: 0 20px; border: 1px solid var(--pzrd-panel); border-radius: 20px; background: var(--pzrd-sheet); font-family: var(--pzrd-font); font-size: calc(14px * var(--pzrd-fs)); line-height: 20px; color: var(--pzrd-ink); box-shadow: none; -webkit-appearance: none; appearance: none; } .pzrd-write__form textarea { height: 64px; padding: 20px; resize: vertical; } .pzrd-write__form input::placeholder, .pzrd-write__form textarea::placeholder { color: var(--pzrd-text-2); opacity: 1; } .pzrd-write__form input:focus, .pzrd-write__form select:focus, .pzrd-write__form textarea:focus { outline: none; border-color: var(--pzrd-ink); } /* Стрелка селекта — вектор из макета (icons/ic-chevron-down.svg). */ .pzrd-write__form select { padding-right: 52px; background-image: url('../static_images/redesign/icons/ic-chevron-down.svg'); background-repeat: no-repeat; background-position: right 20px center; background-size: 24px 24px; color: var(--pzrd-text-2); cursor: pointer; } .pzrd-write__form .captcha-block { margin-top: 10px; } .pzrd-write__form .submit-block { margin-top: 20px; } .pzrd-write__form input[type="submit"], .pzrd-write__form .wpcf7-submit { width: 100%; height: 50px; padding: 0 20px; border: 0; border-radius: 15px; background: var(--pzrd-ink); color: var(--pzrd-yellow); font-family: var(--pzrd-font); font-size: calc(18px * var(--pzrd-fs)); font-weight: 600; cursor: pointer; transition: background .15s ease; } .pzrd-write__form .wpcf7-submit:hover { background: #1f1f1f; } .pzrd-write__form .wpcf7-submit.btn-blocked { background: var(--pzrd-ink-3); color: var(--pzrd-sheet); cursor: not-allowed; } .pzrd-write__form .wpcf7-not-valid-tip { margin-top: 6px; font-size: calc(12px * var(--pzrd-fs)); color: var(--pzrd-red); } .pzrd-write__form .wpcf7-response-output { margin: 20px 0 0; padding: 12px 16px; border-radius: 15px; font-size: calc(14px * var(--pzrd-fs)); } /* согласие на обработку персональных данных */ .pzrd-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; } /* Чекбокс згоди — 22x22, rx 7 (Figma: Checkbox/Radio). Два стани: знятий — бліда заливка #ffffe6, жовта рамка, галочка #cccc00; активний — суцільна жовта заливка, чорна галочка (помітно контрастніше). Галочка в обох станах та сама, різниця тільки в кольорі — тому два однакових ассети (ic-check.svg / ic-check-dark.svg): opacity тут не підходить, вона гасила б і рамку з заливкою разом із галочкою. Нативний вигляд не використовуємо: глобальний style.css задає всім `appearance: none` + `min-height: 40px` + сіру рамку, через що галочка зникала, а сам чекбокс розтягувався до 22x40. Тому малюємо коробку самі, а галочку кладемо фоном. Картинка 22x22 позиціонується по центру padding-box (18x18) і рівно збігається з border-box, бо рамки з усіх боків однакові. */ .pzrd-consent input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; /*background: var(--pzrd-yellow-soft) url("../static_images/redesign/icons/ic-check.svg") no-repeat center;*/ background-size: 22px 22px; border: 2px solid var(--pzrd-yellow); border-radius: 7px; -webkit-border-radius: 7px; outline: none; cursor: pointer; transition: background-color .2s ease; } .pzrd-consent input[type="checkbox"]:checked { background-color: var(--pzrd-yellow); background-image: url("../static_images/redesign/icons/ic-check-dark.svg"); } .pzrd-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--pzrd-yellow-deep); outline-offset: 2px; } .pzrd-consent label { margin: 0; font-size: calc(12px * var(--pzrd-fs)); font-weight: 400; line-height: 1.2; color: var(--pzrd-ink); cursor: pointer; } .pzrd-consent a { color: var(--pzrd-yellow-deep); text-decoration: underline; } .pzrd-consent__error { margin-top: 8px; font-size: calc(12px * var(--pzrd-fs)); line-height: 1.3; color: var(--pzrd-red); } /* ---- телефон і фото у лівій колонці (сторінка «Протидія шахрайству») ---- На контактах картка обходиться текстом і кнопкою «Переглянути», у макеті антифроду під текстом стоїть телефон гарячої лінії і фото. */ .pzrd-write__phone { align-self: flex-start; font-size: calc(28px * var(--pzrd-fs)); font-weight: 700; line-height: 1; color: var(--pzrd-yellow-deep); text-decoration: underline; } .pzrd-write__phone:hover { color: var(--pzrd-ink); } .pzrd-write__media img { display: block; width: 100%; height: auto; border-radius: 20px; } /* ---- форма зворотного зв'язку (CF7 «Обратная связь», .feedback_form_inner) Легасі-розмітка цієї форми —

, а не .form-group контактів, і style.css фарбує її поля в сірий. Перебиваємо під макет: та сама сітка полів, що в блоці контактів. */ .pzrd-write__form .feedback_form_inner { display: flex; flex-direction: column; gap: 10px; max-width: none; margin: 0; } .pzrd-write__form .feedback_form_inner > p { margin: 0; } .pzrd-write__form .feedback_form_inner label { display: block; margin: 0; font-size: calc(14px * var(--pzrd-fs)); font-weight: 400; line-height: 20px; color: var(--pzrd-text-2); } .pzrd-write__form .feedback_form_inner label br { display: none; } .pzrd-write__form .feedback_form_inner .wpcf7-form-control-wrap { display: block; margin-top: 8px; } .pzrd-write__form .feedback_form_inner .wpcf7-form-control { width: 100%; min-height: 0; height: 64px; padding: 0 20px; border: 1px solid var(--pzrd-panel); border-radius: 20px; background: var(--pzrd-sheet); font-family: var(--pzrd-font); font-size: calc(14px * var(--pzrd-fs)); line-height: 20px; color: var(--pzrd-ink); box-shadow: none; } .pzrd-write__form .feedback_form_inner textarea.wpcf7-form-control { height: 96px; padding: 20px; resize: vertical; } .pzrd-write__form .feedback_form_inner input[type="file"].wpcf7-form-control { height: auto; padding: 20px; cursor: pointer; } .pzrd-write__form .feedback_form_inner .wpcf7-file-note { display: block; margin: 0 0 8px; font-size: calc(12px * var(--pzrd-fs)); line-height: 16px; color: var(--pzrd-text-2); } /* Кнопка теж має клас .wpcf7-form-control, тому окремим (специфічнішим) правилом повертаємо їй вигляд кнопки макета — чорна з жовтим текстом. */ .pzrd-write__form .feedback_form_inner input.wpcf7-submit { width: 100%; max-width: none; height: 50px; margin: 0; padding: 0 20px; border: 0; border-radius: 15px; background: var(--pzrd-ink); color: var(--pzrd-yellow); font-size: calc(18px * var(--pzrd-fs)); font-weight: 600; box-shadow: none; } .pzrd-write__form .feedback_form_inner input.wpcf7-submit:hover { background: #1f1f1f; } .pzrd-write__form .feedback_form_inner input.wpcf7-submit.btn-blocked { background: var(--pzrd-ink-3); color: var(--pzrd-sheet); cursor: not-allowed; } /* У макеті «Додати файл» стоїть перед «Повідомленням», а в самій формі — після нього; міняємо місцями розкладкою, щоб не правити форму в базі. */ .pzrd-write__form .feedback_form_inner > p:nth-of-type(5) { order: 1; } /* Далі — капча і кнопка (кнопку CF7 теж загортає у

). */ .pzrd-write__form .feedback_form_inner .captcha_block { order: 2; margin-top: 10px; } .pzrd-write__form .feedback_form_inner > p:last-of-type { order: 3; } .pzrd-write__form .feedback_form_inner .captcha_block .wpcf7-form-control { height: auto; padding: 0; border: 0; background: transparent; } /* ---- планшет ------------------------------------------------------------ */ @media (max-width: 1100px) { .pzrd-crow { flex-direction: column; } .pzrd-card--contact { flex: 1 1 auto; width: 100%; } .pzrd-card--where { flex-direction: column; } .pzrd-card--write { flex-direction: column; gap: 40px; } /* Колонки десктопа держатся на `flex: 1 1 0`, где basis — это ширина. После разворота в колонку тот же basis становится высотой и схлопывает блоки, поэтому сбрасываем его на auto. */ .pzrd-card__where-text, .pzrd-write__lead, .pzrd-write__form { flex: 0 0 auto; width: 100%; } .pzrd-map { flex: 0 0 auto; width: 100%; min-height: 300px; } } /* ---- мобильные ---------------------------------------------------------- */ @media (max-width: 991px) { .pzrd-contacts { padding-bottom: 50px; } .pzrd-contacts .pzrd-container > * + * { margin-top: 30px; } .pzrd-contacts .pzrd-phero, .pzrd-contacts .pzrd-phero + * { margin-top: 50px; } .pzrd-card { border-radius: 30px; } .pzrd-card--contact { padding: 30px; } .pzrd-card--where { padding: 10px; } .pzrd-card__where-text { padding: 20px; gap: 20px; } .pzrd-map { min-height: 262px; border-radius: 20px; } /* На мобильных иконка и заголовок карточки в макете стоят в строку. */ .pzrd-card__head { flex-direction: row; align-items: center; } .pzrd-card--social { flex-direction: column; align-items: flex-start; padding: 30px; gap: 30px; } /* Три колонки часов на узком экране становятся одной. */ .pzrd-card--hours { padding: 30px; gap: 20px; } .pzrd-hours { grid-template-columns: minmax(0, 1fr); gap: 20px; } .pzrd-hours__label { font-size: calc(16px * var(--pzrd-fs)); } .pzrd-socials { width: 100%; justify-content: space-between; gap: 20px; } .pzrd-socials img { width: 40px; height: 40px; } .pzrd-card--write { padding: 30px; } .pzrd-write__lead { gap: 30px; } /* В колонке flex-basis у абзаца задаёт высоту, а не ширину: с `1 1 0` он схлопывается и кнопка наезжает на текст — поэтому сбрасываем на auto. */ .pzrd-write__order { flex-direction: column; align-items: flex-start; gap: 20px; } .pzrd-write__order-text { flex: 0 0 auto; width: 100%; } .pzrd-btn--outline { width: 182px; } .pzrd-write__phone { font-size: calc(24px * var(--pzrd-fs)); } .pzrd-clink { font-size: calc(24px * var(--pzrd-fs)); } .pzrd-caddr { font-size: calc(24px * var(--pzrd-fs)); } } /* ------------------------------------------------------------------------ REVIEWS PAGE (шаблон Reviews-Redesign) Figma: tPozyka-Landing / «tpozyka.com - Review», node 989:17150. Подключается только шаблоном reviews-redesign.php. Карточка отзыва, плашка рейтинга и полосы пагинации — те же компоненты, что в блоке отзывов главной (.pzrd-review / .pzrd-reviews__rating), здесь только раскладка сеткой вместо слайдера. ------------------------------------------------------------------------ */ .pzrd-revpage { padding: 20px 0 100px; } /* Вертикальный ритм макета: 100px вокруг hero и формы, 50px внутри списка. */ .pzrd-revpage .pzrd-container > * + * { margin-top: 50px; } .pzrd-revpage .pzrd-phero { margin-top: 100px; } .pzrd-revpage .pzrd-phero + * { margin-top: 50px; } .pzrd-revpage .pzrd-revform { margin-top: 100px; } /* ---- плашка «Загальний рейтинг» ---------------------------------------- */ .pzrd-revrate { display: flex; justify-content: center; } /* На чёрной плашке макета «хвост» дробной звезды почти белый. */ .pzrd-revpage .pzrd-reviews__stars { --pzrd-star-empty: #f7f7f7; } /* ---- звёзды-иконки ------------------------------------------------------ В карточках макета пустая звезда не серая заливка, а контур, поэтому здесь не маска-полоска (.pzrd-stars), а пять отдельных иконок. Оценка в таблице целая, дробных состояний не бывает. */ .pzrd-rstars { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 3px; color: var(--pzrd-yellow-deep); } .pzrd-rstars i { display: block; width: 18px; height: 17.32px; background: currentColor; -webkit-mask: url("../static_images/redesign/icons/ic-star.svg") 0 0 / 100% 100% no-repeat; mask: url("../static_images/redesign/icons/ic-star.svg") 0 0 / 100% 100% no-repeat; } .pzrd-rstars i.is-off { -webkit-mask-image: url("../static_images/redesign/icons/ic-star-o.svg"); mask-image: url("../static_images/redesign/icons/ic-star-o.svg"); } /* ---- сетка отзывов ------------------------------------------------------ */ .pzrd-revgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* Карточка макета — 220px с текстом в три строки. На странице отзывов текст не режем (ради него сюда и приходят): высота становится минимальной, а карточки в ряду выравниваются гридом по самой высокой. */ .pzrd-review--page { height: auto; min-height: 220px; justify-content: flex-start; } /* Имя на странице отзывов — с городом, в одну строку не влезает: переносим, вместо многоточия слайдера главной. */ .pzrd-review--page .pzrd-review__name { white-space: normal; overflow: visible; text-overflow: clip; } .pzrd-review--page .pzrd-review__text { display: block; overflow: visible; -webkit-line-clamp: none; } .pzrd-review--page .pzrd-review__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; } .pzrd-review__acts { display: inline-flex; align-items: center; gap: 20px; } .pzrd-review__act { padding: 0; border: 0; background: none; font: inherit; font-size: calc(14px * var(--pzrd-fs)); line-height: 1.3; color: var(--pzrd-ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .pzrd-review__act:hover { color: var(--pzrd-ink); } /* ---- комментарии к отзыву ---------------------------------------------- В макете их нет, но данные и ответы поддержки живые — прячем под кнопку. */ .pzrd-review__comments { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--pzrd-stroke); } .pzrd-review__comments[hidden] { display: none; } .pzrd-rcomment--admin { padding-left: 15px; border-left: 3px solid var(--pzrd-yellow); } .pzrd-rcomment--nested { margin-left: 30px; } .pzrd-rcomment__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; } .pzrd-rcomment__name { font-size: calc(14px * var(--pzrd-fs)); font-weight: 700; color: var(--pzrd-ink); } .pzrd-rcomment__date { font-size: calc(12px * var(--pzrd-fs)); color: var(--pzrd-ink-3); } .pzrd-rcomment__text { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.3; color: var(--pzrd-text-2); } /* ---- пагинация --------------------------------------------------------- Номера страниц и кнопки «Попередня» / «Наступна». Текущая страница — жёлтая пилюля, остальные — белые с рамкой. Кнопки на краях остаются на месте и в неактивном состоянии, чтобы ряд не прыгал между страницами. */ .pzrd-revpager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .pzrd-revpager__pages { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; } .pzrd-revpager__pages li { display: flex; align-items: center; } .pzrd-revpager__page, .pzrd-revpager__nav { display: inline-flex; align-items: center; justify-content: center; min-width: calc(44px * var(--pzrd-fs)); height: calc(44px * var(--pzrd-fs)); border: 1px solid var(--pzrd-stroke); border-radius: 9999px; background: var(--pzrd-sheet); color: var(--pzrd-ink); font-size: calc(16px * var(--pzrd-fs)); font-weight: 590; line-height: 1; /* !important — против глобального `a { text-decoration: underline !important }` из additional.css:283: номера и стрелки читаются как кнопки, не как ссылки. */ text-decoration: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .pzrd-revpager__page { padding: 0 8px; } .pzrd-revpager__page.is-current { background: var(--pzrd-yellow); border-color: var(--pzrd-yellow); font-weight: 700; } .pzrd-revpager__nav { gap: 6px; padding: 0 20px; } .pzrd-revpager__nav svg { flex: none; width: 20px; height: 20px; } a.pzrd-revpager__page:hover, a.pzrd-revpager__nav:hover { border-color: var(--pzrd-ink); background: var(--pzrd-bg); color: var(--pzrd-ink); } /* Край списка: кнопка остаётся видимой, но нажимать нечего. */ .pzrd-revpager__nav.is-disabled { border-color: transparent; background: transparent; color: var(--pzrd-ink-3); } .pzrd-revpager__gap { justify-content: center; min-width: calc(24px * var(--pzrd-fs)); color: var(--pzrd-ink-3); font-size: calc(16px * var(--pzrd-fs)); } .pzrd-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } /* ---- форма «Залишити відгук» -------------------------------------------- */ .pzrd-revform { padding: 50px; } .pzrd-revform__grid { display: flex; gap: 50px; margin-top: 50px; } .pzrd-revform__col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; gap: 10px; } .pzrd-field { flex: 0 0 auto; } .pzrd-field input[type="text"], .pzrd-field input[type="email"], .pzrd-field textarea, .pzrd-field__row { width: 100%; box-sizing: border-box; height: calc(64px * var(--pzrd-fs)); padding: 0 20px; border: 1px solid var(--pzrd-stroke); border-radius: 16px; background: var(--pzrd-sheet); font-family: inherit; font-size: calc(14px * var(--pzrd-fs)); color: var(--pzrd-ink); outline: none; transition: border-color .2s ease; } .pzrd-field input::placeholder, .pzrd-field textarea::placeholder { color: var(--pzrd-text-2); opacity: 1; } .pzrd-field input:focus, .pzrd-field textarea:focus { border-color: var(--pzrd-ink); } .pzrd-field--area { flex: 1 1 auto; display: flex; } .pzrd-field--area textarea { height: 100%; min-height: 110px; padding: 20px; line-height: 1.3; resize: vertical; } .pzrd-field--rate .pzrd-field__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .pzrd-field__label { color: var(--pzrd-text-2); } .pzrd-field.is-error input, .pzrd-field.is-error textarea, .pzrd-field.is-error .pzrd-field__row { border-color: var(--pzrd-red); } .pzrd-field__error { margin-top: 6px; font-size: calc(13px * var(--pzrd-fs)); line-height: 1.3; color: var(--pzrd-red); } /* Оценка: настоящие radio спрятаны, кликается звезда-иконка. */ .pzrd-rstars--input { position: relative; gap: 6px; color: var(--pzrd-yellow); } .pzrd-rstars--input input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .pzrd-rstars--input label { display: block; margin: 0; cursor: pointer; } .pzrd-rstars--input i { width: 36px; height: 34.64px; } /* В макете невыбранная звезда формы — сплошная серая, а не контур. */ .pzrd-rstars--input i.is-off { background: var(--pzrd-stroke); -webkit-mask-image: url("../static_images/redesign/icons/ic-star.svg"); mask-image: url("../static_images/redesign/icons/ic-star.svg"); } .pzrd-rstars--input input[type="radio"]:focus-visible + label i { outline: 2px solid var(--pzrd-ink); outline-offset: 2px; } /* Правая колонка макета живёт на собственных отступах (10 / 30 / 30), поэтому общий gap колонки здесь снимаем, а поле отзыва тянется до низа — чтобы обе колонки заканчивались на одной линии. */ .pzrd-revform__col + .pzrd-revform__col { gap: 0; } .pzrd-revform .g-recaptcha { margin-top: 10px; } .pzrd-revform .pzrd-btn--cta { margin-top: 30px; height: calc(50px * var(--pzrd-fs)); padding: 12px 20px; font-size: calc(18px * var(--pzrd-fs)); color: #fff; } .pzrd-revform .pzrd-btn--cta:hover { color: #fff; } .pzrd-revform .pzrd-btn--cta.btn-blocked { background: var(--pzrd-ink-3); color: var(--pzrd-sheet); cursor: not-allowed; } .pzrd-revform__consent { margin-top: 30px; } /* В style.css у всех input стоит appearance:none и min-height:40px, из-за чего нативная галочка не рисуется вовсе — собираем чекбокс макета вручную. */ .pzrd-revform__consent input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; min-height: 0; padding: 0; border: 2px solid var(--pzrd-yellow); border-radius: 7px; background: transparent; cursor: pointer; } .pzrd-revform__consent input[type="checkbox"]:checked { background: #fffce6 url('data:image/svg+xml,') center / 14px 14px no-repeat; } /* ---- планшет ------------------------------------------------------------ */ @media (max-width: 1100px) { .pzrd-revgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pzrd-revform__grid { flex-direction: column; gap: 30px; } /* В колонке flex-basis у полей задаёт высоту, а не ширину. */ .pzrd-revform__col { flex: 0 0 auto; width: 100%; } .pzrd-field--area { flex: 0 0 auto; } } /* ---- мобильные ---------------------------------------------------------- */ @media (max-width: 991px) { .pzrd-revpage { padding-bottom: 50px; } .pzrd-revpage .pzrd-container > * + * { margin-top: 30px; } .pzrd-revpage .pzrd-phero, .pzrd-revpage .pzrd-phero + *, .pzrd-revpage .pzrd-revform { margin-top: 50px; } .pzrd-revgrid { grid-template-columns: minmax(0, 1fr); } .pzrd-review--page { min-height: 0; padding: 30px; border-radius: 20px; } .pzrd-revform { padding: 30px; } .pzrd-revform__grid { margin-top: 30px; } .pzrd-revform .pzrd-btn--cta { margin-top: 20px; } .pzrd-revform__consent { margin-top: 20px; } /* Узкий экран: у «Попередня»/«Наступна» остаётся только стрелка, подпись уходит в скрытый текст. Сами кнопки держим по краям одной строкой (nowrap), а переносится при нехватке места список номеров внутри. */ .pzrd-revpager { flex-wrap: nowrap; gap: 6px; } .pzrd-revpager__pages { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 4px; } .pzrd-revpager__page, .pzrd-revpager__nav { min-width: calc(40px * var(--pzrd-fs)); height: calc(40px * var(--pzrd-fs)); } .pzrd-revpager__nav { flex: none; padding: 0; } .pzrd-revpager__gap { min-width: calc(12px * var(--pzrd-fs)); } .pzrd-revpager__navtext { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } .pzrd-rstars--input i { width: 30px; height: 28.87px; } .pzrd-rcomment--nested { margin-left: 15px; } } /* ------------------------------------------------------------------------- FAQ (faq-redesign.php) Figma: tPozyka-Landing / «tpozyka.com - FAQ», node 973:49354. Сторінка зібрана зі спільних блоків редизайну (меню, hero внутрішніх сторінок, калькулятор пропозицій, «Напишіть нам», застереження НБУ), тож тут — лише вертикальний ритм, модифікатори акордеона (категорії та питання) і банер «Не знайшли відповідь…». ------------------------------------------------------------------------- */ /* Ритм макета: 100px між блоками — по 50px паддингу в сусідніх секцій; навколо hero ті самі 100px (20px згори дає .pzrd-menubar). */ .pzrd-faqpage__intro, .pzrd-faqpage__list, .pzrd-faqcta, .pzrd-faqpage__write { padding: 50px 0; } /* Вступний текст у макеті дрібніший за загальний .pzrd-seo__text. */ .pzrd-faqpage__intro .pzrd-seo__text { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.4; } /* ---- акордеон категорій ------------------------------------------------- Та сама плашка, що на головній, але крупніша: іконка-тека 40px і заголовок 24px. Селектори через `>`, бо всередині панелі лежить другий рівень акордеона (.pzrd-accordion--q) з тими самими класами. ------------------------------------------------------------------------ */ .pzrd-accordion--faq { --pzrd-acc-ic: url('../static_images/redesign/icons/ic-folder.svg'); } .pzrd-accordion--faq > .pzrd-acc > .pzrd-acc__head { min-height: 80px; padding: 20px; gap: 10px; } .pzrd-accordion--faq > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__ic { width: 40px; height: 40px; -webkit-mask-size: 40px 40px; mask-size: 40px 40px; } .pzrd-accordion--faq > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__title { font-size: calc(24px * var(--pzrd-fs)); font-weight: 600; line-height: 1.2; } .pzrd-accordion--faq > .pzrd-acc > .pzrd-acc__panel > .pzrd-acc__panel-inner { padding: 0 20px 20px; } /* ---- другий рівень: самі питання ---------------------------------------- У макеті розкритого стану немає, тому питання зроблені білими картками всередині сірої плашки категорії — тією ж мовою, що й решта редизайну. ------------------------------------------------------------------------ */ .pzrd-accordion--q > .pzrd-acc { background: var(--pzrd-sheet); border-radius: 15px; } .pzrd-accordion--q > .pzrd-acc > .pzrd-acc__head { min-height: 0; padding: 15px 20px; gap: 10px; } .pzrd-accordion--q > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__ic { display: none; } .pzrd-accordion--q > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__title { font-size: calc(18px * var(--pzrd-fs)); font-weight: 600; line-height: 1.35; } .pzrd-accordion--q > .pzrd-acc > .pzrd-acc__panel > .pzrd-acc__panel-inner { padding: 0 20px 15px; } /* ---- банер «Не знайшли відповідь…» -------------------------------------- Тёмная плашка с тем же паттерном стрелок, что и hero. 3D-знак вопроса выходит за верхний край и подрезается радиусом — так в макете. ------------------------------------------------------------------------ */ .pzrd-faqcta__box { position: relative; padding: 30px; border-radius: 30px; background-color: #2d3633; min-height: 160px; } /* Паттерн из стрелок ↗ — тот же тайл 100×100, что и в .pzrd-phero. */ .pzrd-faqcta__box::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url('data:image/svg+xml,'); background-repeat: repeat; background-size: 100px 100px; pointer-events: none; } .pzrd-faqcta__mark { position: absolute; left: 30px; top: 15px; width: 110px; height: auto; pointer-events: none; } .pzrd-faqcta__body { position: relative; display: flex; align-items: center; gap: 30px; /* 193px от края плашки до текста в макете, минус её собственный padding. */ padding-left: 160px; } .pzrd-faqcta__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 15px; } .pzrd-faqcta__title { font-size: calc(24px * var(--pzrd-fs)); font-weight: 700; line-height: 1.1; color: var(--pzrd-yellow); } .pzrd-faqcta__sub { font-size: calc(15px * var(--pzrd-fs)); line-height: 1.2; color: #fff; } .pzrd-faqcta__btn { flex: 0 0 auto; width: 373px; /* ширина кнопки в макете */ height: 50px; padding: 0 30px; border-radius: 15px; font-weight: 700; font-size: calc(18px * var(--pzrd-fs)); } /* ---- «Напишіть нам» на всю ширину --------------------------------------- На контактах картка двоколонкова (текст ліворуч, форма праворуч), у макеті FAQ — заголовок згори і форма на всю ширину: три поля в рядок, під ними тема й повідомлення по половині. Сітка 6 колонок дає обидва ряди: 386.67px (span 2) і 585px (span 3) при зазорі 10px. ------------------------------------------------------------------------ */ .pzrd-card--write-wide { flex-direction: column; gap: 50px; } .pzrd-card--write-wide .pzrd-write__lead, .pzrd-card--write-wide .pzrd-write__form { flex: 0 0 auto; width: 100%; } .pzrd-card--write-wide .pzrd-card__head { flex-direction: row; align-items: center; } .pzrd-card--write-wide .pzrd-write__form .wpcf7-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } /* Скрытые поля CF7 не должны занимать строку сетки. */ .pzrd-card--write-wide .pzrd-write__form .hidden-fields-container { display: none; } /* Всё, что не поле (ответ формы, случайные обёртки), — на всю ширину. */ .pzrd-card--write-wide .pzrd-write__form .wpcf7-form > *, .pzrd-card--write-wide .pzrd-write__form .form-group > * { grid-column: 1 / -1; } .pzrd-card--write-wide .pzrd-write__form .form-group { display: contents; } .pzrd-card--write-wide .pzrd-write__form .form-group2 { margin-top: 0; } .pzrd-card--write-wide .pzrd-write__form .name-block, .pzrd-card--write-wide .pzrd-write__form .email-block, .pzrd-card--write-wide .pzrd-write__form .telephone-block { grid-column: span 2; } .pzrd-card--write-wide .pzrd-write__form .select-block, .pzrd-card--write-wide .pzrd-write__form .message-block { grid-column: span 3; } .pzrd-card--write-wide .pzrd-write__form .captcha-block { justify-self: center; } /* 20px до кнопки в макете: 10px зазора сетки + 10px здесь. */ .pzrd-card--write-wide .pzrd-write__form .submit-block { margin-top: 10px; } /* CF7 оборачивает поля в

— в сетке его отступы сбивают ряды. */ .pzrd-card--write-wide .pzrd-write__form .form-block > p { margin: 0; } /* ---- планшет / мобильные ------------------------------------------------ */ @media (max-width: 991px) { /* Ритм макета на мобильных — 50px между блоками. */ .pzrd-faqpage__intro, .pzrd-faqpage__list, .pzrd-faqcta, .pzrd-faqpage__write { padding: 25px 0; } /* Плашки категорий в мобильном фрейме макета такие же, как на десктопе. */ .pzrd-accordion--faq > .pzrd-acc > .pzrd-acc__head { padding: 20px; gap: 10px; } .pzrd-accordion--q > .pzrd-acc > .pzrd-acc__head { padding: 15px; } .pzrd-accordion--q > .pzrd-acc > .pzrd-acc__panel > .pzrd-acc__panel-inner { padding: 0 15px 15px; } /* Банер: знак вопроса уходит в левый край, кнопка — на всю ширину. */ .pzrd-faqcta__mark { left: 0; top: 15px; width: 127px; } .pzrd-faqcta__body { flex-direction: column; align-items: stretch; gap: 30px; padding-left: 0; } .pzrd-faqcta__text { padding-left: 90px; } .pzrd-faqcta__title { font-size: calc(20px * var(--pzrd-fs)); line-height: 1.2; } .pzrd-faqcta__sub { line-height: 1.5; } .pzrd-faqcta__btn { width: 100%; max-width: calc(100% - 90px); margin-left: auto; } /* Форма: поля в одну колонку, как на контактах. */ .pzrd-card--write-wide { padding: 30px; gap: 30px; } .pzrd-card--write-wide .pzrd-write__form .wpcf7-form { grid-template-columns: minmax(0, 1fr); } .pzrd-card--write-wide .pzrd-write__form .name-block, .pzrd-card--write-wide .pzrd-write__form .email-block, .pzrd-card--write-wide .pzrd-write__form .telephone-block, .pzrd-card--write-wide .pzrd-write__form .select-block, .pzrd-card--write-wide .pzrd-write__form .message-block { grid-column: 1 / -1; } } /* ------------------------------------------------------------------------ СТОРІНКА ДОКУМЕНТІВ / АРХІВУ (archive-redesign.php) Figma: node 597-6973 «Публічна інформація про компанію». Три рівні: розділ (сіра плашка, іконка-картотека) → папка (без плашки, іконка-тека) → рядок документа з посиланням «Переглянути» праворуч. Перші два рівні — той самий accordion.php, що на FAQ, тому селектори йдуть через `>`: усередині панелі лежить вкладений акордеон із тими ж класами. ------------------------------------------------------------------------ */ .pzrd-docspage__intro { padding: 40px 0 0; } .pzrd-docspage__intro .pzrd-seo__text { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.4; } .pzrd-docspage__list { padding: 40px 0 60px; } /* Публічна інформація: редакторські юридичні блоки й таблиці з Figma. */ .pzrd-public-info__content { padding: 40px 0 0; } .pzrd-public-info__block { font-size: calc(14px * var(--pzrd-fs)); line-height: 1.4; color: var(--pzrd-ink); } .pzrd-public-info__block + .pzrd-public-info__block { margin-top: 32px; } .pzrd-public-info__block table { width: 100% !important; border-collapse: collapse; margin: 0 0 12px; } .pzrd-public-info__block th, .pzrd-public-info__block td { padding: 10px; border: 1px solid var(--pzrd-ink-3); vertical-align: top; } .pzrd-public-info__block th, .pzrd-public-info__block tr:first-child td { font-weight: 600; text-align: center; } /* ---- рівень 1: розділи -------------------------------------------------- */ .pzrd-accordion--docs { --pzrd-acc-ic: url('../static_images/redesign/icons/ic-cabinet.svg'); } .pzrd-accordion--docs > .pzrd-acc > .pzrd-acc__head { min-height: 80px; padding: 20px; gap: 10px; } .pzrd-accordion--docs > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__ic { width: 40px; height: 40px; -webkit-mask-size: 40px 40px; mask-size: 40px 40px; } .pzrd-accordion--docs > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__title { font-size: calc(24px * var(--pzrd-fs)); font-weight: 600; line-height: 1.2; } .pzrd-accordion--docs > .pzrd-acc > .pzrd-acc__panel > .pzrd-acc__panel-inner { padding: 0 20px 20px; } /* ---- рівень 2: папки ---------------------------------------------------- У макеті папка — не картка, а просто рядок з іконкою-текою: сірого фону в неї немає, вона вже всередині плашки розділу. */ .pzrd-accordion--docs-sub { --pzrd-acc-ic: url('../static_images/redesign/icons/ic-folder.svg'); gap: 0; } .pzrd-accordion--docs-sub > .pzrd-acc { background: none; border-radius: 0; } .pzrd-accordion--docs-sub > .pzrd-acc > .pzrd-acc__head { min-height: 0; padding: 10px 0 10px 50px; gap: 10px; } .pzrd-accordion--docs-sub > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__ic { width: 30px; height: 30px; -webkit-mask-size: 30px 30px; mask-size: 30px 30px; } .pzrd-accordion--docs-sub > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__title { font-size: calc(18px * var(--pzrd-fs)); font-weight: 600; line-height: 1.35; } .pzrd-accordion--docs-sub > .pzrd-acc > .pzrd-acc__panel > .pzrd-acc__panel-inner { padding: 0 0 10px; } /* ---- рівень 3: рядки документів ----------------------------------------- */ .pzrd-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .pzrd-docs__item { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0 5px 50px; min-height: 30px; text-decoration-color: #000 !important; } /* Документ усередині папки зсунутий ще на один рівень — як у макеті. */ .pzrd-accordion--docs-sub .pzrd-docs__item { padding-left: 90px; } .pzrd-docs__ic { flex: 0 0 auto; width: 30px; height: 30px; background: var(--pzrd-yellow-deep); -webkit-mask: url('../static_images/redesign/icons/ic-document.svg') center / 22px 24.4px no-repeat; mask: url('../static_images/redesign/icons/ic-document.svg') center / 22px 24.4px no-repeat; } .pzrd-docs__name { flex: 1 1 auto; min-width: 0; padding-top: 5px; font-size: calc(16px * var(--pzrd-fs)); line-height: 1.4; color: var(--pzrd-ink); overflow-wrap: anywhere; @media (max-width: 992px) { font-size: calc(14px * var(--pzrd-fs)); } } .pzrd-docs__link { flex: 0 0 auto; padding-top: 5px; font-size: calc(14px * var(--pzrd-fs)); line-height: 1.4; color: var(--pzrd-yellow-deep); text-decoration: underline; font-weight: 600; } .pzrd-docs__link:hover, .pzrd-docs__item:hover .pzrd-docs__link { color: var(--pzrd-ink); } /* Рядок «Архів» — та сама сітка, але сірий, як у макеті. */ .pzrd-docs__item--arch > .pzrd-docs__ic { background: var(--pzrd-ink-3); } /* Калькулятор усередині папки «Приклади розрахунків…»: у нього власна секція з контейнером на 1280px, а тут він уже всередині плашки — знімаємо зовнішні відступи, щоб картки не вилазили за її межі. */ .pzrd-acc__panel-inner > .pzrd-offers { padding: 10px 0 0; } .pzrd-acc__panel-inner > .pzrd-offers > .pzrd-container { width: auto; max-width: none; padding: 0; } @media (max-width: 991px) { .pzrd-docspage__intro { padding-top: 30px; } .pzrd-docspage__list { padding: 30px 0 40px; } .pzrd-public-info__content { padding-top: 30px; } .pzrd-public-info__block { overflow-x: auto; } .pzrd-accordion--docs > .pzrd-acc > .pzrd-acc__head { min-height: 0; padding: 16px 18px; } .pzrd-accordion--docs > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__ic { width: 30px; height: 30px; -webkit-mask-size: 30px 30px; mask-size: 30px 30px; } .pzrd-accordion--docs > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__title { font-size: calc(18px * var(--pzrd-fs)); } .pzrd-accordion--docs > .pzrd-acc > .pzrd-acc__panel > .pzrd-acc__panel-inner { padding: 0 18px 18px; } .pzrd-accordion--docs-sub > .pzrd-acc > .pzrd-acc__head { padding: 10px 0; } .pzrd-accordion--docs-sub > .pzrd-acc > .pzrd-acc__head > .pzrd-acc__title { font-size: calc(16px * var(--pzrd-fs)); } /* На вузьких екранах вкладені відступи з'їдають рядок — прибираємо їх, а посилання переносимо під назву (іконка й назва лишаються в рядку). */ .pzrd-docs__item, .pzrd-accordion--docs-sub .pzrd-docs__item { padding-left: 0; flex-wrap: wrap; } .pzrd-docs__ic { order: 1; } .pzrd-docs__name { order: 2; flex: 1 1 0; padding-top: 3px; } .pzrd-docs__link { order: 3; flex: 1 1 100%; padding: 0 0 5px 40px; } } /* ---- текстовий блок розділу «Контакти» ---------------------------------- Вміст приходить із полів підвала (ACF footer_uk / footer_ru), тобто вже з власними

і — тут лише кегль і відступи макета. */ .pzrd-docs__info { padding: 5px 0 5px 50px; font-size: calc(14px * var(--pzrd-fs)); line-height: 1.4; color: var(--pzrd-ink); } .pzrd-docs__info p { margin: 0 0 10px; } .pzrd-docs__info p:last-child { margin-bottom: 0; } .pzrd-docs__info strong, .pzrd-docs__info b { font-weight: 700; } /* У макеті цей блок суцільно чорний: телефони, пошта і заголовок «Публічна інформація» — теж посилання, але без акцентного кольору й підкреслення. `!important` — щоб перебити глобальне `a { text-decoration: underline !important }` з additional.css:283, так само як це робить підвал. */ .pzrd-docs__info a { color: inherit; text-decoration: none !important; } .pzrd-docs__info a:hover { text-decoration: underline !important; } .pzrd-docs__info small { font-size: calc(12px * var(--pzrd-fs)); color: var(--pzrd-text-2); } .pzrd-docs__info--muted { color: var(--pzrd-text-2); } @media (max-width: 991px) { .pzrd-docs__info { padding-left: 0; } }