/* ============================================================ legal.css — правові сторінки NovaMax.Tech (політика конфіденційності, угода, оферта, згода на обробку ПД) СКОУПІНГ: усі селектори або мають префікс .legal-, або вкладені в .legal-doc / .legal-page. Файл НЕ чіпає жодного глобального тега — урок з contact-form.css, який протікав на весь сайт. Токени беруться з styles.css; фолбеки вказані на випадок, якщо legal.css підключать окремо (напр. у прев'ю). ============================================================ */ .legal-page { --lg-line: #e6ebf3; --lg-line-soft: #eef1f6; --lg-text: #334155; --lg-mute: #64748b; --lg-surface: #ffffff; --lg-tint: rgba(0, 195, 255, .07); --lg-max: 780px; } /* ============================================================ 0. БАЗОВІ ПРИМІТИВИ — ФОЛБЕК .container, .skip-link, скидання margin у body та line-height заголовків живуть у index_style.css (розділи «ГЛОБАЛЬНІ СТИЛІ» і «МАКЕТ»). Правові сторінки його НЕ підключають — і без цього блоку контент розтікався б на всю ширину вікна, а skip-link висів би видимим текстом угорі сторінки. Усе заскоуплено на .legal-page (клас на ), тому на решту сайту не впливає. ⚠ Якщо винести ці правила з index_style.css у styles.css — цей блок можна повністю видалити, він стане зайвим. ============================================================ */ body .legal-page { margin: 0; background: #fff; line-height: 1.7; width: min(1280px, 92%); } .legal-page img { display: block; max-width: 100%; } /* Значення взяті 1-в-1 з index_style.css, щоб ширина колонки на правових сторінках збігалася з головною. ⚠ Якщо .container уже визначений у styles.css — звір значення або видали цей селектор, щоб не було двох різних контейнерів. */ .legal-page .container { width: min(1280px, 92%); margin-inline: auto; } .legal-page .skip-link { position: absolute; left: -9999px; top: 0; z-index: 5000; padding: 10px 18px; background: var(--dark, #0f172a); color: #fff; border-radius: 0 0 10px 0; font-weight: 600; } .legal-page .skip-link:focus { left: 0; } .legal-page h1, .legal-page h2, .legal-page h3 { line-height: 1.2; } /* ============================================================ 1. ШАПКА ДОКУМЕНТА ============================================================ */ .legal-hero { padding: 38px 0 34px; background: var(--dark, #0f172a); color: #fff; } .legal-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; color: #94a3b8; } .legal-crumbs li { margin: 0; } .legal-crumbs li + li::before { content: "/"; margin-right: 8px; color: #475569; } .legal-crumbs a { color: #cbd5e1; } .legal-crumbs a:hover { color: var(--accent, #00c3ff); } .legal-crumbs [aria-current] { color: #fff; } .legal-hero h1 { margin: 0; max-width: 20ch; font-size: clamp(27px, 3.6vw, 42px); font-weight: 800; line-height: 1.15; } .legal-hero-lead { margin: 14px 0 0; max-width: 68ch; color: #cbd5e1; font-size: 16px; line-height: 1.6; } /* Метадані документа: редакція, дата, чинність — як у справжньому акті */ .legal-stamps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; } .legal-stamps li { margin: 0; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 13px; color: #e2e8f0; white-space: nowrap; } .legal-stamps b { font-weight: 700; color: #fff; } /* ============================================================ 2. МАКЕТ: зміст (sticky) + текст документа ============================================================ */ .legal-body { padding: 40px 0 60px; } .legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 46px; align-items: start; } /* ---- Зміст ---- */ .legal-toc { position: sticky; top: calc(var(--header-height, 72px) + 20px); max-height: calc(100vh - var(--header-height, 72px) - 48px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; } .legal-toc-title { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lg-mute); } .legal-toc ol { counter-reset: legal-toc; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--lg-line); } .legal-toc li { margin: 0; } .legal-toc a { counter-increment: legal-toc; display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.4; color: var(--lg-mute); transition: color .15s, border-color .15s; } .legal-toc a::before { content: counter(legal-toc) "."; display: inline-block; min-width: 1.7em; font-variant-numeric: tabular-nums; font-weight: 700; color: #94a3b8; } .legal-toc a:hover { color: var(--dark, #0f172a); } .legal-toc a[aria-current="true"] { border-left-color: var(--accent, #00c3ff); color: var(--dark, #0f172a); font-weight: 700; } .legal-toc a[aria-current="true"]::before { color: var(--accent-dark, #009ed1); } /* Кнопка друку під змістом */ .legal-print { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 14px; border: 1px solid var(--lg-line); border-radius: 10px; background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--lg-mute); cursor: pointer; transition: border-color .15s, color .15s; } .legal-print:hover { border-color: var(--accent-dark, #009ed1); color: var(--accent-dark, #009ed1); } /* ---- Текст документа ---- */ .legal-doc { counter-reset: legal-h2; max-width: var(--lg-max); color: var(--lg-text); font-size: 15.5px; line-height: 1.75; } .legal-doc > p:first-child { margin-top: 0; } .legal-doc h2 { counter-increment: legal-h2; counter-reset: legal-h3; scroll-margin-top: calc(var(--header-height, 72px) + 24px); margin: 46px 0 14px; padding-top: 22px; border-top: 1px solid var(--lg-line-soft); font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--dark, #0f172a); } .legal-doc h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .legal-doc h2::before { content: counter(legal-h2) "."; margin-right: 10px; font-variant-numeric: tabular-nums; color: var(--accent-dark, #009ed1); } .legal-doc h3 { counter-increment: legal-h3; margin: 26px 0 8px; font-size: 16.5px; font-weight: 700; color: var(--dark, #0f172a); } .legal-doc h3::before { content: counter(legal-h2) "." counter(legal-h3) "."; margin-right: 8px; font-variant-numeric: tabular-nums; color: #94a3b8; } .legal-doc p { margin: 0 0 14px; } .legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 22px; } .legal-doc li { margin-bottom: 7px; } .legal-doc li::marker { color: #94a3b8; } .legal-doc a { color: var(--accent-dark, #009ed1); text-decoration: underline; text-underline-offset: 3px; } .legal-doc a:hover { text-decoration: none; } .legal-doc strong { color: var(--dark, #0f172a); } /* Виноска на норму закону */ .legal-doc .legal-ref { display: block; margin: -6px 0 16px; font-size: 13px; color: var(--lg-mute); } /* Врізка: важливе положення, яке користувач має точно помітити */ .legal-note { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--accent, #00c3ff); border-radius: 0 12px 12px 0; background: var(--lg-tint); font-size: 15px; } .legal-note > :last-child { margin-bottom: 0; } .legal-note b { color: var(--dark, #0f172a); } /* Картка реквізитів */ .legal-req { margin: 22px 0; padding: 22px 24px; border: 1px solid var(--lg-line); border-radius: var(--radius, 18px); background: #f8fafc; } .legal-req dl { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 8px 20px; margin: 0; font-size: 14.5px; } .legal-req dt { color: var(--lg-mute); } .legal-req dd { margin: 0; color: var(--dark, #0f172a); font-weight: 600; overflow-wrap: anywhere; } /* Таблиця (cookie, строки зберігання) */ .legal-table-wrap { margin: 18px 0 22px; overflow-x: auto; border: 1px solid var(--lg-line); border-radius: 14px; } .legal-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; } .legal-table th, .legal-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lg-line-soft); } .legal-table thead th { background: #f8fafc; font-weight: 700; font-size: 13px; color: var(--dark, #0f172a); white-space: nowrap; } .legal-table tbody tr:last-child td { border-bottom: 0; } .legal-table code { padding: 1px 6px; border-radius: 5px; background: #eef2f7; font-size: 12.5px; } /* ============================================================ 3. ПЕРЕХРЕСНІ ПОСИЛАННЯ МІЖ ДОКУМЕНТАМИ ============================================================ */ .legal-related { padding: 46px 0 60px; border-top: 1px solid var(--lg-line-soft); background: #f8fafc; } .legal-related-title { margin: 0 0 20px; font-size: 20px; font-weight: 800; color: var(--dark, #0f172a); } .legal-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .legal-related-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--lg-line); border-radius: 14px; background: #fff; transition: border-color .2s, transform .2s, box-shadow .2s; } .legal-related-card:hover { border-color: var(--accent, #00c3ff); transform: translateY(-3px); box-shadow: var(--shadow-hover, 0 12px 28px rgba(15, 23, 42, .10)); } .legal-related-card[aria-current="page"] { border-color: var(--accent, #00c3ff); background: var(--lg-tint); pointer-events: none; } .legal-related-card b { font-size: 15px; font-weight: 700; color: var(--dark, #0f172a); line-height: 1.3; } .legal-related-card span { font-size: 13px; color: var(--lg-mute); line-height: 1.5; } /* Контактна смуга під документом */ .legal-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding: 20px 24px; border: 1px dashed var(--lg-line); border-radius: 14px; background: #fff; font-size: 14.5px; color: var(--lg-text); } .legal-contact a { font-weight: 700; color: var(--accent-dark, #009ed1); } /* ============================================================ 4. АДАПТИВ ============================================================ */ @media (max-width: 1000px) { .legal-layout { grid-template-columns: 1fr; gap: 26px; } /* Зміст перетворюється на згортайку над текстом */ .legal-toc { position: static; max-height: none; overflow: visible; padding: 0; border: 1px solid var(--lg-line); border-radius: 14px; background: #fff; } .legal-toc-title { display: none; } .legal-toc summary { padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--dark, #0f172a); cursor: pointer; list-style: none; } .legal-toc summary::-webkit-details-marker { display: none; } .legal-toc summary::after { content: "+"; float: right; font-size: 20px; font-weight: 400; line-height: 1; color: var(--accent-dark, #009ed1); } .legal-toc[open] summary::after { content: "–"; } .legal-toc ol { margin: 0 18px 14px; border-left-width: 2px; } .legal-print { margin: 0 18px 16px; } .legal-related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .legal-hero { padding: 26px 0 24px; } .legal-body { padding: 28px 0 44px; } .legal-doc { font-size: 15px; } .legal-doc h2 { margin-top: 34px; font-size: 19px; } .legal-req dl { grid-template-columns: 1fr; gap: 2px 0; } .legal-req dt { margin-top: 10px; } .legal-related-grid { grid-template-columns: 1fr; } .legal-contact { flex-direction: column; align-items: flex-start; } } /* Десктоп:

завжди розгорнутий, бо це sticky-колонка */ @media (min-width: 1001px) { .legal-toc summary { display: none; } } @media (prefers-reduced-motion: reduce) { .legal-related-card, .legal-toc a, .legal-print { transition: none; } .legal-related-card:hover { transform: none; } } /* ============================================================ 5. ДРУК — правові документи часто друкують і підшивають ============================================================ */ @media print { .legal-hero { padding: 0 0 16px; background: none; color: #000; border-bottom: 2px solid #000; } .legal-hero h1 { font-size: 22pt; } .legal-hero-lead { color: #000; } .legal-crumbs, .legal-toc, .legal-print, .legal-related, .legal-contact, .legal-page .sticky-cta { display: none !important; } .legal-layout { display: block; } .legal-doc { max-width: none; font-size: 10.5pt; line-height: 1.5; color: #000; } .legal-doc h2 { page-break-after: avoid; font-size: 13pt; } .legal-doc h3 { page-break-after: avoid; } .legal-doc a { color: #000; text-decoration: none; } .legal-note, .legal-req { border: 1px solid #000; background: none; } .legal-stamps li { border: 1px solid #000; background: none; color: #000; } .legal-table { page-break-inside: avoid; } }