/* ========================================================================= Design tokens — ported from Claude Design bundle (borgu.zip). Colors: UA blue/yellow, deep-ink navy text. Fonts: Manrope (body), Unbounded (display/headings), JetBrains Mono (utility labels). Google Fonts inlined у у layout.twig — НЕ повертати @import тут, бо він робить render-blocking waterfall (PageSpeed -2.4s). ========================================================================= */ :root { --ua-blue: #005bbb; --ua-yellow: #ffd500; --ink: #0f2033; --ink-2: #14466b; --dark: #233b4d; --muted: #5a6b7a; --line: #e4e9ef; --line-strong: #cbd5df; --bg: #ffffff; --bg-2: #f6f8fb; --bg-3: #edf2f7; --nav-dark: #17384f; --yellow-soft: #fff4b8; --red: #d8352a; --green: #178a4a; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Unbounded", "Manrope", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-card: 0 2px 24px rgba(15, 32, 51, 0.06); } * { box-sizing: border-box; } /* Ensure the HTML `hidden` attribute always wins over custom display rules (.search-card__form uses display:flex which otherwise shadows the UA default of display:none). */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--ua-blue); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--ua-yellow); color: var(--ink); } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .mono { font-family: var(--font-mono); } .caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; } .muted { color: var(--muted); } .lead { font-size: 16px; line-height: 1.55; } .ipt { width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; } /* Yellow left-border accent — used on every major section title */ .accent-title { display: flex; align-items: flex-start; gap: 14px; margin: 0; } .accent-title::before { content: ""; flex-shrink: 0; width: 4px; align-self: stretch; background: var(--ua-yellow); border-radius: 4px; } .accent-title h1, .accent-title h2, .accent-title > .inner > h1, .accent-title > .inner > h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } .accent-title .lead, .accent-title > .inner > p { margin: 8px 0 0; color: var(--muted); max-width: 720px; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.015em; color: var(--ink); } h1 { font-size: 32px; font-weight: 700; margin: 0 0 12px; } h2 { font-size: 24px; font-weight: 700; margin: 32px 0 16px; } h3 { font-size: 18px; font-weight: 700; margin: 20px 0 10px; } /* ========================================================================= Top strip: dark bar with service notice and online counter. ========================================================================= */ .topstrip { background: #0f2033; color: #aeb9c5; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; } .topstrip .wrap { display: flex; align-items: center; justify-content: space-between; height: 30px; text-transform: uppercase; } .topstrip__right { display: flex; gap: 18px; } .topstrip__online { color: #6ed68a; } /* ========================================================================= Header: logo + UA flag, nav, search, primary CTA. Yellow/blue accent stripe below. ========================================================================= */ .site-header { background: #fff; border-bottom: 1px solid var(--line); } .site-header__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 78px; gap: 36px; } .flagmark { width: 28px; height: 34px; display: flex; flex-direction: column; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); flex-shrink: 0; } .flagmark__blue { flex: 1; background: #005bbb; } .flagmark__yellow { flex: 1; background: #ffd500; } .site-logo { display: flex; align-items: center; gap: 12px; color: var(--ink); } .site-logo:hover { text-decoration: none; } .site-logo__text { line-height: 1; display: flex; align-items: baseline; gap: 10px; } .site-logo__name { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--ink); } .site-logo__dot { color: var(--ua-blue); } .site-logo__sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.12em; padding-bottom: 2px; text-transform: uppercase; } .site-nav { display: flex; align-items: center; gap: 4px; justify-content: center; } .site-nav a { position: relative; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--dark); } .site-nav a.is-active { color: var(--ink); } .site-nav a:hover { text-decoration: none; color: var(--ink); } .site-nav a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 3px; background: var(--ua-yellow); } .site-search { position: relative; width: 220px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 36px 9px 14px; background: var(--bg-2); } .site-search input { font-size: 13px; } .site-search__icon { position: absolute; right: 12px; top: 10px; color: var(--muted); } .site-cta { padding: 9px 16px; font-family: var(--font-display); font-weight: 700; font-size: 13px; border-radius: 8px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); letter-spacing: -0.005em; transition: background 0.15s ease; } .site-cta:hover { background: var(--ua-yellow); text-decoration: none; color: var(--ink); } .site-header__actions { display: flex; align-items: center; gap: 10px; } .site-accent { display: flex; height: 3px; } .site-accent__blue { flex: 1; background: #005bbb; } .site-accent__yellow { flex: 1; background: #ffd500; } /* ========================================================================= Breadcrumbs (dark-blue bar on catalog pages). ========================================================================= */ .breadcrumbs { background: linear-gradient(90deg, #0a4a9e 0%, #005bbb 100%); color: #cfe0f7; font-size: 13px; } .breadcrumbs .wrap { padding: 12px 24px; display: flex; align-items: center; gap: 10px; } .breadcrumbs__item { display: inline-flex; align-items: center; } .breadcrumbs__item a, .breadcrumbs__item span { color: #fff; font-weight: 500; } .breadcrumbs__item a:hover { color: var(--ua-yellow); text-decoration: none; } .breadcrumbs__sep { opacity: 0.5; } /* ========================================================================= Main area, cards. ========================================================================= */ .site-main { flex: 1 0 auto; padding: 32px 0 48px; background: linear-gradient(180deg, #f3f7fc 0%, #ffffff 200px); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--line); padding: 4px 8px; border-radius: 3px; background: var(--bg); text-transform: uppercase; font-weight: 700; } /* ========================================================================= Buttons. ========================================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: transform 0.05s ease, box-shadow 0.15s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--ua-yellow); color: var(--ink); box-shadow: 0 2px 0 rgba(217, 179, 0, 0.8); } .btn--primary:hover { background: #ffdd33; text-decoration: none; color: var(--ink); } .btn--ink { background: var(--ink); color: #fff; } .btn--ink:hover { background: #1a3551; text-decoration: none; color: #fff; } .btn--ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); } .btn--ghost:hover { background: var(--ua-yellow); text-decoration: none; color: var(--ink); } .btn--block { width: 100%; justify-content: center; } .btn--sm { padding: 9px 14px; font-size: 13px; } .btn--danger { background: var(--red); color: #fff; border: 0; } .btn--danger:hover { background: #b3281f; color: #fff; text-decoration: none; } /* ========================================================================= Footer. ========================================================================= */ .site-footer { background: var(--nav-dark); color: #cfd9e3; margin-top: 48px; flex-shrink: 0; } .site-footer a { color: #cfd9e3; } .site-footer a:hover { color: var(--ua-yellow); text-decoration: none; } .site-footer__grid { padding: 40px 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .site-footer__head { color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 10px; } .site-footer__links a { display: block; font-size: 13px; padding: 4px 0; } .site-footer__links .is-exec { font-weight: 800; color: var(--ua-yellow); } .site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); } .site-footer__bottom .wrap { padding: 14px 24px; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.05em; display: flex; justify-content: space-between; opacity: 0.6; flex-wrap: wrap; gap: 12px; text-transform: uppercase; } .site-footer__bottom-right { display: flex; gap: 18px; } /* ---- Mobile burger button (default state — hidden; media-query shows it) ---- */ .site-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; flex-direction: column; gap: 4px; margin-left: auto; } .site-burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } body.is-mob-open .site-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.is-mob-open .site-burger span:nth-child(2) { opacity: 0; } body.is-mob-open .site-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---- Mobile breakpoint: header collapses to logo + burger ---- */ @media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } /* На мобільному 3 grid-children (logo + actions + burger) — нав ховаємо. Раніше було grid-template-columns: auto 1fr auto, але site-header__actions (у ньому search+cta з display:none) лишався у DOM і займав 2-й auto-слот, через що burger випадав на нову рядок поза 78px header-а. Тепер site-header__actions теж ховаємо у мобільному, бо search і cta всередині вже зайві. */ .site-header__row { grid-template-columns: auto 1fr auto; height: auto; padding: 14px 0; align-items: center; } .site-nav, .site-search, .site-cta, .site-header__actions { display: none; } .topstrip__right { display: none; } .site-burger { display: flex; } } /* ---- Mobile overlay menu ---- */ .site-mob { position: fixed; inset: 0; z-index: 200; background: rgba(15, 32, 51, 0.6); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; overflow: auto; } body.is-mob-open .site-mob { opacity: 1; visibility: visible; } body.is-mob-open { overflow: hidden; } .site-mob__panel { background: #fff; width: min(360px, 92vw); height: 100vh; max-height: 100vh; display: flex; flex-direction: column; margin-left: auto; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3); transform: translateX(100%); transition: transform 0.25s ease-out; overflow-y: auto; } body.is-mob-open .site-mob__panel { transform: translateX(0); } .site-mob__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); } .site-mob__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 18px; color: var(--ink); text-decoration: none; } .site-mob__close { background: transparent; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 6px; } .site-mob__close:hover { color: var(--ink); } .site-mob__search { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; background: var(--bg-2); } .site-mob__search input { flex: 1; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-family: inherit; font-size: 14px; outline: none; background: #fff; } .site-mob__search input:focus { border-color: var(--ua-blue); } .site-mob__nav { display: flex; flex-direction: column; padding: 10px 0; flex: 1; } .site-mob__nav a { padding: 14px 18px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); } .site-mob__nav a:hover { background: var(--bg-2); text-decoration: none; } .site-mob__nav a.is-active { background: var(--yellow-soft); font-weight: 700; } .site-mob__nav-cta { background: var(--ua-yellow); color: var(--ink) !important; font-weight: 800 !important; font-family: var(--font-display); text-align: center; margin: 8px 14px; border-radius: 10px; border-bottom: 0 !important; } .site-mob__foot { padding: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; color: var(--muted); } .site-mob__foot a { color: var(--ink); text-decoration: none; } .site-mob__foot a:hover { color: var(--ua-blue); } /* ========================================================================= Home page. ========================================================================= */ .home-hero { padding-top: 28px; } .home-hero__top { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 24px; } .home-hero__top .accent-title h1 { font-size: 32px; } .home-hero__side-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #d9e4f4; border-radius: 10px; padding: 14px 20px; font-size: 14px; color: var(--ink); font-weight: 500; transition: border-color 0.15s; } .home-hero__side-card:hover { border-color: var(--ua-blue); text-decoration: none; } .home-hero__side-card-arrow { color: var(--ua-blue); font-weight: 700; } /* Search card with tabs */ .search-card { padding: 8px; margin-bottom: 36px; } .search-card__tabs { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid #eaf0f7; } .search-card__tab { position: relative; background: transparent; border: 0; padding: 16px 12px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--dark); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; } .search-card__tab.is-active { color: var(--ua-blue); } .search-card__tab.is-active::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -1px; height: 3px; background: var(--ua-blue); border-radius: 3px; } .search-card__form { padding: 22px 22px 20px; display: flex; gap: 12px; align-items: stretch; } .search-card__input { flex: 1 1 auto; position: relative; border: 1.5px solid #e4ebf4; border-radius: 10px; padding: 14px 16px 14px 48px; background: #fff; display: flex; align-items: center; transition: border-color 0.15s; } .search-card__input:focus-within { border-color: var(--ua-blue); } .search-card__input > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); } .search-card__input input { font-size: 15px; } .search-card__form .btn { flex-shrink: 0; } @media (max-width: 800px) { .home-hero__top { grid-template-columns: 1fr; } .home-hero__side-card { order: 2; } .search-card__form { flex-direction: column; } .search-card__form .btn { justify-content: center; } } /* Home split: regions list + docs sidebar */ .home-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } @media (max-width: 900px) { .home-split { grid-template-columns: 1fr; } } .home-section-title h2 { font-size: 26px; } .region-columns { list-style: none; padding: 0; margin: 16px 0 0; columns: 2; column-gap: 40px; } .region-columns li { break-inside: avoid; padding: 8px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .region-columns a { color: var(--ua-blue); font-size: 15px; font-weight: 500; } .region-columns__count { font-family: var(--font-mono); font-size: 12px; } @media (max-width: 600px) { .region-columns { columns: 1; } } /* Docs sidebar card */ .doc-card { padding: 0; overflow: hidden; margin-bottom: 20px; } .doc-card__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 16px; } .doc-card__head a { color: var(--ua-blue); font-size: 20px; line-height: 1; } .doc-card__item { display: flex; gap: 12px; padding: 14px 20px; color: var(--ink); border-bottom: 1px solid var(--line); align-items: flex-start; transition: background 0.15s; } .doc-card__item:last-child { border-bottom: 0; } .doc-card__item:hover { background: var(--bg-2); text-decoration: none; } .doc-card__tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; margin-bottom: 3px; } .doc-card__title { font-size: 14px; line-height: 1.4; font-weight: 500; } /* Help CTA card */ .help-card { padding: 22px 24px; } .help-card__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 10px; } .help-card p { margin: 0 0 16px; font-size: 14px; } /* ========================================================================= Catalog pages: hero + two-column (main + sidebar). ========================================================================= */ .catalog-hero { padding: 28px 24px 16px; } .catalog-hero .accent-title h1 { font-size: 34px; } .catalog-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; padding-bottom: 40px; } @media (max-width: 1000px) { .catalog-split { grid-template-columns: 1fr; } } .side-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; } @media (max-width: 1000px) { .side-rail { position: static; } } .region-columns--counted li { border-bottom: 1px dashed var(--line); } /* Quick-links card for sidebars */ .quick-card { padding: 20px; } .quick-card__title { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 12px; } .quick-card__item { display: flex; justify-content: space-between; padding: 11px 14px; background: var(--bg-2); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; transition: background 0.15s; } .quick-card__item:last-child { margin-bottom: 0; } .quick-card__item:hover { background: var(--bg-3); text-decoration: none; } .quick-card__arrow { color: var(--ua-blue); } /* PRO claim card — тільки на сторінках приватних виконавців (free). На ДВС не показуємо — вони посадовці, не можуть "рекламуватись". */ .pro-claim-card { padding: 22px 24px; background: linear-gradient(180deg, #fff4b8 0%, #ffe166 100%); border: 1px solid #e6c700; } .pro-claim-card__badge { font-family: var(--font-mono); font-size: 10px; color: #5a4800; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 10px; } .pro-claim-card__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #1a1410; margin-bottom: 6px; } .pro-claim-card__lead { font-size: 13px; color: #3a2f00; line-height: 1.5; margin: 0 0 14px; } .pro-claim-card__link { display: block; text-align: center; font-size: 12px; color: #5a4800; margin-top: 8px; font-weight: 600; } .pro-claim-card__link:hover { color: #1a1410; text-decoration: underline; } /* ERB quick card */ .erb-card { padding: 22px 24px; } .erb-card__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 8px; } .erb-card p { margin: 0 0 14px; font-size: 13px; } /* Department list on /dvs/{region}/ */ .dept-list { list-style: none; margin: 0; padding: 0; overflow: hidden; } .dept-list__item { border-bottom: 1px solid var(--line); } .dept-list__item:last-child { border-bottom: 0; } .dept-list__link { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; color: var(--ink); transition: background 0.15s; } .dept-list__link:hover { background: var(--bg-2); text-decoration: none; } .dept-list__name { color: var(--ua-blue); font-weight: 700; font-size: 15px; } .dept-list__sub { font-size: 13px; margin-top: 3px; } .dept-list__meta { display: flex; align-items: center; gap: 16px; font-size: 13px; } .dept-list__arrow { color: var(--muted); font-family: var(--font-mono); } /* Executor grid card (used on /pv/{region}/ and inside department page) */ .exec-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } .exec-card { overflow: hidden; } .exec-card__body { display: flex; gap: 14px; padding: 18px 20px; color: var(--ink); } .exec-card__body:hover { text-decoration: none; background: var(--bg-2); } .exec-card__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--bg-3); flex-shrink: 0; } .exec-card__photo--empty { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--muted); background: var(--bg-3); } .exec-card__info h3 { font-size: 15px; margin: 0 0 4px; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; line-height: 1.3; } .exec-card__info p { margin: 0 0 4px; font-size: 13px; } .exec-card__status { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } .exec-card__status--active { color: var(--green); } .exec-card__status--suspended { color: #b45309; } .exec-card__status--inactive { color: var(--red); } .chip--asvp { background: #dcfce7; color: #14532d; border-color: #b9e6c9; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 2px 7px; } /* Info card with dl */ .info-card { padding: 0; } .info-card__head { padding: 18px 22px 14px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: space-between; } .info-card__facts { display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 10px 16px; margin: 0; padding: 18px 22px; } .info-card__facts dt { color: var(--muted); font-size: 13px; } .info-card__facts dd { margin: 0; font-size: 14px; word-break: break-word; overflow-wrap: anywhere; min-width: 0; } .info-card__facts dd a { display: inline-block; margin-right: 6px; } .info-card__bottom { padding: 0 22px 20px; display: grid; gap: 16px; } .info-card__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; } .info-card__bottom p { margin: 0; font-size: 14px; line-height: 1.55; } /* Schedule card */ .schedule-card { padding: 18px 22px; } .schedule-card__title { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin-bottom: 10px; } /* PV hero: photo + intro */ .pv-hero { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 28px 24px 16px; align-items: center; } @media (max-width: 700px) { .pv-hero { grid-template-columns: 120px 1fr; } } .pv-hero__photo { width: 180px; height: 180px; border-radius: 12px; object-fit: cover; background: var(--bg-3); box-shadow: var(--shadow-card); } @media (max-width: 700px) { .pv-hero__photo { width: 120px; height: 120px; } } .pv-hero__photo--empty { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 64px; color: var(--muted); background: var(--bg-3); } .pv-hero__body h1 { font-size: 30px; margin: 6px 0 10px; } /* Content block (free HTML from bio) */ .content-block { padding: 20px 24px; line-height: 1.7; } .content-block h2 { font-size: 20px; margin: 20px 0 10px; } .content-block h3 { font-size: 16px; margin: 16px 0 8px; } .content-block p { margin: 0 0 12px; } /* Reestr cards grid */ .reestr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 700px) { .reestr-cards { grid-template-columns: 1fr; } } .reestr-card { display: block; padding: 28px 32px; color: var(--ink); transition: border-color 0.15s; } .reestr-card:hover { border-color: var(--ua-blue); text-decoration: none; } .reestr-card__label { margin-bottom: 12px; } .reestr-card h2 { font-size: 22px; margin: 0 0 6px; } .reestr-card__count { color: var(--ua-blue); font-size: 18px; font-weight: 700; margin: 0 0 12px; font-family: var(--font-display); } .reestr-card__cta { display: inline-block; margin-top: 16px; color: var(--ua-blue); font-weight: 700; font-family: var(--font-display); } /* Old styles we keep rendering for backwards-compat templates. (pagination from existing partial, reviews) */ .pagination { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0 0; } .pagination__item { display: inline-block; min-width: 36px; padding: 8px 12px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; } .pagination__item:hover { border-color: var(--ua-blue); text-decoration: none; } .pagination__item--current { background: var(--ua-blue); color: #fff; border-color: var(--ua-blue); } .pagination__item--ellipsis { border: 0; padding: 8px 4px; color: var(--muted); } /* Reviews */ .reviews { margin: 32px 0 0; padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); } .reviews h2 { margin-top: 0; } .reviews__sent { background: #dcfce7; color: #14532d; padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; } .review-list { list-style: none; padding: 0; margin: 0 0 16px; } .review { padding: 14px 0; border-bottom: 1px solid var(--line); } .review__head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .review__rating { color: #eab308; letter-spacing: 1px; } .review__body { margin: 8px 0 0; line-height: 1.6; font-size: 14px; } .review-form-toggle summary { cursor: pointer; color: var(--ua-blue); font-weight: 600; padding: 10px 0; } .review-form { margin-top: 10px; padding: 18px 22px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; } .review-form__stars { display: flex; gap: 10px; margin-top: 6px; } .review-form__star { cursor: pointer; user-select: none; font-size: 14px; } /* Lead form (consultation + landings) */ .lead-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 28px; } .lead-block__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 16px; } .lead-block__sent { background: #dcfce7; color: #14532d; padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; } .lead-form__row { margin-bottom: 12px; } .lead-form__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 500px) { .lead-form__row--two { grid-template-columns: 1fr; } } .lead-form__label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; } .lead-form__input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 15px; color: var(--ink); font-family: inherit; margin-top: 4px; background: #fff; box-sizing: border-box; } .lead-form__input:focus { outline: none; border-color: var(--ua-blue); } .lead-form__honeypot { position: absolute; left: -10000px; opacity: 0; pointer-events: none; } .lead-form__btn { background: var(--ua-yellow); color: var(--ink); border: 0; border-radius: 10px; padding: 13px 24px; font-family: var(--font-display); font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 4px; box-shadow: 0 2px 0 rgba(217, 179, 0, 0.8); } .lead-form__btn:hover { background: #ffdd33; } .lead-form__notice { font-size: 12px; color: var(--muted); margin: 12px 0 0; } .lead-form__error { color: var(--red); font-size: 12px; margin-top: 4px; } /* SEO blocks */ .seo-top, .seo-bottom { margin: 20px 0; line-height: 1.6; } .seo-bottom { padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; } /* Bullet lists inside info-cards/landings */ .bullet-list { padding-left: 22px; line-height: 1.9; font-size: 14px; } .bullet-list li { margin-bottom: 4px; } /* Landing page intro */ .landing-intro { font-size: 16px; line-height: 1.65; color: var(--dark); } .landing-intro .lead { font-size: 17px; } /* Article list grid */ .article-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .article-card { overflow: hidden; } .article-card__body { display: flex; flex-direction: column; height: 100%; color: var(--ink); } .article-card__body:hover { text-decoration: none; } .article-card__cover { width: 100%; height: 180px; object-fit: cover; display: block; } .article-card__info { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; } .article-card__info h3 { margin: 0; font-size: 16px; font-family: var(--font-display); font-weight: 700; line-height: 1.35; } .article-card__info p { margin: 0; font-size: 13px; line-height: 1.5; } .article-card__info time { font-family: var(--font-mono); font-size: 11px; margin-top: auto; } /* Single article body image */ .article-page__cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 24px; } /* Aliment calculator */ .aliment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 500px) { .aliment-form__row { grid-template-columns: 1fr; } } .aliment-form__children { border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 0 0 16px; background: var(--bg-2); } .aliment-form__children legend { padding: 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; } .aliment-form__child { display: inline-block; margin: 6px 14px 6px 0; min-width: 200px; vertical-align: top; } .aliment-result__total { font-size: 17px; } .aliment-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; } .aliment-table th, .aliment-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; } .aliment-table th { background: var(--bg-2); font-family: var(--font-display); font-size: 12px; font-weight: 700; } /* Search results list */ .search-results { list-style: none; margin: 0; padding: 0; overflow: hidden; } .search-result { border-bottom: 1px solid var(--line); } .search-result:last-child { border-bottom: 0; } .search-result__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 22px; color: var(--ink); transition: background 0.15s; } .search-result__body:hover { background: var(--bg-2); text-decoration: none; } .search-result__type { align-self: flex-start; margin-bottom: 2px; } .search-result__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ua-blue); } .search-result__sub { font-size: 13px; } /* Error pages */ .error-page { padding: 60px 24px; text-align: center; } .error-page__code { font-family: var(--font-display); font-size: 120px; font-weight: 800; line-height: 1; color: var(--ua-yellow); letter-spacing: -0.04em; margin-bottom: 8px; } .error-page h1 { font-size: 26px; margin: 0 0 12px; } .error-page__actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; } /* Week schedule table (shared, minor tweaks under new tokens) */ .schedule { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; } .schedule th, .schedule td { padding: 8px 10px; text-align: left; border-bottom: 1px dashed var(--line); } .schedule th { min-width: 110px; color: var(--ink); font-weight: 700; } .schedule__break { display: block; font-size: 12px; color: var(--muted); } .schedule__row--today th, .schedule__row--today td { background: rgba(116, 217, 158, 0.30); border-bottom-color: transparent; } .schedule__row--today th { color: var(--ink); } .schedule__row--today td { font-weight: 600; color: var(--ink); } .schedule__now { display: inline-block; margin-left: 10px; color: #0a7b3d; font-size: 13px; font-weight: 700; } /* ========================================================================= Consultation page. ========================================================================= */ .consult-hero { background: linear-gradient(160deg, #0f2033 0%, #14466b 100%); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; } .consult-hero::before { content: ""; position: absolute; right: -100px; top: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 213, 0, 0.1) 0%, transparent 70%); pointer-events: none; } .consult-hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .consult-hero { padding: 40px 0 48px; } .consult-hero__grid { grid-template-columns: 1fr; gap: 28px; } } .consult-hero__pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 213, 0, 0.14); border: 1px solid rgba(255, 213, 0, 0.35); padding: 7px 14px; border-radius: 100px; margin-bottom: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; font-weight: 700; color: var(--ua-yellow); text-transform: uppercase; } .consult-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .consult-hero__title { font-family: var(--font-display); font-size: 48px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 18px; color: #fff; } .consult-hero__highlight { color: var(--ua-yellow); } @media (max-width: 700px) { .consult-hero__title { font-size: 34px; } } .consult-hero__lead { font-size: 16px; line-height: 1.6; color: #cfe0ee; max-width: 540px; margin: 0 0 28px; } .consult-hero__stats { display: flex; gap: 32px; flex-wrap: wrap; } .consult-hero__stat-n { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ua-yellow); letter-spacing: -0.01em; line-height: 1; } .consult-hero__stat-l { font-size: 12px; color: #9fb5c9; margin-top: 6px; line-height: 1.3; } /* Floating form on the hero */ .consult-form { background: #fff; color: var(--ink); border-radius: 18px; padding: 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } .consult-form__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 4px; } .consult-form__sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; } .consult-form__label { display: grid; gap: 6px; margin-bottom: 12px; } .consult-form__label > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; text-transform: uppercase; } .consult-form__label input, .consult-form__label select { padding: 13px 14px; border: 1.5px solid var(--line-strong); border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 500; background: #fff; color: var(--ink); outline: none; box-sizing: border-box; width: 100%; } .consult-form__label input:focus, .consult-form__label select:focus { border-color: var(--ua-blue); } .consult-form__submit { width: 100%; background: var(--ua-yellow); color: var(--ink); border: 0; padding: 15px 20px; font-family: var(--font-display); font-weight: 800; font-size: 14px; border-radius: 10px; box-shadow: 0 4px 0 rgba(217, 179, 0, 0.85); margin-top: 16px; cursor: pointer; } .consult-form__submit:hover { background: #ffdd33; } .consult-form__notice { font-size: 11px; color: var(--muted); text-align: center; margin-top: 12px; } .consult-form__sent { text-align: center; padding: 16px 0; } .consult-form__check { width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 26px; margin: 0 auto 14px; } .consult-form__sent-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 8px; } .consult-form__sent-text { font-size: 13px; color: var(--muted); line-height: 1.5; } /* Section heads in consultation sub-sections */ .consult-section-head { text-align: center; margin-bottom: 40px; } .consult-section-head h2 { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .consult-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ua-blue); font-weight: 700; margin-bottom: 10px; text-transform: uppercase; } /* Formats grid */ .consult-formats { padding: 64px 0; background: #fff; } .consult-formats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 900px) { .consult-formats__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .consult-formats__grid { grid-template-columns: 1fr; } } .consult-format { padding: 24px; text-align: center; box-shadow: none; } .consult-format__icon { font-size: 36px; margin-bottom: 10px; } .consult-format__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 4px; } .consult-format__price { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ua-blue); margin-bottom: 4px; } .consult-format__time { font-size: 12px; color: var(--muted); margin-bottom: 12px; } .consult-format__desc { font-size: 12px; color: var(--dark); line-height: 1.5; border-top: 1px dashed var(--line); padding-top: 12px; } /* How-it-works steps */ .consult-how { padding: 64px 0; background: var(--bg-2); } .consult-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 800px) { .consult-how__grid { grid-template-columns: repeat(2, 1fr); } } .consult-step { text-align: center; } .consult-step__num { width: 56px; height: 56px; border-radius: 50%; background: var(--ua-yellow); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0 auto 14px; } .consult-step__title { font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-bottom: 6px; } .consult-step__text { font-size: 13px; color: var(--muted); line-height: 1.5; } /* Topics grid under hero */ .consult-topics { padding: 48px 0 64px; } .consult-topics__grid { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .consult-topics__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .consult-topics__grid { grid-template-columns: 1fr; } } .consult-topics__grid li { padding: 18px 20px; font-size: 13px; line-height: 1.55; color: var(--dark); box-shadow: none; } .consult-topics__chip { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ua-blue); font-weight: 700; margin-bottom: 6px; } /* ========================================================================= Landing (scenario) page — bankruptcy, kolektory, mfo, faktoring, etc. Shares the .consult-* hero/form blocks. ========================================================================= */ .landing-hero { background: linear-gradient(160deg, #0f2033 0%, #14466b 100%); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; } .landing-hero::before { content: ""; position: absolute; right: -100px; top: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 213, 0, 0.1) 0%, transparent 70%); pointer-events: none; } .landing-hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .landing-hero { padding: 40px 0 48px; } .landing-hero__grid { grid-template-columns: 1fr; gap: 28px; } } .landing-hero__pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 213, 0, 0.14); border: 1px solid rgba(255, 213, 0, 0.35); padding: 7px 14px; border-radius: 100px; margin-bottom: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; font-weight: 700; color: var(--ua-yellow); text-transform: uppercase; } .landing-hero__title { font-family: var(--font-display); font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 18px; color: #fff; } @media (max-width: 700px) { .landing-hero__title { font-size: 32px; } } .landing-hero__lead, .landing-hero__lead p { font-size: 16px; line-height: 1.6; color: #cfe0ee; margin: 0 0 14px; } .landing-hero__lead .lead { font-size: 17px; } .landing-hero__bullets { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; } .landing-hero__bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #e3edf5; line-height: 1.5; } .landing-hero__check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 213, 0, 0.2); color: var(--ua-yellow); display: grid; place-items: center; font-size: 12px; font-weight: 800; } /* "What we do" numbered cards */ .landing-what { padding: 64px 0; background: #fff; } .landing-what__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 32px; } .landing-what__card { padding: 24px 26px; display: flex; gap: 16px; align-items: flex-start; box-shadow: none; } .landing-what__num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--ua-yellow); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; } .landing-what__text { font-size: 14px; line-height: 1.55; color: var(--dark); } /* Final CTA band */ .landing-final { background: var(--ink); color: #fff; padding: 48px 0; } .landing-final__inner { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; } @media (max-width: 700px) { .landing-final__inner { grid-template-columns: 1fr; text-align: center; } } .landing-final h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: #fff; margin: 0 0 6px; letter-spacing: -0.015em; } .landing-final p { margin: 0; font-size: 14px; color: #cfe0ee; line-height: 1.5; } /* ========================================================================= Executor profile hero + body — state and private variants. ========================================================================= */ .exec-hero { padding: 32px 0 28px; border-bottom: 1px solid var(--line); } /* Жовтий заливний фон зарезервований під PRO-підписку (див. .pvpro-hero). Звичайні держ.виконавці залишаються нейтрально-білими, інакше відвідувач читає золотистий фон як «оплачений PRO», а у держ. ДВС такого статусу нема. */ .exec-hero--state { background: #fff; } .exec-hero--private { background: #fff; } .exec-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; } @media (max-width: 1000px) { .exec-hero__grid { grid-template-columns: 1fr; } } .exec-hero__main { display: grid; grid-template-columns: 120px 1fr; gap: 24px; min-width: 0; } @media (max-width: 600px) { .exec-hero__main { grid-template-columns: 80px 1fr; gap: 16px; } } .exec-hero__avatar { width: 120px; height: 120px; border-radius: 18px; display: grid; place-items: center; font-family: var(--font-display); font-size: 42px; font-weight: 800; position: relative; overflow: visible; text-transform: uppercase; } @media (max-width: 600px) { .exec-hero__avatar { width: 80px; height: 80px; font-size: 30px; border-radius: 14px; } } .exec-hero__avatar--state { background: #eef2f7; color: #34506b; border: 2px solid #d8e0ea; } .exec-hero__avatar--private { background: #e7effc; color: var(--ua-blue); } .exec-hero__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Mobile-fix: на mobile квадратний плейсхолдер-ініціали виштовхує ім'я у вузьку колонку, ламаючи перенос. Поведінка: • без фото (--initials) — приховуємо аватар повністю • з фото (--has-img) — banner 240px на повну ширину, центрований crop. Modifier-клас додається у Twig, тож працює у будь-якому браузері незалежно від :has()-підтримки (раніше використовував — на старішому Safari падало, фото не обмежувалось у висоті і переїжджало на ПІБ). */ @media (max-width: 600px) { .exec-hero__main { grid-template-columns: 1fr; gap: 18px; } .exec-hero__avatar.exec-hero__avatar--initials { display: none; } .exec-hero__avatar.exec-hero__avatar--has-img { width: 100%; height: 240px; font-size: 0; border-radius: 14px; overflow: hidden; } .exec-hero__avatar.exec-hero__avatar--has-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } } .exec-hero__verified { position: absolute; right: -4px; bottom: -4px; width: 32px; height: 32px; border-radius: 50%; background: var(--ua-blue); color: #fff; display: grid; place-items: center; border: 3px solid #fff; } .exec-hero__body { min-width: 0; } /* Chip pills */ .exec-hero__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .exec-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; font-weight: 700; padding: 5px 10px; border-radius: 100px; text-transform: uppercase; white-space: nowrap; } .exec-pill--state { background: #fff7dc; color: #c26a1f; } .exec-pill--private { background: #e7effc; color: var(--ua-blue); } .exec-pill--ghost { background: #fff; color: var(--muted); border: 1px solid var(--line); font-weight: 600; } .exec-pill--ok { background: rgba(23, 138, 74, 0.08); color: var(--green); } .exec-pill--warn { background: #fff4d6; color: #8a5a00; } .exec-pill--off { background: rgba(216, 53, 42, 0.08); color: var(--red); } .exec-pill--asvp { background: var(--ua-yellow); color: #8a6d00; box-shadow: 0 1px 0 rgba(217, 179, 0, 0.6); letter-spacing: 0.1em; } .exec-hero__name { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.1; color: var(--ink); overflow-wrap: break-word; } .exec-hero__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 14px; } .exec-hero__rating { font-family: var(--font-display); font-weight: 800; color: var(--ink); } .exec-hero__sep { width: 1px; height: 16px; background: var(--line-strong); } .exec-hero__desc { font-size: 14px; color: var(--dark); line-height: 1.6; max-width: 580px; margin: 0 0 18px; } .exec-hero__ctas { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .exec-hero__ctas .btn { padding: 13px 22px; font-size: 13px; } /* Department callout card */ .dept-callout { background: #fff; border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 14px; max-width: 580px; color: var(--ink); margin-top: 18px; transition: border-color 0.15s; } .dept-callout:hover { text-decoration: none; border-color: var(--ua-blue); } .dept-callout__icon { width: 40px; height: 40px; background: #fff7dc; color: #c26a1f; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; } .dept-callout__body { flex: 1; min-width: 0; } .dept-callout__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; text-transform: uppercase; } .dept-callout__name { font-size: 14px; font-weight: 700; color: var(--ua-blue); margin-top: 2px; } .dept-callout__addr { font-size: 12px; margin-top: 2px; } .dept-callout__arrow { color: var(--ua-blue); font-weight: 700; flex-shrink: 0; } /* Stats card right-rail in hero */ .exec-hero__aside { position: sticky; top: 20px; } .stats-card { padding: 20px; box-shadow: none; } .stats-card--blue { background: var(--bg-2); border-color: var(--line-strong); } .stats-card__head { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; } .stats-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } .stats-card__n { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .stats-card__n--active { color: var(--green); } .stats-card__n--suspended { color: #b45309; } .stats-card__n--inactive { color: var(--red); } .stats-card__l { font-size: 11px; color: var(--muted); margin-top: 4px; } .stats-card__foot { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); line-height: 1.45; } /* Quick-help callouts (yellow warm for state, blue for private) */ .quick-help { padding: 22px 24px; margin-bottom: 24px; box-shadow: none; } .quick-help__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; text-transform: uppercase; } .quick-help__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.005em; margin: 4px 0 16px; } .quick-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 700px) { .quick-help__grid { grid-template-columns: 1fr; } } .quick-help__item { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: #fff7dc; border: 1px solid #e6c700; border-radius: 10px; color: var(--ink); } .quick-help__item:hover { text-decoration: none; background: #fff2a8; } .quick-help__item--blue { background: #e7effc; border-color: #b9d0ed; } .quick-help__item--blue:hover { background: #d2e2f6; } .quick-help__icon { font-size: 22px; } .quick-help__t { font-size: 13px; font-weight: 700; } .quick-help__d { font-size: 11px; color: #5a4800; margin-top: 2px; } .quick-help__item--blue .quick-help__d { color: #1e3a5f; } .quick-help__arrow { color: #8a6d00; font-size: 16px; font-weight: 700; } .quick-help__item--blue .quick-help__arrow { color: var(--ua-blue); } /* Section H2 inside content column */ .section-h2 { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin: 32px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .section-h2::before { content: ""; width: 4px; height: 22px; background: var(--ua-yellow); border-radius: 2px; } /* Contacts 2-column grid card (shared between state+private profile) */ .contacts-grid { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; box-shadow: none; } @media (max-width: 700px) { .contacts-grid { grid-template-columns: 1fr; gap: 20px; } } .contacts-grid__block { margin-bottom: 14px; } .contacts-grid__block:last-child { margin-bottom: 0; } .contacts-grid__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; } .contacts-grid__val { font-size: 14px; font-weight: 500; color: var(--ink); } .contacts-grid__val--link { color: var(--ua-blue); font-family: var(--font-mono); font-weight: 700; } /* Mini schedule used inside contact grid */ .schedule-mini { display: grid; gap: 6px; margin-top: 6px; font-size: 13px; } .schedule-mini__row { display: grid; grid-template-columns: 60px 1fr; padding-bottom: 6px; border-bottom: 1px dashed var(--line); } .schedule-mini__d { font-weight: 600; color: var(--ink); } .schedule-mini__h { color: var(--ink); } /* Placeholder for fields where data is missing — editor sees it at a glance. Spec: user asked for #ed0000. */ .missing { color: #ed0000; font-weight: 600; font-style: italic; } .exec-pill .missing { font-style: normal; font-weight: 700; } /* Stars row in hero */ .exec-hero__stars { color: var(--ua-yellow); letter-spacing: 2px; font-size: 16px; } /* Jurisdiction chips (list of service types) */ .jurisdiction-card { padding: 20px 24px; box-shadow: none; } .jurisdiction-card p { margin: 0 0 14px; font-size: 13px; } .jurisdiction-chips { display: flex; flex-wrap: wrap; gap: 8px; } .jurisdiction-chips > span { display: inline-block; padding: 6px 12px; background: var(--bg-3); border-radius: 100px; font-size: 12px; font-weight: 500; color: var(--dark); } .jurisdiction-chips .missing { background: rgba(237, 0, 0, 0.08); border: 1px dashed rgba(237, 0, 0, 0.4); padding: 5px 11px; font-style: italic; } /* Review breakdown bars + summary */ .review-card { padding: 0; box-shadow: none; overflow: hidden; } .review-summary { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; padding: 24px 28px; border-bottom: 1px solid var(--line); background: var(--bg-2); } @media (max-width: 600px) { .review-summary { grid-template-columns: 1fr; gap: 16px; text-align: center; } } .review-summary__score { text-align: center; } .review-summary__n { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 6px; } .review-summary__bars { display: grid; gap: 8px; } .review-bar { display: grid; grid-template-columns: 40px 1fr 30px; gap: 10px; align-items: center; font-size: 12px; } .review-bar__star { color: var(--muted); font-family: var(--font-mono); } .review-bar__track { height: 6px; background: var(--line); border-radius: 100px; overflow: hidden; } .review-bar__fill { height: 100%; background: var(--ua-yellow); border-radius: inherit; transition: width 0.3s; } .review-bar__n { font-size: 12px; text-align: right; } .review-card .review-list { padding: 0 28px; margin: 0; } .review-card .review:last-child { border-bottom: 0; } .review__reply { margin-top: 10px; padding: 10px 12px; font-size: 13px; background: #e8f6ee; border-left: 3px solid var(--green); border-radius: 4px; color: #1a4a2e; line-height: 1.55; } .review__reply-head { font-size: 11px; font-weight: 700; margin-bottom: 4px; } /* Region hero with stats chips */ .region-hero { padding: 36px 0 20px; background: linear-gradient(180deg, #f3f7fc 0%, #fff 100%); border-bottom: 1px solid var(--line); } .region-hero__grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; } @media (max-width: 900px) { .region-hero__grid { grid-template-columns: 1fr; } } .region-chips { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .infochip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--line); padding: 5px 10px; border-radius: 3px; background: #fff; font-weight: 700; } .infochip .missing { font-style: normal; font-weight: 700; padding: 0; background: transparent; border: 0; } /* Region tag cloud ("Інші області") */ .region-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .region-tag { padding: 8px 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--dark); transition: all 0.15s; } .region-tag:hover { border-color: var(--ua-blue); color: var(--ua-blue); text-decoration: none; } /* Department page: row-style exec list + map aside */ .dept-hero { background: #fff; border-bottom: 1px solid var(--line); } .exec-row-list { list-style: none; padding: 0; margin: 0; overflow: hidden; box-shadow: none; } .exec-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 20px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); transition: background 0.15s; } .exec-row:last-child { border-bottom: 0; } .exec-row:hover { background: var(--bg-2); } .exec-row__main { color: var(--ink); } .exec-row__main:hover { text-decoration: none; color: var(--ink); } .exec-row__name { font-size: 14px; margin-bottom: 6px; line-height: 1.4; } .exec-row__name strong { color: var(--ua-blue); font-size: 15px; display: inline-block; } .exec-row__facts { font-size: 13px; display: grid; gap: 2px; } .exec-row__rating { text-align: right; } .exec-row__rating-n { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1; color: var(--ink); } /* Map card (Google Maps iframe) */ .map-card { padding: 0; overflow: hidden; box-shadow: none; } .map-card__head { padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 13px; font-weight: 700; } .map-card__frame { width: 100%; height: 240px; border: 0; display: block; } .map-card__missing { padding: 30px 18px; text-align: center; background: var(--bg-2); } /* ========================================================================= Blog list page. ========================================================================= */ .blog-hero { padding: 40px 0 48px; background: linear-gradient(180deg, #f6f8fb 0%, #fff 100%); } .blog-hero__title { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 24px; max-width: 820px; } @media (max-width: 700px) { .blog-hero__title { font-size: 28px; } } /* Featured article card */ .blog-feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 320px; } @media (max-width: 800px) { .blog-feature { grid-template-columns: 1fr; } } .blog-feature__graphic { position: relative; display: grid; place-items: center; background: linear-gradient(135deg, var(--ua-blue) 0%, #003a75 100%); min-height: 220px; } .blog-feature__graphic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .blog-feature__badge { position: absolute; top: 20px; left: 24px; font-family: var(--font-mono); font-size: 11px; background: var(--ua-yellow); color: var(--ink); padding: 6px 12px; border-radius: 4px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .blog-feature__body { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; } .blog-feature__cat { font-family: var(--font-mono); font-size: 10px; color: var(--red); font-weight: 700; letter-spacing: 0.12em; margin-bottom: 10px; text-transform: uppercase; } .blog-feature__body h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 14px; } .blog-feature__body h2 a { color: var(--ink); } .blog-feature__body h2 a:hover { color: var(--ua-blue); text-decoration: none; } .blog-feature__lead { font-size: 15px; color: var(--muted); line-height: 1.55; margin: 0 0 20px; } .blog-feature__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; color: var(--muted); } /* Filters row */ .blog-filters { padding: 20px 0; background: #fff; border-bottom: 1px solid var(--line); } .blog-filters .wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .blog-filters__chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .blog-chip { padding: 9px 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 100px; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--dark); cursor: pointer; } .blog-chip { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .blog-chip:hover { border-color: var(--ua-blue); color: var(--ua-blue); text-decoration: none; } .blog-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } .blog-chip.is-active:hover { color: #fff; border-color: var(--ink); } .blog-chip__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; opacity: 0.7; } .blog-chip.missing { background: rgba(237, 0, 0, 0.06); border-color: rgba(237, 0, 0, 0.3); border-style: dashed; font-style: italic; color: #ed0000; } .blog-search { position: relative; } .blog-search svg { position: absolute; left: 14px; top: 11px; } .blog-search input { width: 240px; padding: 10px 14px 10px 38px; border: 1px solid var(--line-strong); border-radius: 100px; font-size: 13px; font-family: inherit; outline: none; } /* Grid section */ .blog-grid-section { padding: 40px 0 60px; background: var(--bg-2); } .blog-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } .blog-card { overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; padding: 0; } .blog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 32, 51, 0.08); } .blog-card__graphic { display: block; height: 140px; position: relative; background: linear-gradient(135deg, var(--ua-blue) 0%, #003a75 100%); overflow: hidden; } .blog-card__graphic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card__graphic svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .blog-card__cat { position: absolute; top: 14px; left: 14px; font-family: var(--font-mono); font-size: 10px; background: rgba(0, 0, 0, 0.35); color: #fff; padding: 5px 10px; border-radius: 4px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .blog-card__body { padding: 22px; } .blog-card__body h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 10px; } .blog-card__body h3 a { color: var(--ink); } .blog-card__body h3 a:hover { color: var(--ua-blue); text-decoration: none; } .blog-card__body p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 14px; } .blog-card__meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; } /* Newsletter */ .blog-newsletter { padding: 56px 0; background: linear-gradient(135deg, #0f2033 0%, #14466b 100%); color: #fff; } .blog-newsletter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } @media (max-width: 800px) { .blog-newsletter__grid { grid-template-columns: 1fr; } } .blog-newsletter h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; color: #fff; line-height: 1.15; } .blog-newsletter p { font-size: 15px; color: #cfe0ee; line-height: 1.55; margin: 0; } .blog-newsletter__form { display: flex; gap: 10px; } .blog-newsletter__form input[type=email] { flex: 1; padding: 16px 18px; border: 0; border-radius: 12px; font-size: 14px; font-family: inherit; outline: none; } .blog-newsletter__form button { background: var(--ua-yellow); color: var(--ink); border: 0; padding: 16px 22px; font-family: var(--font-display); font-weight: 800; font-size: 13px; border-radius: 12px; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 0 rgba(217, 179, 0, 0.8); } /* ========================================================================= Article single. ========================================================================= */ .reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--ua-yellow); z-index: 100; transition: width 0.1s; pointer-events: none; } .article-hero { padding: 40px 0 28px; background: linear-gradient(180deg, #f6f8fb 0%, #fff 100%); border-bottom: 1px solid var(--line); } .article-hero__cat { font-family: var(--font-mono); font-size: 11px; color: var(--red); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; } .article-hero__title { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 860px; } @media (max-width: 700px) { .article-hero__title { font-size: 28px; } } .article-hero__lead { font-size: 18px; color: var(--dark); line-height: 1.5; margin: 0 0 24px; max-width: 780px; } .article-hero__meta { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; } .article-author-mini { display: flex; gap: 12px; align-items: center; } .article-author-mini__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #8a3fbf 0%, #5a2488 100%); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px; display: grid; place-items: center; } .article-author-mini__name { font-weight: 600; color: var(--ink); font-size: 14px; } .article-section { padding-top: 36px; } .article-body { max-width: 760px; padding: 32px 40px; font-size: 16px; line-height: 1.7; } .article-body h2 { font-size: 22px; margin: 32px 0 12px; } .article-body h3 { font-size: 18px; margin: 24px 0 10px; } .article-body p { margin: 0 0 16px; } .article-callout { background: var(--yellow-soft); padding: 14px 18px; border-radius: 10px; font-size: 14px; line-height: 1.55; } .article-callout a { color: var(--ua-blue); font-weight: 700; } .author-card { padding: 18px 22px; text-align: center; } .author-card__head { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; margin-bottom: 12px; text-align: left; } .author-card__avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #8a3fbf 0%, #5a2488 100%); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 26px; display: grid; place-items: center; margin: 0 auto 10px; } .author-card__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 4px; } /* ========================================================================= Tools / product pages (PRO, auth, docs, TG, advocate). ========================================================================= */ .auth-shell { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 40px; align-items: start; padding: 40px 24px 60px; } @media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } } .auth-card { padding: 28px 32px; } .auth-side h2 { margin-top: 0; } .pro-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 40px 24px 56px; } @media (max-width: 900px) { .pro-tiers { grid-template-columns: 1fr; } } .pro-tier { padding: 28px 28px; position: relative; box-shadow: none; } .pro-tier--featured { border-color: var(--ua-yellow); box-shadow: 0 0 0 3px rgba(255, 213, 0, 0.2); } .pro-tier__tag { position: absolute; top: 20px; right: 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 800; padding: 4px 9px; border-radius: 4px; background: var(--bg-3); color: var(--muted); text-transform: uppercase; } .pro-tier__tag--yellow { background: var(--ua-yellow); color: var(--ink); } .pro-tier__name { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 4px 0 10px; } .pro-tier__price { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .pro-tier__period { font-size: 14px; font-weight: 500; font-family: var(--font-body); } .pro-tier__list { list-style: none; padding: 0; margin: 20px 0 24px; } .pro-tier__list li { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; line-height: 1.45; } .pro-tier__list li:last-child { border-bottom: 0; } /* ========================================================================= Bankruptcy landing — dedicated template. M2–M5 add sections below. ========================================================================= */ .bnk-hero { position: relative; overflow: hidden; padding: 64px 0 80px; color: #fff; background: linear-gradient(155deg, #0f2033 0%, #14466b 60%, #1a5a8a 100%); } .bnk-hero__bg { position: absolute; inset: 0; opacity: 0.06; pointer-events: none; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 1px, transparent 24px); } .bnk-hero__glow { position: absolute; top: 30px; right: 10%; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 213, 0, 0.12) 0%, transparent 70%); pointer-events: none; } .bnk-hero__grid { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; } @media (max-width: 1000px) { .bnk-hero__grid { grid-template-columns: 1fr; gap: 36px; } } .bnk-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ua-yellow); } .bnk-hero__title { font-family: var(--font-display); font-size: 52px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 700; margin: 22px 0; color: #fff; } @media (max-width: 700px) { .bnk-hero__title { font-size: 36px; } } .bnk-hero__lead { font-size: 17px; line-height: 1.55; color: #cfe0ee; max-width: 560px; margin: 0 0 32px; } .bnk-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; } .bnk-hero__cta-primary { padding: 17px 32px; font-size: 15px; font-weight: 800; border-radius: 12px; box-shadow: 0 6px 0 rgba(217, 179, 0, 0.9); } .bnk-hero__cta-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.28); padding: 17px 28px; font-size: 15px; font-weight: 600; border-radius: 12px; } .bnk-hero__cta-ghost:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; color: #fff; } .bnk-hero__stats { display: flex; gap: 36px; flex-wrap: wrap; } .bnk-hero__stat-n { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--ua-yellow); letter-spacing: -0.02em; line-height: 1; } .bnk-hero__stat-l { font-size: 12px; color: #9fb5c9; margin-top: 6px; } /* ----- Qualification calculator in the hero's right column ----- */ .bnk-calc { background: #fff; color: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px -20px rgba(15, 32, 51, 0.25); border: 1px solid var(--line); } .bnk-calc__head { background: linear-gradient(180deg, #0f2033 0%, #14466b 100%); color: #fff; padding: 22px 28px; } .bnk-calc__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ua-yellow); font-weight: 700; margin-bottom: 6px; } .bnk-calc__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } .bnk-calc__body { padding: 28px; display: grid; gap: 24px; } .bnk-calc__step { display: block; } .bnk-calc__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; margin-bottom: 8px; } .bnk-calc__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .bnk-calc__row label { font-size: 15px; font-weight: 700; color: var(--ink); } .bnk-calc__amount { font-family: var(--font-mono); font-size: 18px; font-weight: 800; color: var(--ua-blue); } .bnk-calc input[type="range"] { width: 100%; accent-color: var(--ua-blue); } .bnk-calc__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 4px; } .bnk-calc__label { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .bnk-calc__opts { display: grid; gap: 6px; } .bnk-calc__opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; color: var(--ink); transition: border-color 0.15s, background 0.15s; } .bnk-calc__opt input[type="radio"] { accent-color: var(--ua-blue); margin-top: 2px; } .bnk-calc__opt span { font-size: 13px; line-height: 1.4; } .bnk-calc__opt.is-active { border: 1.5px solid #d9a600; background: var(--yellow-soft, #fff8d9); } .bnk-calc__opt.is-active span { font-weight: 600; } .bnk-calc__verdict { margin: 0 28px 28px; padding: 20px; border-radius: 12px; background: #e8f5ec; border: 1px solid var(--green); } .bnk-calc__verdict[data-state="warn"] { background: #fff4d6; border-color: #f5a623; } .bnk-calc__verdict-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .bnk-calc__verdict-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 800; flex-shrink: 0; } .bnk-calc__verdict[data-state="warn"] .bnk-calc__verdict-icon { background: #f5a623; } .bnk-calc__verdict-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.25; } .bnk-calc__verdict-body { font-size: 13px; line-height: 1.6; color: #1a4a2e; } .bnk-calc__verdict[data-state="warn"] .bnk-calc__verdict-body { color: #8a5a00; } .bnk-calc__cta { display: block; margin-top: 14px; text-align: center; width: 100%; background: var(--ua-yellow); color: #1a1410; padding: 13px 20px; font-family: var(--font-display); font-weight: 800; font-size: 13px; border-radius: 10px; box-shadow: 0 3px 0 rgba(230, 199, 0, 0.8); text-decoration: none; } .bnk-calc__cta:hover { background: #ffdd33; color: #1a1410; text-decoration: none; } /* ----- WHO WE HELP: 6 situation cards ----- */ .bnk-who { padding: 72px 0; background: #fff; } .bnk-who__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; } @media (max-width: 900px) { .bnk-who__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .bnk-who__grid { grid-template-columns: 1fr; } } .bnk-who__card { padding: 26px; box-shadow: none; transition: border-color 0.2s; } .bnk-who__card:hover { border-color: var(--ua-blue); } .bnk-who__icon { font-size: 30px; margin-bottom: 12px; } .bnk-who__h { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 8px; } .bnk-who__t { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--muted); } .bnk-who__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ua-blue); font-weight: 700; padding-top: 12px; border-top: 1px dashed var(--line); text-transform: uppercase; } /* ----- 5-STEP TIMELINE ----- */ .bnk-steps { padding: 80px 0; background: var(--bg-2); } .bnk-steps__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; } @media (max-width: 1000px) { .bnk-steps__grid { grid-template-columns: 1fr; gap: 36px; } } .bnk-steps__intro { position: sticky; top: 20px; } @media (max-width: 1000px) { .bnk-steps__intro { position: static; } } .bnk-steps__title { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 12px 0 22px; } @media (max-width: 700px) { .bnk-steps__title { font-size: 28px; } } .bnk-steps__lead { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; } .bnk-steps__stat { padding: 18px; box-shadow: none; } .bnk-steps__stat-n { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ua-blue); } .bnk-steps__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .bnk-step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px; box-shadow: none; } .bnk-step__num { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--ua-blue), #003d7a); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; font-weight: 800; } .bnk-step__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .bnk-step__t { font-family: var(--font-display); font-size: 18px; font-weight: 700; } .bnk-step__time { font-family: var(--font-mono); font-size: 10px; color: var(--ua-blue); letter-spacing: 0.08em; font-weight: 700; background: #e7effc; padding: 3px 8px; border-radius: 100px; text-transform: uppercase; } .bnk-step__d { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; } /* ----- KEEP vs LOSE: green + red comparison ----- */ .bnk-keep { padding: 80px 0; background: #fff; } .bnk-keep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 800px) { .bnk-keep__grid { grid-template-columns: 1fr; } } .bnk-keep__col { border-radius: 16px; padding: 28px; } .bnk-keep__col--yes { background: #f0faf3; border: 1px solid #b8e0c7; } .bnk-keep__col--no { background: #fef2f2; border: 1px solid #f5c4c0; } .bnk-keep__head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .bnk-keep__badge { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 800; } .bnk-keep__badge--yes { background: var(--green); } .bnk-keep__badge--no { background: var(--red); } .bnk-keep__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; } .bnk-keep__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .bnk-keep__list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; } .bnk-keep__mark { font-weight: 800; font-size: 15px; line-height: 1.45; } .bnk-keep__mark--yes { color: var(--green); } .bnk-keep__mark--no { color: var(--red); } .bnk-keep__row-t { font-size: 14px; font-weight: 700; } .bnk-keep__row-d { font-size: 13px; line-height: 1.5; } .bnk-keep__row-d--yes { color: #4a6b57; } .bnk-keep__row-d--no { color: #7a3a35; } /* ----- CASES from the judicial registry ----- */ .bnk-cases { padding: 80px 0; background: linear-gradient(180deg, #f6f8fb 0%, #edf2f7 100%); } .bnk-cases__h { font-family: var(--font-display); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; } .bnk-cases__lead { font-size: 15px; color: var(--muted); max-width: 640px; margin: 0 0 36px; line-height: 1.6; } .bnk-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .bnk-cases__grid { grid-template-columns: 1fr; } } .bnk-case { padding: 26px; box-shadow: none; } .bnk-case__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 10px; } .bnk-case__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; } .bnk-case__city { font-size: 12px; color: var(--muted); margin-bottom: 14px; } .bnk-case__rows { display: grid; gap: 10px; font-size: 13px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .bnk-case__row { display: flex; justify-content: space-between; gap: 10px; } .bnk-case__row span:first-child { color: var(--muted); } .bnk-case__result { background: #e8f5ec; padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #1a4a2e; } .bnk-case__note { font-size: 12px; color: var(--muted); } /* ===== bnk-price: 3 tiers, middle one featured dark =================== */ .bnk-price { padding: 80px 0; background: #fff; } .bnk-price__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; align-items: stretch; } @media (max-width: 1000px) { .bnk-price__grid { grid-template-columns: 1fr; gap: 20px; } } .bnk-tier { position: relative; padding: 32px 26px; box-shadow: none; display: flex; flex-direction: column; gap: 14px; } .bnk-tier__h { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.01em; } .bnk-tier__price { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .bnk-tier__sub { font-size: 13px; color: var(--muted); margin-top: -6px; } .bnk-tier__note { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; } .bnk-tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; } .bnk-tier__list li { font-size: 14px; line-height: 1.45; padding-left: 22px; position: relative; } .bnk-tier__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; } .bnk-tier--featured { background: linear-gradient(180deg, #0f2033 0%, #152a43 100%); color: #fff; border: 1px solid #1f3d5e; transform: translateY(-8px); } @media (max-width: 1000px) { .bnk-tier--featured { transform: none; } } .bnk-tier--featured .bnk-tier__price { color: #fff; } .bnk-tier__price--yellow { color: var(--ua-yellow) !important; } .bnk-tier__note--on-dark { color: #b9cbdc; } .bnk-tier__list--on-dark li::before { color: var(--ua-yellow); } .bnk-tier__badge { position: absolute; top: -12px; right: 24px; background: var(--ua-yellow); color: var(--ink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 12px; border-radius: 999px; } /* ===== bnk-faq: sticky intro + accordion ============================== */ .bnk-faq { padding: 80px 0; background: var(--bg-2); } .bnk-faq__grid { display: grid; grid-template-columns: 360px 1fr; gap: 60px; align-items: start; } @media (max-width: 1000px) { .bnk-faq__grid { grid-template-columns: 1fr; gap: 32px; } } .bnk-faq__intro { position: sticky; top: 20px; } @media (max-width: 1000px) { .bnk-faq__intro { position: static; } } .bnk-faq__title { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 14px; line-height: 1.1; } @media (max-width: 700px) { .bnk-faq__title { font-size: 26px; } } .bnk-faq__lead { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; } .bnk-faq__lead a { color: var(--ua-blue); font-weight: 700; } .bnk-faq__list { display: grid; gap: 10px; } .bnk-faq__item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden; transition: border-color 0.15s; } .bnk-faq__item[open] { border-color: var(--ua-blue); } .bnk-faq__item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); } .bnk-faq__item summary::-webkit-details-marker { display: none; } .bnk-faq__plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #eef3f8; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--ua-blue); transition: transform 0.2s, background 0.2s; } .bnk-faq__item[open] .bnk-faq__plus { transform: rotate(45deg); background: var(--ua-blue); color: #fff; } .bnk-faq__a { margin: 0; padding: 0 22px 20px; font-size: 14px; line-height: 1.6; color: #3d4f5e; } /* ===== bnk-cta: dark final CTA (copy left + form right) ============= */ .bnk-cta { position: relative; padding: 80px 0; background: linear-gradient(135deg, #0f2033 0%, #14466b 100%); color: #fff; overflow: hidden; } .bnk-cta__bg { position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 1px, transparent 20px); pointer-events: none; } .bnk-cta__grid { position: relative; display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; } @media (max-width: 1000px) { .bnk-cta__grid { grid-template-columns: 1fr; gap: 36px; } } .bnk-cta__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ua-yellow); font-weight: 700; margin-bottom: 14px; } .bnk-cta__title { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 18px; line-height: 1.1; color: #fff; } @media (max-width: 700px) { .bnk-cta__title { font-size: 30px; } } .bnk-cta__accent { color: var(--ua-yellow); } .bnk-cta__lead { font-size: 16px; line-height: 1.6; color: #cfe0ee; margin: 0 0 28px; max-width: 480px; } .bnk-cta__promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .bnk-cta__promises li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #e5eef6; } .bnk-cta__check { width: 24px; height: 24px; border-radius: 50%; background: var(--ua-yellow); color: #1a1410; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; } .bnk-cta__form { background: #fff; color: var(--ink); border-radius: 16px; padding: 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } .bnk-cta__form-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 18px; } .bnk-cta__field { display: grid; gap: 6px; margin-bottom: 14px; } .bnk-cta__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; } .bnk-cta__input { padding: 14px 16px; border: 1.5px solid var(--line-strong, #d7dfe7); border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 500; outline: none; background: #fff; color: var(--ink); transition: border-color 0.15s; } .bnk-cta__input:focus { border-color: var(--ua-blue); } /* Підставляється JS-ом замість