:root { /* Без цього Chrome лишає смугу прокрутки й дефолтний фон полів світлими на темній сторінці — сайт виглядає недоробленим саме в модератора, який відкриває оферту. */ color-scheme: dark; --bg: #0D0F14; --surface: #161A23; --surface-2: #1E2430; --border: #242A36; --divider: #1C212B; --you: #6C7BFF; --them: #35D6A0; --cue: #FFC857; --danger: #F87171; --fg: #ECEEF5; --fg-2: #A9AEC0; --fg-3: #7A8096; --r-card: 12px; --r-btn: 9px; --font-ui: "Onest", system-ui, "Segoe UI", sans-serif; --font-display: "Unbounded", var(--font-ui); --font-mono: "JetBrains Mono", ui-monospace, monospace; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.55 var(--font-ui); } a { color: var(--fg); } /* Єдиний фокус-стиль на весь сайт: дефолтний контур браузера на темному фоні майже не видно, а без нього навігація з клавіатури просто губиться. */ :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; } h1 { font: 700 40px/1.15 var(--font-ui); letter-spacing: -0.02em; margin: 0 0 16px; } h2 { font: 700 28px/1.2 var(--font-ui); letter-spacing: -0.02em; margin: 48px 0 16px; } h3 { font: 700 20px/1.3 var(--font-ui); margin: 28px 0 10px; } p { color: var(--fg-2); margin: 0 0 14px; } .topbar { display: flex; align-items: center; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--divider); } .brand { font: 700 19px var(--font-display); letter-spacing: -0.03em; text-decoration: none; } .topbar nav { display: flex; gap: 18px; margin-left: auto; } /* inline-block + падінг: без них висота тап-цілі ~20px, менша за мінімальні 24. */ .topbar nav a { color: var(--fg-3); text-decoration: none; font-size: 14px; display: inline-block; padding: 6px 0; } .topbar nav a:hover { color: var(--fg); } .topbar .lang { border: 1px solid var(--border); border-radius: var(--r-btn); padding: 4px 10px; } main { max-width: 1040px; margin: 0 auto; padding: 56px 24px 72px; } /* Юридичні сторінки — вузька колонка: суцільний текст на 1040px не читається. */ main.narrow { max-width: 680px; } .hero p.lead { font-size: 19px; color: var(--fg-2); max-width: 640px; } /* Текст кнопки — колір фону сторінки, а не білий: білий на --you дає 3.55:1, нижче порогу 4.5:1 для 15px/600. Темний текст на тому самому синьому — 5.36:1. */ .btn { display: inline-block; background: var(--you); color: var(--bg); text-decoration: none; border-radius: var(--r-btn); padding: 12px 20px; font-weight: 600; } /* Рамка --border проти фону — 1.32:1, тобто ghost-кнопка читається як звичайний абзац. */ .btn.ghost { background: transparent; border: 1px solid var(--fg-3); color: var(--fg); } .btn:hover { filter: brightness(1.08); } /* :not(.btn) обов'язковий: інакше це правило перебиває колір тексту кнопки (специфічність вища за .btn) і на ховері напис зливається з синім фоном кнопки. */ main a:not(.btn):hover { color: var(--you); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px; } .price { font: 700 32px var(--font-ui); } .price span { font-size: 14px; color: var(--fg-3); font-weight: 400; } .muted { color: var(--fg-3); } /* Демо-транскрипт: єдине місце, де з'являється золото — це голос Sayply, не елемент керування. */ .talk { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px; } .line { display: grid; grid-template-columns: 54px 1fr; gap: 12px; margin-bottom: 12px; } .line time { font: 400 13px var(--font-mono); color: var(--fg-3); } .line.you b { color: var(--you); } .line.them b { color: var(--them); } .cue { border-left: 2px solid rgba(255, 200, 87, .42); background: rgba(255, 200, 87, .13); border-radius: 0 var(--r-btn) var(--r-btn) 0; padding: 10px 14px; color: var(--cue); } /* 14px/--fg-2, а не 13px/--fg-3: у підвалі лежать ФОП, РНОКПП і адреса — те, що модерація WayForPay шукає першим, і найгірше місце для ледь помітного тексту. */ footer { border-top: 1px solid var(--divider); padding: 28px 24px 48px; color: var(--fg-2); font-size: 14px; } footer .legal div { margin-bottom: 4px; } footer a { color: var(--fg-2); } .legal-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0; } .legal-links a { display: inline-block; padding: 6px 0; } /* Моноширинний тут тягнув би JetBrains Mono у підвал усіх 14 сторінок заради одного рядка — розрядки вистачає, щоб «VISA · Mastercard» читалось як позначки платіжок. */ /* Марки платіжних систем — монохромні, у кольорі приглушеного тексту: чотири різнобарвні логотипи в підвалі перетягували б увагу на себе, а їхня роль тут службова. */ .cards { display: flex; align-items: center; gap: 18px; } .cards svg { height: 20px; width: auto; fill: var(--fg-3); flex: none; } /* І ol (нумеровані пункти оферти), і ul (перелік даних у політиці): клас описує роль «пункти юридичного тексту», а не тип списку — інакше .terms на