/* Стили Bro Drive. Основа — Bro Note, но акцент жёлтый (#FFC21A): Bro-регулировщик, дорожная разметка, знаки. Тёмная база оставлена — приложением пользуются в том числе вечером, светлый фон бьёт по глазам. */ :root { --bg-0: #0A0A14; --bg-1: #15151F; --text-1: #FFFFFF; --text-2: #C7C7DB; --text-3: #7E7E9A; --line-1: rgba(255,255,255,0.08); --acc: #FFC21A; --acc-soft: rgba(255,194,26,0.12); --acc-line: rgba(255,194,26,0.28); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg-0); color: var(--text-1); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.65; min-height: 100vh; -webkit-font-smoothing: antialiased; } body { background: radial-gradient(900px 600px at 10% -5%, rgba(255, 194, 26, 0.14), transparent 60%), var(--bg-0); background-attachment: fixed; } a { color: var(--acc); text-decoration: none; } a:hover { color: var(--text-1); } .wrap { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; } /* Шапка: слева — возврат на главную, справа — языки */ .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; } .crumbs { font-size: 13px; color: var(--text-3); } .crumbs a { color: var(--text-3); } .crumbs a:hover { color: var(--text-1); } .langs { display: flex; gap: 6px; } .langs button { font: inherit; font-size: 13px; font-weight: 600; color: var(--text-3); background: transparent; border: 1px solid var(--line-1); border-radius: 999px; padding: 5px 12px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; transition: color .15s, border-color .15s, background .15s; } .langs button:hover { color: var(--text-1); border-color: var(--acc-line); } .langs button[aria-current="true"] { color: #0A0A14; background: var(--acc); border-color: var(--acc); } h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 12px; } .updated { font-size: 13px; color: var(--text-3); margin-bottom: 32px; font-feature-settings: "tnum" on; } h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin: 36px 0 12px; } h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; } p { color: var(--text-2); margin-bottom: 14px; } ul, ol { color: var(--text-2); margin: 0 0 14px 24px; } li { margin-bottom: 6px; } strong, b { color: var(--text-1); font-weight: 700; } .callout { background: var(--acc-soft); border: 1px solid var(--acc-line); border-radius: 14px; padding: 18px 22px; margin: 20px 0 28px; } .callout-title { font-weight: 800; font-size: 17px; margin-bottom: 10px; } .card { background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 14px; padding: 18px 22px; margin: 24px 0; } .faq { margin-top: 8px; } .faq h3 { margin-top: 20px; } footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-1); color: var(--text-3); font-size: 13px; text-align: center; } footer a { color: var(--text-3); } footer a:hover { color: var(--text-1); } /* Три языковые версии лежат в разметке целиком: так их видят и краулеры, и ревьюер Apple с отключённым JS. Показываем выбранную, класс на . */ [data-lang] { display: none; } .lang-uk [data-lang="uk"], .lang-ru [data-lang="ru"], .lang-en [data-lang="en"] { display: block; } /* У кнопок перемикача той самий атрибут, і правило вище ховало б їх усі, крім поточної мови. Повертаємо видимість — специфічність тут вища. */ .langs button[data-lang] { display: inline-block; }