/* Zevly — оформление правовых страниц. Палитра и скругления взяты из приложения (Theme.swift), чтобы страница, открытая из пейвола, читалась его продолжением, а не чужим сайтом. */ :root { --orange: #FF601C; --orange-deep: #C43C0A; --orange-light: #FF9E58; --green: #35B22A; --bg: #FAF1EA; --card: #FFFFFF; --peach: #FFE5D8; --field: #FDF4EF; --text: #221E1A; --text-2: #7A6E66; --text-3: #AFA298; --sep: #EBDCCD; --shadow: 0 10px 30px rgba(184, 120, 60, .10); --radius: 22px; color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Nunito, system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } /* Один документ — два языка. Показываем тот, что выбран на . */ html[data-lang="ru"] article[lang="en"], html[data-lang="en"] article[lang="ru"] { display: none; } /* ---------- Шапка ---------- */ .hero { background: linear-gradient(160deg, #FF9E46 0%, #F57A1C 52%, #D2500A 100%); color: #fff; padding: 26px 20px 38px; border-radius: 0 0 28px 28px; } .hero-inner { max-width: 760px; margin: 0 auto; } .hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #fff; text-decoration: none; } .brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255,255,255,.22); border-radius: 11px; font-size: 19px; } /* Переключатель языка — «капсула», как сегменты в приложении. */ .lang { display: inline-flex; padding: 3px; background: rgba(255,255,255,.22); border-radius: 999px; } .lang button { appearance: none; border: 0; background: transparent; color: rgba(255,255,255,.9); font: inherit; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .18s ease, color .18s ease; } .lang button[aria-pressed="true"] { background: #fff; color: var(--orange-deep); } .hero h1 { margin: 0 0 8px; font-size: clamp(30px, 7vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; } .hero p { margin: 0; font-size: 15px; color: rgba(255,255,255,.88); } .updated { display: inline-block; margin-top: 16px; padding: 6px 13px; background: rgba(255,255,255,.2); border-radius: 999px; font-size: 12.5px; font-weight: 600; } /* ---------- Содержимое ---------- */ main { max-width: 760px; margin: 0 auto; padding: 22px 20px 60px; } .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 24px 26px; margin-bottom: 16px; } .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } /* Блок «коротко о главном» — персиковый, как выбранная карточка в приложении. */ .tldr { background: var(--peach); box-shadow: none; } .tldr h2 { margin-bottom: 14px; } .checks { list-style: none; margin: 0; padding: 0; } .checks li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 15.5px; } .checks li:last-child { margin-bottom: 0; } .checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; } h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; display: flex; align-items: center; gap: 11px; } /* Номер раздела в круге — тот же приём, что у иконок в карточках приложения. */ .num { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 96, 28, .14); color: var(--orange); font-size: 15px; font-weight: 800; } h3 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; } p { margin: 0 0 12px; } a { color: var(--orange); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } ul, ol { margin: 0 0 12px; padding-left: 22px; } li { margin-bottom: 7px; } li:last-child { margin-bottom: 0; } strong { font-weight: 700; } .muted { color: var(--text-2); font-size: 14.5px; } /* Выноска «важно» */ .note { background: var(--field); border-left: 4px solid var(--orange); border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; font-size: 15px; } .note strong { color: var(--orange-deep); } /* Таблица «что уходит наружу» */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; } table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; } th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--sep); vertical-align: top; } th { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); } tr:last-child td { border-bottom: 0; } /* ---------- Подвал ---------- */ footer { max-width: 760px; margin: 0 auto; padding: 0 20px 48px; text-align: center; color: var(--text-3); font-size: 14px; } .foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 14px; } @media (max-width: 520px) { .card { padding: 20px 18px 22px; } h2 { font-size: 19px; } .hero { padding: 20px 18px 32px; } }