/* ═══════════════════════════════════════════════════════════════════════════ UAHub · каталог. Один файл стилів на весь каталог. Чому окремим файлом, а не в : 40 КБ інлайну їхали в КОЖНІЙ з 873 347 сторінок і не кешувались. Тепер браузер тягне їх раз, а `asset()` додає ?v=, тож деплой інвалідує кеш сам. ── Напрям, свідомо вибраний ─────────────────────────────────────────────── «Реєстрова книга»: тепла папіряна поверхня, глибоке чорнило, данський червоний як єдиний акцент дії, антиква Spectral у заголовках і моноширинний IBM Plex для чисел реєстру. Зелений лишився ЛИШЕ семантикою верифікації — бо коли весь інтерфейс зелений, зелена «перевірено» не значить нічого. Глибина робиться шарами (тінь + світлий кант + зерно паперу), а не градієнтними коробками. ═══════════════════════════════════════════════════════════════════════════ */ /* ── ШРИФТИ. Свої файли, не CDN Google: браузер тягне лише потрібний subset — українцю cyrillic+latin, данцю тільки latin. Заодно жодного запиту на fonts.gstatic.com, тобто нічого не треба писати в cookie-політику. Spectral (антиква) — заголовки й герой: у неї є характер, і саме тому сторінка перестає читатись як згенерована за замовчуванням. Manrope — інтерфейс: щільний, з розрізненими «і» та «l». IBM Plex Mono — ТІЛЬКИ числа реєстру: CVR, роки, лічильники. Моноширинні цифри стають у стовпчик, і 873 347 читається як число, а не як слово. */ @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/katalog/static/fonts/spectral-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/katalog/static/fonts/spectral-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/katalog/static/fonts/spectral-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('/katalog/static/fonts/spectral-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('/katalog/static/fonts/spectral-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url('/katalog/static/fonts/spectral-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/katalog/static/fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/katalog/static/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/katalog/static/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/katalog/static/fonts/ibm-plex-mono-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/katalog/static/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/katalog/static/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/katalog/static/fonts/manrope-400800-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/katalog/static/fonts/manrope-400800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/katalog/static/fonts/manrope-400800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root { /* ── ШКАЛА. Шість кроків тексту, три радіуси, крок відступу 4px. Значення поза шкалою — помилка, а не «на око». ── */ --t-xs: 0.78rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.1875rem; --t-xl: 1.5rem; --t-2xl: 2rem; --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --r-ctrl: 10px; --r-box: 14px; --r-pill: 999px; /* ── Поверхні. Папір теплий (жовтуватий), не сірий: сірий фон + білі картки = кожен другий SaaS. Тепла база дає паперовий, «реєстровий» тон. ── */ --bg: #f5f2ea; --bg-sunk: #eae4d8; --card: #fffdf8; --line: #e2dbca; --line-strong: #c6bda6; --fg: #1a1714; --fg-2: #4b453c; --muted: #7b736a; /* Чорнило — для героя, підвалу й таблиць на темному. */ --ink: #17140f; --ink-2: #241f18; /* ── АКЦЕНТ. Данський червоний, приглушений до книжкового. Тримає ЛИШЕ дію й бренд: кнопка, посилання, вибраний фільтр. ── */ --accent: #a3182b; --accent-strong: #7f1122; --accent-mid: #c33b4b; --accent-soft: #fbedec; --accent-ring: rgba(163, 24, 43, 0.22); --accent-ink: #5d0d19; /* Другий, «географічний» колір: мапа, регіони, службові позначки. */ --blue: #1a4a63; --blue-soft: #e8f0f4; /* Семантика. Зелений = ВЕРИФІКОВАНО і більше нічого. */ --ok: #1a6b48; --ok-soft: #e6f1ea; --warn: #8a5a00; --warn-soft: #fbf1dd; --star: #c08a08; /* Тіні теплі (коричнюваті), не чорні: на теплому папері чорна тінь виглядає як брудна пляма. */ --shadow: 0 1px 1.5px rgba(60, 42, 20, 0.05), 0 2px 5px rgba(60, 42, 20, 0.05); --shadow-lift: 0 2px 4px rgba(60, 42, 20, 0.07), 0 14px 30px rgba(60, 42, 20, 0.13); --shadow-pop: 0 18px 50px rgba(30, 20, 8, 0.28); --edge: inset 0 1px 0 rgba(255, 255, 255, 0.9); --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --tap: 44px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* Друга вітрина на тому самому коді: інший бренд — інший акцент. */ [data-brand="aktive-ukrainere"] { --accent: #14508f; --accent-strong: #0e3c6d; --accent-mid: #2f6fb5; --accent-soft: #e9f0f8; --accent-ring: rgba(20, 80, 143, 0.22); --accent-ink: #0b2f56; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Якір #results не має ховатись під липкою шапкою. */ scroll-padding-top: 5rem; /* Світла тема — явно: інакше Safari перефарбовує нативні контроли (select, чекбокси, скролбари) у темні за системним налаштуванням, і вони стають чорними плямами на паперовому тлі. */ color-scheme: light; } /* Дотик: без цього iOS чекає 300 мс на подвійний тап, а Android малює синій прямокутник поверх кнопки. */ a, button, .btn, .chip, .tile, .card, .views a, .facets a, .list-row, .pager a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(163, 24, 43, 0.12); } body { margin: 0; color: var(--fg); font: 400 var(--t-md) / 1.55 var(--font-ui); letter-spacing: -0.004em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; /* ЗЕРНО ПАПЕРУ. Один SVG-шум у data-URI поверх теплої заливки: поверхня перестає бути «плоским кольором» і починає читатись як матеріал. ~350 байт, без жодного запиту, не заважає тексту (opacity 0.4 на шумі з амплітудою 0.06). */ background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); background-attachment: fixed; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Фізичний відгук на натиск. Без нього інтерфейс «мертвий» на дотик. */ .btn:active, .tile:active, .chip:active, .card:active, .views a:active, .pager a:active, .fab:active { transform: translateY(1px); } a { color: var(--accent); text-underline-offset: 0.18em; } a:hover { color: var(--accent-strong); } img { max-width: 100%; } /* Якір #results фокусує секцію (tabindex=-1) — і браузер малює синю рамку навколо всієї видачі. Виглядає як зламана верстка; прибираємо саме тут, лишаючи фокус клавіатурі на інтерактивних елементах. */ [tabindex="-1"]:focus { outline: none; } .i { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .i-lg { width: 1.5em; height: 1.5em; } /* Логотипи соцмереж — суцільні, не обведення: у їхніх фірмових формах обведення читається як каракуля. */ .i-brand { fill: currentColor; stroke: none; } .with-i { display: inline-flex; align-items: center; gap: 0.4em; } .wrap { max-width: 78rem; margin: 0 auto; padding: 0 1rem; padding-left: calc(1rem + var(--safe-l)); padding-right: calc(1rem + var(--safe-r)); } /* ── ТИПОГРАФІКА ─────────────────────────────────────────────────────────── */ h1, h2, h3 { text-wrap: balance; } h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.012em; } h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.08; margin: var(--s-4) 0 var(--s-2); } h2 { font-size: var(--t-xl); line-height: 1.2; margin: var(--s-8) 0 var(--s-3); } h2 + p, h2 + .muted { margin-top: calc(var(--s-2) * -1); } h3 { font-size: var(--t-md); font-weight: 650; letter-spacing: -0.012em; margin: var(--s-4) 0 var(--s-2); } .small { font-size: var(--t-sm); } .xs { font-size: var(--t-xs); } .muted { color: var(--muted); } .tnum, .facets .count, .count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } mark { background: #fbe9a8; color: inherit; padding: 0 0.1em; border-radius: 2px; } /* Заголовок розділу з волосяною лінією — як рубрика в реєстрі. */ .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: var(--s-8) 0 var(--s-3); border-bottom: 1px solid var(--line); padding-bottom: var(--s-2); } .block-head h2 { margin: 0; font-size: var(--t-lg); } .block-head a { font-size: var(--t-sm); white-space: nowrap; } /* ── ШАПКА ───────────────────────────────────────────────────────────────── */ header.site { border-bottom: 1px solid var(--line); background: rgba(247, 244, 237, 0.88); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); position: sticky; top: 0; z-index: 30; } header.site .wrap { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; min-height: var(--tap); padding: 0.45rem 1rem; } .brand { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--fg); display: inline-flex; align-items: center; gap: 0.45rem; } /* Марка — «штамп реєстру»: квадрат із засічкою. Дає бренду знак, якого не було взагалі, і коштує нуль запитів. */ .brand-mark { width: 1.6rem; height: 1.6rem; border-radius: 6px; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 6px rgba(163, 24, 43, 0.3); } .topnav { display: none; gap: 0.15rem; font-size: var(--t-sm); flex: 1; } .topnav a { padding: 0.4rem 0.6rem; border-radius: var(--r-ctrl); text-decoration: none; color: var(--fg-2); min-height: 2.2rem; display: inline-flex; align-items: center; transition: background 0.14s ease, color 0.14s ease; } .topnav a:hover { background: var(--bg-sunk); color: var(--fg); } .topnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .nav-account { margin-left: auto; } .langs { display: flex; gap: 2px; font-size: var(--t-xs); background: var(--bg-sunk); border-radius: var(--r-pill); padding: 2px; } .langs a { min-width: 2.1rem; min-height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); text-decoration: none; color: var(--fg-2); font-weight: 600; } .langs a:hover { color: var(--fg); } .langs a[aria-current="page"] { background: var(--card); color: var(--accent); box-shadow: var(--shadow); } .header-search { padding-bottom: 0.5rem; } .header-search form.search { margin: 0; gap: 0.4rem; } .header-search input[type="search"] { min-height: 2.6rem; padding: 0.4rem 0.7rem 0.4rem 2.4rem; } .header-search button { min-height: 2.6rem; padding: 0.4rem 0.9rem; font-size: var(--t-sm); } /* ── Хлібні крихти ───────────────────────────────────────────────────────── */ .crumbs { font-size: var(--t-sm); padding-top: 0.6rem; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; } .crumbs li + li::before { content: "›"; color: var(--muted); margin-right: 0.35rem; } .crumbs span { color: var(--muted); } .crumbs a { color: var(--fg-2); text-decoration: none; } .crumbs a:hover { color: var(--accent); text-decoration: underline; } /* ── ГЕРОЙ. Чорнильна панель із гравіруванням ──────────────────────────────── Було: світла коробка з дрібним розсипом точок — тобто ще один білий прямокутник на білій сторінці. Тепер це єдина темна поверхня вгорі: вона дає глибину, тримає погляд і одразу відрізняє каталог від будь-якого іншого данського довідника. Гравірування — CSS-градієнти, нуль картинок. */ .hero { position: relative; margin: var(--s-3) 0 var(--s-4); padding: var(--s-6) var(--s-4) var(--s-4); border-radius: var(--r-box); overflow: hidden; color: #fff; background: radial-gradient(120% 130% at 88% -10%, rgba(195, 59, 75, 0.5) 0%, transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(26, 74, 99, 0.55) 0%, transparent 60%), var(--ink); box-shadow: var(--shadow-lift); } /* Гільйош: дві сітки тонких ліній під кутом + крапки. Те саме, що робить захисний друк на бланках, і рівно те, чого не буває в згенерованих макетах. */ .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background-image: repeating-linear-gradient(74deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 9px), repeating-linear-gradient(-74deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 13px); mask-image: radial-gradient(120% 100% at 100% 0%, #000 10%, transparent 72%); -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 10%, transparent 72%); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.22; background-image: radial-gradient(circle, #fff 1.3px, transparent 1.4px); background-size: 34px 34px; mask-image: linear-gradient(115deg, transparent 45%, #000 100%); -webkit-mask-image: linear-gradient(115deg, transparent 45%, #000 100%); } .hero > * { position: relative; z-index: 1; } .hero h1 { margin: 0 0 var(--s-2); color: #fff; font-size: clamp(1.9rem, 1.15rem + 3vw, 3.15rem); line-height: 1.02; letter-spacing: -0.02em; } .hero .lede { color: rgba(255, 255, 255, 0.78); font-size: var(--t-md); margin: 0 0 var(--s-4); max-width: 46rem; } .hero form.search { margin: 0; } .lede-more { display: none; } /* Рядок фактів під пошуком: кожен — посилання. «Все має бути клікабельним». */ .hero-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0 0; font-size: var(--t-xs); color: rgba(255, 255, 255, 0.62); } .hero-facts a, .hero-facts span { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(255, 255, 255, 0.78); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding-bottom: 1px; } .hero-facts a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.7); } .hero-facts b { font-family: var(--font-mono); font-weight: 600; color: #fff; } /* ── ПОШУК ───────────────────────────────────────────────────────────────── */ form.search { display: flex; gap: var(--s-2); align-items: stretch; margin: var(--s-3) 0; } form.search .search-field { flex: 1 1 auto; min-width: 0; } form.search .btn, form.search button { flex: 0 0 auto; white-space: nowrap; } .search-field { position: relative; display: block; } .search-field .i { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } form.search input[type="search"] { width: 100%; min-height: 3.1rem; padding: var(--s-3) var(--s-4) var(--s-3) 2.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); /* Рівно 16px: менший розмір змушує Safari зумити сторінку на фокусі. */ font-size: var(--t-md); background: #fff; box-shadow: var(--shadow); -webkit-appearance: none; } form.search input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } form.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* ── КНОПКИ ──────────────────────────────────────────────────────────────── */ button, .btn { min-height: var(--tap); padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-ctrl); background: var(--accent); color: #fff; font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 650; letter-spacing: -0.008em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 6px rgba(163, 24, 43, 0.25); transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease; } button:hover, .btn:hover { background: var(--accent-strong); color: #fff; } .btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: var(--r-ctrl); } a.btn { text-decoration: none; } .btn.ghost { background: var(--card); color: var(--fg); border: 1px solid var(--line-strong); box-shadow: var(--shadow); } .btn.ghost:hover { background: #fff; color: var(--accent); border-color: var(--accent); } .small-btn { min-height: 2rem; padding: var(--s-1) var(--s-3); font-size: var(--t-xs); } /* ── ЧИПИ ────────────────────────────────────────────────────────────────── */ .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.45rem 0 0; } .chip { font-size: var(--t-xs); line-height: 1.4; padding: 0.25rem 0.55rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--fg-2); display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; text-decoration: none; transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease; } .chip .i { color: var(--muted); } .chip-soft { background: var(--bg-sunk); border-color: transparent; } a.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } a.chip:hover .i { color: var(--accent); } /* Бейджі: рівень довіри читається формою рамки, а не лише кольором. */ .chip.badge-cvr_verified { border-color: var(--ok); color: var(--ok); font-weight: 650; background: var(--ok-soft); } .chip.badge-cvr_verified .i { color: var(--ok); } .chip.badge-documented { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 650; } .chip.badge-documented .i { color: #fff; } .chip.badge-declared { border-style: dashed; } /* Гіпотеза, а не верифікація: пунктир і приглушений колір, щоб її не сплутати зі звіреним із реєстром бейджем. */ .chip.badge-heuristic { border-style: dotted; color: var(--muted); } .chip.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); } .chip.warn .i { color: var(--warn); } .chip.ok { border-color: var(--ok); color: var(--ok); } .chip.ok .i { color: var(--ok); } /* ── ПЛИТКИ ГОТОВИХ СПИСКІВ ──────────────────────────────────────────────── */ .tile { display: flex; align-items: center; gap: 0.55rem; min-height: 3rem; padding: 0.5rem 0.75rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); text-decoration: none; color: var(--fg); font-size: var(--t-sm); font-weight: 560; line-height: 1.2; box-shadow: var(--shadow), var(--edge); transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; } .tile:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); color: var(--fg); transform: translateY(-1px); } .tile.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-lift); } .tile.on .tile-icon { background: rgba(255, 255, 255, 0.18); color: #fff; } .tile.on .tile-text span { color: rgba(255, 255, 255, 0.85); } .tile-icon { width: 1.9rem; height: 1.9rem; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; } .tile-icon .i { width: 1.1rem; height: 1.1rem; } .tile-text { min-width: 0; } .tile-text b { display: block; font-weight: 600; line-height: 1.2; } /* Лічильник просто В КНОПЦІ: зліва у фасетах числа є, а на плитках їх не було — і плитка нічого не обіцяла. */ .tile-text span { display: block; font-size: var(--t-xs); color: var(--muted); font-family: var(--font-mono); letter-spacing: -0.02em; } .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.5rem 0 1rem; } /* Смужка підборок: на телефоні гортається пальцем, на десктопі згортається в
. ЖОДНОГО max-height з overflow:hidden — саме він різав другий ряд плиток навпіл, і плитки «налазили» на видачу. */ .strip { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: var(--s-1) 0 var(--s-3); margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); } .strip::-webkit-scrollbar { display: none; } .strip > * { scroll-snap-align: start; flex: 0 0 auto; } .strip .tile { min-height: 0; padding: var(--s-2) var(--s-3); max-width: 16rem; } .strip .tile .tile-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 56rem) { /* На широкому екрані плитки переносяться в кілька рядів — гортати мишею горизонтальний список незручно, а частина плиток просто не видно. ЖОДНОГО max-height: обрізаний ряд плиток і був той «наїзд кнопок». */ .strip { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } .strip .tile { max-width: none; } } /* ── КАРТКА КОМПАНІЇ ─────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); padding: var(--s-3) var(--s-4) var(--s-3); margin: var(--s-2) 0; position: relative; box-shadow: var(--shadow), var(--edge); transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-1px); } .card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .card h3 { margin: 0 0 0.2rem; padding-right: var(--s-6); font-family: var(--font-ui); font-size: var(--t-lg); line-height: 1.25; font-weight: 700; letter-spacing: -0.018em; } /* Назва — чорнилом, не акцентом: коли двадцять заголовків поспіль кольорові, акцент перестає бути акцентом. Колір лишається наведенню. */ .card h3 a { text-decoration: none; color: var(--fg); } .card:hover h3 a { color: var(--accent); } /* Уся картка — одна ціль дотику. Текст усередині лишається виділюваним. */ .card h3 a::after { content: ""; position: absolute; inset: 0; } .card .chips a, .card .actions a, .card .meta a, .card .card-cvr a { position: relative; z-index: 1; } .card-row { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; } .avatar { width: 2.6rem; height: 2.6rem; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: var(--t-sm); letter-spacing: -0.02em; flex: none; /* Один акцент і кілька щаблів світлості замість двадцяти пастельних квадратів у видачі: картки різняться змістом, а не кольором. */ background: linear-gradient(160deg, var(--accent-soft), #fff); color: var(--accent-ink); border: 1px solid var(--line); font-family: var(--font-display); overflow: hidden; box-shadow: var(--edge); } .avatar img { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; } .avatar.on-dark img { background: #17181a; } .avatar-lg { width: 3.6rem; height: 3.6rem; border-radius: 12px; font-size: var(--t-lg); } .card .meta { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.45; min-width: 0; } .card .meta > span, .card .meta > a { display: flex; align-items: center; gap: 0.35rem; min-width: 0; color: var(--fg-2); text-decoration: none; } .card .meta > a:hover { color: var(--accent); } .card .meta .clamp { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .meta .i { color: var(--muted); } /* Рядок реєстру в картці: CVR моноширинним — його звіряють знак за знаком. */ .card-cvr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin-top: 0.3rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); } .card-cvr a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line-strong); } .card-cvr a:hover { color: var(--accent); border-bottom-color: var(--accent); } .card-go { position: absolute; right: 0.7rem; top: 0.9rem; color: var(--line-strong); transition: color 0.16s ease, transform 0.16s ease; } .card:hover .card-go { color: var(--accent); transform: translateX(2px); } .facts-row { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 0.4rem; font-size: var(--t-xs); color: var(--muted); } .facts-row span, .facts-row a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); text-decoration: none; } .facts-row a:hover { color: var(--accent); } .rating { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--t-sm); font-weight: 650; color: var(--fg); } .rating .i { color: var(--star); fill: var(--star); } .card .logo { max-height: 2rem; max-width: 7rem; margin-bottom: 0.4rem; object-fit: contain; } .logo-big { max-height: 3rem; max-width: 11rem; margin: 0.75rem 0 0; object-fit: contain; } .logo-big[src*="-on-dark"], .card .logo[src*="-on-dark"] { background: #17181a; padding: 0.35rem; border-radius: var(--r-ctrl); } /* ── СІТКА ВИДАЧІ. Колонки, а не grid ───────────────────────────────────── У grid сусідні картки стоять у спільному рядку, тож картка з трьома бейджами розтягує порожню половину сусідній. Колонки (CSS multicol) дають кожній картці рівно її висоту — і між ними не лишається дір. */ .grid { columns: 1; column-gap: var(--s-3); } .grid .card { break-inside: avoid; margin: 0 0 var(--s-3); } /* ── ПАНЕЛЬ НАД ВИДАЧЕЮ ──────────────────────────────────────────────────── */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); } .toolbar > p { font-size: var(--t-sm); margin: 0; } .toolbar > p strong { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 600; color: var(--fg); } .controls { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding-top: var(--s-2); } .controls > label, .controls > a { font-size: var(--t-xs); color: var(--muted); } .controls label { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; } /* На телефоні «на сторінці» зайве: типових 20 достатньо, далі пагінатор. */ @media (max-width: 559px) { .controls label.aux-per { display: none; } } .controls select { min-height: 2.25rem; padding: var(--s-1) var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); background: var(--card); font: 600 var(--t-xs) / 1 var(--font-ui); color: var(--fg); box-shadow: var(--shadow); } /* Вивантаження даних — не наша функція: повний експорт із фільтрами є в soge.dk, і посилання веде туди, а не вдає власний CSV. */ .controls .out { margin-left: auto; } .controls .out a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line-strong); } .controls .out a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Сегментний перемикач виду: одна група, а не три окремі кнопки. */ .views { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-sunk); border-radius: var(--r-pill); font-size: var(--t-sm); box-shadow: inset 0 1px 2px rgba(60, 42, 20, 0.07); } .views a { min-height: 2.25rem; padding: 0 var(--s-3); display: inline-flex; align-items: center; gap: var(--s-1); border-radius: var(--r-pill); text-decoration: none; color: var(--fg-2); font-weight: 600; transition: background 0.14s ease, color 0.14s ease; } .views a:hover { color: var(--fg); } .views a[aria-current="page"] { background: var(--card); color: var(--accent); box-shadow: var(--shadow); } .view-label { display: none; } /* ── СМУЖКА ЗАСТОСОВАНОГО ────────────────────────────────────────────────── */ .applied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: var(--s-3) 0 var(--s-2); padding: var(--s-2) var(--s-3); background: var(--accent-soft); border: 1px solid rgba(163, 24, 43, 0.18); border-radius: var(--r-box); } .applied .applied-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--accent-ink); margin-right: 0.15rem; } /* Кожен фільтр знімається окремо — хрестик усередині самого чипа. */ .applied a.chip { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; padding-right: 0.35rem; } .applied a.chip .i { color: rgba(255, 255, 255, 0.75); } .applied a.chip:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .applied a.chip:hover .i { color: #fff; } .applied .clear { margin-left: auto; color: var(--accent-ink); font-size: var(--t-xs); font-weight: 650; text-decoration: none; border-bottom: 1px solid currentColor; } /* ── ФАСЕТИ ──────────────────────────────────────────────────────────────── */ .layout { display: grid; gap: 1.25rem; align-items: start; } .layout > .results { min-width: 0; } .facets { font-size: var(--t-sm); } /* ── Група фасетів. Дванадцять розгорнутих груп = сайдбар удвічі довший за видачу; згорнуті — видно ВСІ назви груп, тобто видно, що фільтрів більше, ніж поміщається. ── */ .facet-group { border-bottom: 1px solid var(--line); } .facet-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.45rem; min-height: 2.6rem; padding: 0.25rem 0.3rem; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; border-radius: var(--r-ctrl); } .facet-group > summary::-webkit-details-marker { display: none; } .facet-group > summary:hover { color: var(--fg); background: var(--bg-sunk); } .facet-group > summary .facet-title { flex: 1 1 auto; min-width: 0; } .facet-group > summary .count { font-weight: 600; } .facet-group > summary .chev { flex: none; color: var(--line-strong); transition: transform 0.16s ease; } .facet-group[open] > summary .chev { transform: rotate(180deg); } /* Група з вибраним значенням має бути помітною і згорнутою теж. */ .facet-group:has(a.on) > summary { color: var(--accent); } .facet-group > ul { padding-bottom: 0.4rem; } .facets ul { list-style: none; margin: 0; padding: 0; } .facets li { margin: 0; } .facets a { position: relative; text-decoration: none; color: var(--fg-2); display: flex; gap: var(--s-2); min-height: 2.2rem; align-items: center; padding: 0.2rem 0.5rem; border-radius: var(--r-ctrl); } .facets a:hover { background: var(--bg-sunk); color: var(--fg); } .facets .tick { opacity: 0; color: var(--muted); flex: none; margin-right: calc(var(--s-1) * -1); transition: opacity 0.12s ease; } .facets a:hover .tick { opacity: 0.5; } .facets a.on .tick { opacity: 1; color: #fff; } .facets .facet-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .facets .count { flex: none; margin-left: auto; color: var(--muted); font-size: var(--t-xs); } /* Вибране значення заливається акцентом: у сайдбарі з дев'яти груп інакше не видно, що саме ввімкнено. */ .facets a.on { font-weight: 650; color: #fff; background: var(--accent); box-shadow: var(--shadow); } .facets a.on:hover { background: var(--accent-strong); color: #fff; } .facets a.on .count { color: rgba(255, 255, 255, 0.8); } .facets .facet-more > summary { list-style: none; cursor: pointer; color: var(--accent); font-size: var(--t-sm); font-weight: 600; min-height: 2.2rem; display: flex; align-items: center; padding-left: 0.5rem; } .facets details > summary::-webkit-details-marker { display: none; } .facet-head { display: flex; align-items: center; gap: 0.4rem; } /* Шторка фільтрів на телефоні. Вмикає ui.js; без JS фасети лишаються звичайним блоком під результатами — сторінка працює повністю. */ body.js .filters { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 1rem calc(5rem + var(--safe-b)); transform: translateY(100%); transition: transform 0.22s ease; visibility: hidden; } body.js .filters.open { transform: none; visibility: visible; } .filters-head { position: sticky; top: 0; background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); z-index: 2; } .filters-head strong { font-size: var(--t-md); font-family: var(--font-display); } .sheet-close { background: var(--card); color: var(--fg); border: 1px solid var(--line); min-width: var(--tap); min-height: var(--tap); border-radius: var(--r-pill); font-size: var(--t-lg); padding: 0; box-shadow: var(--shadow); } .filters-apply { position: fixed; left: 0; right: 0; bottom: 0; padding: 0.75rem 1rem calc(0.75rem + var(--safe-b)); background: var(--card); border-top: 1px solid var(--line); display: none; } body.js .filters.open .filters-apply { display: block; } .filters-apply .btn { width: 100%; } /* Нижній док на телефоні: фільтри + вид. Головний елемент керування. */ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255, 253, 248, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); display: none; gap: 0.5rem; padding: 0.5rem calc(0.75rem + var(--safe-r)) calc(0.5rem + var(--safe-b)) calc(0.75rem + var(--safe-l)); } body.js .dock { display: flex; } .dock .btn { flex: 1; min-height: var(--tap); font-size: var(--t-sm); } .dock .count-badge { background: #fff; color: var(--accent); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; padding: 0 0.4rem; min-width: 1.25rem; } body.js main.wrap { padding-bottom: calc(var(--tap) + 1.5rem + var(--safe-b)); } /* ── ПЛАВАЮЧА КНОПКА ФІЛЬТРІВ (десктоп) ────────────────────────────────────── Фільтри ховаються кнопкою в шапці сайдбара, а повертаються цією — вона висить над сторінкою й показує, скільки фільтрів застосовано. Без неї «сховати» було б дорогою в один бік. */ .fab { position: fixed; left: calc(1rem + var(--safe-l)); bottom: calc(1.25rem + var(--safe-b)); z-index: 45; display: none; align-items: center; gap: 0.5rem; min-height: 2.9rem; padding: 0 1rem; border-radius: var(--r-pill); background: var(--ink); color: #fff; border: 0; font-size: var(--t-sm); font-weight: 650; box-shadow: var(--shadow-pop); } .fab:hover { background: var(--ink-2); color: #fff; } .fab .count-badge { background: var(--accent); color: #fff; border-radius: var(--r-pill); padding: 0 0.4rem; font-family: var(--font-mono); font-size: var(--t-xs); } .facets-toggle { background: none; border: 0; color: var(--muted); font-size: var(--t-xs); font-weight: 600; min-height: 2rem; padding: 0 0.35rem; display: none; box-shadow: none; } .facets-toggle:hover { background: none; color: var(--accent); } /* ── СПИСОК. Не таблиця з реєстру, а читабельні рядки ───────────────────────── Було: п'ять колонок дрібним сірим, назва підкреслена синім, нічого не вирівняне — «паскудно й нечитабельно». Тепер це рядки картотеки: назва великою, під нею CVR і адреса моноширинним, праворуч числа, увесь рядок — одна ціль дотику. */ .list-rows { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--card); overflow: hidden; box-shadow: var(--shadow), var(--edge); } .list-row { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0.15rem 0.75rem; align-items: center; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); transition: background 0.12s ease; } .list-row:first-child { border-top: 0; } .list-row:hover { background: var(--accent-soft); } .list-row .avatar { width: 2.2rem; height: 2.2rem; font-size: var(--t-xs); } .list-main { min-width: 0; } .list-name { font-weight: 700; font-size: var(--t-md); letter-spacing: -0.015em; color: var(--fg); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-name::after { content: ""; position: absolute; inset: 0; } .list-row:hover .list-name { color: var(--accent); } .list-sub { display: flex; flex-wrap: wrap; gap: 0.1rem 0.7rem; font-size: var(--t-xs); color: var(--muted); margin-top: 0.1rem; } .list-sub .cvr { font-family: var(--font-mono); } .list-sub .clamp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; } .list-where { display: none; } .list-num { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-2); white-space: nowrap; } .list-num .rating { font-size: var(--t-sm); } .list-head { display: none; grid-template-columns: auto 1fr auto; gap: 0.75rem; padding: var(--s-2) var(--s-4); background: var(--bg-sunk); border-bottom: 1px solid var(--line); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--muted); } /* ── МАПА ────────────────────────────────────────────────────────────────── */ .map-box { position: relative; } #map { height: calc(100dvh - 16rem); min-height: 24rem; border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; box-shadow: var(--shadow); } /* «Розгорнути мапу» — на весь екран. Мапа на чверть екрана в каталозі з 873 тисячами точок не показує нічого. */ .map-full { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: 0; margin: 0; } .map-full #map { height: 100dvh; min-height: 0; border: 0; border-radius: 0; } .map-tools { position: absolute; left: 0.6rem; top: 0.6rem; z-index: 5; display: flex; gap: 0.4rem; } .map-tools .btn { min-height: 2.2rem; padding: 0 0.7rem; font-size: var(--t-xs); background: rgba(255, 253, 248, 0.94); color: var(--fg); border: 1px solid var(--line-strong); box-shadow: var(--shadow); } .map-tools .btn:hover { background: #fff; color: var(--accent); } /* ── ПАГІНАТОР ───────────────────────────────────────────────────────────── */ .pager { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.25rem 0; align-items: center; } .pager a, .pager span.page { min-height: 2.6rem; min-width: 2.6rem; padding: 0 0.6rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--card); text-decoration: none; color: var(--fg-2); font-variant-numeric: tabular-nums; box-shadow: var(--shadow); } .pager a:hover { border-color: var(--accent); color: var(--accent); } .pager span.page[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; } .pager .gap { color: var(--muted); align-self: center; padding: 0 0.15rem; } /* ── ПОРОЖНЯ ВИДАЧА ──────────────────────────────────────────────────────── */ .empty { text-align: center; padding: 2.5rem 1rem; background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--r-box); color: var(--fg-2); } .empty .i { color: var(--muted); margin-bottom: 0.5rem; } .empty .btn { margin-top: 0.75rem; } /* ── ПОВІДОМЛЕННЯ ────────────────────────────────────────────────────────── */ .notice { border: 1px solid var(--line); border-left: 3px solid var(--warn); background: var(--warn-soft); padding: 0.7rem 0.9rem; border-radius: var(--r-box); margin: 1rem 0; font-size: var(--t-sm); box-shadow: var(--shadow); } .notice.info { border-left-color: var(--accent); background: var(--accent-soft); border-color: rgba(163, 24, 43, 0.18); } .notice.warn-notice { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); } .warn-text { color: var(--warn); display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-2); } /* ── РЯДКИ-РЕЄСТР (галузі, списки, сесії) ────────────────────────────────── */ .rows { display: grid; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; box-shadow: var(--shadow), var(--edge); } .rows > a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); min-height: var(--tap); text-decoration: none; color: var(--fg); border-top: 1px solid var(--line); transition: background 0.14s ease; } .rows > a:first-child { border-top: 0; } .rows > a:hover { background: var(--accent-soft); color: var(--accent-ink); } .rows > a .i { color: var(--accent-mid); flex: none; } .rows > a .row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rows > a .row-num { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); flex: none; } /* Рядок із поясненням, а не з числом: текст мусить переноситись, інакше половина пояснення зникає в трикрапку. */ .rows.rows-wrap > a { align-items: flex-start; } .rows.rows-wrap > a .row-name { white-space: normal; overflow: visible; line-height: 1.4; } .rows.rows-wrap > a .i { margin-top: 0.15rem; } .row-static { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); min-height: var(--tap); } .row-static:first-child { border-top: 0; } .row-static .row-name { flex: 1 1 auto; min-width: 0; } .row-static .i { color: var(--accent-mid); flex: none; } /* ── ТАБЛИЦІ ─────────────────────────────────────────────────────────────── */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.people { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: 0.5rem 0; } table.people th { text-align: left; font-weight: 700; color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.5rem 0.3rem 0; } table.people td { padding: 0.55rem 0.5rem 0.55rem 0; border-top: 1px solid var(--line); vertical-align: top; } table.people thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; border-bottom: 1px solid var(--line-strong); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; } table.rows { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-4); font-size: var(--t-sm); display: table; background: none; border: 0; border-radius: 0; box-shadow: none; } table.rows td { padding: var(--s-2) 0; border-top: 1px solid var(--line); vertical-align: top; } table.rows tr:first-child td { border-top: 0; } table.rows td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg-2); } /* ── СТОРІНКА КОМПАНІЇ ───────────────────────────────────────────────────── */ .company-hero { position: relative; overflow: hidden; background: radial-gradient(120% 150% at 100% 0%, rgba(195, 59, 75, 0.42) 0%, transparent 56%), radial-gradient(90% 130% at 0% 100%, rgba(26, 74, 99, 0.5) 0%, transparent 62%), var(--ink); color: #fff; border-radius: var(--r-box); padding: var(--s-4); margin: var(--s-4) 0; box-shadow: var(--shadow-lift); } .company-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45; background-image: repeating-linear-gradient(74deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 9px), repeating-linear-gradient(-74deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 13px); mask-image: radial-gradient(110% 100% at 100% 0%, #000 8%, transparent 70%); -webkit-mask-image: radial-gradient(110% 100% at 100% 0%, #000 8%, transparent 70%); } .company-hero > * { position: relative; z-index: 1; } .company-hero h1 { color: #fff; margin: 0 0 var(--s-1); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.06; } .company-hero-main { display: flex; align-items: flex-start; gap: var(--s-3); } .company-sub { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-2); color: rgba(255, 255, 255, 0.8); font-size: var(--t-sm); } .company-sub a { color: rgba(255, 255, 255, 0.92); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.28); } .company-sub a:hover { color: #fff; border-bottom-color: #fff; } .company-hero .chip { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.92); } .company-hero .chip .i { color: rgba(255, 255, 255, 0.72); } .company-hero a.chip:hover { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.45); } .company-hero .chip.badge-cvr_verified { background: #fff; border-color: #fff; color: var(--ok); font-weight: 700; } .company-hero .chip.badge-cvr_verified .i { color: var(--ok); } .company-hero .chip.badge-documented { background: var(--ok); border-color: var(--ok); color: #fff; } .company-hero .chip.ok { border-color: rgba(255, 255, 255, 0.5); color: #fff; background: rgba(255, 255, 255, 0.08); } .company-hero .chip.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); } .company-hero .avatar { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.12); color: #fff; } .company-hero .actions { margin: var(--s-3) 0 0; } .company-hero .btn.ghost { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; } .company-hero .btn.ghost:hover { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: rgba(255, 255, 255, 0.5); } .company-hero .actions .btn:nth-child(n + 3) { flex: 1 1 6rem; font-size: var(--t-xs); min-height: 2.5rem; } .company-head { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.75rem; } .company-head h1 { margin: 0; } .company-layout { display: grid; gap: var(--s-6); align-items: start; } .company-main { min-width: 0; } .lede { font-size: var(--t-md); line-height: 1.65; color: var(--fg-2); margin: 0 0 var(--s-4); max-width: 42rem; } .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; } .actions .btn { flex: 1 1 8rem; } /* Довідкова панель: рамка й лінії замість вкладених карток. */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); box-shadow: var(--shadow), var(--edge); } .panel-title { font-family: var(--font-ui); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; margin: 0 0 var(--s-2); display: flex; align-items: center; gap: 0.4rem; } .panel-title .i { color: var(--accent-mid); } /* Джерело даних панелі — дрібним, під заголовком: у довіднику завжди має бути видно, ЗВІДКИ рядок, інакше йому нема віри. */ .panel-source { font-size: var(--t-xs); color: var(--muted); margin: calc(var(--s-1) * -1) 0 var(--s-2); } .panel-source a { color: var(--muted); border-bottom: 1px dotted var(--line-strong); text-decoration: none; } .panel-source a:hover { color: var(--accent); border-bottom-color: var(--accent); } dl.facts { display: block; margin: 0; } dl.facts .fact { display: grid; grid-template-columns: minmax(6rem, 40%) 1fr; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); } dl.facts .fact:first-child { border-top: 0; padding-top: 0; } dl.facts dt { color: var(--muted); margin: 0; font-size: var(--t-sm); } dl.facts dd { margin: 0; overflow-wrap: anywhere; } dl.facts dd a { text-decoration: none; border-bottom: 1px solid var(--accent-soft); } dl.facts dd a:hover { border-bottom-color: var(--accent); } /* Друге посилання в рядку («де ще подивитись») — дрібним і сірим, щоб не сперечалось із самим значенням. */ .fact-aside { display: inline-flex; align-items: center; gap: 0.2rem; font-size: var(--t-xs); color: var(--muted); margin-left: 0.4rem; white-space: nowrap; } .fact-aside a { color: var(--muted); border-bottom: 1px dotted var(--line-strong) !important; } .fact-aside a:hover { color: var(--accent); border-bottom-color: var(--accent) !important; } /* ── СОЦМЕРЕЖІ ───────────────────────────────────────────────────────────── */ .socials { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s-2); } .socials a { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg-2); box-shadow: var(--shadow), var(--edge); transition: transform 0.14s ease, color 0.14s ease, border-color 0.14s ease, background 0.14s ease; } .socials a .i { width: 1.15rem; height: 1.15rem; } .socials a:hover { transform: translateY(-2px); border-color: currentColor; background: #fff; } /* Фірмові кольори — лише на наведенні: у спокої ряд іконок одного тону читається як один елемент, а не як шість чужих логотипів. */ .socials a[data-net="facebook"]:hover { color: #1877f2; } .socials a[data-net="instagram"]:hover { color: #d62976; } .socials a[data-net="linkedin"]:hover { color: #0a66c2; } .socials a[data-net="youtube"]:hover { color: #ff0000; } .socials a[data-net="tiktok"]:hover { color: #000; } .socials a[data-net="telegram"]:hover { color: #229ed9; } .socials a[data-net="x"]:hover { color: #000; } .socials a[data-net="whatsapp"]:hover { color: #25d366; } .socials a[data-net="messenger"]:hover { color: #a334fa; } .socials a[data-net="pinterest"]:hover { color: #e60023; } /* ── ГАЛЕРЕЯ ─────────────────────────────────────────────────────────────── */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; margin: 0.5rem 0; } .gallery img { width: 100%; height: 6.5rem; object-fit: cover; border-radius: var(--r-ctrl); } /* Плитка — посилання на повний розмір. Тінь усередину, щоб світле фото не зливалося з кремовою карткою: рамку тут малювати важче, ніж притінити край. */ .gallery .shot { display: block; position: relative; border-radius: var(--r-ctrl); overflow: hidden; } .gallery .shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(23 20 15 / 0.10), inset 0 -2rem 2rem -2rem rgb(23 20 15 / 0.22); } .gallery .shot img { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); } .gallery .shot:hover img { transform: scale(1.04); } /* ── ОБКЛАДИНКА Й НАВІГАЦІЯ СТОРІНКИ КОМПАНІЇ ───────────────────────────── */ /* Що робить із картки довідника сторінку самої компанії: широке фото зверху і навігація по тому, що власник заповнив. Обидва є ЛИШЕ в заповнених профілів — порожній банер гірший за його відсутність. */ .company-cover { position: relative; margin: 0 0 calc(var(--s-6) * -1); border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; /* Висота, а не aspect-ratio: на широкому екрані пропорція 16/5 давала банер на 400 px, і назва з кнопками йшла нижче першого екрана. Обкладинка має задавати настрій, а не займати сторінку. */ height: clamp(140px, 20vw, 280px); } .company-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Затемнення знизу: шапка лягає на фото, і без нього її текст читається лише на світлих знімках. Градієнт, а не суцільна плівка, щоб фото лишалось фото. */ .company-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(23 20 15 / 0) 40%, rgb(23 20 15 / 0.55) 100%); } .company-hero.has-cover { border-radius: 0 0 var(--r-card) var(--r-card); position: relative; } .company-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: var(--s-4) 0 var(--s-2); } .company-nav a { padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: var(--t-sm); text-decoration: none; box-shadow: 0 1px 2px rgb(23 20 15 / 0.05); } .company-nav a:hover { border-color: var(--accent); color: var(--accent); } /* Щоб клік по якорю не ховав заголовок під липкою шапкою. */ .company-main [id], .panel[id] { scroll-margin-top: 5rem; } @media (max-width: 640px) { .company-cover { height: clamp(110px, 34vw, 170px); border-radius: var(--r-card) var(--r-card) 0 0; } /* Навігація в один рядок із прокруткою: у два-три ряди чипів вона з'їдає весь перший екран телефона. */ .company-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); } .company-nav::-webkit-scrollbar { display: none; } .company-nav a { white-space: nowrap; } } /* ── ЗОБРАЖЕННЯ В РЕДАКТОРІ ПРОФІЛЮ ─────────────────────────────────────── */ .media-edit { display: grid; gap: 0.9rem; margin-top: 1rem; } .media-add { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; padding: 0.7rem; border: 1px dashed var(--line); border-radius: var(--r-ctrl); background: var(--bg-sunk); } .media-add label { flex: 1 1 14rem; } .media-item { display: grid; gap: 0.5rem; padding: 0.9rem 0; border-top: 1px solid var(--line); } .media-item label { max-width: 28rem; } /* Лого поруч із кнопкою, а не стовпчиком: рядок читається як «ось воно, ось що з ним можна зробити». */ .media-row { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1rem; } .media-logo { max-width: 12rem; max-height: 5rem; border-radius: var(--r-ctrl); } .media-focus picture { display: block; } .media-actions { display: flex; gap: 0.5rem; align-items: center; } /* Точка інтересу. Курсор-хрестик каже, що клікати треба по картинці, а не шукати ручки на рамці — без цього люди просто не здогадуються. */ .media-focus { position: relative; display: inline-block; max-width: 28rem; cursor: crosshair; } .media-focus img { display: block; width: 100%; border-radius: var(--r-ctrl); } .media-dot { position: absolute; width: 1.1rem; height: 1.1rem; margin: -0.55rem 0 0 -0.55rem; border-radius: 50%; border: 2px solid #fff; background: var(--accent); box-shadow: 0 0 0 1px rgb(23 20 15 / 0.35), 0 2px 6px rgb(23 20 15 / 0.4); pointer-events: none; } /* ── «СХОЖІ» ─────────────────────────────────────────────────────────────── */ .rail { display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0.15rem 0.15rem 0.6rem; margin: 0 -0.15rem; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > .card { flex: 0 0 76%; scroll-snap-align: start; margin: 0; } /* ── СТАТИСТИКА ──────────────────────────────────────────────────────────── */ .kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0.75rem 0 1.5rem; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); padding: 0.8rem 0.9rem; box-shadow: var(--shadow), var(--edge); } .kpi strong { display: block; font-family: var(--font-mono); font-size: var(--t-xl); letter-spacing: -0.03em; margin-top: 0.35rem; font-variant-numeric: tabular-nums; } .bars { display: grid; gap: 0.15rem; } .bar-row { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0.5rem; border-radius: var(--r-ctrl); text-decoration: none; color: var(--fg-2); font-size: var(--t-sm); } .bar-row:hover { background: var(--bg-sunk); color: var(--fg); } .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { height: 8px; background: var(--bg-sunk); border-radius: var(--r-pill); overflow: hidden; } .bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-mid)); border-radius: var(--r-pill); min-width: 2px; } .bar-num { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--muted); min-width: 4.5rem; text-align: right; } /* ── ФОРМИ ───────────────────────────────────────────────────────────────── */ fieldset { border: 1px solid var(--line); border-radius: var(--r-box); padding: 0.75rem 1rem; margin: 0; background: var(--card); } legend { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; padding: 0 0.3rem; } fieldset label { display: block; margin: 0.65rem 0; } label.inline { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0.9rem 0.35rem 0; min-height: 2.2rem; } label.inline input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); } .checks { display: flex; flex-wrap: wrap; } input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea, select { width: 100%; min-height: var(--tap); padding: 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); font: inherit; font-size: var(--t-md); background: #fff; -webkit-appearance: none; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } textarea { min-height: 7rem; } .auth { max-width: 26rem; margin: var(--s-8) auto; } .account { max-width: 48rem; margin: 0 auto; } .stack { display: grid; gap: var(--s-3); margin: var(--s-4) 0; } .field { display: grid; gap: var(--s-1); } .field > span { font-size: var(--t-sm); color: var(--fg-2); } .field input { min-height: 3rem; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); font: 500 var(--t-md) / 1.2 var(--font-ui); background: var(--card); } .field input[autocomplete="one-time-code"] { font-family: var(--font-mono); font-size: var(--t-xl); letter-spacing: 0.24em; text-align: center; } /* Пастка для ботів. Не display:none: частина ботів такі поля пропускає. */ .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .auth-alt { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); } .inline-form { margin: 0; } /* ── ПОЯСНЕННЯ / ДЕТАЛІ ──────────────────────────────────────────────────── */ details.explain { margin: 0.5rem 0 1rem; font-size: var(--t-sm); } details.explain summary { cursor: pointer; color: var(--accent); min-height: 2.2rem; display: flex; align-items: center; font-weight: 600; } details.explain-hero { margin-top: calc(var(--s-2) * -1); margin-bottom: var(--s-4); } details.explain-hero summary { font-size: var(--t-xs); } ul.xlinks { list-style: none; padding: 0; margin: 0.25rem 0 1rem; } ul.xlinks li { padding: 0.45rem 0; border-top: 1px solid var(--line); } ul.xlinks li:first-child { border-top: 0; } ul.xlinks a { text-decoration: none; font-weight: 600; } ul.xlinks a:hover { text-decoration: underline; } pre.json { background: #1b1815; color: #ddd6c8; padding: 1rem; border-radius: var(--r-box); overflow: auto; font: 13px/1.55 var(--font-mono); max-height: 70vh; } pre.json .key { color: #e8a87c; } pre.json .str { color: #b9cf9d; } pre.json .num { color: #e5c07b; } pre.json .bool { color: #e58b8b; } pre.json .null { color: #8b8579; } /* ── ПІДВАЛ ──────────────────────────────────────────────────────────────── */ footer.site { margin: var(--s-12) 0 0; padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted); background: linear-gradient(180deg, transparent, rgba(234, 228, 216, 0.6)); } .footnav { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-bottom: 0.75rem; } .footnav a { min-height: 2.2rem; display: inline-flex; align-items: center; color: var(--fg-2); text-decoration: none; } .footnav a:hover { color: var(--accent); text-decoration: underline; } /* ═══ ПЛАНШЕТ ═══ */ @media (min-width: 40rem) { .hero { padding: var(--s-12) var(--s-8) var(--s-8); } .lede-more { display: inline; } .grid { columns: 2; } .gallery { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } .gallery img { height: 8rem; } .rail > .card { flex: 0 0 48%; } .controls label { font-size: var(--t-sm); } .views a { padding: 0 0.9rem; gap: 0.4rem; } .view-label { display: inline; } .company-hero .chip-lang { display: inline-flex; } .list-head { display: grid; } .list-row { grid-template-columns: auto 1fr auto; padding: var(--s-3) var(--s-4); } } /* ═══ ДЕСКТОП: фасети ліворуч, шторка й док не потрібні ═══ */ @media (min-width: 56rem) { .topnav { display: flex; } .layout { grid-template-columns: 16rem minmax(0, 1fr); gap: 1.75rem; } .layout > .facets { order: -1; position: sticky; top: 4.5rem; max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; padding-right: 0.4rem; /* Згасання внизу: без нього обрізаний список виглядає як кінець фільтрів, а не як «прокрути далі». */ mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent 100%); } .layout > .facets:hover { mask-image: none; -webkit-mask-image: none; } /* Сайдбар фільтрів ховається кнопкою — тоді видача займає всю ширину. */ body.no-facets .layout { grid-template-columns: minmax(0, 1fr); } body.no-facets .layout > .facets { display: none; } body.js.no-facets .fab { display: inline-flex; } .facets-toggle { display: inline-flex; } /* ⚠️ Це правило йде ПІСЛЯ `.layout > .facets` і раніше затирало йому position:sticky на `static` — сайдбар переставав бути липким, а його власна шапка «Фільтри» липла до вікна й налазила на шапку сайту. Тому липкість задається саме тут. */ body.js .filters { position: sticky; /* ⚠️ `inset: auto` мусить стояти ПЕРЕД `top` — інакше скорочення затирає щойно задану прив'язку назад у `auto`, і липкість тихо не працює: позиція sticky є, а прив'язки немає. */ inset: auto; top: 4.5rem; transform: none; visibility: visible; max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; padding: 0 0.4rem 0 0; background: none; } /* На десктопі шапка сайдбара — просто підпис, а не липка панель шторки. */ .filters-head { position: static; border-bottom: 1px solid var(--line); padding: 0 0 var(--s-2); } .filters-apply, body.js .dock, .sheet-close { display: none; } body.js main.wrap { padding-bottom: 0; } header.site { position: sticky; } .tiles { grid-template-columns: repeat(4, 1fr); } .kpis { grid-template-columns: repeat(4, 1fr); } .company-layout { grid-template-columns: minmax(0, 1fr) 21rem; } .company-aside { position: sticky; top: 5rem; } .company-hero { padding: var(--s-6) var(--s-8); } /* Дії в шапці компанії на широкому екрані НЕ розтягуються на всю ширину: чотири кнопки по 370 px читаються як чотири однакові головні дії. */ .company-hero .actions .btn { flex: 0 1 auto; min-width: 10rem; } .rail { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; } .rail > .card { flex: none; } #map { height: calc(100dvh - 11rem); } .rows.two { grid-template-columns: 1fr 1fr; } .rows.two > a:nth-child(2) { border-top: 0; } .rows.two > a:nth-child(even) { border-left: 1px solid var(--line); } .list-row { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.2fr) auto; } .list-head { grid-template-columns: auto minmax(0, 2fr) minmax(0, 1.2fr) auto; } .list-where { display: block; font-size: var(--t-sm); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ═══ ШИРОКИЙ ЕКРАН: третя колонка карток ═══ */ @media (min-width: 96rem) { .grid { columns: 3; } } /* Мови обслуговування в шапці компанії — лише там, де є місце. */ .company-hero .chip-lang { display: none; } /* ── ПЛАШКА «ТЕСТОВА ВЕРСІЯ» ─────────────────────────────────────────────── Плаває над сторінкою внизу праворуч, на телефоні — над доком фільтрів. Ховається на тиждень (кука в ui.js). Чорнильна, як герой: це голос сайту, а не системне попередження браузера. */ .beta { position: fixed; right: calc(1rem + var(--safe-r)); bottom: calc(1rem + var(--safe-b)); z-index: 55; max-width: 22rem; display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-box); background: var(--ink); color: #fff; box-shadow: var(--shadow-pop); transform: translateY(140%); opacity: 0; transition: transform 0.24s ease, opacity 0.24s ease; } .beta.open { transform: none; opacity: 1; } /* Згорнута плашка = кругла кнопка на тому ж місці. Те саме правило, що й для фільтрів: усе, що ховається, мусить мати чим повернутись. */ .beta-fab { position: fixed; right: calc(1rem + var(--safe-r)); bottom: calc(1rem + var(--safe-b)); z-index: 54; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.9rem; padding: 0 1rem; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 650; box-shadow: var(--shadow-pop); cursor: pointer; } .beta-fab[hidden] { display: none; } .beta-fab:hover { background: var(--ink-2); color: #fff; } .beta-fab .i { width: 1.05rem; height: 1.05rem; } @media (max-width: 640px) { /* На телефоні лишається сама іконка: підпис тут забирає півширини екрана, а кнопка висить над вмістом. */ .beta-fab { width: 2.9rem; padding: 0; justify-content: center; } .beta-fab span { display: none; } } .beta strong { font-size: var(--t-sm); } .beta p { margin: 0.3rem 0 0.6rem; font-size: var(--t-xs); line-height: 1.45; color: rgba(255, 255, 255, 0.76); } .beta-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } .beta .btn.ghost { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.26); color: #fff; box-shadow: none; } .beta .btn.ghost:hover { background: rgba(255, 255, 255, 0.2); color: #fff; } .beta-close { background: none; border: 0; color: rgba(255, 255, 255, 0.55); min-height: 1.8rem; padding: 0 0.2rem; box-shadow: none; flex: none; } .beta-close:hover { background: none; color: #fff; } /* На телефоні плашка не має накривати нижній док із фільтрами. */ @media (max-width: 55.99rem) { body.js .beta { bottom: calc(4.5rem + var(--safe-b)); left: calc(1rem + var(--safe-l)); max-width: none; } } /* ── ФОРМИ: помилка поля, підказка, лічильник, код країни ─────────────────── */ .field-err { display: block; font-size: var(--t-xs); color: var(--accent); font-weight: 600; margin-top: 0.15rem; } .field-hint { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 0.15rem; } .field-hint.counter { text-align: right; font-family: var(--font-mono); } /* Перевищення ліміту видно ДО натискання кнопки. */ .field-hint.counter.over { color: var(--accent); font-weight: 700; } .two-up { display: grid; gap: var(--s-3); } @media (min-width: 30rem) { .two-up { grid-template-columns: 1fr 1fr; } } /* Код країни намальований усередині поля й не редагується: приймаємо лише данські номери, і це має бути видно, а не написано дрібним десь збоку. */ .phone-input { position: relative; display: block; } .phone-cc { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--t-md); color: var(--muted); pointer-events: none; } .phone-input input { padding-left: 3.4rem; font-family: var(--font-mono); } .field fieldset { padding: 0.5rem 0.75rem; } .field legend { font-weight: 700; } /* ── ЗНАЧОК ДЛЯ ЧУЖОГО САЙТУ: превʼю і код для копіювання ─────────────────── */ .badge-preview { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding: var(--s-4); border-radius: var(--r-ctrl); /* Шахівниця: видно, що значок прозорий і ляже на будь-яке тло. */ background-image: linear-gradient(45deg, var(--bg-sunk) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-sunk) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-sunk) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-sunk) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; } .snippet { border: 1px solid var(--line); border-radius: var(--r-box); background: var(--card); margin: var(--s-3) 0; overflow: hidden; box-shadow: var(--shadow), var(--edge); } .snippet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); background: var(--bg-sunk); font-size: var(--t-sm); } .snippet pre { margin: 0; padding: var(--s-3); overflow-x: auto; font: 12.5px/1.6 var(--font-mono); color: var(--fg-2); white-space: pre; } .snippet code { color: inherit; } /* ── КРОКИ «як забрати профіль» ───────────────────────────────────────────── */ .steps { list-style: none; margin: var(--s-3) 0; padding: 0; display: grid; gap: var(--s-2); } .steps li { display: flex; gap: var(--s-3); align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-box); padding: var(--s-3) var(--s-4); box-shadow: var(--shadow), var(--edge); } .steps p { margin: 0.15rem 0 0; } .step-no { flex: none; width: 1.9rem; height: 1.9rem; border-radius: var(--r-pill); background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: var(--t-sm); } /* Підсвітка коду: три кольори й жодної бібліотеки. Більше тут нічого й немає — один тег і один рядок Markdown. */ .snippet .tok-tag { color: var(--accent); } .snippet .tok-attr { color: var(--blue); } .snippet .tok-str { color: var(--ok); } /* Порожнє поле реєстру — видиме, але тихе: факт, а не проблема. */ .fact-missing dd { font-style: italic; } /* Знак питання біля даних, які вніс власник. Пояснення потрібне один раз, а місце воно займало б на кожному екрані — тому підказка. */ .hint { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-left: 0.25rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); font-size: 0.7rem; font-weight: 700; cursor: help; vertical-align: 0.05em; } .hint:hover, .hint:focus { border-color: var(--accent); color: var(--accent); outline: none; } /* Лічильник у видимій області мапи. Стоїть поруч із кнопкою «на весь екран», бо відповідає на те саме питання: «що я зараз бачу». */ .map-count { display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0 0.7rem; border-radius: var(--r-ctrl); background: rgba(255, 253, 248, 0.94); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: var(--t-xs); font-family: var(--font-mono); color: var(--fg-2); white-space: nowrap; }